feat: add unicode glitches

src/app/fear/scene-components/finale-text.tsx

@@ -3,6 +3,13 @@ import { fearState } from "../state"
 
 import './finale-text.css';
 
+const BLOCKS = [
+    "▀", "▂", "▃", "▄", "▅", "▆", "▇",
+    "█", "▉", "▊", "▋", "▌", "▍", "▎", "▏",
+    "▐", "░", "▒", "▓", "▔", "▕", "▖", "▗",
+    "▘", "▙", "▚", "▛", "▜", "▝", "▞", "▟"
+];
+
 export default function FinaleText() {
     const [wasCaught, setWasCaught] = useState(fearState.wasCaught);
     const [elements, setElements] = useState<JSX.Element[]>([]);
@@ -20,13 +27,20 @@ export default function FinaleText() {
             return;
 
         const interval = setInterval(() => {
-            setElements((prev) => [
+            if (Math.random() > 0.9) return;
-                ...prev,
+
-                <span className="finale-text" key={prev.length}>
+            const baseText = "the deal has been sealed";
-                    the deal has been sealed
+            const corrupted = baseText
+                .split("")
+                .map((char) => (Math.random() > 0.98 ? BLOCKS[Math.floor(Math.random() * BLOCKS.length)] : char))
+                .join("");
+
+            setElements((prev) => [...prev.slice(-30),
+            <span className="finale-text" key={crypto.randomUUID()}>
+                {corrupted}
             </span>
             ]);
-        }, 25);
+        }, 10);
 
         return () => clearInterval(interval);
     }, [wasCaught]);