feat: final graph

frontend/package-lock.json

@@ -16,6 +16,8 @@
         "@codemirror/search": "^6.6.0",
         "@codemirror/state": "^6.6.0",
         "@codemirror/view": "^6.40.0",
+        "@cosmograph/cosmos": "^1.6.1",
+        "@cosmos.gl/graph": "^2.6.4",
         "@dagrejs/dagre": "^3.0.0",
         "@fontsource-variable/geist": "^5.2.8",
         "@fontsource-variable/jetbrains-mono": "^5.2.8",
@@ -667,6 +669,55 @@
         "w3c-keyname": "^2.2.4"
       }
     },
+    "node_modules/@cosmograph/cosmos": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@cosmograph/cosmos/-/cosmos-1.6.1.tgz",
+      "integrity": "sha512-A91YabqDxCRqYZXmlOs5ykqkDw1pui0TnuXA65sYFRHwskOJ+BNy7z2IFb/vVIBlsnl3Jdyzm9G93A/xipbHIA==",
+      "deprecated": "This package has been moved to @cosmos.gl/graph. If you're using version >2, please update",
+      "license": "CC-BY-NC-4.0",
+      "dependencies": {
+        "d3-array": "^3.2.0",
+        "d3-color": "^3.1.0",
+        "d3-ease": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-selection": "^3.0.0",
+        "d3-transition": "^3.0.1",
+        "d3-zoom": "^3.0.0",
+        "gl-bench": "^1.0.42",
+        "gl-matrix": "^3.4.3",
+        "random": "^4.1.0",
+        "regl": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=12.2.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/@cosmos.gl/graph": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/@cosmos.gl/graph/-/graph-2.6.4.tgz",
+      "integrity": "sha512-i+N9lSpAjGLTUPelo/bKNbQnKPDqt3k2UnRlfIWe2Lrambc4J3QFgOfpR8AalQ/1tgLRoeNtVBZ1GPpsNqae5w==",
+      "license": "MIT",
+      "dependencies": {
+        "d3-array": "^3.2.0",
+        "d3-color": "^3.1.0",
+        "d3-drag": "^3.0.0",
+        "d3-ease": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-selection": "^3.0.0",
+        "d3-transition": "^3.0.1",
+        "d3-zoom": "^3.0.0",
+        "dompurify": "^3.2.6",
+        "gl-bench": "^1.0.42",
+        "gl-matrix": "^3.4.3",
+        "random": "^4.1.0",
+        "regl": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=12.2.0",
+        "npm": ">=7.0.0"
+      }
+    },
     "node_modules/@dagrejs/dagre": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@dagrejs/dagre/-/dagre-3.0.0.tgz",
@@ -3303,6 +3354,18 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-color": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
@@ -3343,6 +3406,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-interpolate": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
@@ -3355,6 +3427,22 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-selection": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
@@ -3364,6 +3452,30 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-timer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
@@ -4411,6 +4523,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gl-bench": {
+      "version": "1.0.42",
+      "resolved": "https://registry.npmjs.org/gl-bench/-/gl-bench-1.0.42.tgz",
+      "integrity": "sha512-zuMsA/NCPmI8dPy6q3zTUH8OUM5cqKg7uVWwqzrtXJPBqoypM0XeFWEc8iFOqbf/1qtXieWOrbmgFEByKTQt4Q==",
+      "license": "MIT"
+    },
+    "node_modules/gl-matrix": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.4.tgz",
+      "integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==",
+      "license": "MIT"
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -4669,6 +4793,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ip-address": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
@@ -6131,6 +6264,18 @@
       ],
       "license": "MIT"
     },
+    "node_modules/random": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/random/-/random-4.1.0.tgz",
+      "integrity": "sha512-6Ajb7XmMSE9EFAMGC3kg9mvE7fGlBip25mYYuSMzw/uUSrmGilvZo2qwX3RnTRjwXkwkS+4swse9otZ92VjAtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "seedrandom": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -6240,6 +6385,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/regl": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/regl/-/regl-2.1.1.tgz",
+      "integrity": "sha512-+IOGrxl3FZ8ZM9ixCWQZzFRiRn7Rzn9bu3iFHwg/yz4tlOUQgbO4PHLgG+1ZT60zcIV8tief6Qrmyl8qcoJP0g==",
+      "license": "MIT"
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -6417,6 +6568,12 @@
       "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
       "license": "MIT"
     },
+    "node_modules/seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==",
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",

frontend/package.json

@@ -18,6 +18,8 @@
     "@codemirror/search": "^6.6.0",
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.40.0",
+    "@cosmograph/cosmos": "^1.6.1",
+    "@cosmos.gl/graph": "^2.6.4",
     "@dagrejs/dagre": "^3.0.0",
     "@fontsource-variable/geist": "^5.2.8",
     "@fontsource-variable/jetbrains-mono": "^5.2.8",

frontend/src/components/editor/EditorPointer.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import pointerSvg from "@/assets/pointer.min.svg";
+import { useLazyEyes } from "@/hooks/useLazyEyes";
 
 /**
  * Floating pointer that tracks the CodeMirror cursor with smooth lerp animation.
@@ -16,13 +17,13 @@ export default function EditorPointer() {
   const [clickKey, setClickKey] = useState(0);
   const clickTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const cmRef = useRef<Element | null>(null);
-  const [eyeOffset, setEyeOffset] = useState({ x: 0, y: 0 });
-  const eyeTargetRef = useRef({ x: 0, y: 0 });
-  const eyeCurrentRef = useRef({ x: 0, y: 0 });
+
+  // Eye anchor tracks the pointer's viewport position
+  const eyeAnchorRef = useRef<{ x: number; y: number } | null>(null);
+  const eyeOffset = useLazyEyes({ anchorRef: eyeAnchorRef });
 
   useEffect(() => {
     const ease = 0.09;
-    const eyeEase = 0.06;
 
     const updateLeft = () => {
       if (cmRef.current) {
@@ -30,21 +31,6 @@ export default function EditorPointer() {
       }
     };
 
-    const onMouseMove = (e: MouseEvent) => {
-      const pointerX = (cmRef.current?.getBoundingClientRect().left ?? 0) - 100;
-      const pointerY = currentRef.current;
-      const dx = e.clientX - pointerX;
-      const dy = e.clientY - pointerY;
-      const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-      const maxShift = 1.5;
-      eyeTargetRef.current = {
-        x: (dx / dist) * maxShift,
-        y: (dy / dist) * maxShift,
-      };
-    };
-
-    window.addEventListener("mousemove", onMouseMove);
-
     const onEditorClick = () => {
       clearTimeout(clickTimerRef.current);
       setClickKey((k) => k + 1);
@@ -82,13 +68,11 @@ export default function EditorPointer() {
           currentRef.current += diff * ease;
         }
         setY(currentRef.current);
+
+        // Update eye anchor to match pointer position
+        const left = cmRef.current?.getBoundingClientRect().left ?? 0;
+        eyeAnchorRef.current = { x: left - 100, y: currentRef.current };
       }
-      // Lerp eyes toward target
-      const ec = eyeCurrentRef.current;
-      const et = eyeTargetRef.current;
-      ec.x += (et.x - ec.x) * eyeEase;
-      ec.y += (et.y - ec.y) * eyeEase;
-      setEyeOffset({ x: ec.x, y: ec.y });
       rafRef.current = requestAnimationFrame(tick);
     };
 
@@ -106,7 +90,6 @@ export default function EditorPointer() {
 
     return () => {
       window.removeEventListener("cm-cursor-move", onCursorMove);
-      window.removeEventListener("mousemove", onMouseMove);
       window.removeEventListener("resize", updateLeft);
       cmRef.current?.removeEventListener("mousedown", onEditorClick);
       cancelAnimationFrame(rafRef.current);

frontend/src/components/shared/AppShell.tsx

@@ -3,7 +3,9 @@ import { useNavigate, useLocation } from "react-router-dom";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Toaster } from "@/components/ui/sonner";
 import frameSvg from "@/assets/frame.themed.svg";
+import browserSvg from "@/assets/browser.min.svg";
 import NavMenu from "./NavMenu";
+import LazyEyes from "./LazyEyes";
 
 const TITLE = `
 
@@ -80,11 +82,47 @@ function RomanClock() {
   );
 }
 
+// ---------------------------------------------------------------------------
+// Per-frame layout configs
+// ---------------------------------------------------------------------------
+
+interface FrameLayout {
+  svg: string;
+  frameHeight: number;
+  containerMaxW: string;
+  containerMinW: string;
+  title: { paddingTop: number; height: number; paddingLeft: number; paddingRight: number; paddingBottom: number };
+  content: { marginLeft: number; marginTop: number; marginRight: number; width: number; height: number; paddingTop: number; paddingBottom: number };
+  nav: { top: number; left: number };
+}
+
+const defaultLayout: FrameLayout = {
+  svg: frameSvg,
+  frameHeight: 1315,
+  containerMaxW: "max-w-5xl",
+  containerMinW: "min-w-5xl",
+  title: { paddingTop: 65, height: 185, paddingLeft: 60, paddingRight: 500, paddingBottom: 25 },
+  content: { marginLeft: 12, marginRight: 68, width: 843, height: 1030, paddingTop: 8, paddingBottom: 20 },
+  nav: { top: 150, left: -210 },
+};
+
+const browseLayout: FrameLayout = {
+  svg: browserSvg,
+  frameHeight: 884,
+  containerMaxW: "max-w-5xl",
+  containerMinW: "min-w-5xl",
+  title: { paddingTop: 65, height: 185, paddingLeft: 60, paddingRight: 500, paddingBottom: 25 },
+  content: { marginLeft: 268, marginTop: 63, width: 476, height: 377, paddingTop: 0, paddingBottom: 0 },
+  nav: { top: 150, left: -210 },
+};
+
 export default function AppShell({ children }: { children: ReactNode }) {
   const navigate = useNavigate();
   const location = useLocation();
   const [theme, setTheme] = useState<Theme>(getStoredTheme);
   const isEditor = location.pathname.startsWith("/editor");
+  const isBrowse = location.pathname === "/browse";
+  const layout = isBrowse ? browseLayout : defaultLayout;
 
   useEffect(() => {
     const root = document.documentElement;
@@ -104,17 +142,17 @@ export default function AppShell({ children }: { children: ReactNode }) {
     <TooltipProvider>
       <div className="flex flex-col h-screen bg-background text-foreground">
         <main className="flex-1 overflow-auto" data-scroll-root>
-          <div className="relative max-w-5xl min-w-5xl mx-auto min-h-full">
+          <div className={`relative ${layout.containerMaxW} ${layout.containerMinW} mx-auto min-h-full`}>
             {/* Frame SVG — background */}
             <div
               aria-hidden
               className="absolute inset-0 w-full min-w-full pointer-events-none select-none"
               style={{
                 zIndex: 0,
-                height: "1315px",
+                height: `${layout.frameHeight}px`,
                 background: "var(--primary)",
-                WebkitMaskImage: `url(${frameSvg})`,
-                maskImage: `url(${frameSvg})`,
+                WebkitMaskImage: `url(${layout.svg})`,
+                maskImage: `url(${layout.svg})`,
                 WebkitMaskSize: "cover",
                 maskSize: "cover",
                 WebkitMaskRepeat: "no-repeat",
@@ -123,15 +161,26 @@ export default function AppShell({ children }: { children: ReactNode }) {
               }}
             />
 
+            {/* Lazy eyes on the browse frame figure */}
+            {isBrowse && (
+              <LazyEyes
+                eyes={[
+                  { top: 81, left: 554, size: 5, irisSize: 2 },
+                  { top: 85, left: 562, size: 5, irisSize: 2 },
+                ]}
+                maxShift={2}
+              />
+            )}
+
             {/* Top hole — ASCII title */}
             <div
               className="relative z-10 flex flex-col cursor-pointer overflow-hidden"
-              style={{ paddingTop: 65, height: 185, paddingLeft: 60, paddingRight: 500, paddingBottom: 25 }}
-              onClick={() => navigate("/")}
+              style={layout.title}
             >
               <pre
-                className="select-none text-primary/70 hover:text-primary transition-colors whitespace-pre origin-center"
+                className="select-none text-primary/70 hover:text-primary transition-colors whitespace-pre origin-center bg-background"
                 style={{ height: 60, fontSize: 6, lineHeight: 1.05, transform: "scale(0.50)", transformOrigin: "left center", alignContent: "center" }}
+                onClick={() => navigate("/")}
               >
                 {TITLE}
               </pre>
@@ -141,7 +190,7 @@ export default function AppShell({ children }: { children: ReactNode }) {
             {/* Bottom hole — main content */}
             <div
               className="relative z-10 overflow-auto"
-              style={{ marginLeft: 12, marginRight: 68, width: 843, height: 1030, paddingTop: 8, paddingBottom: 20 }}
+              style={layout.content}
             >
               {children}
             </div>
@@ -150,7 +199,7 @@ export default function AppShell({ children }: { children: ReactNode }) {
             {!isEditor && (
               <div
                 className="absolute z-20"
-                style={{ top: 150, left: -210 }}
+                style={layout.nav}
               >
                 <NavMenu theme={theme} onToggleTheme={toggleTheme} />
               </div>
@@ -159,7 +208,7 @@ export default function AppShell({ children }: { children: ReactNode }) {
           </div>
         </main>
         <footer className="flex items-center justify-center gap-3 text-[10px] text-muted-foreground py-4 shrink-0 tracking-widest uppercase">
-          <span>Becoming with hubris · MMXXVI</span>
+          <span>Created with hubris · MMXXVI</span>
         </footer>
       </div>
       <Toaster />

frontend/src/components/shared/LazyEyes.tsx

@@ -0,0 +1,79 @@
+import { useRef, useEffect } from "react";
+import { useLazyEyes } from "@/hooks/useLazyEyes";
+
+interface EyeSpec {
+  top: number;
+  left: number;
+  size?: number;
+  irisSize?: number;
+}
+
+interface LazyEyesProps {
+  eyes: EyeSpec[];
+  /** Viewport-relative anchor the eyes "live" at. If omitted, uses the component's own position. */
+  anchor?: { x: number; y: number };
+  maxShift?: number;
+  ease?: number;
+  className?: string;
+}
+
+export default function LazyEyes({ eyes, anchor, maxShift, ease, className }: LazyEyesProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const anchorRef = useRef<{ x: number; y: number } | null>(anchor ?? null);
+
+  // Keep anchorRef in sync with prop or auto-compute from DOM
+  useEffect(() => {
+    if (anchor) {
+      anchorRef.current = anchor;
+      return;
+    }
+    const update = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        anchorRef.current = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+      }
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [anchor]);
+
+  const offset = useLazyEyes({ anchorRef, maxShift, ease });
+
+  return (
+    <div ref={containerRef} className={className} style={{ position: "absolute", pointerEvents: "none" }}>
+      {eyes.map((eye, i) => {
+        const size = eye.size ?? 5;
+        const irisSize = eye.irisSize ?? 2;
+        // Clamp iris within eye circle
+        const maxR = (size - irisSize) / 2;
+        const dist = Math.sqrt(offset.x * offset.x + offset.y * offset.y) || 0;
+        const scale = dist > maxR && dist > 0 ? maxR / dist : 1;
+        const cx = offset.x * scale;
+        const cy = offset.y * scale;
+        return (
+          <div
+            key={i}
+            className="editor-pointer-eye"
+            style={{ top: eye.top, left: eye.left, width: size, height: size }}
+          >
+            <div
+              className="editor-pointer-iris"
+              style={{
+                width: irisSize,
+                height: irisSize,
+                marginTop: -(irisSize / 2) - 0.5,
+                marginLeft: -(irisSize / 2) - 0.5,
+                transform: `translate(${cx}px, ${cy}px)`,
+              }}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}

frontend/src/hooks/useLazyEyes.ts

@@ -0,0 +1,90 @@
+import { useEffect, useRef, useState } from "react";
+
+interface LazyEyesOptions {
+  /** Reference point the eyes "live" at (viewport coords). Eyes look away from this toward the mouse. */
+  anchorRef: React.RefObject<{ x: number; y: number } | null>;
+  /** Max pixel shift for the iris (default 1.5) */
+  maxShift?: number;
+  /** Lerp ease factor 0–1 for slow drift (default 0.04) */
+  ease?: number;
+  /** Saccade threshold — when target jumps more than this, snap fast (default 0.8) */
+  saccadeThreshold?: number;
+  /** Fast ease for saccade snap (default 0.35) */
+  saccadeEase?: number;
+}
+
+/**
+ * Returns a smoothly-interpolated { x, y } offset for positioning irises
+ * that lazily track the mouse cursor relative to an anchor point.
+ *
+ * Movement model:
+ * - Small mouse moves → slow, lazy drift (ease)
+ * - Large jumps → quick saccade snap (saccadeEase), then settle
+ * - Tiny random micro-drift to avoid perfectly still eyes
+ */
+export function useLazyEyes({
+  anchorRef,
+  maxShift = 1.5,
+  ease = 0.04,
+  saccadeThreshold = 0.8,
+  saccadeEase = 0.35,
+}: LazyEyesOptions) {
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const targetRef = useRef({ x: 0, y: 0 });
+  const currentRef = useRef({ x: 0, y: 0 });
+  const velocityRef = useRef({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const onMouseMove = (e: MouseEvent) => {
+      const anchor = anchorRef.current;
+      if (!anchor) return;
+      const dx = e.clientX - anchor.x;
+      const dy = e.clientY - anchor.y;
+      const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+      targetRef.current = {
+        x: (dx / dist) * maxShift,
+        y: (dy / dist) * maxShift,
+      };
+    };
+
+    window.addEventListener("mousemove", onMouseMove);
+
+    let raf = 0;
+    const tick = () => {
+      const ec = currentRef.current;
+      const et = targetRef.current;
+      const vel = velocityRef.current;
+
+      // Distance to target
+      const dx = et.x - ec.x;
+      const dy = et.y - ec.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+
+      // Saccade: snap fast when target jumps significantly
+      const e_ = dist > saccadeThreshold ? saccadeEase : ease;
+
+      // Apply eased movement
+      vel.x = vel.x * 0.6 + dx * e_ * 0.4;
+      vel.y = vel.y * 0.6 + dy * e_ * 0.4;
+      ec.x += vel.x;
+      ec.y += vel.y;
+
+      // Micro-drift: tiny organic tremor when nearly still
+      if (dist < 0.1) {
+        ec.x += (Math.random() - 0.5) * 0.02;
+        ec.y += (Math.random() - 0.5) * 0.02;
+      }
+
+      setOffset({ x: ec.x, y: ec.y });
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      cancelAnimationFrame(raf);
+    };
+  }, [anchorRef, maxShift, ease, saccadeThreshold, saccadeEase]);
+
+  return offset;
+}

frontend/vite.config.ts

@@ -9,6 +9,7 @@ export default defineConfig({
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),
+      "gl-bench": path.resolve(__dirname, "node_modules/gl-bench/dist/gl-bench.module.js"),
     },
   },
   server: {