ALwrity + Wordpress + Wix + GSC integration

frontend/src/hooks/useScramble.ts

@@ -0,0 +1,75 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+const CHARS = '!<>-_\\/[]{}—=+*^?#@%&|~';
+
+interface ScrambleHookProps {
+  text: string;
+  duration?: number;
+}
+
+export const useScramble = ({ text, duration = 750 }: ScrambleHookProps) => {
+  const [displayText, setDisplayText] = useState(text);
+  
+  const timerRef = useRef<number | null>(null);
+  const startTimeRef = useRef<number | null>(null);
+  const isScramblingRef = useRef(false);
+
+  const getRandomChar = useCallback(() => {
+    return CHARS[Math.floor(Math.random() * CHARS.length)];
+  }, []);
+
+  const update = useCallback(() => {
+    if (startTimeRef.current === null || !isScramblingRef.current) return;
+
+    const elapsed = Date.now() - startTimeRef.current;
+    const progress = elapsed / duration;
+
+    if (progress >= 1) {
+      setDisplayText(text);
+      isScramblingRef.current = false;
+      if (timerRef.current) clearTimeout(timerRef.current);
+      return;
+    }
+    
+    const newText = text.split('').map((char, index) => {
+        if (char === ' ') return ' ';
+        // Logic from original script: scramble all for 70% of duration, then reveal
+        if (progress > 0.7) {
+            const revealPoint = ((progress - 0.7) / 0.3) * text.length;
+            return index < revealPoint ? text[index] : getRandomChar();
+        }
+        return getRandomChar();
+    }).join('');
+
+    setDisplayText(newText);
+    timerRef.current = window.setTimeout(update, 50);
+
+  }, [duration, text, getRandomChar]);
+
+  const start = useCallback(() => {
+    if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+    }
+    isScramblingRef.current = true;
+    startTimeRef.current = Date.now();
+    update();
+  }, [update]);
+
+  const stop = useCallback(() => {
+    isScramblingRef.current = false;
+    startTimeRef.current = null;
+    if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+    }
+    setDisplayText(text);
+  }, [text]);
+  
+  // When the source text changes, stop any animation and reset to the new text.
+  useEffect(() => {
+      stop();
+  }, [text, stop]);
+
+  return { displayText, start, stop };
+};