requestAnimationFrame loop that tracks elapsed time for wobble animation

DEVELOPMENT_PLAN.md

@@ -150,8 +150,8 @@ src/
 
 ### Tasks
 
-- [ ] Create `lib/noise.ts` - export shared simplex instance
+- [x] Create `lib/noise.ts` - export shared simplex instance
-- [ ] Create `lib/shapes/wobble.ts`:
+- [x] Create `lib/shapes/wobble.ts`:
   - `applyWobble(points, time, amount, noiseScale)` - displace points using noise
 - [ ] Create `useWobbleAnimation.ts` - RAF loop, tracks elapsed time
 - [ ] Update `MorphableShape.tsx` to apply wobble each frame

src/hooks/useWobbleAnimation.ts

@@ -0,0 +1,38 @@
+import { useEffect, useRef, useState } from "react";
+
+// requestAnimationFrame loop that tracks elapsed time for wobble animation
+export function useWobbleAnimation(speed: number): number {
+    const [time, setTime] = useState(0);
+    const rafRef = useRef<number>(0);
+    const lastFrameRef = useRef<number>(0);
+
+    useEffect(() => {
+        if (speed === 0) {
+            return;
+        }
+
+        const animate = (timestamp: number) => {
+            if (lastFrameRef.current === 0) {
+                lastFrameRef.current = timestamp;
+            }
+
+            const delta = timestamp - lastFrameRef.current;
+            lastFrameRef.current = timestamp;
+
+            // speed 50 = 1x, speed 100 = 2x, speed 0 = 0x
+            const speedMultiplier = speed / 50;
+            setTime((t) => t + (delta / 1000) * speedMultiplier);
+
+            rafRef.current = requestAnimationFrame(animate);
+        };
+
+        rafRef.current = requestAnimationFrame(animate);
+
+        return () => {
+            cancelAnimationFrame(rafRef.current);
+            lastFrameRef.current = 0;
+        };
+    }, [speed]);
+
+    return time;
+}