gravity

components/gravity-toggle.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { GravityEngine } from "@/lib/gravity-engine";
+import { Magnet } from "lucide-react";
+
+export default function GravityToggle() {
+  const [isActive, setIsActive] = useState(false);
+  const engineRef = useRef<GravityEngine | null>(null);
+
+  useEffect(() => {
+    engineRef.current = new GravityEngine();
+    return () => engineRef.current?.stop();
+  }, []);
+
+  const toggleGravity = () => {
+    if (!engineRef.current) return;
+
+    if (isActive) {
+      engineRef.current.stop();
+    } else {
+      engineRef.current.start();
+    }
+    setIsActive(!isActive);
+  };
+
+  return (
+    <button
+      onClick={toggleGravity}
+      className="fixed bottom-4 right-4 p-3 bg-yellow-400 text-black rounded-full shadow-lg z-50 hover:bg-yellow-500 transition-colors"
+      title="Toggle Gravity"
+    >
+      <Magnet size={24} />
+    </button>
+  );
+}