@nous-research/ui 0.12.0 → 0.13.1

package/dist/hooks/use-render-loop.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Visibility- and intersection-aware render-loop helper for the WebGL
+ * overlays.
+ *
+ * The overlays were previously running fragment shaders at 60fps for the
+ * entire lifetime of the page — including when the tab was hidden, the
+ * canvas had been scrolled out of view, or the user had been idle for
+ * hours. On retina laptops the compositor cost of mix-blend-mode on a
+ * full-viewport canvas plus continuous WebGL rasterisation is enough to
+ * keep the GPU hot indefinitely, which is what manifests as "fans go
+ * crazy after 2 hours of idle".
+ *
+ * `runRenderLoop` wraps a frame callback so that it:
+ *
+ *   1. Pauses entirely when `document.hidden` is true (background tab,
+ *      minimised window, screen locked).
+ *   2. Pauses when the canvas's bounding rect is offscreen (we tell
+ *      `IntersectionObserver` to look at the canvas itself).
+ *   3. Optionally caps the frame rate via a min-interval — the previous
+ *      `gpuTier === 1 ? setTimeout(loop, 100) : raf` trick is preserved
+ *      and extended so even tier-2 GPUs cap at e.g. 30fps for overlays
+ *      that don't need 60.
+ *
+ * The callback receives the *delta* time in seconds since the last call
+ * (so `uTime` advances correctly across pauses without ever skipping
+ * forward by hours).
+ */
+interface RunRenderLoopOptions {
+    /** Element to observe with IntersectionObserver. When fully out of
+     *  view, the loop pauses. Pass the canvas element itself. */
+    el: Element;
+    /** Min ms between frames. 0 = no cap (uses requestAnimationFrame).
+     *  Anything > 0 uses setTimeout-driven scheduling. */
+    minIntervalMs?: number;
+    /** Frame callback. Receives the elapsed seconds since the previous
+     *  *executed* frame (not since the previous scheduled frame), so
+     *  uniforms keyed off this value will not jump after a long pause. */
+    onFrame: (deltaSeconds: number) => void;
+}
+export declare function runRenderLoop({ el, minIntervalMs, onFrame }: RunRenderLoopOptions): () => void;
+export {};
+//# sourceMappingURL=use-render-loop.d.ts.map

package/dist/hooks/use-render-loop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-render-loop.d.ts","sourceRoot":"","sources":["../../src/hooks/use-render-loop.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,UAAU,oBAAoB;IAC5B;iEAC6D;IAC7D,EAAE,EAAE,OAAO,CAAA;IACX;0DACsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;0EAEsE;IACtE,OAAO,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAED,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,aAAiB,EACjB,OAAO,EACR,EAAE,oBAAoB,cAyEtB"}

package/dist/hooks/use-render-loop.js

@@ -0,0 +1,62 @@
+'use client';
+export function runRenderLoop({ el, minIntervalMs = 0, onFrame }) {
+    let running = true;
+    let visible = !document.hidden;
+    let inView = true;
+    let last = performance.now();
+    let raf = 0;
+    let timer;
+    const onVisibility = () => {
+        visible = !document.hidden;
+        // When we come back from a hidden tab, reset the clock so the next
+        // frame's delta is ~one frame, not "hours since I was hidden".
+        if (visible) {
+            last = performance.now();
+            schedule();
+        }
+    };
+    const io = new IntersectionObserver(entries => {
+        const wasInView = inView;
+        inView = entries.some(e => e.isIntersecting);
+        if (!wasInView && inView) {
+            last = performance.now();
+            schedule();
+        }
+    }, { threshold: 0 });
+    io.observe(el);
+    document.addEventListener('visibilitychange', onVisibility);
+    const tick = () => {
+        if (!running)
+            return;
+        if (!visible || !inView) {
+            // Don't reschedule — we'll be re-kicked by visibilitychange or IO.
+            return;
+        }
+        const now = performance.now();
+        const delta = (now - last) / 1000;
+        last = now;
+        onFrame(delta);
+        schedule();
+    };
+    function schedule() {
+        if (!running || !visible || !inView)
+            return;
+        if (minIntervalMs > 0) {
+            timer = setTimeout(tick, minIntervalMs);
+        }
+        else {
+            raf = requestAnimationFrame(tick);
+        }
+    }
+    schedule();
+    return () => {
+        running = false;
+        io.disconnect();
+        document.removeEventListener('visibilitychange', onVisibility);
+        cancelAnimationFrame(raf);
+        if (timer !== undefined) {
+            clearTimeout(timer);
+        }
+    };
+}
+//# sourceMappingURL=use-render-loop.js.map

package/dist/hooks/use-render-loop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-render-loop.js","sourceRoot":"","sources":["../../src/hooks/use-render-loop.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AA2CZ,MAAM,UAAU,aAAa,CAAC,EAC5B,EAAE,EACF,aAAa,GAAG,CAAC,EACjB,OAAO,EACc;IACrB,IAAI,OAAO,GAAG,IAAI,CAAA;IAClB,IAAI,OAAO,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAA;IAC9B,IAAI,MAAM,GAAG,IAAI,CAAA;IACjB,IAAI,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;IAC5B,IAAI,GAAG,GAAG,CAAC,CAAA;IACX,IAAI,KAAgD,CAAA;IAEpD,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAA;QAE1B,mEAAmE;QACnE,+DAA+D;QAC/D,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;YACxB,QAAQ,EAAE,CAAA;QACZ,CAAC;IACH,CAAC,CAAA;IAED,MAAM,EAAE,GAAG,IAAI,oBAAoB,CACjC,OAAO,CAAC,EAAE;QACR,MAAM,SAAS,GAAG,MAAM,CAAA;QACxB,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAA;QAE5C,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE,CAAC;YACzB,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;YACxB,QAAQ,EAAE,CAAA;QACZ,CAAC;IACH,CAAC,EACD,EAAE,SAAS,EAAE,CAAC,EAAE,CACjB,CAAA;IAED,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;IACd,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,YAAY,CAAC,CAAA;IAE3D,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,IAAI,CAAC,OAAO;YAAE,OAAM;QAEpB,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC;YACxB,mEAAmE;YACnE,OAAM;QACR,CAAC;QAED,MAAM,GAAG,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;QAC7B,MAAM,KAAK,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;QACjC,IAAI,GAAG,GAAG,CAAA;QAEV,OAAO,CAAC,KAAK,CAAC,CAAA;QACd,QAAQ,EAAE,CAAA;IACZ,CAAC,CAAA;IAED,SAAS,QAAQ;QACf,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM;YAAE,OAAM;QAE3C,IAAI,aAAa,GAAG,CAAC,EAAE,CAAC;YACtB,KAAK,GAAG,UAAU,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;QACzC,CAAC;aAAM,CAAC;YACN,GAAG,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAA;QACnC,CAAC;IACH,CAAC;IAED,QAAQ,EAAE,CAAA;IAEV,OAAO,GAAG,EAAE;QACV,OAAO,GAAG,KAAK,CAAA;QACf,EAAE,CAAC,UAAU,EAAE,CAAA;QACf,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,YAAY,CAAC,CAAA;QAC9D,oBAAoB,CAAC,GAAG,CAAC,CAAA;QAEzB,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,YAAY,CAAC,KAAK,CAAC,CAAA;QACrB,CAAC;IACH,CAAC,CAAA;AACH,CAAC","sourcesContent":["'use client'\n\n/**\n * Visibility- and intersection-aware render-loop helper for the WebGL\n * overlays.\n *\n * The overlays were previously running fragment shaders at 60fps for the\n * entire lifetime of the page — including when the tab was hidden, the\n * canvas had been scrolled out of view, or the user had been idle for\n * hours. On retina laptops the compositor cost of mix-blend-mode on a\n * full-viewport canvas plus continuous WebGL rasterisation is enough to\n * keep the GPU hot indefinitely, which is what manifests as \"fans go\n * crazy after 2 hours of idle\".\n *\n * `runRenderLoop` wraps a frame callback so that it:\n *\n *   1. Pauses entirely when `document.hidden` is true (background tab,\n *      minimised window, screen locked).\n *   2. Pauses when the canvas's bounding rect is offscreen (we tell\n *      `IntersectionObserver` to look at the canvas itself).\n *   3. Optionally caps the frame rate via a min-interval — the previous\n *      `gpuTier === 1 ? setTimeout(loop, 100) : raf` trick is preserved\n *      and extended so even tier-2 GPUs cap at e.g. 30fps for overlays\n *      that don't need 60.\n *\n * The callback receives the *delta* time in seconds since the last call\n * (so `uTime` advances correctly across pauses without ever skipping\n * forward by hours).\n */\n\ninterface RunRenderLoopOptions {\n  /** Element to observe with IntersectionObserver. When fully out of\n   *  view, the loop pauses. Pass the canvas element itself. */\n  el: Element\n  /** Min ms between frames. 0 = no cap (uses requestAnimationFrame).\n   *  Anything > 0 uses setTimeout-driven scheduling. */\n  minIntervalMs?: number\n  /** Frame callback. Receives the elapsed seconds since the previous\n   *  *executed* frame (not since the previous scheduled frame), so\n   *  uniforms keyed off this value will not jump after a long pause. */\n  onFrame: (deltaSeconds: number) => void\n}\n\nexport function runRenderLoop({\n  el,\n  minIntervalMs = 0,\n  onFrame\n}: RunRenderLoopOptions) {\n  let running = true\n  let visible = !document.hidden\n  let inView = true\n  let last = performance.now()\n  let raf = 0\n  let timer: ReturnType<typeof setTimeout> | undefined\n\n  const onVisibility = () => {\n    visible = !document.hidden\n\n    // When we come back from a hidden tab, reset the clock so the next\n    // frame's delta is ~one frame, not \"hours since I was hidden\".\n    if (visible) {\n      last = performance.now()\n      schedule()\n    }\n  }\n\n  const io = new IntersectionObserver(\n    entries => {\n      const wasInView = inView\n      inView = entries.some(e => e.isIntersecting)\n\n      if (!wasInView && inView) {\n        last = performance.now()\n        schedule()\n      }\n    },\n    { threshold: 0 }\n  )\n\n  io.observe(el)\n  document.addEventListener('visibilitychange', onVisibility)\n\n  const tick = () => {\n    if (!running) return\n\n    if (!visible || !inView) {\n      // Don't reschedule — we'll be re-kicked by visibilitychange or IO.\n      return\n    }\n\n    const now = performance.now()\n    const delta = (now - last) / 1000\n    last = now\n\n    onFrame(delta)\n    schedule()\n  }\n\n  function schedule() {\n    if (!running || !visible || !inView) return\n\n    if (minIntervalMs > 0) {\n      timer = setTimeout(tick, minIntervalMs)\n    } else {\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  schedule()\n\n  return () => {\n    running = false\n    io.disconnect()\n    document.removeEventListener('visibilitychange', onVisibility)\n    cancelAnimationFrame(raf)\n\n    if (timer !== undefined) {\n      clearTimeout(timer)\n    }\n  }\n}\n"]}

package/dist/ui/components/image-distortion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-distortion.d.ts","sourceRoot":"","sources":["../../../src/ui/components/image-distortion.tsx"],"names":[],"mappings":"AAmJA,wBAAgB,eAAe,CAAC,EAC9B,MAAa,EACb,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,GAAG,EACH,KAAK,EACL,IAAI,EACJ,YAAY,EACb,EAAE,oBAAoB,2CAkStB;AAED,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE/D,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAA;CACpD"}
+{"version":3,"file":"image-distortion.d.ts","sourceRoot":"","sources":["../../../src/ui/components/image-distortion.tsx"],"names":[],"mappings":"AAmJA,wBAAgB,eAAe,CAAC,EAC9B,MAAa,EACb,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,GAAG,EACH,KAAK,EACL,IAAI,EACJ,YAAY,EACb,EAAE,oBAAoB,2CAmUtB;AAED,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE/D,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAA;CACpD"}

package/dist/ui/components/image-distortion.js

@@ -254,6 +254,8 @@ export function ImageDistortion({ active = true, autoPlay, className, fallbackCl
             : [1, 1, 1];
         const t0 = performance.now();
         let raf = 0;
+        let visible = !document.hidden;
+        let inView = true;
         const loop = () => {
             raf = requestAnimationFrame(loop);
             const s = state.current;
@@ -306,9 +308,32 @@ export function ImageDistortion({ active = true, autoPlay, className, fallbackCl
             gl.bindTexture(gl.TEXTURE_2D, texture);
             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
         };
-        raf = requestAnimationFrame(loop);
+        const start = () => {
+            if (visible && inView && !raf) {
+                raf = requestAnimationFrame(loop);
+            }
+        };
+        const stop = () => {
+            if (raf) {
+                cancelAnimationFrame(raf);
+                raf = 0;
+            }
+        };
+        const onVisibility = () => {
+            visible = !document.hidden;
+            visible ? start() : stop();
+        };
+        const io = new IntersectionObserver(entries => {
+            inView = entries.some(e => e.isIntersecting);
+            inView ? start() : stop();
+        }, { threshold: 0 });
+        io.observe(c);
+        document.addEventListener('visibilitychange', onVisibility);
+        start();
         return () => {
-            cancelAnimationFrame(raf);
+            stop();
+            io.disconnect();
+            document.removeEventListener('visibilitychange', onVisibility);
             ro.disconnect();
             c.removeEventListener('pointermove', onMove);
             c.removeEventListener('pointerenter', onEnter);

package/dist/ui/components/image-distortion.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-distortion.js","sourceRoot":"","sources":["../../../src/ui/components/image-distortion.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\n\nimport { useGpuTier } from '../../hooks/use-gpu-tier'\nimport { cn, hexToRgb } from '../../utils'\n\nconst NUM_BANDS = 12\n\nconst VERT = `attribute vec2 a;varying vec2 vUv;void main(){vUv=vec2(a.x*.5+.5,.5-a.y*.5);gl_Position=vec4(a,0,1);}`\n\nconst FRAG = `precision highp float;\nuniform float t;\nuniform vec2 r,imgSize,vel;\nuniform sampler2D tex;\nuniform float bands[${NUM_BANDS}];\nuniform vec3 tint;\nuniform float tintStrength;\nvarying vec2 vUv;\n\nfloat h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}\n\n// cover-style UV: crops the image to fill the canvas, centered\nvec2 coverUV(vec2 uv){\n  float canvasAspect=r.x/r.y;\n  float imgAspect=imgSize.x/imgSize.y;\n  vec2 scale=canvasAspect>imgAspect\n    ?vec2(1.0,imgAspect/canvasAspect)\n    :vec2(canvasAspect/imgAspect,1.0);\n  return(uv-0.5)*scale+0.5;\n}\n\nvoid main(){\n  vec2 uv=coverUV(vUv);\n  float scanY=floor(vUv.y*r.y);\n\n  float bandF=vUv.y*${NUM_BANDS}.0;\n  int bandIdx=int(floor(bandF));\n  float bandFrac=fract(bandF);\n\n  float strength=0.0;\n  for(int i=0;i<${NUM_BANDS};i++){\n    if(i==bandIdx) strength=bands[i];\n  }\n\n  float neighborStr=0.0;\n  int neighborIdx=bandFrac>.5?bandIdx+1:bandIdx-1;\n  for(int i=0;i<${NUM_BANDS};i++){\n    if(i==neighborIdx) neighborStr=bands[i];\n  }\n  float edgeBlend=abs(bandFrac-.5)*2.0;\n  edgeBlend*=edgeBlend;\n  strength=mix(strength,neighborStr,edgeBlend*.3);\n\n  float speed=length(vel);\n  float dirBlend=smoothstep(0.0,0.02,speed);\n  vec2 dir=speed>.0001?vel/speed:vec2(0);\n  dir*=dirBlend;\n\n  float rowSeed=h(vec2(scanY,floor(t*3.)+float(bandIdx)*7.));\n  float rowVar=mix(.4,1.0,rowSeed);\n\n  float ySmooth=vUv.y*6.0+t*0.7;\n  float yNoise=mix(h(vec2(floor(ySmooth),13.)),h(vec2(floor(ySmooth)+1.0,13.)),smoothstep(0.0,1.0,fract(ySmooth)));\n  float colVar=mix(.4,1.0,yNoise);\n\n  float tearShiftX=dir.x*strength*rowVar*0.15;\n  float tearShiftY=dir.y*strength*colVar*0.10;\n\n  float bandSeed=h(vec2(float(bandIdx),42.));\n  tearShiftX+=strength*(.5-bandSeed)*0.05;\n\n  float yJitter=mix(h(vec2(floor(ySmooth),73.)),h(vec2(floor(ySmooth)+1.0,73.)),smoothstep(0.0,1.0,fract(ySmooth)));\n  tearShiftY+=strength*(.5-yJitter)*0.035;\n\n  uv.x+=tearShiftX;\n  uv.y+=tearShiftY;\n\n  float sortGate=step(.5,strength)*step(.4,rowSeed);\n  uv.x+=dir.x*sortGate*strength*0.03;\n  uv.y+=dir.y*sortGate*strength*0.02;\n\n  float caX=abs(tearShiftX)*2.5+sortGate*strength*0.01;\n  float caY=abs(tearShiftY)*2.5+sortGate*strength*0.01;\n  float cr=texture2D(tex,vec2(uv.x+caX,uv.y+caY)).r;\n  float cg=texture2D(tex,uv).g;\n  float cb=texture2D(tex,vec2(uv.x-caX,uv.y-caY)).b;\n\n  vec3 col=vec3(cr,cg,cb);\n\n  col*=.97+.03*sin(vUv.y*r.y*3.14159);\n\n  float bandEdge=smoothstep(.02,.0,min(bandFrac,1.0-bandFrac));\n  col+=vec3(bandEdge*strength*.1);\n\n  col=mix(col,col*tint,tintStrength);\n\n  gl_FragColor=vec4(col,1.0);\n}`\n\n/**\n * Choreographed motion patterns used when `autoPlay` is set. Each pattern\n * returns a synthetic pointer position in [0,1] and a hover intensity in\n * [0,1] for the current time (seconds). They drive the shader without\n * requiring a real pointer, which is what lets us record the distortion\n * as a GIF / screenshot / poster.\n */\nconst AUTOPLAY_PATTERNS: Record<\n  AutoPlayPattern,\n  (t: number) => { hover: number; mx: number; my: number }\n> = {\n  aggressive: t => {\n    const cycle = 1.4\n    const phase = (t % cycle) / cycle\n    const stab = Math.exp(-((phase - 0.15) ** 2) * 260)\n    const angle = Math.floor(t / cycle) * 1.37\n    const mx = 0.5 + Math.cos(angle) * 0.42 * (stab + 0.15)\n    const my = 0.5 + Math.sin(angle) * 0.38 * (stab + 0.15)\n\n    return { hover: 0.55 + stab * 0.45, mx, my }\n  },\n  gentle: t => ({\n    hover: 0.45 + Math.sin(t * 0.9) * 0.1,\n    mx: 0.5 + Math.sin(t * 0.5) * 0.28,\n    my: 0.5 + Math.cos(t * 0.37) * 0.22\n  }),\n  slash: t => {\n    // Long breath -> sword slash -> recoil twitch, repeating.\n    const cycle = 3.6\n    const phase = (t % cycle) / cycle\n    const slash = Math.exp(-((phase - 0.28) ** 2) * 180)\n    const micro = Math.exp(-((phase - 0.7) ** 2) * 340)\n\n    const driftX = 0.5 + Math.sin(t * 0.7) * 0.16\n    const driftY = 0.55 + Math.cos(t * 0.5) * 0.14\n\n    // Slash trajectory: bottom-left up into the giant's chest (top-right).\n    const slashX = -0.15 + phase * 1.55\n    const slashY = 0.95 - phase * 1.35\n\n    const mx = driftX * (1 - slash) + slashX * slash\n    const my = driftY * (1 - slash) + slashY * slash\n\n    return { hover: 0.5 + slash * 0.5 + micro * 0.35, mx, my }\n  }\n}\n\nexport function ImageDistortion({\n  active = true,\n  autoPlay,\n  className,\n  fallbackClassName,\n  src,\n  style,\n  tint,\n  tintStrength\n}: ImageDistortionProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const tier = useGpuTier()\n  const [loaded, setLoaded] = useState(false)\n\n  const activeRef = useRef(active)\n  activeRef.current = active\n  const tintStrengthRef = useRef(tintStrength)\n  tintStrengthRef.current = tintStrength\n  const autoPlayRef = useRef(autoPlay)\n  autoPlayRef.current = autoPlay\n\n  const state = useRef({\n    bandTargets: new Float32Array(NUM_BANDS),\n    bands: new Float32Array(NUM_BANDS),\n    hoverTarget: 0,\n    imgH: 1,\n    imgW: 1,\n    mx: 0.5,\n    my: 0.5,\n    prevMx: 0.5,\n    prevMy: 0.5,\n    vx: 0,\n    vy: 0\n  })\n\n  useEffect(() => {\n    if (tier === 0) {\n      return\n    }\n\n    const c = canvasRef.current\n\n    if (!c) {\n      return\n    }\n\n    const gl = c.getContext('webgl')\n\n    if (!gl) {\n      return\n    }\n\n    const compile = (type: number, source: string) => {\n      const s = gl.createShader(type)!\n      gl.shaderSource(s, source)\n      gl.compileShader(s)\n\n      return s\n    }\n\n    const prog = gl.createProgram()!\n    gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT))\n    gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG))\n    gl.linkProgram(prog)\n    gl.useProgram(prog)\n\n    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())\n    gl.bufferData(\n      gl.ARRAY_BUFFER,\n      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n      gl.STATIC_DRAW\n    )\n\n    const a = gl.getAttribLocation(prog, 'a')\n    gl.enableVertexAttribArray(a)\n    gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0)\n\n    const uT = gl.getUniformLocation(prog, 't')\n    const uR = gl.getUniformLocation(prog, 'r')\n    const uImgSize = gl.getUniformLocation(prog, 'imgSize')\n    const uVel = gl.getUniformLocation(prog, 'vel')\n    const uTex = gl.getUniformLocation(prog, 'tex')\n    const uTint = gl.getUniformLocation(prog, 'tint')\n    const uTintStrength = gl.getUniformLocation(prog, 'tintStrength')\n    const uBands: (null | WebGLUniformLocation)[] = []\n\n    for (let i = 0; i < NUM_BANDS; i++) {\n      uBands.push(gl.getUniformLocation(prog, `bands[${i}]`))\n    }\n\n    const texture = gl.createTexture()!\n    gl.bindTexture(gl.TEXTURE_2D, texture)\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)\n    gl.texImage2D(\n      gl.TEXTURE_2D,\n      0,\n      gl.RGBA,\n      1,\n      1,\n      0,\n      gl.RGBA,\n      gl.UNSIGNED_BYTE,\n      new Uint8Array([0, 0, 0, 255])\n    )\n\n    const img = new Image()\n    img.crossOrigin = 'anonymous'\n\n    img.onload = () => {\n      state.current.imgW = img.naturalWidth\n      state.current.imgH = img.naturalHeight\n      gl.bindTexture(gl.TEXTURE_2D, texture)\n      gl.texImage2D(\n        gl.TEXTURE_2D,\n        0,\n        gl.RGBA,\n        gl.RGBA,\n        gl.UNSIGNED_BYTE,\n        img\n      )\n      setLoaded(true)\n    }\n\n    img.src = src\n\n    gl.activeTexture(gl.TEXTURE0)\n    gl.bindTexture(gl.TEXTURE_2D, texture)\n    gl.uniform1i(uTex, 0)\n\n    const resize = () => {\n      const rect = c.getBoundingClientRect()\n      const dpr = Math.min(devicePixelRatio, 2)\n      c.width = rect.width * dpr\n      c.height = rect.height * dpr\n      gl.viewport(0, 0, c.width, c.height)\n    }\n\n    resize()\n    const ro = new ResizeObserver(resize)\n    ro.observe(c)\n\n    const onMove = (e: PointerEvent) => {\n      const rect = c.getBoundingClientRect()\n      state.current.mx = (e.clientX - rect.left) / rect.width\n      state.current.my = (e.clientY - rect.top) / rect.height\n    }\n\n    const onEnter = () => {\n      state.current.hoverTarget = 1\n    }\n\n    const onLeave = () => {\n      state.current.hoverTarget = 0\n    }\n\n    // When autoPlay drives the distortion we want the poster to look\n    // alive regardless of whether a pointer is near the canvas, so we\n    // skip the real pointer listeners entirely.\n    if (!autoPlayRef.current) {\n      c.addEventListener('pointermove', onMove)\n      c.addEventListener('pointerenter', onEnter)\n      c.addEventListener('pointerleave', onLeave)\n    }\n\n    const bandEaseRates = new Float32Array(NUM_BANDS)\n\n    for (let i = 0; i < NUM_BANDS; i++) {\n      bandEaseRates[i] = 0.02 + Math.random() * 0.06\n    }\n\n    const tintVec: readonly [number, number, number] = tint\n      ? (() => {\n          const [tr, tg, tb] = hexToRgb(tint)\n\n          return [tr / 255, tg / 255, tb / 255] as const\n        })()\n      : ([1, 1, 1] as const)\n\n    const t0 = performance.now()\n    let raf = 0\n\n    const loop = () => {\n      raf = requestAnimationFrame(loop)\n      const s = state.current\n\n      const pattern = autoPlayRef.current\n        ? AUTOPLAY_PATTERNS[autoPlayRef.current]\n        : null\n\n      if (pattern) {\n        const driven = pattern((performance.now() - t0) / 1e3)\n        s.mx = driven.mx\n        s.my = driven.my\n        s.hoverTarget = driven.hover\n      }\n\n      const dvx = s.mx - s.prevMx\n      const dvy = s.my - s.prevMy\n      s.vx += (dvx * 8 - s.vx) * 0.1\n      s.vy += (dvy * 8 - s.vy) * 0.1\n      s.prevMx = s.mx\n      s.prevMy = s.my\n\n      const speed = Math.sqrt(s.vx * s.vx + s.vy * s.vy)\n\n      for (let i = 0; i < NUM_BANDS; i++) {\n        const bandCenter = (i + 0.5) / NUM_BANDS\n        const dist = Math.abs(s.my - bandCenter)\n        const proximity = Math.max(0, 1 - dist / 0.3)\n        const activation =\n          s.hoverTarget * proximity * (0.4 + Math.min(speed, 1) * 0.6)\n        s.bandTargets[i] = activation\n      }\n\n      for (let i = 0; i < NUM_BANDS; i++) {\n        const rate = bandEaseRates[i]!\n        const current = s.bands[i] ?? 0\n        const target = s.bandTargets[i] ?? 0\n        s.bands[i] = current + (target - current) * rate\n\n        if (s.bands[i]! < 0.001) {\n          s.bands[i] = 0\n        }\n      }\n\n      gl.uniform1f(uT, (performance.now() - t0) / 1e3)\n      gl.uniform2f(uR, c.width, c.height)\n      gl.uniform2f(uImgSize, s.imgW, s.imgH)\n      gl.uniform2f(uVel, s.vx, s.vy)\n      gl.uniform3f(uTint, tintVec[0], tintVec[1], tintVec[2])\n\n      const ts = tintStrengthRef.current\n      const defaultStrength = tint ? 0.35 : 0\n      const defaultInactive = tint ? 0.15 : 0\n      gl.uniform1f(\n        uTintStrength,\n        activeRef.current\n          ? (ts?.active ?? defaultStrength)\n          : (ts?.inactive ?? defaultInactive)\n      )\n\n      for (let i = 0; i < NUM_BANDS; i++) {\n        gl.uniform1f(uBands[i]!, s.bands[i]!)\n      }\n\n      gl.bindTexture(gl.TEXTURE_2D, texture)\n      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)\n    }\n\n    raf = requestAnimationFrame(loop)\n\n    return () => {\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      c.removeEventListener('pointermove', onMove)\n      c.removeEventListener('pointerenter', onEnter)\n      c.removeEventListener('pointerleave', onLeave)\n      gl.deleteTexture(texture)\n      gl.deleteProgram(prog)\n      setLoaded(false)\n    }\n    // autoPlay is intentionally omitted so toggling it at runtime doesn't\n    // tear down the shader pipeline. The ref-driven loop reads the live\n    // value each frame, so listener attach/detach is handled once on mount.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [src, tier, tint])\n\n  if (tier === 0) {\n    return (\n      // eslint-disable-next-line @next/next/no-img-element\n      <img\n        alt=\"\"\n        className={cn(\n          'absolute inset-0 h-full w-full object-cover',\n          fallbackClassName ?? className\n        )}\n        src={src}\n        style={{ mixBlendMode: 'overlay', ...style }}\n      />\n    )\n  }\n\n  return (\n    <canvas\n      className={cn(\n        'absolute inset-0 h-full w-full transition-opacity duration-500',\n        className\n      )}\n      ref={canvasRef}\n      style={{\n        mixBlendMode: 'overlay',\n        opacity: loaded ? 1 : 0,\n        ...style\n      }}\n    />\n  )\n}\n\nexport type AutoPlayPattern = 'aggressive' | 'gentle' | 'slash'\n\ninterface ImageDistortionProps {\n  active?: boolean\n  /**\n   * Drive the distortion with a choreographed motion pattern instead of\n   * waiting for a real pointer. Useful for posters, social clips, and any\n   * context where the image needs to feel alive on its own.\n   */\n  autoPlay?: AutoPlayPattern\n  className?: string\n  fallbackClassName?: string\n  src: string\n  style?: React.CSSProperties\n  tint?: string\n  tintStrength?: { active: number; inactive: number }\n}\n"]}
+{"version":3,"file":"image-distortion.js","sourceRoot":"","sources":["../../../src/ui/components/image-distortion.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\n\nimport { useGpuTier } from '../../hooks/use-gpu-tier'\nimport { cn, hexToRgb } from '../../utils'\n\nconst NUM_BANDS = 12\n\nconst VERT = `attribute vec2 a;varying vec2 vUv;void main(){vUv=vec2(a.x*.5+.5,.5-a.y*.5);gl_Position=vec4(a,0,1);}`\n\nconst FRAG = `precision highp float;\nuniform float t;\nuniform vec2 r,imgSize,vel;\nuniform sampler2D tex;\nuniform float bands[${NUM_BANDS}];\nuniform vec3 tint;\nuniform float tintStrength;\nvarying vec2 vUv;\n\nfloat h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}\n\n// cover-style UV: crops the image to fill the canvas, centered\nvec2 coverUV(vec2 uv){\n  float canvasAspect=r.x/r.y;\n  float imgAspect=imgSize.x/imgSize.y;\n  vec2 scale=canvasAspect>imgAspect\n    ?vec2(1.0,imgAspect/canvasAspect)\n    :vec2(canvasAspect/imgAspect,1.0);\n  return(uv-0.5)*scale+0.5;\n}\n\nvoid main(){\n  vec2 uv=coverUV(vUv);\n  float scanY=floor(vUv.y*r.y);\n\n  float bandF=vUv.y*${NUM_BANDS}.0;\n  int bandIdx=int(floor(bandF));\n  float bandFrac=fract(bandF);\n\n  float strength=0.0;\n  for(int i=0;i<${NUM_BANDS};i++){\n    if(i==bandIdx) strength=bands[i];\n  }\n\n  float neighborStr=0.0;\n  int neighborIdx=bandFrac>.5?bandIdx+1:bandIdx-1;\n  for(int i=0;i<${NUM_BANDS};i++){\n    if(i==neighborIdx) neighborStr=bands[i];\n  }\n  float edgeBlend=abs(bandFrac-.5)*2.0;\n  edgeBlend*=edgeBlend;\n  strength=mix(strength,neighborStr,edgeBlend*.3);\n\n  float speed=length(vel);\n  float dirBlend=smoothstep(0.0,0.02,speed);\n  vec2 dir=speed>.0001?vel/speed:vec2(0);\n  dir*=dirBlend;\n\n  float rowSeed=h(vec2(scanY,floor(t*3.)+float(bandIdx)*7.));\n  float rowVar=mix(.4,1.0,rowSeed);\n\n  float ySmooth=vUv.y*6.0+t*0.7;\n  float yNoise=mix(h(vec2(floor(ySmooth),13.)),h(vec2(floor(ySmooth)+1.0,13.)),smoothstep(0.0,1.0,fract(ySmooth)));\n  float colVar=mix(.4,1.0,yNoise);\n\n  float tearShiftX=dir.x*strength*rowVar*0.15;\n  float tearShiftY=dir.y*strength*colVar*0.10;\n\n  float bandSeed=h(vec2(float(bandIdx),42.));\n  tearShiftX+=strength*(.5-bandSeed)*0.05;\n\n  float yJitter=mix(h(vec2(floor(ySmooth),73.)),h(vec2(floor(ySmooth)+1.0,73.)),smoothstep(0.0,1.0,fract(ySmooth)));\n  tearShiftY+=strength*(.5-yJitter)*0.035;\n\n  uv.x+=tearShiftX;\n  uv.y+=tearShiftY;\n\n  float sortGate=step(.5,strength)*step(.4,rowSeed);\n  uv.x+=dir.x*sortGate*strength*0.03;\n  uv.y+=dir.y*sortGate*strength*0.02;\n\n  float caX=abs(tearShiftX)*2.5+sortGate*strength*0.01;\n  float caY=abs(tearShiftY)*2.5+sortGate*strength*0.01;\n  float cr=texture2D(tex,vec2(uv.x+caX,uv.y+caY)).r;\n  float cg=texture2D(tex,uv).g;\n  float cb=texture2D(tex,vec2(uv.x-caX,uv.y-caY)).b;\n\n  vec3 col=vec3(cr,cg,cb);\n\n  col*=.97+.03*sin(vUv.y*r.y*3.14159);\n\n  float bandEdge=smoothstep(.02,.0,min(bandFrac,1.0-bandFrac));\n  col+=vec3(bandEdge*strength*.1);\n\n  col=mix(col,col*tint,tintStrength);\n\n  gl_FragColor=vec4(col,1.0);\n}`\n\n/**\n * Choreographed motion patterns used when `autoPlay` is set. Each pattern\n * returns a synthetic pointer position in [0,1] and a hover intensity in\n * [0,1] for the current time (seconds). They drive the shader without\n * requiring a real pointer, which is what lets us record the distortion\n * as a GIF / screenshot / poster.\n */\nconst AUTOPLAY_PATTERNS: Record<\n  AutoPlayPattern,\n  (t: number) => { hover: number; mx: number; my: number }\n> = {\n  aggressive: t => {\n    const cycle = 1.4\n    const phase = (t % cycle) / cycle\n    const stab = Math.exp(-((phase - 0.15) ** 2) * 260)\n    const angle = Math.floor(t / cycle) * 1.37\n    const mx = 0.5 + Math.cos(angle) * 0.42 * (stab + 0.15)\n    const my = 0.5 + Math.sin(angle) * 0.38 * (stab + 0.15)\n\n    return { hover: 0.55 + stab * 0.45, mx, my }\n  },\n  gentle: t => ({\n    hover: 0.45 + Math.sin(t * 0.9) * 0.1,\n    mx: 0.5 + Math.sin(t * 0.5) * 0.28,\n    my: 0.5 + Math.cos(t * 0.37) * 0.22\n  }),\n  slash: t => {\n    // Long breath -> sword slash -> recoil twitch, repeating.\n    const cycle = 3.6\n    const phase = (t % cycle) / cycle\n    const slash = Math.exp(-((phase - 0.28) ** 2) * 180)\n    const micro = Math.exp(-((phase - 0.7) ** 2) * 340)\n\n    const driftX = 0.5 + Math.sin(t * 0.7) * 0.16\n    const driftY = 0.55 + Math.cos(t * 0.5) * 0.14\n\n    // Slash trajectory: bottom-left up into the giant's chest (top-right).\n    const slashX = -0.15 + phase * 1.55\n    const slashY = 0.95 - phase * 1.35\n\n    const mx = driftX * (1 - slash) + slashX * slash\n    const my = driftY * (1 - slash) + slashY * slash\n\n    return { hover: 0.5 + slash * 0.5 + micro * 0.35, mx, my }\n  }\n}\n\nexport function ImageDistortion({\n  active = true,\n  autoPlay,\n  className,\n  fallbackClassName,\n  src,\n  style,\n  tint,\n  tintStrength\n}: ImageDistortionProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const tier = useGpuTier()\n  const [loaded, setLoaded] = useState(false)\n\n  const activeRef = useRef(active)\n  activeRef.current = active\n  const tintStrengthRef = useRef(tintStrength)\n  tintStrengthRef.current = tintStrength\n  const autoPlayRef = useRef(autoPlay)\n  autoPlayRef.current = autoPlay\n\n  const state = useRef({\n    bandTargets: new Float32Array(NUM_BANDS),\n    bands: new Float32Array(NUM_BANDS),\n    hoverTarget: 0,\n    imgH: 1,\n    imgW: 1,\n    mx: 0.5,\n    my: 0.5,\n    prevMx: 0.5,\n    prevMy: 0.5,\n    vx: 0,\n    vy: 0\n  })\n\n  useEffect(() => {\n    if (tier === 0) {\n      return\n    }\n\n    const c = canvasRef.current\n\n    if (!c) {\n      return\n    }\n\n    const gl = c.getContext('webgl')\n\n    if (!gl) {\n      return\n    }\n\n    const compile = (type: number, source: string) => {\n      const s = gl.createShader(type)!\n      gl.shaderSource(s, source)\n      gl.compileShader(s)\n\n      return s\n    }\n\n    const prog = gl.createProgram()!\n    gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT))\n    gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG))\n    gl.linkProgram(prog)\n    gl.useProgram(prog)\n\n    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())\n    gl.bufferData(\n      gl.ARRAY_BUFFER,\n      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n      gl.STATIC_DRAW\n    )\n\n    const a = gl.getAttribLocation(prog, 'a')\n    gl.enableVertexAttribArray(a)\n    gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0)\n\n    const uT = gl.getUniformLocation(prog, 't')\n    const uR = gl.getUniformLocation(prog, 'r')\n    const uImgSize = gl.getUniformLocation(prog, 'imgSize')\n    const uVel = gl.getUniformLocation(prog, 'vel')\n    const uTex = gl.getUniformLocation(prog, 'tex')\n    const uTint = gl.getUniformLocation(prog, 'tint')\n    const uTintStrength = gl.getUniformLocation(prog, 'tintStrength')\n    const uBands: (null | WebGLUniformLocation)[] = []\n\n    for (let i = 0; i < NUM_BANDS; i++) {\n      uBands.push(gl.getUniformLocation(prog, `bands[${i}]`))\n    }\n\n    const texture = gl.createTexture()!\n    gl.bindTexture(gl.TEXTURE_2D, texture)\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)\n    gl.texImage2D(\n      gl.TEXTURE_2D,\n      0,\n      gl.RGBA,\n      1,\n      1,\n      0,\n      gl.RGBA,\n      gl.UNSIGNED_BYTE,\n      new Uint8Array([0, 0, 0, 255])\n    )\n\n    const img = new Image()\n    img.crossOrigin = 'anonymous'\n\n    img.onload = () => {\n      state.current.imgW = img.naturalWidth\n      state.current.imgH = img.naturalHeight\n      gl.bindTexture(gl.TEXTURE_2D, texture)\n      gl.texImage2D(\n        gl.TEXTURE_2D,\n        0,\n        gl.RGBA,\n        gl.RGBA,\n        gl.UNSIGNED_BYTE,\n        img\n      )\n      setLoaded(true)\n    }\n\n    img.src = src\n\n    gl.activeTexture(gl.TEXTURE0)\n    gl.bindTexture(gl.TEXTURE_2D, texture)\n    gl.uniform1i(uTex, 0)\n\n    const resize = () => {\n      const rect = c.getBoundingClientRect()\n      const dpr = Math.min(devicePixelRatio, 2)\n      c.width = rect.width * dpr\n      c.height = rect.height * dpr\n      gl.viewport(0, 0, c.width, c.height)\n    }\n\n    resize()\n    const ro = new ResizeObserver(resize)\n    ro.observe(c)\n\n    const onMove = (e: PointerEvent) => {\n      const rect = c.getBoundingClientRect()\n      state.current.mx = (e.clientX - rect.left) / rect.width\n      state.current.my = (e.clientY - rect.top) / rect.height\n    }\n\n    const onEnter = () => {\n      state.current.hoverTarget = 1\n    }\n\n    const onLeave = () => {\n      state.current.hoverTarget = 0\n    }\n\n    // When autoPlay drives the distortion we want the poster to look\n    // alive regardless of whether a pointer is near the canvas, so we\n    // skip the real pointer listeners entirely.\n    if (!autoPlayRef.current) {\n      c.addEventListener('pointermove', onMove)\n      c.addEventListener('pointerenter', onEnter)\n      c.addEventListener('pointerleave', onLeave)\n    }\n\n    const bandEaseRates = new Float32Array(NUM_BANDS)\n\n    for (let i = 0; i < NUM_BANDS; i++) {\n      bandEaseRates[i] = 0.02 + Math.random() * 0.06\n    }\n\n    const tintVec: readonly [number, number, number] = tint\n      ? (() => {\n          const [tr, tg, tb] = hexToRgb(tint)\n\n          return [tr / 255, tg / 255, tb / 255] as const\n        })()\n      : ([1, 1, 1] as const)\n\n    const t0 = performance.now()\n    let raf = 0\n    let visible = !document.hidden\n    let inView = true\n\n    const loop = () => {\n      raf = requestAnimationFrame(loop)\n      const s = state.current\n\n      const pattern = autoPlayRef.current\n        ? AUTOPLAY_PATTERNS[autoPlayRef.current]\n        : null\n\n      if (pattern) {\n        const driven = pattern((performance.now() - t0) / 1e3)\n        s.mx = driven.mx\n        s.my = driven.my\n        s.hoverTarget = driven.hover\n      }\n\n      const dvx = s.mx - s.prevMx\n      const dvy = s.my - s.prevMy\n      s.vx += (dvx * 8 - s.vx) * 0.1\n      s.vy += (dvy * 8 - s.vy) * 0.1\n      s.prevMx = s.mx\n      s.prevMy = s.my\n\n      const speed = Math.sqrt(s.vx * s.vx + s.vy * s.vy)\n\n      for (let i = 0; i < NUM_BANDS; i++) {\n        const bandCenter = (i + 0.5) / NUM_BANDS\n        const dist = Math.abs(s.my - bandCenter)\n        const proximity = Math.max(0, 1 - dist / 0.3)\n        const activation =\n          s.hoverTarget * proximity * (0.4 + Math.min(speed, 1) * 0.6)\n        s.bandTargets[i] = activation\n      }\n\n      for (let i = 0; i < NUM_BANDS; i++) {\n        const rate = bandEaseRates[i]!\n        const current = s.bands[i] ?? 0\n        const target = s.bandTargets[i] ?? 0\n        s.bands[i] = current + (target - current) * rate\n\n        if (s.bands[i]! < 0.001) {\n          s.bands[i] = 0\n        }\n      }\n\n      gl.uniform1f(uT, (performance.now() - t0) / 1e3)\n      gl.uniform2f(uR, c.width, c.height)\n      gl.uniform2f(uImgSize, s.imgW, s.imgH)\n      gl.uniform2f(uVel, s.vx, s.vy)\n      gl.uniform3f(uTint, tintVec[0], tintVec[1], tintVec[2])\n\n      const ts = tintStrengthRef.current\n      const defaultStrength = tint ? 0.35 : 0\n      const defaultInactive = tint ? 0.15 : 0\n      gl.uniform1f(\n        uTintStrength,\n        activeRef.current\n          ? (ts?.active ?? defaultStrength)\n          : (ts?.inactive ?? defaultInactive)\n      )\n\n      for (let i = 0; i < NUM_BANDS; i++) {\n        gl.uniform1f(uBands[i]!, s.bands[i]!)\n      }\n\n      gl.bindTexture(gl.TEXTURE_2D, texture)\n      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)\n    }\n\n    const start = () => {\n      if (visible && inView && !raf) {\n        raf = requestAnimationFrame(loop)\n      }\n    }\n\n    const stop = () => {\n      if (raf) {\n        cancelAnimationFrame(raf)\n        raf = 0\n      }\n    }\n\n    const onVisibility = () => {\n      visible = !document.hidden\n      visible ? start() : stop()\n    }\n\n    const io = new IntersectionObserver(\n      entries => {\n        inView = entries.some(e => e.isIntersecting)\n        inView ? start() : stop()\n      },\n      { threshold: 0 }\n    )\n\n    io.observe(c)\n    document.addEventListener('visibilitychange', onVisibility)\n\n    start()\n\n    return () => {\n      stop()\n      io.disconnect()\n      document.removeEventListener('visibilitychange', onVisibility)\n      ro.disconnect()\n      c.removeEventListener('pointermove', onMove)\n      c.removeEventListener('pointerenter', onEnter)\n      c.removeEventListener('pointerleave', onLeave)\n      gl.deleteTexture(texture)\n      gl.deleteProgram(prog)\n      setLoaded(false)\n    }\n    // autoPlay is intentionally omitted so toggling it at runtime doesn't\n    // tear down the shader pipeline. The ref-driven loop reads the live\n    // value each frame, so listener attach/detach is handled once on mount.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [src, tier, tint])\n\n  if (tier === 0) {\n    return (\n      // eslint-disable-next-line @next/next/no-img-element\n      <img\n        alt=\"\"\n        className={cn(\n          'absolute inset-0 h-full w-full object-cover',\n          fallbackClassName ?? className\n        )}\n        src={src}\n        style={{ mixBlendMode: 'overlay', ...style }}\n      />\n    )\n  }\n\n  return (\n    <canvas\n      className={cn(\n        'absolute inset-0 h-full w-full transition-opacity duration-500',\n        className\n      )}\n      ref={canvasRef}\n      style={{\n        mixBlendMode: 'overlay',\n        opacity: loaded ? 1 : 0,\n        ...style\n      }}\n    />\n  )\n}\n\nexport type AutoPlayPattern = 'aggressive' | 'gentle' | 'slash'\n\ninterface ImageDistortionProps {\n  active?: boolean\n  /**\n   * Drive the distortion with a choreographed motion pattern instead of\n   * waiting for a real pointer. Useful for posters, social clips, and any\n   * context where the image needs to feel alive on its own.\n   */\n  autoPlay?: AutoPlayPattern\n  className?: string\n  fallbackClassName?: string\n  src: string\n  style?: React.CSSProperties\n  tint?: string\n  tintStrength?: { active: number; inactive: number }\n}\n"]}

package/dist/ui/components/overlays/glitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glitch.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/overlays/glitch.tsx"],"names":[],"mappings":"AA2GA,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,WAAW,kDAmIvD;AAED,UAAU,WAAW;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B"}
+{"version":3,"file":"glitch.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/overlays/glitch.tsx"],"names":[],"mappings":"AA4GA,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,WAAW,kDAiIvD;AAED,UAAU,WAAW;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B"}

package/dist/ui/components/overlays/glitch.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import * as THREE from 'three';
 import { $gpuTier, useGpuTier } from '../../../hooks/use-gpu-tier';
+import { runRenderLoop } from '../../../hooks/use-render-loop';
 import { useSmoothControls } from '../../../hooks/use-smooth-controls';
 import { cn } from '../../../utils';
 import { BLEND_MODES } from './blend-modes';
@@ -154,36 +155,37 @@ export function Glitch({ className, style }) {
         scene.add(new THREE.Mesh(geo, mat));
         const resize = () => {
             renderer.setSize(innerWidth, innerHeight);
-            renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+            // Cap DPR at 1.5 — at full retina (2x) the glitch shader is one
+            // of the heaviest fillrate consumers in the app, and the visual
+            // difference is tiny because it's a chromatic-noise effect.
+            renderer.setPixelRatio(Math.min(devicePixelRatio, 1.5));
         };
         resize();
         window.addEventListener('resize', resize);
-        let raf, time = 0;
-        const interval = gpuTier === 1 ? 100 : 0;
-        const loop = () => {
-            raf = interval
-                ? setTimeout(loop, interval)
-                : requestAnimationFrame(loop);
-            time += interval ? interval / 1000 : 0.016;
-            const v = cRef.current;
-            mat.uniforms.uTime.value = time;
-            mat.uniforms.uAlpha.value = v.alpha;
-            mat.uniforms.uChroma.value = v.chroma;
-            mat.uniforms.uIntensity.value = v.intensity;
-            mat.uniforms.uSparsity.value = v.sparsity;
-            mat.uniforms.uSpeed.value = v.speed;
-            mat.uniforms.uColor.value.set(v.color);
-            renderer.render(scene, camera);
-        };
-        loop();
+        let time = 0;
+        // gpu-tier 1 → ~10fps (legacy), gpu-tier 2 → ~30fps (was 60fps).
+        // Glitch is a background ambient effect; users won't notice 30 vs
+        // 60 but the GPU absolutely will.
+        const minIntervalMs = gpuTier === 1 ? 100 : 33;
+        const dispose = runRenderLoop({
+            el: ref.current,
+            minIntervalMs,
+            onFrame: deltaSeconds => {
+                time += deltaSeconds;
+                const v = cRef.current;
+                mat.uniforms.uTime.value = time;
+                mat.uniforms.uAlpha.value = v.alpha;
+                mat.uniforms.uChroma.value = v.chroma;
+                mat.uniforms.uIntensity.value = v.intensity;
+                mat.uniforms.uSparsity.value = v.sparsity;
+                mat.uniforms.uSpeed.value = v.speed;
+                mat.uniforms.uColor.value.set(v.color);
+                renderer.render(scene, camera);
+            }
+        });
         return () => {
             window.removeEventListener('resize', resize);
-            if (interval) {
-                clearTimeout(raf);
-            }
-            else {
-                cancelAnimationFrame(raf);
-            }
+            dispose();
             mat.dispose();
             geo.dispose();
             renderer.dispose();

package/dist/ui/components/overlays/glitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"glitch.js","sourceRoot":"","sources":["../../../../src/ui/components/overlays/glitch.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { useEffect, useRef } from 'react'\nimport * as THREE from 'three'\n\nimport { $gpuTier, useGpuTier } from '../../../hooks/use-gpu-tier'\nimport { useSmoothControls } from '../../../hooks/use-smooth-controls'\nimport { cn } from '../../../utils'\n\nimport { BLEND_MODES } from './blend-modes'\n\nconst vert = /*glsl*/ `\n  varying vec2 vUv;\n  void main() {\n    vUv = uv;\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n  }\n`\n\nconst frag = /*glsl*/ `\n  uniform float uTime, uAlpha, uIntensity, uChroma, uSpeed, uSparsity;\n  uniform vec3 uColor;\n  varying vec2 vUv;\n\n  float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }\n\n  vec2 hash2(vec2 p) {\n    vec3 q = fract(vec3(p.xyx) * vec3(.1031, .1030, .0973));\n    q += dot(q, q.yzx + 33.33);\n    return fract((q.xx + q.yz) * q.zy);\n  }\n\n  float dither(vec2 p, float a) {\n    return step(mod(floor(p.x) + floor(p.y) * 2.0, 4.0) / 4.0, a);\n  }\n\n  void main() {\n    vec3 col = vec3(0.0);\n    float t = uTime * uSpeed;\n    float tSlow = floor(t / 3.0);\n    float dit = dither(gl_FragCoord.xy * 0.5, 0.7);\n\n    for (float i = 0.0; i < 6.0; i++) {\n      float seed = i * 137.3;\n      float epoch = floor((t + hash(vec2(seed, 77.7)) * 200.0) / (4.0 + hash(vec2(seed, 0.0)) * 6.0));\n      float life = fract((t + hash(vec2(seed, 77.7)) * 200.0) / (4.0 + hash(vec2(seed, 0.0)) * 6.0));\n\n      if (hash(vec2(epoch, seed)) > 1.0 - uSparsity * 0.7) continue;\n\n      vec2 center = vec2(hash(vec2(epoch, seed + 13.1)), hash(vec2(epoch, seed + 27.3)));\n      vec2 size = vec2(0.015 + hash(vec2(epoch, seed + 41.5)) * 0.08, 0.008 + hash(vec2(epoch, seed + 53.7)) * 0.04);\n      vec2 d = abs(vUv - center);\n\n      if (d.x < size.x && d.y < size.y) {\n        float fade = smoothstep(0.0, 0.05, life) * smoothstep(1.0, 0.95, life);\n        vec2 gUV = vUv + (hash2(vec2(epoch, seed + 200.0)) - 0.5) * 0.08 * uIntensity;\n        float shift = uChroma * 0.015 * (sin(t * 2.0 + hash(vec2(epoch, seed)) * 6.28) * 0.3 + 0.7);\n\n        col += uColor * vec3(\n          hash(gUV * 50.0 + vec2(shift, 0.0) + epoch),\n          hash(gUV * 50.0 + epoch),\n          hash(gUV * 50.0 - vec2(shift, 0.0) + epoch)\n        ) * dither(gl_FragCoord.xy * 0.5, fade * 0.8 + 0.2) * uIntensity * 0.7;\n      }\n    }\n\n    for (float i = 0.0; i < 12.0; i++) {\n      float seed = i * 211.7 + 1000.0;\n      float epoch = floor((t + hash(vec2(seed, 77.7)) * 150.0) / (3.0 + hash(vec2(seed, 0.0)) * 5.0));\n      float life = fract((t + hash(vec2(seed, 77.7)) * 150.0) / (3.0 + hash(vec2(seed, 0.0)) * 5.0));\n\n      if (hash(vec2(epoch, seed)) > 1.0 - uSparsity * 0.5) continue;\n\n      vec2 pos = vec2(hash(vec2(epoch, seed + 13.1)), hash(vec2(epoch, seed + 27.3)));\n      float px = 0.003 + hash(vec2(epoch, seed + 41.5)) * 0.008;\n\n      if (abs(vUv.x - pos.x) < px && abs(vUv.y - pos.y) < px) {\n        float fade = smoothstep(0.0, 0.1, life) * smoothstep(1.0, 0.9, life);\n        vec3 c = uColor;\n        float cs = hash(vec2(epoch, seed + 700.0));\n\n        if (cs < 0.2) c.r *= 1.8 * uChroma;\n        else if (cs < 0.4) c.b *= 1.8 * uChroma;\n\n        col += c * dither(gl_FragCoord.xy * 0.5, fade * 0.9) * uIntensity;\n      }\n    }\n\n    float tearSize = 25.0 + uSparsity * 10.0;\n    float tearThresh = 0.85 + uSparsity * 0.1;\n\n    float hY = floor(vUv.y * tearSize);\n    if (step(tearThresh, hash(vec2(hY, tSlow))) > 0.0) {\n      float shift = (hash(vec2(hY, tSlow + 50.0)) - 0.5) * 0.25 * uIntensity;\n      col += uColor * step(0.4, hash(vec2(vUv.x + shift, hY + tSlow))) * dit * uIntensity * 0.5;\n    }\n\n    float vX = floor(vUv.x * tearSize);\n    if (step(tearThresh, hash(vec2(vX, tSlow + 100.0))) > 0.0) {\n      float shift = (hash(vec2(vX, tSlow + 150.0)) - 0.5) * 0.25 * uIntensity;\n      col += uColor * step(0.4, hash(vec2(vX + tSlow, vUv.y + shift))) * dit * uIntensity * 0.5;\n    }\n\n    gl_FragColor = vec4(col * uAlpha, max(col.r, max(col.g, col.b)) * uAlpha);\n  }\n`\n\nexport function Glitch({ className, style }: GlitchProps) {\n  const gpuTier = useGpuTier()\n\n  const c = useSmoothControls(\n    'Effects/Glitch',\n    {\n      alpha: { max: 2, min: 0, step: 0.01, value: 0.25 },\n      blend: { options: BLEND_MODES, value: 'difference' },\n      chroma: { max: 3, min: 0, step: 0.01, value: 1.17 },\n      color: { value: '#ffe6cb' },\n      enabled: { value: true },\n      intensity: { max: 1, min: 0, step: 0.01, value: 0.59 },\n      sparsity: { max: 1, min: 0, step: 0.01, value: 0.21 },\n      speed: { max: 10, min: 0.1, step: 0.1, value: 1 }\n    },\n    { collapsed: true }\n  )\n\n  const ref = useRef<HTMLCanvasElement>(null)\n  const cRef = useRef(c)\n  cRef.current = c\n\n  const enabled = c.enabled && gpuTier > 0\n\n  useEffect(() => {\n    if (!ref.current || !enabled) {\n      return\n    }\n\n    let renderer: THREE.WebGLRenderer\n\n    try {\n      renderer = new THREE.WebGLRenderer({\n        alpha: true,\n        canvas: ref.current\n      })\n    } catch {\n      // See note in noise.tsx — eager gpu-tier detection should keep us\n      // out of here, but if the driver fails the renderer constructor\n      // anyway, downgrade so other overlays stop trying too.\n      $gpuTier.set(0)\n\n      return\n    }\n\n    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1)\n    const geo = new THREE.PlaneGeometry(2, 2)\n    const scene = new THREE.Scene()\n\n    const mat = new THREE.ShaderMaterial({\n      fragmentShader: frag,\n      transparent: true,\n      uniforms: {\n        uAlpha: { value: c.alpha },\n        uChroma: { value: c.chroma },\n        uColor: { value: new THREE.Color(c.color) },\n        uIntensity: { value: c.intensity },\n        uSparsity: { value: c.sparsity },\n        uSpeed: { value: c.speed },\n        uTime: { value: 0 }\n      },\n      vertexShader: vert\n    })\n\n    scene.add(new THREE.Mesh(geo, mat))\n\n    const resize = () => {\n      renderer.setSize(innerWidth, innerHeight)\n      renderer.setPixelRatio(Math.min(devicePixelRatio, 2))\n    }\n\n    resize()\n    window.addEventListener('resize', resize)\n\n    let raf: number,\n      time = 0\n\n    const interval = gpuTier === 1 ? 100 : 0\n\n    const loop = () => {\n      raf = interval\n        ? (setTimeout(loop, interval) as unknown as number)\n        : requestAnimationFrame(loop)\n\n      time += interval ? interval / 1000 : 0.016\n\n      const v = cRef.current\n\n      mat.uniforms.uTime.value = time\n      mat.uniforms.uAlpha.value = v.alpha\n      mat.uniforms.uChroma.value = v.chroma\n      mat.uniforms.uIntensity.value = v.intensity\n      mat.uniforms.uSparsity.value = v.sparsity\n      mat.uniforms.uSpeed.value = v.speed\n      mat.uniforms.uColor.value.set(v.color)\n\n      renderer.render(scene, camera)\n    }\n\n    loop()\n\n    return () => {\n      window.removeEventListener('resize', resize)\n\n      if (interval) {\n        clearTimeout(raf)\n      } else {\n        cancelAnimationFrame(raf)\n      }\n\n      mat.dispose()\n      geo.dispose()\n      renderer.dispose()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [enabled, gpuTier])\n\n  if (!enabled) {\n    return null\n  }\n\n  return (\n    <canvas\n      className={cn('h-full w-full', className)}\n      ref={ref}\n      style={{\n        mixBlendMode: c.blend as React.CSSProperties['mixBlendMode'],\n        ...style\n      }}\n    />\n  )\n}\n\ninterface GlitchProps {\n  className?: string\n  style?: React.CSSProperties\n}"]}
+{"version":3,"file":"glitch.js","sourceRoot":"","sources":["../../../../src/ui/components/overlays/glitch.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { useEffect, useRef } from 'react'\nimport * as THREE from 'three'\n\nimport { $gpuTier, useGpuTier } from '../../../hooks/use-gpu-tier'\nimport { runRenderLoop } from '../../../hooks/use-render-loop'\nimport { useSmoothControls } from '../../../hooks/use-smooth-controls'\nimport { cn } from '../../../utils'\n\nimport { BLEND_MODES } from './blend-modes'\n\nconst vert = /*glsl*/ `\n  varying vec2 vUv;\n  void main() {\n    vUv = uv;\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n  }\n`\n\nconst frag = /*glsl*/ `\n  uniform float uTime, uAlpha, uIntensity, uChroma, uSpeed, uSparsity;\n  uniform vec3 uColor;\n  varying vec2 vUv;\n\n  float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }\n\n  vec2 hash2(vec2 p) {\n    vec3 q = fract(vec3(p.xyx) * vec3(.1031, .1030, .0973));\n    q += dot(q, q.yzx + 33.33);\n    return fract((q.xx + q.yz) * q.zy);\n  }\n\n  float dither(vec2 p, float a) {\n    return step(mod(floor(p.x) + floor(p.y) * 2.0, 4.0) / 4.0, a);\n  }\n\n  void main() {\n    vec3 col = vec3(0.0);\n    float t = uTime * uSpeed;\n    float tSlow = floor(t / 3.0);\n    float dit = dither(gl_FragCoord.xy * 0.5, 0.7);\n\n    for (float i = 0.0; i < 6.0; i++) {\n      float seed = i * 137.3;\n      float epoch = floor((t + hash(vec2(seed, 77.7)) * 200.0) / (4.0 + hash(vec2(seed, 0.0)) * 6.0));\n      float life = fract((t + hash(vec2(seed, 77.7)) * 200.0) / (4.0 + hash(vec2(seed, 0.0)) * 6.0));\n\n      if (hash(vec2(epoch, seed)) > 1.0 - uSparsity * 0.7) continue;\n\n      vec2 center = vec2(hash(vec2(epoch, seed + 13.1)), hash(vec2(epoch, seed + 27.3)));\n      vec2 size = vec2(0.015 + hash(vec2(epoch, seed + 41.5)) * 0.08, 0.008 + hash(vec2(epoch, seed + 53.7)) * 0.04);\n      vec2 d = abs(vUv - center);\n\n      if (d.x < size.x && d.y < size.y) {\n        float fade = smoothstep(0.0, 0.05, life) * smoothstep(1.0, 0.95, life);\n        vec2 gUV = vUv + (hash2(vec2(epoch, seed + 200.0)) - 0.5) * 0.08 * uIntensity;\n        float shift = uChroma * 0.015 * (sin(t * 2.0 + hash(vec2(epoch, seed)) * 6.28) * 0.3 + 0.7);\n\n        col += uColor * vec3(\n          hash(gUV * 50.0 + vec2(shift, 0.0) + epoch),\n          hash(gUV * 50.0 + epoch),\n          hash(gUV * 50.0 - vec2(shift, 0.0) + epoch)\n        ) * dither(gl_FragCoord.xy * 0.5, fade * 0.8 + 0.2) * uIntensity * 0.7;\n      }\n    }\n\n    for (float i = 0.0; i < 12.0; i++) {\n      float seed = i * 211.7 + 1000.0;\n      float epoch = floor((t + hash(vec2(seed, 77.7)) * 150.0) / (3.0 + hash(vec2(seed, 0.0)) * 5.0));\n      float life = fract((t + hash(vec2(seed, 77.7)) * 150.0) / (3.0 + hash(vec2(seed, 0.0)) * 5.0));\n\n      if (hash(vec2(epoch, seed)) > 1.0 - uSparsity * 0.5) continue;\n\n      vec2 pos = vec2(hash(vec2(epoch, seed + 13.1)), hash(vec2(epoch, seed + 27.3)));\n      float px = 0.003 + hash(vec2(epoch, seed + 41.5)) * 0.008;\n\n      if (abs(vUv.x - pos.x) < px && abs(vUv.y - pos.y) < px) {\n        float fade = smoothstep(0.0, 0.1, life) * smoothstep(1.0, 0.9, life);\n        vec3 c = uColor;\n        float cs = hash(vec2(epoch, seed + 700.0));\n\n        if (cs < 0.2) c.r *= 1.8 * uChroma;\n        else if (cs < 0.4) c.b *= 1.8 * uChroma;\n\n        col += c * dither(gl_FragCoord.xy * 0.5, fade * 0.9) * uIntensity;\n      }\n    }\n\n    float tearSize = 25.0 + uSparsity * 10.0;\n    float tearThresh = 0.85 + uSparsity * 0.1;\n\n    float hY = floor(vUv.y * tearSize);\n    if (step(tearThresh, hash(vec2(hY, tSlow))) > 0.0) {\n      float shift = (hash(vec2(hY, tSlow + 50.0)) - 0.5) * 0.25 * uIntensity;\n      col += uColor * step(0.4, hash(vec2(vUv.x + shift, hY + tSlow))) * dit * uIntensity * 0.5;\n    }\n\n    float vX = floor(vUv.x * tearSize);\n    if (step(tearThresh, hash(vec2(vX, tSlow + 100.0))) > 0.0) {\n      float shift = (hash(vec2(vX, tSlow + 150.0)) - 0.5) * 0.25 * uIntensity;\n      col += uColor * step(0.4, hash(vec2(vX + tSlow, vUv.y + shift))) * dit * uIntensity * 0.5;\n    }\n\n    gl_FragColor = vec4(col * uAlpha, max(col.r, max(col.g, col.b)) * uAlpha);\n  }\n`\n\nexport function Glitch({ className, style }: GlitchProps) {\n  const gpuTier = useGpuTier()\n\n  const c = useSmoothControls(\n    'Effects/Glitch',\n    {\n      alpha: { max: 2, min: 0, step: 0.01, value: 0.25 },\n      blend: { options: BLEND_MODES, value: 'difference' },\n      chroma: { max: 3, min: 0, step: 0.01, value: 1.17 },\n      color: { value: '#ffe6cb' },\n      enabled: { value: true },\n      intensity: { max: 1, min: 0, step: 0.01, value: 0.59 },\n      sparsity: { max: 1, min: 0, step: 0.01, value: 0.21 },\n      speed: { max: 10, min: 0.1, step: 0.1, value: 1 }\n    },\n    { collapsed: true }\n  )\n\n  const ref = useRef<HTMLCanvasElement>(null)\n  const cRef = useRef(c)\n  cRef.current = c\n\n  const enabled = c.enabled && gpuTier > 0\n\n  useEffect(() => {\n    if (!ref.current || !enabled) {\n      return\n    }\n\n    let renderer: THREE.WebGLRenderer\n\n    try {\n      renderer = new THREE.WebGLRenderer({\n        alpha: true,\n        canvas: ref.current\n      })\n    } catch {\n      // See note in noise.tsx — eager gpu-tier detection should keep us\n      // out of here, but if the driver fails the renderer constructor\n      // anyway, downgrade so other overlays stop trying too.\n      $gpuTier.set(0)\n\n      return\n    }\n\n    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1)\n    const geo = new THREE.PlaneGeometry(2, 2)\n    const scene = new THREE.Scene()\n\n    const mat = new THREE.ShaderMaterial({\n      fragmentShader: frag,\n      transparent: true,\n      uniforms: {\n        uAlpha: { value: c.alpha },\n        uChroma: { value: c.chroma },\n        uColor: { value: new THREE.Color(c.color) },\n        uIntensity: { value: c.intensity },\n        uSparsity: { value: c.sparsity },\n        uSpeed: { value: c.speed },\n        uTime: { value: 0 }\n      },\n      vertexShader: vert\n    })\n\n    scene.add(new THREE.Mesh(geo, mat))\n\n    const resize = () => {\n      renderer.setSize(innerWidth, innerHeight)\n      // Cap DPR at 1.5 — at full retina (2x) the glitch shader is one\n      // of the heaviest fillrate consumers in the app, and the visual\n      // difference is tiny because it's a chromatic-noise effect.\n      renderer.setPixelRatio(Math.min(devicePixelRatio, 1.5))\n    }\n\n    resize()\n    window.addEventListener('resize', resize)\n\n    let time = 0\n\n    // gpu-tier 1 → ~10fps (legacy), gpu-tier 2 → ~30fps (was 60fps).\n    // Glitch is a background ambient effect; users won't notice 30 vs\n    // 60 but the GPU absolutely will.\n    const minIntervalMs = gpuTier === 1 ? 100 : 33\n\n    const dispose = runRenderLoop({\n      el: ref.current,\n      minIntervalMs,\n      onFrame: deltaSeconds => {\n        time += deltaSeconds\n\n        const v = cRef.current\n\n        mat.uniforms.uTime.value = time\n        mat.uniforms.uAlpha.value = v.alpha\n        mat.uniforms.uChroma.value = v.chroma\n        mat.uniforms.uIntensity.value = v.intensity\n        mat.uniforms.uSparsity.value = v.sparsity\n        mat.uniforms.uSpeed.value = v.speed\n        mat.uniforms.uColor.value.set(v.color)\n\n        renderer.render(scene, camera)\n      }\n    })\n\n    return () => {\n      window.removeEventListener('resize', resize)\n      dispose()\n\n      mat.dispose()\n      geo.dispose()\n      renderer.dispose()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [enabled, gpuTier])\n\n  if (!enabled) {\n    return null\n  }\n\n  return (\n    <canvas\n      className={cn('h-full w-full', className)}\n      ref={ref}\n      style={{\n        mixBlendMode: c.blend as React.CSSProperties['mixBlendMode'],\n        ...style\n      }}\n    />\n  )\n}\n\ninterface GlitchProps {\n  className?: string\n  style?: React.CSSProperties\n}"]}

package/dist/ui/components/overlays/greys.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"greys.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/overlays/greys.tsx"],"names":[],"mappings":"AAmKA,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,UAAU,kDAoNrD;AAED,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B"}
+{"version":3,"file":"greys.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/overlays/greys.tsx"],"names":[],"mappings":"AAoKA,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,UAAU,kDAwNrD;AAED,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B"}

package/dist/ui/components/overlays/greys.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import * as THREE from 'three';
 import { $gpuTier, useGpuTier } from '../../../hooks/use-gpu-tier';
+import { runRenderLoop } from '../../../hooks/use-render-loop';
 import { useSmoothControls } from '../../../hooks/use-smooth-controls';
 import { cn } from '../../../utils';
 import { BLEND_MODES } from './blend-modes';
@@ -253,47 +254,53 @@ export function Greys({ className, style }) {
         const outScene = mkScene(outputFrag, outU, true);
         const resize = () => {
             renderer.setSize(innerWidth, innerHeight);
-            renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+            // Cap at 1.5x — Greys does triple-buffered ping-pong rendering at
+            // every frame, so retina x2 is brutal on fillrate.
+            renderer.setPixelRatio(Math.min(devicePixelRatio, 1.5));
             [rtSource, rtA, rtB].forEach(rt => rt.setSize(innerWidth, innerHeight));
             moshU.uRes.value.set(innerWidth, innerHeight);
         };
         resize();
         window.addEventListener('resize', resize);
-        let raf, ping = true, time = 0;
-        const loop = () => {
-            raf = requestAnimationFrame(loop);
-            time += 0.016;
-            const v = cRef.current;
-            srcU.uTime.value = time;
-            srcU.uSpeed.value = v.speed;
-            srcU.uZoom.value = v.zoom;
-            srcU.uRotate.value = v.rotate;
-            srcU.uFolds.value = v.folds;
-            srcU.uDrift.value = v.drift;
-            moshU.uTime.value = time;
-            moshU.uIntensity.value = v.intensity;
-            moshU.uMotion.value = v.motion;
-            moshU.uSpeed.value = v.speed;
-            moshU.uZoom.value = v.zoom;
-            outU.uTime.value = time;
-            outU.uAlpha.value = v.alpha;
-            outU.uHue.value = v.hue;
-            outU.uColor.value.set(typeof v.color === 'string' ? v.color : '#fff');
-            renderer.setRenderTarget(rtSource);
-            renderer.render(srcScene, camera);
-            const [read, write] = ping ? [rtA, rtB] : [rtB, rtA];
-            moshU.uPrev.value = read.texture;
-            renderer.setRenderTarget(write);
-            renderer.render(moshScene, camera);
-            outU.uInput.value = write.texture;
-            renderer.setRenderTarget(null);
-            renderer.render(outScene, camera);
-            ping = !ping;
-        };
-        loop();
+        let ping = true, time = 0;
+        // 30fps cap — feedback effect, no perceptual loss vs 60fps but
+        // halves the cost of the heaviest overlay we ship.
+        const dispose = runRenderLoop({
+            el: canvasRef.current,
+            minIntervalMs: 33,
+            onFrame: deltaSeconds => {
+                time += deltaSeconds;
+                const v = cRef.current;
+                srcU.uTime.value = time;
+                srcU.uSpeed.value = v.speed;
+                srcU.uZoom.value = v.zoom;
+                srcU.uRotate.value = v.rotate;
+                srcU.uFolds.value = v.folds;
+                srcU.uDrift.value = v.drift;
+                moshU.uTime.value = time;
+                moshU.uIntensity.value = v.intensity;
+                moshU.uMotion.value = v.motion;
+                moshU.uSpeed.value = v.speed;
+                moshU.uZoom.value = v.zoom;
+                outU.uTime.value = time;
+                outU.uAlpha.value = v.alpha;
+                outU.uHue.value = v.hue;
+                outU.uColor.value.set(typeof v.color === 'string' ? v.color : '#fff');
+                renderer.setRenderTarget(rtSource);
+                renderer.render(srcScene, camera);
+                const [read, write] = ping ? [rtA, rtB] : [rtB, rtA];
+                moshU.uPrev.value = read.texture;
+                renderer.setRenderTarget(write);
+                renderer.render(moshScene, camera);
+                outU.uInput.value = write.texture;
+                renderer.setRenderTarget(null);
+                renderer.render(outScene, camera);
+                ping = !ping;
+            }
+        });
         return () => {
             window.removeEventListener('resize', resize);
-            cancelAnimationFrame(raf);
+            dispose();
             textures.forEach(t => t.dispose());
             [geo, rtSource, rtA, rtB, renderer].forEach(x => x.dispose());
         };

package/dist/ui/components/overlays/greys.js.map

@@ -1 +1 @@
-{"version":3,"file":"greys.js","sourceRoot":"","sources":["../../../../src/ui/components/overlays/greys.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport * as THREE from 'three'\n\nimport { $gpuTier, useGpuTier } from '../../../hooks/use-gpu-tier'\nimport { useSmoothControls } from '../../../hooks/use-smooth-controls'\nimport { cn } from '../../../utils'\n\nimport { BLEND_MODES } from './blend-modes'\n\nconst vert = /*glsl*/ `\n  varying vec2 vUv;\n  void main() {\n    vUv = uv;\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n  }\n`\n\nconst sourceFrag = /*glsl*/ `\n  uniform sampler2D uTex0, uTex1, uTex2, uTex3;\n  uniform float uTime, uZoom, uSpeed, uRotate, uFolds, uDrift;\n  varying vec2 vUv;\n\n  vec3 gray(vec3 c) { return vec3(dot(c, vec3(.299, .587, .114))); }\n  vec2 rot(vec2 p, float a) { return vec2(p.x * cos(a) - p.y * sin(a), p.x * sin(a) + p.y * cos(a)); }\n\n  vec2 kaleid(vec2 p, float n) {\n    float a = mod(atan(p.y, p.x), 6.28318 / n) - 3.14159 / n;\n    return length(p) * vec2(cos(a), sin(a));\n  }\n\n  vec4 tex(int i, vec2 uv) {\n    if (i == 0) return texture2D(uTex0, uv);\n    if (i == 1) return texture2D(uTex1, uv);\n    if (i == 2) return texture2D(uTex2, uv);\n    return texture2D(uTex3, uv);\n  }\n\n  void main() {\n    vec2 uv = rot(vUv - .5, uTime * uRotate * .05);\n    if (uFolds > 1.) uv = kaleid(uv, uFolds);\n\n    float dt = uTime * uDrift * .1;\n    uv = uv / uZoom + .5 + vec2(sin(dt * .7) * cos(dt * .3), cos(dt * .5) * sin(dt * .9)) * .15 * uDrift;\n\n    float cycle = mod(uTime * uSpeed * .01, 4.);\n    int i0 = int(floor(cycle)), i1 = int(mod(float(i0) + 1., 4.));\n    float t = smoothstep(0., 1., fract(cycle));\n\n    vec3 base = mix(gray(vec3(1.) - tex(i0, uv).rgb), gray(vec3(1.) - tex(i1, uv).rgb), t);\n    vec2 uvF = vec2(1. - uv.x, uv.y);\n    vec3 flip = mix(gray(vec3(1.) - tex(i0, uvF).rgb), gray(vec3(1.) - tex(i1, uvF).rgb), t);\n\n    gl_FragColor = vec4(mix(base, flip, .3 + sin(uTime * .2) * .2), 1.);\n  }\n`\n\nconst moshFrag = /*glsl*/ `\n  uniform sampler2D uCurrent, uPrev, uTex0, uTex1, uTex2, uTex3;\n  uniform float uTime, uIntensity, uMotion, uZoom, uSpeed;\n  uniform vec2 uRes;\n  varying vec2 vUv;\n\n  float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }\n  vec2 hash2(vec2 p) { return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453); }\n\n  float noise(vec2 p) {\n    vec2 i = floor(p), f = fract(p) * fract(p) * (3. - 2. * fract(p));\n    return mix(mix(hash(i), hash(i + vec2(1., 0.)), f.x), mix(hash(i + vec2(0., 1.)), hash(i + vec2(1., 1.)), f.x), f.y);\n  }\n\n  vec3 gray(vec3 c) { return vec3(dot(c, vec3(.299, .587, .114))); }\n\n  vec2 distort(vec2 uv, float k, float t) {\n    float n1 = noise(uv * 8. + t * .5), n2 = noise(uv * 12. + t * .7), flow = noise(uv * 4. + t * .3);\n    return uv + vec2(cos(n1 * 6.28 + t * 1.2), sin(n2 * 6.28 + t * .9)) * .02 * k\n             + vec2(cos(flow * 6.28 + uv.y * 10.), sin(flow * 6.28 + uv.x * 10.)) * .015 * k;\n  }\n\n  vec3 tex(int i, vec2 uv) {\n    vec2 zuv = (uv - .5) / uZoom + .5;\n    if (i == 0) return gray(vec3(1.) - texture2D(uTex0, zuv).rgb);\n    if (i == 1) return gray(vec3(1.) - texture2D(uTex1, zuv).rgb);\n    if (i == 2) return gray(vec3(1.) - texture2D(uTex2, zuv).rgb);\n    return gray(vec3(1.) - texture2D(uTex3, zuv).rgb);\n  }\n\n  void main() {\n    vec2 uv = vUv;\n    float t = uTime * uSpeed, tS = floor(t * .1), pS = 80.;\n    float amt = uIntensity * uMotion * .8 * (.7 + (sin(t * .5) * .5 + .5) * .3);\n\n    vec2 mUV = distort(uv, uIntensity * .4, t);\n\n    float hS = floor(uv.y * pS), hA = smoothstep(0., .8, hash(vec2(hS, tS)));\n    float hO = (hash(vec2(hS, tS + 50.)) - .5) * .25 * hA * amt;\n    float vS = floor(uv.x * pS), vA = smoothstep(0., .8, hash(vec2(vS, tS + 100.)));\n    float vO = (hash(vec2(vS, tS + 150.)) - .5) * .25 * vA * amt;\n    mUV += vec2(hO, vO);\n\n    float bS = pS * .25;\n    float hBA = step(.5, hash(vec2(floor(uv.y * bS), tS + 200.)));\n    float hBO = (hash(vec2(floor(uv.y * bS), 200.)) - .5) * .35 * hBA * amt;\n    float vBA = step(.5, hash(vec2(floor(uv.x * bS), tS + 300.)));\n    float vBO = (hash(vec2(floor(uv.x * bS), 250.)) - .5) * .35 * vBA * amt;\n    mUV += vec2(hBO, vBO);\n\n    vec2 blk = floor(uv * pS * .15);\n    mUV += (hash2(vec2(blk.x, blk.y + 500.)) - .5) * .4 * step(.7, hash(vec2(blk.x, blk.y + tS))) * amt;\n    mUV = clamp(mUV, 0., 1.);\n\n    vec3 prev = texture2D(uPrev, mUV).rgb;\n    prev = mix(prev, texture2D(uPrev, clamp(uv + vec2(hBO, vBO), 0., 1.)).rgb, max(hBA, vBA) * .9);\n\n    float tY = floor(uv.y * pS * .4);\n    if (hash(vec2(tY, tS + 400.)) > .75) {\n      prev = mix(prev, texture2D(uPrev, clamp(vec2(uv.x + (hash(vec2(tY, 400.)) - .5) * .5 * amt, uv.y), 0., 1.)).rgb, .85);\n    }\n\n    if (hA > 0. && amt > .01) {\n      prev = mix(prev, gray(texture2D(uPrev, clamp(vec2(uv.x + (gray(prev).r - uv.x) * amt + hO, uv.y), 0., 1.)).rgb), hA);\n    }\n\n    float d = mix(mix(.97, .99, noise(uv * 8. + t * .2)), 0., step(.994, hash(vec2(tS, 0.))));\n    gl_FragColor = vec4(mix(texture2D(uCurrent, uv).rgb, prev, d), 1.);\n  }\n`\n\nconst outputFrag = /*glsl*/ `\n  uniform sampler2D uInput;\n  uniform float uTime, uAlpha, uHue;\n  uniform vec3 uColor;\n  varying vec2 vUv;\n\n  float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }\n\n  vec3 hueShift(vec3 c, float h) {\n    float a = h * 6.28318, s = sin(a), co = cos(a);\n    vec3 w = vec3(.299, .587, .114);\n    return clamp(vec3(\n      dot(c, w) + dot(c, vec3(.701, -.587, -.114) * co + vec3(.168, .330, -.497) * s),\n      dot(c, w) + dot(c, vec3(-.299, .413, -.114) * co + vec3(.328, .035, -.363) * s),\n      dot(c, w) + dot(c, vec3(-.299, -.587, .886) * co + vec3(-.497, .330, .168) * s)\n    ), 0., 1.);\n  }\n\n  void main() {\n    vec3 m = texture2D(uInput, vUv).rgb;\n    m *= 1. - step(.5, fract(vUv.y * 200.)) * .06 * step(.97, hash(vec2(floor(vUv.y * 30.), floor(uTime * .5))));\n\n    float lum = dot(m, vec3(.299, .587, .114));\n    gl_FragColor = vec4(hueShift(mix(vec3(lum), uColor * lum * 2., length(uColor)), uHue) * uAlpha, smoothstep(.08, .18, lum * uAlpha));\n  }\n`\n\nconst TEXTURES = [\n  '/anatomy/grays-0.jpg',\n  '/anatomy/grays-3.jpg',\n  '/anatomy/grays-6.jpg',\n  '/anatomy/grays-9.jpg'\n]\n\nexport function Greys({ className, style }: GreysProps) {\n  const gpuTier = useGpuTier()\n  const [blendOverride, setBlendOverride] = useState<string | null>(null)\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n\n  const c = useSmoothControls(\n    'Effects/Greys',\n    {\n      alpha: { max: 1, min: 0, step: 0.01, value: 0.19 },\n      blend: { options: BLEND_MODES, value: 'color-burn' },\n      color: { value: '#ffac02' },\n      drift: { max: 2, min: 0, step: 0.1, value: 0.5 },\n      enabled: { value: false },\n      folds: { max: 12, min: 1, step: 1, value: 1 },\n      hue: { max: 1, min: 0, step: 0.01, value: 0.37 },\n      intensity: { max: 3, min: 0, step: 0.1, value: 0.1 },\n      motion: { max: 2, min: 0, step: 0.1, value: 0.1 },\n      rotate: { max: 2, min: -2, step: 0.1, value: 0.3 },\n      speed: { max: 1, min: 0.01, step: 0.01, value: 0.21 },\n      zoom: { max: 4, min: 0.5, step: 0.1, value: 0.7 }\n    },\n    { collapsed: true }\n  )\n\n  const cRef = useRef(c)\n  cRef.current = c\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) =>\n      e.key.toLowerCase() === 'x' &&\n      setBlendOverride(p => (p === 'screen' ? null : 'screen'))\n\n    window.addEventListener('keydown', onKey)\n\n    return () => window.removeEventListener('keydown', onKey)\n  }, [])\n\n  const enabled = c.enabled && gpuTier === 2\n\n  useEffect(() => {\n    if (!canvasRef.current || !enabled) {\n      return\n    }\n\n    let renderer: THREE.WebGLRenderer\n\n    try {\n      renderer = new THREE.WebGLRenderer({\n        alpha: true,\n        canvas: canvasRef.current\n      })\n    } catch {\n      // See note in noise.tsx — eager gpu-tier detection should keep us\n      // out of here, but if the driver fails the renderer constructor\n      // anyway, downgrade so other overlays stop trying too.\n      $gpuTier.set(0)\n\n      return\n    }\n\n    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1)\n    const geo = new THREE.PlaneGeometry(2, 2)\n\n    const [rtSource, rtA, rtB] = [0, 1, 2].map(\n      () =>\n        new THREE.WebGLRenderTarget(innerWidth, innerHeight, {\n          magFilter: THREE.NearestFilter,\n          minFilter: THREE.NearestFilter\n        })\n    )\n\n    const textures = TEXTURES.map(p => {\n      const t = new THREE.TextureLoader().load(p)\n      t.wrapS = t.wrapT = THREE.ClampToEdgeWrapping\n      t.minFilter = t.magFilter = THREE.LinearFilter\n\n      return t\n    })\n\n    const texU = Object.fromEntries(\n      textures.map((t, i) => [`uTex${i}`, { value: t }])\n    )\n\n    const srcU = {\n      ...texU,\n      uDrift: { value: 0 },\n      uFolds: { value: 0 },\n      uRotate: { value: 0 },\n      uSpeed: { value: 0 },\n      uTime: { value: 0 },\n      uZoom: { value: 0 }\n    }\n\n    const moshU = {\n      ...texU,\n      uCurrent: { value: rtSource.texture },\n      uIntensity: { value: 0 },\n      uMotion: { value: 0 },\n      uPrev: { value: rtA.texture },\n      uRes: { value: new THREE.Vector2(innerWidth, innerHeight) },\n      uSpeed: { value: 0 },\n      uTime: { value: 0 },\n      uZoom: { value: 0 }\n    }\n\n    const outU = {\n      uAlpha: { value: 0 },\n      uColor: { value: new THREE.Color() },\n      uHue: { value: 0 },\n      uInput: { value: rtB.texture },\n      uTime: { value: 0 }\n    }\n\n    const mkScene = (frag: string, uniforms: object, transparent = false) => {\n      const s = new THREE.Scene()\n      s.add(\n        new THREE.Mesh(\n          geo.clone(),\n          new THREE.ShaderMaterial({\n            fragmentShader: frag,\n            transparent,\n            uniforms: uniforms as Record<string, THREE.IUniform<any>>,\n            vertexShader: vert\n          })\n        )\n      )\n\n      return s\n    }\n\n    const srcScene = mkScene(sourceFrag, srcU)\n    const moshScene = mkScene(moshFrag, moshU)\n    const outScene = mkScene(outputFrag, outU, true)\n\n    const resize = () => {\n      renderer.setSize(innerWidth, innerHeight)\n      renderer.setPixelRatio(Math.min(devicePixelRatio, 2))\n      ;[rtSource, rtA, rtB].forEach(rt => rt.setSize(innerWidth, innerHeight))\n      moshU.uRes.value.set(innerWidth, innerHeight)\n    }\n\n    resize()\n    window.addEventListener('resize', resize)\n\n    let raf: number,\n      ping = true,\n      time = 0\n\n    const loop = () => {\n      raf = requestAnimationFrame(loop)\n      time += 0.016\n\n      const v = cRef.current\n\n      srcU.uTime.value = time\n      srcU.uSpeed.value = v.speed\n      srcU.uZoom.value = v.zoom\n      srcU.uRotate.value = v.rotate\n      srcU.uFolds.value = v.folds\n      srcU.uDrift.value = v.drift\n\n      moshU.uTime.value = time\n      moshU.uIntensity.value = v.intensity\n      moshU.uMotion.value = v.motion\n      moshU.uSpeed.value = v.speed\n      moshU.uZoom.value = v.zoom\n\n      outU.uTime.value = time\n      outU.uAlpha.value = v.alpha\n      outU.uHue.value = v.hue\n      outU.uColor.value.set(typeof v.color === 'string' ? v.color : '#fff')\n\n      renderer.setRenderTarget(rtSource)\n      renderer.render(srcScene, camera)\n\n      const [read, write] = ping ? [rtA, rtB] : [rtB, rtA]\n      moshU.uPrev.value = read.texture\n      renderer.setRenderTarget(write)\n      renderer.render(moshScene, camera)\n\n      outU.uInput.value = write.texture\n      renderer.setRenderTarget(null)\n      renderer.render(outScene, camera)\n\n      ping = !ping\n    }\n\n    loop()\n\n    return () => {\n      window.removeEventListener('resize', resize)\n      cancelAnimationFrame(raf)\n      textures.forEach(t => t.dispose())\n      ;[geo, rtSource, rtA, rtB, renderer].forEach(x => x.dispose())\n    }\n  }, [enabled])\n\n  if (!enabled) {\n    return null\n  }\n\n  return (\n    <canvas\n      className={cn('h-full w-full', className)}\n      ref={canvasRef}\n      style={{\n        mixBlendMode: (blendOverride ??\n          c.blend) as React.CSSProperties['mixBlendMode'],\n        ...style\n      }}\n    />\n  )\n}\n\ninterface GreysProps {\n  className?: string\n  style?: React.CSSProperties\n}"]}
+{"version":3,"file":"greys.js","sourceRoot":"","sources":["../../../../src/ui/components/overlays/greys.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport * as THREE from 'three'\n\nimport { $gpuTier, useGpuTier } from '../../../hooks/use-gpu-tier'\nimport { runRenderLoop } from '../../../hooks/use-render-loop'\nimport { useSmoothControls } from '../../../hooks/use-smooth-controls'\nimport { cn } from '../../../utils'\n\nimport { BLEND_MODES } from './blend-modes'\n\nconst vert = /*glsl*/ `\n  varying vec2 vUv;\n  void main() {\n    vUv = uv;\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n  }\n`\n\nconst sourceFrag = /*glsl*/ `\n  uniform sampler2D uTex0, uTex1, uTex2, uTex3;\n  uniform float uTime, uZoom, uSpeed, uRotate, uFolds, uDrift;\n  varying vec2 vUv;\n\n  vec3 gray(vec3 c) { return vec3(dot(c, vec3(.299, .587, .114))); }\n  vec2 rot(vec2 p, float a) { return vec2(p.x * cos(a) - p.y * sin(a), p.x * sin(a) + p.y * cos(a)); }\n\n  vec2 kaleid(vec2 p, float n) {\n    float a = mod(atan(p.y, p.x), 6.28318 / n) - 3.14159 / n;\n    return length(p) * vec2(cos(a), sin(a));\n  }\n\n  vec4 tex(int i, vec2 uv) {\n    if (i == 0) return texture2D(uTex0, uv);\n    if (i == 1) return texture2D(uTex1, uv);\n    if (i == 2) return texture2D(uTex2, uv);\n    return texture2D(uTex3, uv);\n  }\n\n  void main() {\n    vec2 uv = rot(vUv - .5, uTime * uRotate * .05);\n    if (uFolds > 1.) uv = kaleid(uv, uFolds);\n\n    float dt = uTime * uDrift * .1;\n    uv = uv / uZoom + .5 + vec2(sin(dt * .7) * cos(dt * .3), cos(dt * .5) * sin(dt * .9)) * .15 * uDrift;\n\n    float cycle = mod(uTime * uSpeed * .01, 4.);\n    int i0 = int(floor(cycle)), i1 = int(mod(float(i0) + 1., 4.));\n    float t = smoothstep(0., 1., fract(cycle));\n\n    vec3 base = mix(gray(vec3(1.) - tex(i0, uv).rgb), gray(vec3(1.) - tex(i1, uv).rgb), t);\n    vec2 uvF = vec2(1. - uv.x, uv.y);\n    vec3 flip = mix(gray(vec3(1.) - tex(i0, uvF).rgb), gray(vec3(1.) - tex(i1, uvF).rgb), t);\n\n    gl_FragColor = vec4(mix(base, flip, .3 + sin(uTime * .2) * .2), 1.);\n  }\n`\n\nconst moshFrag = /*glsl*/ `\n  uniform sampler2D uCurrent, uPrev, uTex0, uTex1, uTex2, uTex3;\n  uniform float uTime, uIntensity, uMotion, uZoom, uSpeed;\n  uniform vec2 uRes;\n  varying vec2 vUv;\n\n  float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }\n  vec2 hash2(vec2 p) { return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453); }\n\n  float noise(vec2 p) {\n    vec2 i = floor(p), f = fract(p) * fract(p) * (3. - 2. * fract(p));\n    return mix(mix(hash(i), hash(i + vec2(1., 0.)), f.x), mix(hash(i + vec2(0., 1.)), hash(i + vec2(1., 1.)), f.x), f.y);\n  }\n\n  vec3 gray(vec3 c) { return vec3(dot(c, vec3(.299, .587, .114))); }\n\n  vec2 distort(vec2 uv, float k, float t) {\n    float n1 = noise(uv * 8. + t * .5), n2 = noise(uv * 12. + t * .7), flow = noise(uv * 4. + t * .3);\n    return uv + vec2(cos(n1 * 6.28 + t * 1.2), sin(n2 * 6.28 + t * .9)) * .02 * k\n             + vec2(cos(flow * 6.28 + uv.y * 10.), sin(flow * 6.28 + uv.x * 10.)) * .015 * k;\n  }\n\n  vec3 tex(int i, vec2 uv) {\n    vec2 zuv = (uv - .5) / uZoom + .5;\n    if (i == 0) return gray(vec3(1.) - texture2D(uTex0, zuv).rgb);\n    if (i == 1) return gray(vec3(1.) - texture2D(uTex1, zuv).rgb);\n    if (i == 2) return gray(vec3(1.) - texture2D(uTex2, zuv).rgb);\n    return gray(vec3(1.) - texture2D(uTex3, zuv).rgb);\n  }\n\n  void main() {\n    vec2 uv = vUv;\n    float t = uTime * uSpeed, tS = floor(t * .1), pS = 80.;\n    float amt = uIntensity * uMotion * .8 * (.7 + (sin(t * .5) * .5 + .5) * .3);\n\n    vec2 mUV = distort(uv, uIntensity * .4, t);\n\n    float hS = floor(uv.y * pS), hA = smoothstep(0., .8, hash(vec2(hS, tS)));\n    float hO = (hash(vec2(hS, tS + 50.)) - .5) * .25 * hA * amt;\n    float vS = floor(uv.x * pS), vA = smoothstep(0., .8, hash(vec2(vS, tS + 100.)));\n    float vO = (hash(vec2(vS, tS + 150.)) - .5) * .25 * vA * amt;\n    mUV += vec2(hO, vO);\n\n    float bS = pS * .25;\n    float hBA = step(.5, hash(vec2(floor(uv.y * bS), tS + 200.)));\n    float hBO = (hash(vec2(floor(uv.y * bS), 200.)) - .5) * .35 * hBA * amt;\n    float vBA = step(.5, hash(vec2(floor(uv.x * bS), tS + 300.)));\n    float vBO = (hash(vec2(floor(uv.x * bS), 250.)) - .5) * .35 * vBA * amt;\n    mUV += vec2(hBO, vBO);\n\n    vec2 blk = floor(uv * pS * .15);\n    mUV += (hash2(vec2(blk.x, blk.y + 500.)) - .5) * .4 * step(.7, hash(vec2(blk.x, blk.y + tS))) * amt;\n    mUV = clamp(mUV, 0., 1.);\n\n    vec3 prev = texture2D(uPrev, mUV).rgb;\n    prev = mix(prev, texture2D(uPrev, clamp(uv + vec2(hBO, vBO), 0., 1.)).rgb, max(hBA, vBA) * .9);\n\n    float tY = floor(uv.y * pS * .4);\n    if (hash(vec2(tY, tS + 400.)) > .75) {\n      prev = mix(prev, texture2D(uPrev, clamp(vec2(uv.x + (hash(vec2(tY, 400.)) - .5) * .5 * amt, uv.y), 0., 1.)).rgb, .85);\n    }\n\n    if (hA > 0. && amt > .01) {\n      prev = mix(prev, gray(texture2D(uPrev, clamp(vec2(uv.x + (gray(prev).r - uv.x) * amt + hO, uv.y), 0., 1.)).rgb), hA);\n    }\n\n    float d = mix(mix(.97, .99, noise(uv * 8. + t * .2)), 0., step(.994, hash(vec2(tS, 0.))));\n    gl_FragColor = vec4(mix(texture2D(uCurrent, uv).rgb, prev, d), 1.);\n  }\n`\n\nconst outputFrag = /*glsl*/ `\n  uniform sampler2D uInput;\n  uniform float uTime, uAlpha, uHue;\n  uniform vec3 uColor;\n  varying vec2 vUv;\n\n  float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }\n\n  vec3 hueShift(vec3 c, float h) {\n    float a = h * 6.28318, s = sin(a), co = cos(a);\n    vec3 w = vec3(.299, .587, .114);\n    return clamp(vec3(\n      dot(c, w) + dot(c, vec3(.701, -.587, -.114) * co + vec3(.168, .330, -.497) * s),\n      dot(c, w) + dot(c, vec3(-.299, .413, -.114) * co + vec3(.328, .035, -.363) * s),\n      dot(c, w) + dot(c, vec3(-.299, -.587, .886) * co + vec3(-.497, .330, .168) * s)\n    ), 0., 1.);\n  }\n\n  void main() {\n    vec3 m = texture2D(uInput, vUv).rgb;\n    m *= 1. - step(.5, fract(vUv.y * 200.)) * .06 * step(.97, hash(vec2(floor(vUv.y * 30.), floor(uTime * .5))));\n\n    float lum = dot(m, vec3(.299, .587, .114));\n    gl_FragColor = vec4(hueShift(mix(vec3(lum), uColor * lum * 2., length(uColor)), uHue) * uAlpha, smoothstep(.08, .18, lum * uAlpha));\n  }\n`\n\nconst TEXTURES = [\n  '/anatomy/grays-0.jpg',\n  '/anatomy/grays-3.jpg',\n  '/anatomy/grays-6.jpg',\n  '/anatomy/grays-9.jpg'\n]\n\nexport function Greys({ className, style }: GreysProps) {\n  const gpuTier = useGpuTier()\n  const [blendOverride, setBlendOverride] = useState<string | null>(null)\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n\n  const c = useSmoothControls(\n    'Effects/Greys',\n    {\n      alpha: { max: 1, min: 0, step: 0.01, value: 0.19 },\n      blend: { options: BLEND_MODES, value: 'color-burn' },\n      color: { value: '#ffac02' },\n      drift: { max: 2, min: 0, step: 0.1, value: 0.5 },\n      enabled: { value: false },\n      folds: { max: 12, min: 1, step: 1, value: 1 },\n      hue: { max: 1, min: 0, step: 0.01, value: 0.37 },\n      intensity: { max: 3, min: 0, step: 0.1, value: 0.1 },\n      motion: { max: 2, min: 0, step: 0.1, value: 0.1 },\n      rotate: { max: 2, min: -2, step: 0.1, value: 0.3 },\n      speed: { max: 1, min: 0.01, step: 0.01, value: 0.21 },\n      zoom: { max: 4, min: 0.5, step: 0.1, value: 0.7 }\n    },\n    { collapsed: true }\n  )\n\n  const cRef = useRef(c)\n  cRef.current = c\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) =>\n      e.key.toLowerCase() === 'x' &&\n      setBlendOverride(p => (p === 'screen' ? null : 'screen'))\n\n    window.addEventListener('keydown', onKey)\n\n    return () => window.removeEventListener('keydown', onKey)\n  }, [])\n\n  const enabled = c.enabled && gpuTier === 2\n\n  useEffect(() => {\n    if (!canvasRef.current || !enabled) {\n      return\n    }\n\n    let renderer: THREE.WebGLRenderer\n\n    try {\n      renderer = new THREE.WebGLRenderer({\n        alpha: true,\n        canvas: canvasRef.current\n      })\n    } catch {\n      // See note in noise.tsx — eager gpu-tier detection should keep us\n      // out of here, but if the driver fails the renderer constructor\n      // anyway, downgrade so other overlays stop trying too.\n      $gpuTier.set(0)\n\n      return\n    }\n\n    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1)\n    const geo = new THREE.PlaneGeometry(2, 2)\n\n    const [rtSource, rtA, rtB] = [0, 1, 2].map(\n      () =>\n        new THREE.WebGLRenderTarget(innerWidth, innerHeight, {\n          magFilter: THREE.NearestFilter,\n          minFilter: THREE.NearestFilter\n        })\n    )\n\n    const textures = TEXTURES.map(p => {\n      const t = new THREE.TextureLoader().load(p)\n      t.wrapS = t.wrapT = THREE.ClampToEdgeWrapping\n      t.minFilter = t.magFilter = THREE.LinearFilter\n\n      return t\n    })\n\n    const texU = Object.fromEntries(\n      textures.map((t, i) => [`uTex${i}`, { value: t }])\n    )\n\n    const srcU = {\n      ...texU,\n      uDrift: { value: 0 },\n      uFolds: { value: 0 },\n      uRotate: { value: 0 },\n      uSpeed: { value: 0 },\n      uTime: { value: 0 },\n      uZoom: { value: 0 }\n    }\n\n    const moshU = {\n      ...texU,\n      uCurrent: { value: rtSource.texture },\n      uIntensity: { value: 0 },\n      uMotion: { value: 0 },\n      uPrev: { value: rtA.texture },\n      uRes: { value: new THREE.Vector2(innerWidth, innerHeight) },\n      uSpeed: { value: 0 },\n      uTime: { value: 0 },\n      uZoom: { value: 0 }\n    }\n\n    const outU = {\n      uAlpha: { value: 0 },\n      uColor: { value: new THREE.Color() },\n      uHue: { value: 0 },\n      uInput: { value: rtB.texture },\n      uTime: { value: 0 }\n    }\n\n    const mkScene = (frag: string, uniforms: object, transparent = false) => {\n      const s = new THREE.Scene()\n      s.add(\n        new THREE.Mesh(\n          geo.clone(),\n          new THREE.ShaderMaterial({\n            fragmentShader: frag,\n            transparent,\n            uniforms: uniforms as Record<string, THREE.IUniform<any>>,\n            vertexShader: vert\n          })\n        )\n      )\n\n      return s\n    }\n\n    const srcScene = mkScene(sourceFrag, srcU)\n    const moshScene = mkScene(moshFrag, moshU)\n    const outScene = mkScene(outputFrag, outU, true)\n\n    const resize = () => {\n      renderer.setSize(innerWidth, innerHeight)\n      // Cap at 1.5x — Greys does triple-buffered ping-pong rendering at\n      // every frame, so retina x2 is brutal on fillrate.\n      renderer.setPixelRatio(Math.min(devicePixelRatio, 1.5))\n      ;[rtSource, rtA, rtB].forEach(rt => rt.setSize(innerWidth, innerHeight))\n      moshU.uRes.value.set(innerWidth, innerHeight)\n    }\n\n    resize()\n    window.addEventListener('resize', resize)\n\n    let ping = true,\n      time = 0\n\n    // 30fps cap — feedback effect, no perceptual loss vs 60fps but\n    // halves the cost of the heaviest overlay we ship.\n    const dispose = runRenderLoop({\n      el: canvasRef.current,\n      minIntervalMs: 33,\n      onFrame: deltaSeconds => {\n        time += deltaSeconds\n\n        const v = cRef.current\n\n        srcU.uTime.value = time\n        srcU.uSpeed.value = v.speed\n        srcU.uZoom.value = v.zoom\n        srcU.uRotate.value = v.rotate\n        srcU.uFolds.value = v.folds\n        srcU.uDrift.value = v.drift\n\n        moshU.uTime.value = time\n        moshU.uIntensity.value = v.intensity\n        moshU.uMotion.value = v.motion\n        moshU.uSpeed.value = v.speed\n        moshU.uZoom.value = v.zoom\n\n        outU.uTime.value = time\n        outU.uAlpha.value = v.alpha\n        outU.uHue.value = v.hue\n        outU.uColor.value.set(typeof v.color === 'string' ? v.color : '#fff')\n\n        renderer.setRenderTarget(rtSource)\n        renderer.render(srcScene, camera)\n\n        const [read, write] = ping ? [rtA, rtB] : [rtB, rtA]\n        moshU.uPrev.value = read.texture\n        renderer.setRenderTarget(write)\n        renderer.render(moshScene, camera)\n\n        outU.uInput.value = write.texture\n        renderer.setRenderTarget(null)\n        renderer.render(outScene, camera)\n\n        ping = !ping\n      }\n    })\n\n    return () => {\n      window.removeEventListener('resize', resize)\n      dispose()\n      textures.forEach(t => t.dispose())\n      ;[geo, rtSource, rtA, rtB, renderer].forEach(x => x.dispose())\n    }\n  }, [enabled])\n\n  if (!enabled) {\n    return null\n  }\n\n  return (\n    <canvas\n      className={cn('h-full w-full', className)}\n      ref={canvasRef}\n      style={{\n        mixBlendMode: (blendOverride ??\n          c.blend) as React.CSSProperties['mixBlendMode'],\n        ...style\n      }}\n    />\n  )\n}\n\ninterface GreysProps {\n  className?: string\n  style?: React.CSSProperties\n}"]}

package/dist/ui/components/overlays/noise.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"noise.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/overlays/noise.tsx"],"names":[],"mappings":"AAqCA,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,UAAU,kDA6HrD;AAED,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B"}
+{"version":3,"file":"noise.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/overlays/noise.tsx"],"names":[],"mappings":"AAqCA,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,UAAU,kDAmIrD;AAED,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B"}

package/dist/ui/components/overlays/noise.js

@@ -41,9 +41,16 @@ export function Noise({ className, style }) {
         size: { max: 10, min: 0.1, step: 0.1, value: 1 }
     }, { collapsed: true });
     const canvasRef = useRef(null);
-    const cRef = useRef(c);
-    cRef.current = c;
     const enabled = c.enabled && gpuTier > 0;
+    // The noise shader is fully deterministic: given the same uniforms it
+    // produces an identical output every frame. The previous version ran
+    // it at 60fps forever, which on a retina display with mix-blend-mode
+    // is enough to peg the GPU/compositor for the entire lifetime of the
+    // page (this is the dominant contributor to the "fans go crazy after
+    // a few hours of idle" symptom).
+    //
+    // Instead we render exactly once on mount, and re-render only when
+    // the user-controllable uniforms change or the viewport resizes.
     useEffect(() => {
         if (!canvasRef.current || !enabled) {
             return;
@@ -57,10 +64,6 @@ export function Noise({ className, style }) {
             });
         }
         catch {
-            // Belt-and-braces: the gpu-tier hook should already have downgraded
-            // to 0 before we render, but if a driver fails the renderer
-            // constructor anyway (e.g. context loss between probe and use), make
-            // sure no other overlay tries again.
             $gpuTier.set(0);
             return;
         }
@@ -82,42 +85,49 @@ export function Noise({ className, style }) {
             vertexShader: vert
         });
         scene.add(new THREE.Mesh(geo, mat));
+        // Cap pixel ratio at 1.5 — noise is intentionally pixelated, so the
+        // extra retina samples are wasted fillrate.
+        const dpr = Math.min(devicePixelRatio, 1.5);
+        const render = () => {
+            mat.uniforms.uColor.value = hexToVec3(c.color);
+            mat.uniforms.uDensity.value = c.density;
+            mat.uniforms.uOpacity.value = c.opacity;
+            mat.uniforms.uSize.value = c.size;
+            mat.uniforms.uDpr.value = dpr;
+            renderer.render(scene, camera);
+        };
         const resize = () => {
             renderer.setSize(innerWidth, innerHeight);
-            renderer.setPixelRatio(devicePixelRatio);
-            mat.uniforms.uRes.value.set(innerWidth * devicePixelRatio, innerHeight * devicePixelRatio);
-            mat.uniforms.uDpr.value = devicePixelRatio;
+            renderer.setPixelRatio(dpr);
+            mat.uniforms.uRes.value.set(innerWidth * dpr, innerHeight * dpr);
+            render();
         };
         resize();
         window.addEventListener('resize', resize);
-        let raf;
-        const interval = gpuTier === 1 ? 100 : 0;
-        const loop = () => {
-            raf = interval
-                ? setTimeout(loop, interval)
-                : requestAnimationFrame(loop);
-            const v = cRef.current;
-            mat.uniforms.uSize.value = v.size;
-            mat.uniforms.uDensity.value = v.density;
-            mat.uniforms.uColor.value = hexToVec3(v.color);
-            mat.uniforms.uOpacity.value = v.opacity;
-            renderer.render(scene, camera);
+        // Re-render when the tab becomes visible again, in case the GL
+        // context was discarded by the browser while the page was
+        // backgrounded — otherwise we can come back to a transparent canvas.
+        const onVisibility = () => {
+            if (!document.hidden)
+                render();
         };
-        loop();
+        document.addEventListener('visibilitychange', onVisibility);
         return () => {
             window.removeEventListener('resize', resize);
-            if (interval) {
-                clearTimeout(raf);
-            }
-            else {
-                cancelAnimationFrame(raf);
-            }
+            document.removeEventListener('visibilitychange', onVisibility);
             mat.dispose();
             geo.dispose();
             renderer.dispose();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [enabled, gpuTier]);
+    }, [
+        enabled,
+        gpuTier,
+        c.color,
+        c.density,
+        c.opacity,
+        c.size
+    ]);
     if (!enabled) {
         return null;
     }

package/dist/ui/components/overlays/noise.js.map

@@ -1 +1 @@
-{"version":3,"file":"noise.js","sourceRoot":"","sources":["../../../../src/ui/components/overlays/noise.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { useEffect, useRef } from 'react'\nimport * as THREE from 'three'\n\nimport { $gpuTier, useGpuTier } from '../../../hooks/use-gpu-tier'\nimport { useSmoothControls } from '../../../hooks/use-smooth-controls'\nimport { cn, hexToVec3 } from '../../../utils'\n\nimport { BLEND_MODES } from './blend-modes'\n\nconst vert = /*glsl*/ `\n  varying vec2 vUv;\n  void main() {\n    vUv = uv;\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n  }\n`\n\nconst frag = /*glsl*/ `\n  uniform vec2 uRes;\n  uniform float uDpr, uSize, uDensity, uOpacity;\n  uniform vec3 uColor;\n  varying vec2 vUv;\n\n  float hash(vec2 p) {\n    vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n    p3 += dot(p3, p3.yzx + 33.33);\n    return fract((p3.x + p3.y) * p3.z);\n  }\n\n  void main() {\n    float n = hash(floor(vUv * uRes / (uSize * uDpr)));\n    gl_FragColor = vec4(uColor, step(1.0 - uDensity, n)) * uOpacity;\n  }\n`\n\nexport function Noise({ className, style }: NoiseProps) {\n  const gpuTier = useGpuTier()\n\n  const c = useSmoothControls(\n    'Effects/Noise',\n    {\n      blend: { options: BLEND_MODES, value: 'color-dodge' as const },\n      color: { value: '#eaeaea' },\n      density: { max: 1, min: 0, step: 0.01, value: 0.11 },\n      enabled: { value: true },\n      opacity: { max: 1, min: 0, step: 0.01, value: 0.55 },\n      size: { max: 10, min: 0.1, step: 0.1, value: 1 }\n    },\n    { collapsed: true }\n  )\n\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const cRef = useRef(c)\n  cRef.current = c\n\n  const enabled = c.enabled && gpuTier > 0\n\n  useEffect(() => {\n    if (!canvasRef.current || !enabled) {\n      return\n    }\n\n    let renderer: THREE.WebGLRenderer\n\n    try {\n      renderer = new THREE.WebGLRenderer({\n        alpha: true,\n        canvas: canvasRef.current,\n        premultipliedAlpha: false\n      })\n    } catch {\n      // Belt-and-braces: the gpu-tier hook should already have downgraded\n      // to 0 before we render, but if a driver fails the renderer\n      // constructor anyway (e.g. context loss between probe and use), make\n      // sure no other overlay tries again.\n      $gpuTier.set(0)\n\n      return\n    }\n\n    renderer.setClearColor(0x000000, 0)\n\n    const scene = new THREE.Scene()\n    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1)\n    const geo = new THREE.PlaneGeometry(2, 2)\n\n    const mat = new THREE.ShaderMaterial({\n      fragmentShader: frag,\n      transparent: true,\n      uniforms: {\n        uColor: { value: hexToVec3(c.color) },\n        uDensity: { value: c.density },\n        uDpr: { value: 1 },\n        uOpacity: { value: c.opacity },\n        uRes: { value: new THREE.Vector2() },\n        uSize: { value: c.size }\n      },\n      vertexShader: vert\n    })\n\n    scene.add(new THREE.Mesh(geo, mat))\n\n    const resize = () => {\n      renderer.setSize(innerWidth, innerHeight)\n      renderer.setPixelRatio(devicePixelRatio)\n      mat.uniforms.uRes.value.set(\n        innerWidth * devicePixelRatio,\n        innerHeight * devicePixelRatio\n      )\n      mat.uniforms.uDpr.value = devicePixelRatio\n    }\n\n    resize()\n    window.addEventListener('resize', resize)\n\n    let raf: number\n    const interval = gpuTier === 1 ? 100 : 0\n\n    const loop = () => {\n      raf = interval\n        ? (setTimeout(loop, interval) as unknown as number)\n        : requestAnimationFrame(loop)\n\n      const v = cRef.current\n      mat.uniforms.uSize.value = v.size\n      mat.uniforms.uDensity.value = v.density\n      mat.uniforms.uColor.value = hexToVec3(v.color)\n      mat.uniforms.uOpacity.value = v.opacity\n      renderer.render(scene, camera)\n    }\n\n    loop()\n\n    return () => {\n      window.removeEventListener('resize', resize)\n\n      if (interval) {\n        clearTimeout(raf)\n      } else {\n        cancelAnimationFrame(raf)\n      }\n\n      mat.dispose()\n      geo.dispose()\n      renderer.dispose()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [enabled, gpuTier])\n\n  if (!enabled) {\n    return null\n  }\n\n  return (\n    <canvas\n      className={cn('h-full w-full', className)}\n      ref={canvasRef}\n      style={{ mixBlendMode: c.blend, ...style }}\n    />\n  )\n}\n\ninterface NoiseProps {\n  className?: string\n  style?: React.CSSProperties\n}\n"]}
+{"version":3,"file":"noise.js","sourceRoot":"","sources":["../../../../src/ui/components/overlays/noise.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { useEffect, useRef } from 'react'\nimport * as THREE from 'three'\n\nimport { $gpuTier, useGpuTier } from '../../../hooks/use-gpu-tier'\nimport { useSmoothControls } from '../../../hooks/use-smooth-controls'\nimport { cn, hexToVec3 } from '../../../utils'\n\nimport { BLEND_MODES } from './blend-modes'\n\nconst vert = /*glsl*/ `\n  varying vec2 vUv;\n  void main() {\n    vUv = uv;\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n  }\n`\n\nconst frag = /*glsl*/ `\n  uniform vec2 uRes;\n  uniform float uDpr, uSize, uDensity, uOpacity;\n  uniform vec3 uColor;\n  varying vec2 vUv;\n\n  float hash(vec2 p) {\n    vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n    p3 += dot(p3, p3.yzx + 33.33);\n    return fract((p3.x + p3.y) * p3.z);\n  }\n\n  void main() {\n    float n = hash(floor(vUv * uRes / (uSize * uDpr)));\n    gl_FragColor = vec4(uColor, step(1.0 - uDensity, n)) * uOpacity;\n  }\n`\n\nexport function Noise({ className, style }: NoiseProps) {\n  const gpuTier = useGpuTier()\n\n  const c = useSmoothControls(\n    'Effects/Noise',\n    {\n      blend: { options: BLEND_MODES, value: 'color-dodge' as const },\n      color: { value: '#eaeaea' },\n      density: { max: 1, min: 0, step: 0.01, value: 0.11 },\n      enabled: { value: true },\n      opacity: { max: 1, min: 0, step: 0.01, value: 0.55 },\n      size: { max: 10, min: 0.1, step: 0.1, value: 1 }\n    },\n    { collapsed: true }\n  )\n\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n\n  const enabled = c.enabled && gpuTier > 0\n\n  // The noise shader is fully deterministic: given the same uniforms it\n  // produces an identical output every frame. The previous version ran\n  // it at 60fps forever, which on a retina display with mix-blend-mode\n  // is enough to peg the GPU/compositor for the entire lifetime of the\n  // page (this is the dominant contributor to the \"fans go crazy after\n  // a few hours of idle\" symptom).\n  //\n  // Instead we render exactly once on mount, and re-render only when\n  // the user-controllable uniforms change or the viewport resizes.\n  useEffect(() => {\n    if (!canvasRef.current || !enabled) {\n      return\n    }\n\n    let renderer: THREE.WebGLRenderer\n\n    try {\n      renderer = new THREE.WebGLRenderer({\n        alpha: true,\n        canvas: canvasRef.current,\n        premultipliedAlpha: false\n      })\n    } catch {\n      $gpuTier.set(0)\n\n      return\n    }\n\n    renderer.setClearColor(0x000000, 0)\n\n    const scene = new THREE.Scene()\n    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1)\n    const geo = new THREE.PlaneGeometry(2, 2)\n\n    const mat = new THREE.ShaderMaterial({\n      fragmentShader: frag,\n      transparent: true,\n      uniforms: {\n        uColor: { value: hexToVec3(c.color) },\n        uDensity: { value: c.density },\n        uDpr: { value: 1 },\n        uOpacity: { value: c.opacity },\n        uRes: { value: new THREE.Vector2() },\n        uSize: { value: c.size }\n      },\n      vertexShader: vert\n    })\n\n    scene.add(new THREE.Mesh(geo, mat))\n\n    // Cap pixel ratio at 1.5 — noise is intentionally pixelated, so the\n    // extra retina samples are wasted fillrate.\n    const dpr = Math.min(devicePixelRatio, 1.5)\n\n    const render = () => {\n      mat.uniforms.uColor.value = hexToVec3(c.color)\n      mat.uniforms.uDensity.value = c.density\n      mat.uniforms.uOpacity.value = c.opacity\n      mat.uniforms.uSize.value = c.size\n      mat.uniforms.uDpr.value = dpr\n      renderer.render(scene, camera)\n    }\n\n    const resize = () => {\n      renderer.setSize(innerWidth, innerHeight)\n      renderer.setPixelRatio(dpr)\n      mat.uniforms.uRes.value.set(innerWidth * dpr, innerHeight * dpr)\n      render()\n    }\n\n    resize()\n    window.addEventListener('resize', resize)\n\n    // Re-render when the tab becomes visible again, in case the GL\n    // context was discarded by the browser while the page was\n    // backgrounded — otherwise we can come back to a transparent canvas.\n    const onVisibility = () => {\n      if (!document.hidden) render()\n    }\n\n    document.addEventListener('visibilitychange', onVisibility)\n\n    return () => {\n      window.removeEventListener('resize', resize)\n      document.removeEventListener('visibilitychange', onVisibility)\n\n      mat.dispose()\n      geo.dispose()\n      renderer.dispose()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    enabled,\n    gpuTier,\n    c.color,\n    c.density,\n    c.opacity,\n    c.size\n  ])\n\n  if (!enabled) {\n    return null\n  }\n\n  return (\n    <canvas\n      className={cn('h-full w-full', className)}\n      ref={canvasRef}\n      style={{ mixBlendMode: c.blend, ...style }}\n    />\n  )\n}\n\ninterface NoiseProps {\n  className?: string\n  style?: React.CSSProperties\n}\n"]}

package/dist/ui/components/scene-canvas.d.ts

@@ -1,4 +1,4 @@
-export declare function SceneCanvas({ camera, children, className, contained, noEvents, style }: SceneCanvasProps): import("react/jsx-runtime").JSX.Element;
+export declare function SceneCanvas({ camera, children, className, contained, frameloop, noEvents, style }: SceneCanvasProps): import("react/jsx-runtime").JSX.Element;
 interface SceneCanvasProps {
     camera?: {
         far?: number;
@@ -9,6 +9,14 @@ interface SceneCanvasProps {
     children: () => React.ReactNode;
     className?: string;
     contained?: boolean;
+    /**
+     * R3F frame-loop mode. Defaults to `'always'` for backwards
+     * compatibility, but `'demand'` is strongly preferred for static
+     * scenes (use `invalidate()` from `useThree` to request frames). The
+     * canvas additionally pauses (forces `'never'`) while the document
+     * is hidden, regardless of this setting.
+     */
+    frameloop?: 'always' | 'demand' | 'never';
     noEvents?: boolean;
     style?: React.CSSProperties;
 }

package/dist/ui/components/scene-canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scene-canvas.d.ts","sourceRoot":"","sources":["../../../src/ui/components/scene-canvas.tsx"],"names":[],"mappings":"AAqHA,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,KAAK,EACN,EAAE,gBAAgB,2CAwFlB;AAED,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE;QACP,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;QACnC,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;IACD,QAAQ,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B"}
+{"version":3,"file":"scene-canvas.d.ts","sourceRoot":"","sources":["../../../src/ui/components/scene-canvas.tsx"],"names":[],"mappings":"AAqHA,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAoB,EACpB,QAAQ,EACR,KAAK,EACN,EAAE,gBAAgB,2CA0GlB;AAED,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE;QACP,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;QACnC,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;IACD,QAAQ,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B"}

package/dist/ui/components/scene-canvas.js

@@ -70,7 +70,7 @@ function PositionedGroup({ baseZoom, bounds, children }) {
     });
     return _jsx("group", { ref: ref, children: children });
 }
-export function SceneCanvas({ camera, children, className, contained, noEvents, style }) {
+export function SceneCanvas({ camera, children, className, contained, frameloop = 'always', noEvents, style }) {
     const [container, setContainer] = useState(null);
     const baseZoom = camera?.zoom ?? 150;
     const bounds = useBounds(contained ? (container?.parentElement ?? null) : null);
@@ -88,13 +88,24 @@ export function SceneCanvas({ camera, children, className, contained, noEvents,
             window.removeEventListener('pointerup', unlock);
         };
     }, [container, contained, noEvents]);
+    // Pause the R3F render loop when the tab is hidden. Even on
+    // `frameloop="always"` scenes we don't want the GPU running while the
+    // user can't see anything — this is the dominant fix for the "fans
+    // crank up after hours of idle" symptom.
+    const [pageHidden, setPageHidden] = useState(typeof document !== 'undefined' && document.hidden);
+    useEffect(() => {
+        const onVisibility = () => setPageHidden(document.hidden);
+        document.addEventListener('visibilitychange', onVisibility);
+        return () => document.removeEventListener('visibilitychange', onVisibility);
+    }, []);
+    const effectiveFrameloop = pageHidden ? 'never' : frameloop;
     const cam = useMemo(() => ({
         far: camera?.far ?? 100,
         near: camera?.near ?? -100,
         position: camera?.position ?? [0, 0, 10],
         zoom: baseZoom * (contained ? 1 : 2)
     }), [baseZoom, camera, contained]);
-    const canvas = (_jsx(Canvas, { camera: cam, className: className, dpr: [1, 2], eventPrefix: contained ? 'client' : 'offset', eventSource: contained ? (container ?? undefined) : undefined, gl: GL, orthographic: true, style: contained
+    const canvas = (_jsx(Canvas, { camera: cam, className: className, dpr: [1, 2], eventPrefix: contained ? 'client' : 'offset', eventSource: contained ? (container ?? undefined) : undefined, frameloop: effectiveFrameloop, gl: GL, orthographic: true, style: contained
             ? {
                 height: '100dvh',
                 inset: 0,

package/dist/ui/components/scene-canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"scene-canvas.js","sourceRoot":"","sources":["../../../src/ui/components/scene-canvas.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { Canvas, useFrame, useThree } from '@react-three/fiber'\nimport {\n  Suspense,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react'\nimport * as THREE from 'three'\n\nconst GL = {\n  alpha: true,\n  antialias: true,\n  depth: true,\n  outputColorSpace: 'srgb',\n  powerPreference: 'high-performance',\n  stencil: false\n} as const\n\nconst tmp = {\n  camDir: new THREE.Vector3(),\n  hit: new THREE.Vector3(),\n  ndc: new THREE.Vector2(),\n  origin: new THREE.Vector3(0, 0, 0),\n  plane: new THREE.Plane(),\n  ray: new THREE.Raycaster()\n}\n\ntype Bounds = { height: number; pageX: number; pageY: number; width: number }\n\nfunction useBounds(target: HTMLElement | null) {\n  const bounds = useRef<Bounds | null>(null)\n\n  useLayoutEffect(() => {\n    if (!target) {\n      return\n    }\n\n    const measure = () => {\n      const b = target.getBoundingClientRect()\n      bounds.current = {\n        height: b.height,\n        pageX: b.left + window.scrollX,\n        pageY: b.top + window.scrollY,\n        width: b.width\n      }\n    }\n\n    measure()\n\n    const ro = new ResizeObserver(measure)\n    ro.observe(target)\n    ro.observe(document.body)\n    window.addEventListener('resize', measure, { passive: true })\n\n    return () => {\n      ro.disconnect()\n      window.removeEventListener('resize', measure)\n    }\n  }, [target])\n\n  return bounds\n}\n\nfunction PositionedGroup({\n  baseZoom,\n  bounds,\n  children\n}: React.PropsWithChildren<{\n  baseZoom: number\n  bounds: React.RefObject<Bounds | null>\n}>) {\n  const ref = useRef<THREE.Group>(null)\n  const { camera, size, viewport } = useThree()\n\n  useFrame(() => {\n    const g = ref.current\n    const b = bounds.current\n\n    if (!g || !b) {\n      return\n    }\n\n    const left = b.pageX - window.scrollX\n    const top = b.pageY - window.scrollY\n\n    tmp.ndc.set(\n      ((left + b.width / 2) / size.width) * 2 - 1,\n      1 - ((top + b.height / 2) / size.height) * 2\n    )\n\n    camera.getWorldDirection(tmp.camDir)\n    tmp.plane.setFromNormalAndCoplanarPoint(tmp.camDir, tmp.origin)\n    tmp.ray.setFromCamera(tmp.ndc, camera)\n\n    const hit = tmp.ray.ray.intersectPlane(tmp.plane, tmp.hit)\n\n    if (hit) {\n      g.position.copy(hit)\n    }\n\n    const zoom = (camera as THREE.Camera & { zoom?: number }).zoom ?? 1\n\n    g.scale.setScalar(\n      Math.min(\n        (b.width / size.width) * viewport.width,\n        (b.height / size.height) * viewport.height\n      ) * (baseZoom > 0 ? zoom / baseZoom : 1)\n    )\n  })\n\n  return <group ref={ref}>{children}</group>\n}\n\nexport function SceneCanvas({\n  camera,\n  children,\n  className,\n  contained,\n  noEvents,\n  style\n}: SceneCanvasProps) {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const baseZoom = camera?.zoom ?? 150\n\n  const bounds = useBounds(\n    contained ? (container?.parentElement ?? null) : null\n  )\n\n  useEffect(() => {\n    const el = contained && !noEvents ? container : null\n\n    if (!el) {\n      return\n    }\n\n    const lock = () => (document.body.style.userSelect = 'none')\n    const unlock = () => (document.body.style.userSelect = '')\n\n    el.addEventListener('pointerdown', lock)\n    window.addEventListener('pointerup', unlock)\n\n    return () => {\n      el.removeEventListener('pointerdown', lock)\n      window.removeEventListener('pointerup', unlock)\n    }\n  }, [container, contained, noEvents])\n\n  const cam = useMemo(\n    () => ({\n      far: camera?.far ?? 100,\n      near: camera?.near ?? -100,\n      position: camera?.position ?? ([0, 0, 10] as [number, number, number]),\n      zoom: baseZoom * (contained ? 1 : 2)\n    }),\n    [baseZoom, camera, contained]\n  )\n\n  const canvas = (\n    <Canvas\n      camera={cam}\n      className={className}\n      dpr={[1, 2]}\n      eventPrefix={contained ? 'client' : 'offset'}\n      eventSource={contained ? (container ?? undefined) : undefined}\n      gl={GL}\n      orthographic\n      style={\n        contained\n          ? {\n              height: '100dvh',\n              inset: 0,\n              pointerEvents: 'none',\n              position: 'fixed',\n              width: '100dvw',\n              zIndex: 0,\n              ...style\n            }\n          : { height: '100%', width: '100%', ...style }\n      }\n    >\n      {contained ? (\n        <PositionedGroup baseZoom={baseZoom} bounds={bounds}>\n          {children()}\n        </PositionedGroup>\n      ) : (\n        children()\n      )}\n    </Canvas>\n  )\n\n  return contained ? (\n    <Suspense>\n      <div\n        ref={setContainer}\n        style={{\n          height: '100%',\n          inset: 0,\n          pointerEvents: noEvents ? 'none' : 'auto',\n          position: 'absolute',\n          width: '100%',\n          zIndex: 1\n        }}\n      />\n      {canvas}\n    </Suspense>\n  ) : (\n    canvas\n  )\n}\n\ninterface SceneCanvasProps {\n  camera?: {\n    far?: number\n    near?: number\n    position?: [number, number, number]\n    zoom?: number\n  }\n  children: () => React.ReactNode\n  className?: string\n  contained?: boolean\n  noEvents?: boolean\n  style?: React.CSSProperties\n}\n"]}
+{"version":3,"file":"scene-canvas.js","sourceRoot":"","sources":["../../../src/ui/components/scene-canvas.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { Canvas, useFrame, useThree } from '@react-three/fiber'\nimport {\n  Suspense,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react'\nimport * as THREE from 'three'\n\nconst GL = {\n  alpha: true,\n  antialias: true,\n  depth: true,\n  outputColorSpace: 'srgb',\n  powerPreference: 'high-performance',\n  stencil: false\n} as const\n\nconst tmp = {\n  camDir: new THREE.Vector3(),\n  hit: new THREE.Vector3(),\n  ndc: new THREE.Vector2(),\n  origin: new THREE.Vector3(0, 0, 0),\n  plane: new THREE.Plane(),\n  ray: new THREE.Raycaster()\n}\n\ntype Bounds = { height: number; pageX: number; pageY: number; width: number }\n\nfunction useBounds(target: HTMLElement | null) {\n  const bounds = useRef<Bounds | null>(null)\n\n  useLayoutEffect(() => {\n    if (!target) {\n      return\n    }\n\n    const measure = () => {\n      const b = target.getBoundingClientRect()\n      bounds.current = {\n        height: b.height,\n        pageX: b.left + window.scrollX,\n        pageY: b.top + window.scrollY,\n        width: b.width\n      }\n    }\n\n    measure()\n\n    const ro = new ResizeObserver(measure)\n    ro.observe(target)\n    ro.observe(document.body)\n    window.addEventListener('resize', measure, { passive: true })\n\n    return () => {\n      ro.disconnect()\n      window.removeEventListener('resize', measure)\n    }\n  }, [target])\n\n  return bounds\n}\n\nfunction PositionedGroup({\n  baseZoom,\n  bounds,\n  children\n}: React.PropsWithChildren<{\n  baseZoom: number\n  bounds: React.RefObject<Bounds | null>\n}>) {\n  const ref = useRef<THREE.Group>(null)\n  const { camera, size, viewport } = useThree()\n\n  useFrame(() => {\n    const g = ref.current\n    const b = bounds.current\n\n    if (!g || !b) {\n      return\n    }\n\n    const left = b.pageX - window.scrollX\n    const top = b.pageY - window.scrollY\n\n    tmp.ndc.set(\n      ((left + b.width / 2) / size.width) * 2 - 1,\n      1 - ((top + b.height / 2) / size.height) * 2\n    )\n\n    camera.getWorldDirection(tmp.camDir)\n    tmp.plane.setFromNormalAndCoplanarPoint(tmp.camDir, tmp.origin)\n    tmp.ray.setFromCamera(tmp.ndc, camera)\n\n    const hit = tmp.ray.ray.intersectPlane(tmp.plane, tmp.hit)\n\n    if (hit) {\n      g.position.copy(hit)\n    }\n\n    const zoom = (camera as THREE.Camera & { zoom?: number }).zoom ?? 1\n\n    g.scale.setScalar(\n      Math.min(\n        (b.width / size.width) * viewport.width,\n        (b.height / size.height) * viewport.height\n      ) * (baseZoom > 0 ? zoom / baseZoom : 1)\n    )\n  })\n\n  return <group ref={ref}>{children}</group>\n}\n\nexport function SceneCanvas({\n  camera,\n  children,\n  className,\n  contained,\n  frameloop = 'always',\n  noEvents,\n  style\n}: SceneCanvasProps) {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const baseZoom = camera?.zoom ?? 150\n\n  const bounds = useBounds(\n    contained ? (container?.parentElement ?? null) : null\n  )\n\n  useEffect(() => {\n    const el = contained && !noEvents ? container : null\n\n    if (!el) {\n      return\n    }\n\n    const lock = () => (document.body.style.userSelect = 'none')\n    const unlock = () => (document.body.style.userSelect = '')\n\n    el.addEventListener('pointerdown', lock)\n    window.addEventListener('pointerup', unlock)\n\n    return () => {\n      el.removeEventListener('pointerdown', lock)\n      window.removeEventListener('pointerup', unlock)\n    }\n  }, [container, contained, noEvents])\n\n  // Pause the R3F render loop when the tab is hidden. Even on\n  // `frameloop=\"always\"` scenes we don't want the GPU running while the\n  // user can't see anything — this is the dominant fix for the \"fans\n  // crank up after hours of idle\" symptom.\n  const [pageHidden, setPageHidden] = useState(\n    typeof document !== 'undefined' && document.hidden\n  )\n\n  useEffect(() => {\n    const onVisibility = () => setPageHidden(document.hidden)\n    document.addEventListener('visibilitychange', onVisibility)\n\n    return () => document.removeEventListener('visibilitychange', onVisibility)\n  }, [])\n\n  const effectiveFrameloop = pageHidden ? 'never' : frameloop\n\n  const cam = useMemo(\n    () => ({\n      far: camera?.far ?? 100,\n      near: camera?.near ?? -100,\n      position: camera?.position ?? ([0, 0, 10] as [number, number, number]),\n      zoom: baseZoom * (contained ? 1 : 2)\n    }),\n    [baseZoom, camera, contained]\n  )\n\n  const canvas = (\n    <Canvas\n      camera={cam}\n      className={className}\n      dpr={[1, 2]}\n      eventPrefix={contained ? 'client' : 'offset'}\n      eventSource={contained ? (container ?? undefined) : undefined}\n      frameloop={effectiveFrameloop}\n      gl={GL}\n      orthographic\n      style={\n        contained\n          ? {\n              height: '100dvh',\n              inset: 0,\n              pointerEvents: 'none',\n              position: 'fixed',\n              width: '100dvw',\n              zIndex: 0,\n              ...style\n            }\n          : { height: '100%', width: '100%', ...style }\n      }\n    >\n      {contained ? (\n        <PositionedGroup baseZoom={baseZoom} bounds={bounds}>\n          {children()}\n        </PositionedGroup>\n      ) : (\n        children()\n      )}\n    </Canvas>\n  )\n\n  return contained ? (\n    <Suspense>\n      <div\n        ref={setContainer}\n        style={{\n          height: '100%',\n          inset: 0,\n          pointerEvents: noEvents ? 'none' : 'auto',\n          position: 'absolute',\n          width: '100%',\n          zIndex: 1\n        }}\n      />\n      {canvas}\n    </Suspense>\n  ) : (\n    canvas\n  )\n}\n\ninterface SceneCanvasProps {\n  camera?: {\n    far?: number\n    near?: number\n    position?: [number, number, number]\n    zoom?: number\n  }\n  children: () => React.ReactNode\n  className?: string\n  contained?: boolean\n  /**\n   * R3F frame-loop mode. Defaults to `'always'` for backwards\n   * compatibility, but `'demand'` is strongly preferred for static\n   * scenes (use `invalidate()` from `useThree` to request frames). The\n   * canvas additionally pauses (forces `'never'`) while the document\n   * is hidden, regardless of this setting.\n   */\n  frameloop?: 'always' | 'demand' | 'never'\n  noEvents?: boolean\n  style?: React.CSSProperties\n}\n"]}

package/dist/ui/components/tier-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tier-card.d.ts","sourceRoot":"","sources":["../../../src/ui/components/tier-card.tsx"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAiB,EACjB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,YAAY,EACZ,KAAK,EACN,EAAE,aAAa,2CAsHf;AAED,MAAM,WAAW,aAAa;IAC5B,gDAAgD;IAChD,OAAO,EAAE,MAAM,CAAA;IACf,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,MAAM,WAAW,aAAa;IAC5B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,6CAA6C;IAC7C,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,2GAA2G;IAC3G,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,aAAa,CAAA;IACpB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,YAAY,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAA;IACnD,4BAA4B;IAC5B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB"}
+{"version":3,"file":"tier-card.d.ts","sourceRoot":"","sources":["../../../src/ui/components/tier-card.tsx"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAiB,EACjB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,YAAY,EACZ,KAAK,EACN,EAAE,aAAa,2CAqHf;AAED,MAAM,WAAW,aAAa;IAC5B,gDAAgD;IAChD,OAAO,EAAE,MAAM,CAAA;IACf,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,MAAM,WAAW,aAAa;IAC5B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,6CAA6C;IAC7C,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,2GAA2G;IAC3G,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,aAAa,CAAA;IACpB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,YAAY,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAA;IACnD,4BAA4B;IAC5B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB"}

package/dist/ui/components/tier-card.js

@@ -3,7 +3,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { cn } from '../../utils';
 import { ImageDistortion } from './image-distortion';
 import { Typography } from './typography';
-import { Small } from './typography/small';
 /**
  * Selectable tier / pricing card. Full-bleed distorted image background,
  * readable overlay text, and an animated `.arc-border` shimmer on the
@@ -21,6 +20,6 @@ import { Small } from './typography/small';
  *   base tint.
  */
 export function TierCard({ badge, bullets, className, image, isCurrent = false, onSelect, overlay, price, selected = false, tint, tintStrength, title }) {
-    return (_jsxs("button", { className: cn('group relative flex w-full cursor-pointer flex-col border border-current/20', 'text-left transition-colors duration-300', selected && 'border-midground/60', isCurrent && !selected && 'border-midground/30', className), onClick: onSelect, type: "button", children: [_jsx("span", { "aria-hidden": true, className: cn('arc-border transition-opacity duration-200', selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100') }), _jsxs("div", { className: "relative aspect-[3/4] min-h-0 w-full flex-1 overflow-hidden", style: { backgroundColor: 'var(--background)' }, children: [_jsx(ImageDistortion, { active: selected, src: image, tint: tint, tintStrength: tintStrength }), overlay && (_jsx("div", { className: "pointer-events-none absolute inset-0", style: { backgroundColor: overlay, mixBlendMode: 'color' } })), _jsxs("div", { className: "pointer-events-none absolute inset-0 z-[1] flex flex-col justify-between p-3", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsxs(Small, { className: cn('block drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]', 'transition-colors', selected && 'text-midground'), style: selected ? { mixBlendMode: 'plus-lighter' } : undefined, children: [title, badge && _jsx("span", { className: "ml-1 opacity-50", children: badge })] }), price.secondary ? (_jsxs(_Fragment, { children: [_jsxs(Typography, { className: "block text-sm line-through opacity-50 drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]", expanded: true, style: { mixBlendMode: 'plus-lighter' }, children: [price.secondary, price.secondarySuffix && (_jsx("span", { className: "text-[0.625rem]", children: price.secondarySuffix }))] }), _jsxs(Typography, { className: "block text-lg font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]", expanded: true, style: { mixBlendMode: 'plus-lighter' }, children: [price.primary, price.primarySuffix && (_jsxs("span", { className: "text-[0.625rem] opacity-60", children: [' ', price.primarySuffix] }))] })] })) : (_jsxs(Typography, { className: "block text-lg font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]", expanded: true, style: { mixBlendMode: 'plus-lighter' }, children: [price.primary, price.primarySuffix && (_jsx("span", { className: "text-[0.625rem] opacity-60", children: price.primarySuffix }))] }))] }), bullets.length > 0 && (_jsx("ul", { className: "flex flex-col gap-1", children: bullets.map((bullet, i) => (_jsxs("li", { className: cn('font-courier text-[0.6875rem] leading-tight tracking-wider uppercase', 'drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]', 'opacity-70'), children: ["\u00B7 ", bullet] }, typeof bullet === 'string' ? bullet : i))) }))] })] })] }));
+    return (_jsxs("button", { className: cn('group relative flex w-full cursor-pointer flex-col border border-current/20', 'text-left transition-colors duration-300', selected && 'border-midground/60', isCurrent && !selected && 'border-midground/30', className), onClick: onSelect, type: "button", children: [_jsx("span", { "aria-hidden": true, className: cn('arc-border transition-opacity duration-200', selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100') }), _jsxs("div", { className: "relative aspect-[3/4] min-h-0 w-full flex-1 overflow-hidden", style: { backgroundColor: 'var(--background)' }, children: [_jsx(ImageDistortion, { active: selected, src: image, tint: tint, tintStrength: tintStrength }), overlay && (_jsx("div", { className: "pointer-events-none absolute inset-0", style: { backgroundColor: overlay, mixBlendMode: 'color' } })), _jsxs("div", { className: "pointer-events-none absolute inset-0 z-[1] flex flex-col justify-between p-3", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsxs(Typography, { variant: "sm", className: cn('block drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)] text-[1.2rem]', 'transition-colors', selected && 'text-midground'), style: selected ? { mixBlendMode: 'plus-lighter' } : undefined, children: [title, badge && _jsx("span", { className: "ml-1 opacity-50", children: badge })] }), price.secondary ? (_jsxs(_Fragment, { children: [_jsxs(Typography, { className: "block text-md line-through opacity-50 drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]", expanded: true, style: { mixBlendMode: 'plus-lighter' }, children: [price.secondary, price.secondarySuffix && (_jsx("span", { className: "text-[1rem]", children: price.secondarySuffix }))] }), _jsxs(Typography, { className: "block text-xl font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]", expanded: true, style: { mixBlendMode: 'plus-lighter' }, children: [price.primary, price.primarySuffix && (_jsxs("span", { className: "text-[1rem] opacity-60", children: [' ', price.primarySuffix] }))] })] })) : (_jsxs(Typography, { className: "block text-xl font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]", expanded: true, style: { mixBlendMode: 'plus-lighter' }, children: [price.primary, price.primarySuffix && (_jsx("span", { className: "text-[1rem] opacity-60", children: price.primarySuffix }))] }))] }), bullets.length > 0 && (_jsx("ul", { className: "flex flex-col gap-1", children: bullets.map((bullet, i) => (_jsxs("li", { className: cn('font-courier text-[1rem] leading-tight tracking-tight uppercase', 'drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]'), children: ["\u00B7 ", bullet] }, typeof bullet === 'string' ? bullet : i))) }))] })] })] }));
 }
 //# sourceMappingURL=tier-card.js.map

package/dist/ui/components/tier-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"tier-card.js","sourceRoot":"","sources":["../../../src/ui/components/tier-card.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { cn } from '../../utils'\n\nimport { ImageDistortion } from './image-distortion'\nimport { Typography } from './typography'\nimport { Small } from './typography/small'\n\n/**\n * Selectable tier / pricing card. Full-bleed distorted image background,\n * readable overlay text, and an animated `.arc-border` shimmer on the\n * selected state. Fully presentational — the consumer owns the data\n * (tier schema, price formatting, tier imagery / tints).\n *\n * Visual states:\n * - `selected`: brightens the distortion, activates `.arc-border`, and\n *   composites the headline / price with `mix-blend-mode: plus-lighter`\n *   so the text lifts off the image regardless of tint.\n * - `isCurrent`: subtle midground-tinted border hint (suppressed when\n *   `selected` wins).\n * - `overlay`: optional top-layer color blended with `mix-blend-mode:\n *   color` — used for the \"highest tier\" red treatment on top of any\n *   base tint.\n */\nexport function TierCard({\n  badge,\n  bullets,\n  className,\n  image,\n  isCurrent = false,\n  onSelect,\n  overlay,\n  price,\n  selected = false,\n  tint,\n  tintStrength,\n  title\n}: TierCardProps) {\n  return (\n    <button\n      className={cn(\n        'group relative flex w-full cursor-pointer flex-col border border-current/20',\n        'text-left transition-colors duration-300',\n        selected && 'border-midground/60',\n        isCurrent && !selected && 'border-midground/30',\n        className\n      )}\n      onClick={onSelect}\n      type=\"button\"\n    >\n      <span\n        aria-hidden\n        className={cn(\n          'arc-border transition-opacity duration-200',\n          selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'\n        )}\n      />\n\n      <div\n        className=\"relative aspect-[3/4] min-h-0 w-full flex-1 overflow-hidden\"\n        style={{ backgroundColor: 'var(--background)' }}\n      >\n        <ImageDistortion\n          active={selected}\n          src={image}\n          tint={tint}\n          tintStrength={tintStrength}\n        />\n\n        {overlay && (\n          <div\n            className=\"pointer-events-none absolute inset-0\"\n            style={{ backgroundColor: overlay, mixBlendMode: 'color' }}\n          />\n        )}\n\n        <div className=\"pointer-events-none absolute inset-0 z-[1] flex flex-col justify-between p-3\">\n          <div className=\"flex flex-col gap-0.5\">\n            <Small\n              className={cn(\n                'block drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]',\n                'transition-colors',\n                selected && 'text-midground'\n              )}\n              style={selected ? { mixBlendMode: 'plus-lighter' } : undefined}\n            >\n              {title}\n              {badge && <span className=\"ml-1 opacity-50\">{badge}</span>}\n            </Small>\n\n            {price.secondary ? (\n              <>\n                <Typography\n                  className=\"block text-sm line-through opacity-50 drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]\"\n                  expanded\n                  style={{ mixBlendMode: 'plus-lighter' }}\n                >\n                  {price.secondary}\n                  {price.secondarySuffix && (\n                    <span className=\"text-[0.625rem]\">\n                      {price.secondarySuffix}\n                    </span>\n                  )}\n                </Typography>\n\n                <Typography\n                  className=\"block text-lg font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]\"\n                  expanded\n                  style={{ mixBlendMode: 'plus-lighter' }}\n                >\n                  {price.primary}\n                  {price.primarySuffix && (\n                    <span className=\"text-[0.625rem] opacity-60\">\n                      {' '}\n                      {price.primarySuffix}\n                    </span>\n                  )}\n                </Typography>\n              </>\n            ) : (\n              <Typography\n                className=\"block text-lg font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]\"\n                expanded\n                style={{ mixBlendMode: 'plus-lighter' }}\n              >\n                {price.primary}\n                {price.primarySuffix && (\n                  <span className=\"text-[0.625rem] opacity-60\">\n                    {price.primarySuffix}\n                  </span>\n                )}\n              </Typography>\n            )}\n          </div>\n\n          {bullets.length > 0 && (\n            <ul className=\"flex flex-col gap-1\">\n              {bullets.map((bullet, i) => (\n                <li\n                  className={cn(\n                    'font-courier text-[0.6875rem] leading-tight tracking-wider uppercase',\n                    'drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]',\n                    'opacity-70'\n                  )}\n                  key={typeof bullet === 'string' ? bullet : i}\n                >\n                  · {bullet}\n                </li>\n              ))}\n            </ul>\n          )}\n        </div>\n      </div>\n    </button>\n  )\n}\n\nexport interface TierCardPrice {\n  /** Headline price, e.g. `\"$20\"` or `\"Free\"`. */\n  primary: string\n  /** Small suffix rendered after `primary`, e.g. `\"/mo\"` or `\"first payment\"`. */\n  primarySuffix?: string\n  /** Optional struck-through comparison price rendered above `primary`, e.g. `\"$30\"`. */\n  secondary?: string\n  /** Small suffix rendered after `secondary`. */\n  secondarySuffix?: string\n}\n\nexport interface TierCardProps {\n  /** Small annotation after the title, e.g. `\"(current)\"`. */\n  badge?: React.ReactNode\n  /** Feature list rendered under the price. */\n  bullets: React.ReactNode[]\n  className?: string\n  /** Background image URL. */\n  image: string\n  /** Applies the \"current plan\" border hint when not `selected`. */\n  isCurrent?: boolean\n  onSelect?: () => void\n  /** Color blended with `mix-blend-mode: color` over the image (used for the highest-tier red treatment). */\n  overlay?: string\n  price: TierCardPrice\n  /** Applies selected chrome (arc-border shimmer, active distortion, plus-lighter text blend). */\n  selected?: boolean\n  /** Shader tint passed through to `ImageDistortion`. */\n  tint?: string\n  /** Active / inactive tint strength passed through to `ImageDistortion`. */\n  tintStrength?: { active: number; inactive: number }\n  /** Tier name / headline. */\n  title: React.ReactNode\n}\n"]}
+{"version":3,"file":"tier-card.js","sourceRoot":"","sources":["../../../src/ui/components/tier-card.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { cn } from '../../utils'\n\nimport { ImageDistortion } from './image-distortion'\nimport { Typography } from './typography'\nimport { Small } from './typography/small'\n\n/**\n * Selectable tier / pricing card. Full-bleed distorted image background,\n * readable overlay text, and an animated `.arc-border` shimmer on the\n * selected state. Fully presentational — the consumer owns the data\n * (tier schema, price formatting, tier imagery / tints).\n *\n * Visual states:\n * - `selected`: brightens the distortion, activates `.arc-border`, and\n *   composites the headline / price with `mix-blend-mode: plus-lighter`\n *   so the text lifts off the image regardless of tint.\n * - `isCurrent`: subtle midground-tinted border hint (suppressed when\n *   `selected` wins).\n * - `overlay`: optional top-layer color blended with `mix-blend-mode:\n *   color` — used for the \"highest tier\" red treatment on top of any\n *   base tint.\n */\nexport function TierCard({\n  badge,\n  bullets,\n  className,\n  image,\n  isCurrent = false,\n  onSelect,\n  overlay,\n  price,\n  selected = false,\n  tint,\n  tintStrength,\n  title\n}: TierCardProps) {\n  return (\n    <button\n      className={cn(\n        'group relative flex w-full cursor-pointer flex-col border border-current/20',\n        'text-left transition-colors duration-300',\n        selected && 'border-midground/60',\n        isCurrent && !selected && 'border-midground/30',\n        className\n      )}\n      onClick={onSelect}\n      type=\"button\"\n    >\n      <span\n        aria-hidden\n        className={cn(\n          'arc-border transition-opacity duration-200',\n          selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'\n        )}\n      />\n\n      <div\n        className=\"relative aspect-[3/4] min-h-0 w-full flex-1 overflow-hidden\"\n        style={{ backgroundColor: 'var(--background)' }}\n      >\n        <ImageDistortion\n          active={selected}\n          src={image}\n          tint={tint}\n          tintStrength={tintStrength}\n        />\n\n        {overlay && (\n          <div\n            className=\"pointer-events-none absolute inset-0\"\n            style={{ backgroundColor: overlay, mixBlendMode: 'color' }}\n          />\n        )}\n\n        <div className=\"pointer-events-none absolute inset-0 z-[1] flex flex-col justify-between p-3\">\n          <div className=\"flex flex-col gap-0.5\">\n            <Typography variant=\"sm\" \n              className={cn(\n                'block drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)] text-[1.2rem]',\n                'transition-colors',\n                selected && 'text-midground'\n              )}\n              style={selected ? { mixBlendMode: 'plus-lighter' } : undefined}\n            >\n              {title}\n              {badge && <span className=\"ml-1 opacity-50\">{badge}</span>}\n            </Typography>\n\n            {price.secondary ? (\n              <>\n                <Typography\n                  className=\"block text-md line-through opacity-50 drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]\"\n                  expanded\n                  style={{ mixBlendMode: 'plus-lighter' }}\n                >\n                  {price.secondary}\n                  {price.secondarySuffix && (\n                    <span className=\"text-[1rem]\">\n                      {price.secondarySuffix}\n                    </span>\n                  )}\n                </Typography>\n\n                <Typography\n                  className=\"block text-xl font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]\"\n                  expanded\n                  style={{ mixBlendMode: 'plus-lighter' }}\n                >\n                  {price.primary}\n                  {price.primarySuffix && (\n                    <span className=\"text-[1rem] opacity-60\">\n                      {' '}\n                      {price.primarySuffix}\n                    </span>\n                  )}\n                </Typography>\n              </>\n            ) : (\n              <Typography\n                className=\"block text-xl font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]\"\n                expanded\n                style={{ mixBlendMode: 'plus-lighter' }}\n              >\n                {price.primary}\n                {price.primarySuffix && (\n                  <span className=\"text-[1rem] opacity-60\">\n                    {price.primarySuffix}\n                  </span>\n                )}\n              </Typography>\n            )}\n          </div>\n\n          {bullets.length > 0 && (\n            <ul className=\"flex flex-col gap-1\">\n              {bullets.map((bullet, i) => (\n                <li\n                  className={cn(\n                    'font-courier text-[1rem] leading-tight tracking-tight uppercase',\n                    'drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]',\n                  )}\n                  key={typeof bullet === 'string' ? bullet : i}\n                >\n                  · {bullet}\n                </li>\n              ))}\n            </ul>\n          )}\n        </div>\n      </div>\n    </button>\n  )\n}\n\nexport interface TierCardPrice {\n  /** Headline price, e.g. `\"$20\"` or `\"Free\"`. */\n  primary: string\n  /** Small suffix rendered after `primary`, e.g. `\"/mo\"` or `\"first payment\"`. */\n  primarySuffix?: string\n  /** Optional struck-through comparison price rendered above `primary`, e.g. `\"$30\"`. */\n  secondary?: string\n  /** Small suffix rendered after `secondary`. */\n  secondarySuffix?: string\n}\n\nexport interface TierCardProps {\n  /** Small annotation after the title, e.g. `\"(current)\"`. */\n  badge?: React.ReactNode\n  /** Feature list rendered under the price. */\n  bullets: React.ReactNode[]\n  className?: string\n  /** Background image URL. */\n  image: string\n  /** Applies the \"current plan\" border hint when not `selected`. */\n  isCurrent?: boolean\n  onSelect?: () => void\n  /** Color blended with `mix-blend-mode: color` over the image (used for the highest-tier red treatment). */\n  overlay?: string\n  price: TierCardPrice\n  /** Applies selected chrome (arc-border shimmer, active distortion, plus-lighter text blend). */\n  selected?: boolean\n  /** Shader tint passed through to `ImageDistortion`. */\n  tint?: string\n  /** Active / inactive tint strength passed through to `ImageDistortion`. */\n  tintStrength?: { active: number; inactive: number }\n  /** Tier name / headline. */\n  title: React.ReactNode\n}\n"]}

package/dist/ui/components/tv.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tv.d.ts","sourceRoot":"","sources":["../../../src/ui/components/tv.tsx"],"names":[],"mappings":"AAuLA,wBAAgB,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAqCvD"}
+{"version":3,"file":"tv.d.ts","sourceRoot":"","sources":["../../../src/ui/components/tv.tsx"],"names":[],"mappings":"AA2NA,wBAAgB,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAqCvD"}

package/dist/ui/components/tv.js

@@ -140,15 +140,42 @@ function useGL(ref) {
         const ro = new ResizeObserver(resize);
         ro.observe(c);
         const t0 = performance.now();
-        const loop = () => {
+        let visible = !document.hidden;
+        let inView = true;
+        let raf2 = 0;
+        const tick = () => {
             gl.uniform1f(uT, (performance.now() - t0) / 1e3);
             gl.uniform2f(uR, c.width, c.height);
             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-            raf.current = requestAnimationFrame(loop);
+            raf2 = requestAnimationFrame(tick);
         };
-        raf.current = requestAnimationFrame(loop);
+        const start = () => {
+            if (visible && inView && !raf2) {
+                raf2 = requestAnimationFrame(tick);
+            }
+        };
+        const stop = () => {
+            if (raf2) {
+                cancelAnimationFrame(raf2);
+                raf2 = 0;
+            }
+        };
+        const onVisibility = () => {
+            visible = !document.hidden;
+            visible ? start() : stop();
+        };
+        const io = new IntersectionObserver(entries => {
+            inView = entries.some(e => e.isIntersecting);
+            inView ? start() : stop();
+        }, { threshold: 0 });
+        io.observe(c);
+        document.addEventListener('visibilitychange', onVisibility);
+        start();
+        raf.current = raf2;
         return () => {
-            cancelAnimationFrame(raf.current);
+            stop();
+            io.disconnect();
+            document.removeEventListener('visibilitychange', onVisibility);
             ro.disconnect();
         };
     }, [ref]);

package/dist/ui/components/tv.js.map

@@ -1 +1 @@
-{"version":3,"file":"tv.js","sourceRoot":"","sources":["../../../src/ui/components/tv.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { useEffect, useRef } from 'react'\n\nconst VERT = /* glsl */ `attribute vec2 a;void main(){gl_Position=vec4(a,0,1);}`\n\nconst FRAG = /* glsl */ `precision highp float;\nuniform float t;\nuniform vec2 r;\n\nconst float FBM_STR = .08;\n\nfloat h(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }\n\nfloat n2(vec2 p) {\n  vec2 i = floor(p), f = fract(p);\n  f = f * f * (3. - 2. * f);\n\n  return mix(\n    mix(h(i), h(i + vec2(1, 0)), f.x),\n    mix(h(i + vec2(0, 1)), h(i + vec2(1, 1)), f.x),\n    f.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0., a = .5;\n\n  for (int i = 0; i < 4; i++) {\n    v += a * n2(p);\n    p *= 2.1;\n    a *= .45;\n  }\n\n  return v;\n}\n\nfloat drift(float speed, float s) {\n  return fract(t * speed + s + .02 * sin(t * .4 + s * 3.));\n}\n\nfloat brushAt(vec2 uv, float y, float th, float s) {\n  float hw = .34 + .08 * h(vec2(s, 77.));\n  float cx = .5;\n  float xn = (uv.x - (cx - hw)) / (2. * hw);\n  float env = smoothstep(0., .03, xn) * smoothstep(1., .97, xn);\n  float localTh = th * env;\n\n  if (localTh < .002) return 0.;\n\n  float morph = floor(t * 8.) * .7 + s;\n  float top = y - localTh * .5 + fbm(vec2(uv.x * 6., morph)) * FBM_STR;\n  float bot = y + localTh * .5 - fbm(vec2(uv.x * 6., morph + 30.)) * FBM_STR;\n  float x0 = cx - hw + fbm(vec2(uv.y * 8., morph + 60.)) * FBM_STR;\n  float x1 = cx + hw - fbm(vec2(uv.y * 8., morph + 90.)) * FBM_STR;\n\n  float dMin = min(min(uv.y - top, bot - uv.y), min(uv.x - x0, x1 - uv.x));\n\n  float bristle = n2(vec2(uv.x * 60., uv.y * 8. + s)) * .4\n    + n2(vec2(uv.x * 25., (uv.y - y) * 120. + s)) * .35\n    + n2(vec2(uv.x * 90., uv.y * 3. + s * 2.)) * .25;\n\n  float eaten = smoothstep(.03, 0., dMin) * (1. - smoothstep(.2, .5, bristle));\n\n  return clamp(smoothstep(0., .003, dMin) * (1. - eaten), 0., 1.);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / r;\n  uv = vec2(uv.x * cos(.095) - uv.y * sin(.095), uv.x * sin(.095) + uv.y * cos(.095));\n  uv += vec2(fbm(uv * 4. + t * .06), fbm(uv * 4. + 8. + t * .05)) * .012;\n\n  vec3 c = vec3(.992, .992, .051);\n\n  float smScroll = -drift(.04, 5.) * 2.;\n  float sm = 0.;\n\n  for (int i = 0; i < 20; i++) {\n    sm = max(sm, brushAt(uv, mod(float(i) * .1 + smScroll, 2.) - .5, .04, float(i) + 10.));\n  }\n\n  float d1 = drift(.15, 1.), d2 = drift(.15, 1.37), d3 = drift(.15, 1.58), d4 = drift(.15, 1.82);\n  float big = max(\n    max(brushAt(uv, 1.1 - d1 * 1.4, .28, 1.), brushAt(uv, 1.1 - d2 * 1.4, .18, 2.)),\n    max(brushAt(uv, 1.1 - d3 * 1.4, .3, 3.), brushAt(uv, 1.1 - d4 * 1.4, .15, 4.))\n  );\n\n  c = mix(c, vec3(0.), clamp(max(sm, big), 0., 1.));\n  c *= .94 + .06 * sin(uv.y * r.y * 6.283);\n\n  vec2 raw = gl_FragCoord.xy / r;\n  float dx = min(raw.x - .22, .90 - raw.x);\n  float dy = min(raw.y - .29, .86 - raw.y);\n  float cycle = floor(t * .4);\n  float edge = mix(smoothstep(.22, 0., max(min(dx, dy), 0.)), 1., step(.75, h(vec2(cycle, 13.))))\n    * smoothstep(.85, 1., sin(t * 2.5) * .5 + .5)\n    * (.7 + .3 * h(vec2(cycle, 7.)));\n\n  float scanY = floor(gl_FragCoord.y);\n  float rowNoise = h(vec2(scanY, floor(t * 30.)));\n  c *= 1. - edge * max(step(.45, rowNoise), step(.3, h(vec2(gl_FragCoord.x + scanY * 7., floor(t * 45.)))) * step(.2, rowNoise));\n\n  gl_FragColor = vec4(clamp(c, 0., 1.), 1.);\n}`\n\nfunction useGL(ref: React.RefObject<HTMLCanvasElement | null>) {\n  const raf = useRef(0)\n\n  useEffect(() => {\n    const c = ref.current\n\n    if (!c) {\n      return\n    }\n\n    const gl = c.getContext('webgl')\n\n    if (!gl) {\n      return\n    }\n\n    const sh = (type: number, src: string) => {\n      const s = gl.createShader(type)!\n      gl.shaderSource(s, src)\n      gl.compileShader(s)\n\n      return s\n    }\n\n    const p = gl.createProgram()!\n    gl.attachShader(p, sh(gl.VERTEX_SHADER, VERT))\n    gl.attachShader(p, sh(gl.FRAGMENT_SHADER, FRAG))\n    gl.linkProgram(p)\n    gl.useProgram(p)\n\n    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())\n    gl.bufferData(\n      gl.ARRAY_BUFFER,\n      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n      gl.STATIC_DRAW\n    )\n\n    const a = gl.getAttribLocation(p, 'a')\n    gl.enableVertexAttribArray(a)\n    gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0)\n\n    const uT = gl.getUniformLocation(p, 't')\n    const uR = gl.getUniformLocation(p, 'r')\n\n    const resize = () => {\n      const rect = c.getBoundingClientRect()\n      const dpr = Math.min(devicePixelRatio, 2)\n\n      c.width = rect.width * dpr\n      c.height = rect.height * dpr\n\n      gl.viewport(0, 0, c.width, c.height)\n    }\n\n    resize()\n\n    const ro = new ResizeObserver(resize)\n    ro.observe(c)\n\n    const t0 = performance.now()\n\n    const loop = () => {\n      gl.uniform1f(uT, (performance.now() - t0) / 1e3)\n      gl.uniform2f(uR, c.width, c.height)\n      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)\n\n      raf.current = requestAnimationFrame(loop)\n    }\n\n    raf.current = requestAnimationFrame(loop)\n\n    return () => {\n      cancelAnimationFrame(raf.current)\n      ro.disconnect()\n    }\n  }, [ref])\n}\n\nexport function TV({ className }: { className?: string }) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  useGL(canvasRef)\n\n  return (\n    <div className={['relative', className].filter(Boolean).join(' ')}>\n      <svg className=\"relative h-full w-full\" fill=\"none\" viewBox=\"0 0 210 173\">\n        <path\n          d=\"M30.8342 2.44471 6.08268 36.683c-.24437.338-.38254.7412-.39689 1.158L1.57754 157.126c-.03891 1.129.82339 2.087 1.95096 2.167l162.4835 11.463c.433.031.866-.074 1.238-.3l35.718-21.69c.607-.369.986-1.02 1.008-1.73l4.102-130.9871c.035-1.1269-.826-2.0806-1.951-2.1604L32.6847 1.58029c-.7248-.05144-1.4247.27551-1.8505.86442Z\"\n          fill=\"#FDFD0D\"\n          stroke=\"#FDFD0D\"\n          strokeWidth=\"3.15\"\n        />\n\n        <path\n          d=\"M203.09 17.1483 35.6844 5.83395l-4.2 121.94805 168.4906 13.076z\"\n          fill=\"#000\"\n          stroke=\"#FDFD0D\"\n          strokeWidth=\"4.2\"\n        />\n\n        <path\n          d=\"M190.491 29.7483 48.2859 18.434l-4.2 98.848 143.2901 10.976z\"\n          fill=\"#FDFD0D\"\n        />\n      </svg>\n\n      <canvas\n        className=\"absolute inset-0 h-full w-full\"\n        ref={canvasRef}\n        style={{\n          clipPath:\n            'polygon(23% 10.65%, 90.71% 17.2%, 89.23% 74.13%, 20.99% 67.79%)'\n        }}\n      />\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"tv.js","sourceRoot":"","sources":["../../../src/ui/components/tv.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { useEffect, useRef } from 'react'\n\nconst VERT = /* glsl */ `attribute vec2 a;void main(){gl_Position=vec4(a,0,1);}`\n\nconst FRAG = /* glsl */ `precision highp float;\nuniform float t;\nuniform vec2 r;\n\nconst float FBM_STR = .08;\n\nfloat h(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }\n\nfloat n2(vec2 p) {\n  vec2 i = floor(p), f = fract(p);\n  f = f * f * (3. - 2. * f);\n\n  return mix(\n    mix(h(i), h(i + vec2(1, 0)), f.x),\n    mix(h(i + vec2(0, 1)), h(i + vec2(1, 1)), f.x),\n    f.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0., a = .5;\n\n  for (int i = 0; i < 4; i++) {\n    v += a * n2(p);\n    p *= 2.1;\n    a *= .45;\n  }\n\n  return v;\n}\n\nfloat drift(float speed, float s) {\n  return fract(t * speed + s + .02 * sin(t * .4 + s * 3.));\n}\n\nfloat brushAt(vec2 uv, float y, float th, float s) {\n  float hw = .34 + .08 * h(vec2(s, 77.));\n  float cx = .5;\n  float xn = (uv.x - (cx - hw)) / (2. * hw);\n  float env = smoothstep(0., .03, xn) * smoothstep(1., .97, xn);\n  float localTh = th * env;\n\n  if (localTh < .002) return 0.;\n\n  float morph = floor(t * 8.) * .7 + s;\n  float top = y - localTh * .5 + fbm(vec2(uv.x * 6., morph)) * FBM_STR;\n  float bot = y + localTh * .5 - fbm(vec2(uv.x * 6., morph + 30.)) * FBM_STR;\n  float x0 = cx - hw + fbm(vec2(uv.y * 8., morph + 60.)) * FBM_STR;\n  float x1 = cx + hw - fbm(vec2(uv.y * 8., morph + 90.)) * FBM_STR;\n\n  float dMin = min(min(uv.y - top, bot - uv.y), min(uv.x - x0, x1 - uv.x));\n\n  float bristle = n2(vec2(uv.x * 60., uv.y * 8. + s)) * .4\n    + n2(vec2(uv.x * 25., (uv.y - y) * 120. + s)) * .35\n    + n2(vec2(uv.x * 90., uv.y * 3. + s * 2.)) * .25;\n\n  float eaten = smoothstep(.03, 0., dMin) * (1. - smoothstep(.2, .5, bristle));\n\n  return clamp(smoothstep(0., .003, dMin) * (1. - eaten), 0., 1.);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / r;\n  uv = vec2(uv.x * cos(.095) - uv.y * sin(.095), uv.x * sin(.095) + uv.y * cos(.095));\n  uv += vec2(fbm(uv * 4. + t * .06), fbm(uv * 4. + 8. + t * .05)) * .012;\n\n  vec3 c = vec3(.992, .992, .051);\n\n  float smScroll = -drift(.04, 5.) * 2.;\n  float sm = 0.;\n\n  for (int i = 0; i < 20; i++) {\n    sm = max(sm, brushAt(uv, mod(float(i) * .1 + smScroll, 2.) - .5, .04, float(i) + 10.));\n  }\n\n  float d1 = drift(.15, 1.), d2 = drift(.15, 1.37), d3 = drift(.15, 1.58), d4 = drift(.15, 1.82);\n  float big = max(\n    max(brushAt(uv, 1.1 - d1 * 1.4, .28, 1.), brushAt(uv, 1.1 - d2 * 1.4, .18, 2.)),\n    max(brushAt(uv, 1.1 - d3 * 1.4, .3, 3.), brushAt(uv, 1.1 - d4 * 1.4, .15, 4.))\n  );\n\n  c = mix(c, vec3(0.), clamp(max(sm, big), 0., 1.));\n  c *= .94 + .06 * sin(uv.y * r.y * 6.283);\n\n  vec2 raw = gl_FragCoord.xy / r;\n  float dx = min(raw.x - .22, .90 - raw.x);\n  float dy = min(raw.y - .29, .86 - raw.y);\n  float cycle = floor(t * .4);\n  float edge = mix(smoothstep(.22, 0., max(min(dx, dy), 0.)), 1., step(.75, h(vec2(cycle, 13.))))\n    * smoothstep(.85, 1., sin(t * 2.5) * .5 + .5)\n    * (.7 + .3 * h(vec2(cycle, 7.)));\n\n  float scanY = floor(gl_FragCoord.y);\n  float rowNoise = h(vec2(scanY, floor(t * 30.)));\n  c *= 1. - edge * max(step(.45, rowNoise), step(.3, h(vec2(gl_FragCoord.x + scanY * 7., floor(t * 45.)))) * step(.2, rowNoise));\n\n  gl_FragColor = vec4(clamp(c, 0., 1.), 1.);\n}`\n\nfunction useGL(ref: React.RefObject<HTMLCanvasElement | null>) {\n  const raf = useRef(0)\n\n  useEffect(() => {\n    const c = ref.current\n\n    if (!c) {\n      return\n    }\n\n    const gl = c.getContext('webgl')\n\n    if (!gl) {\n      return\n    }\n\n    const sh = (type: number, src: string) => {\n      const s = gl.createShader(type)!\n      gl.shaderSource(s, src)\n      gl.compileShader(s)\n\n      return s\n    }\n\n    const p = gl.createProgram()!\n    gl.attachShader(p, sh(gl.VERTEX_SHADER, VERT))\n    gl.attachShader(p, sh(gl.FRAGMENT_SHADER, FRAG))\n    gl.linkProgram(p)\n    gl.useProgram(p)\n\n    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())\n    gl.bufferData(\n      gl.ARRAY_BUFFER,\n      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n      gl.STATIC_DRAW\n    )\n\n    const a = gl.getAttribLocation(p, 'a')\n    gl.enableVertexAttribArray(a)\n    gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0)\n\n    const uT = gl.getUniformLocation(p, 't')\n    const uR = gl.getUniformLocation(p, 'r')\n\n    const resize = () => {\n      const rect = c.getBoundingClientRect()\n      const dpr = Math.min(devicePixelRatio, 2)\n\n      c.width = rect.width * dpr\n      c.height = rect.height * dpr\n\n      gl.viewport(0, 0, c.width, c.height)\n    }\n\n    resize()\n\n    const ro = new ResizeObserver(resize)\n    ro.observe(c)\n\n    const t0 = performance.now()\n\n    let visible = !document.hidden\n    let inView = true\n    let raf2 = 0\n\n    const tick = () => {\n      gl.uniform1f(uT, (performance.now() - t0) / 1e3)\n      gl.uniform2f(uR, c.width, c.height)\n      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)\n\n      raf2 = requestAnimationFrame(tick)\n    }\n\n    const start = () => {\n      if (visible && inView && !raf2) {\n        raf2 = requestAnimationFrame(tick)\n      }\n    }\n\n    const stop = () => {\n      if (raf2) {\n        cancelAnimationFrame(raf2)\n        raf2 = 0\n      }\n    }\n\n    const onVisibility = () => {\n      visible = !document.hidden\n      visible ? start() : stop()\n    }\n\n    const io = new IntersectionObserver(\n      entries => {\n        inView = entries.some(e => e.isIntersecting)\n        inView ? start() : stop()\n      },\n      { threshold: 0 }\n    )\n\n    io.observe(c)\n    document.addEventListener('visibilitychange', onVisibility)\n\n    start()\n    raf.current = raf2\n\n    return () => {\n      stop()\n      io.disconnect()\n      document.removeEventListener('visibilitychange', onVisibility)\n      ro.disconnect()\n    }\n  }, [ref])\n}\n\nexport function TV({ className }: { className?: string }) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  useGL(canvasRef)\n\n  return (\n    <div className={['relative', className].filter(Boolean).join(' ')}>\n      <svg className=\"relative h-full w-full\" fill=\"none\" viewBox=\"0 0 210 173\">\n        <path\n          d=\"M30.8342 2.44471 6.08268 36.683c-.24437.338-.38254.7412-.39689 1.158L1.57754 157.126c-.03891 1.129.82339 2.087 1.95096 2.167l162.4835 11.463c.433.031.866-.074 1.238-.3l35.718-21.69c.607-.369.986-1.02 1.008-1.73l4.102-130.9871c.035-1.1269-.826-2.0806-1.951-2.1604L32.6847 1.58029c-.7248-.05144-1.4247.27551-1.8505.86442Z\"\n          fill=\"#FDFD0D\"\n          stroke=\"#FDFD0D\"\n          strokeWidth=\"3.15\"\n        />\n\n        <path\n          d=\"M203.09 17.1483 35.6844 5.83395l-4.2 121.94805 168.4906 13.076z\"\n          fill=\"#000\"\n          stroke=\"#FDFD0D\"\n          strokeWidth=\"4.2\"\n        />\n\n        <path\n          d=\"M190.491 29.7483 48.2859 18.434l-4.2 98.848 143.2901 10.976z\"\n          fill=\"#FDFD0D\"\n        />\n      </svg>\n\n      <canvas\n        className=\"absolute inset-0 h-full w-full\"\n        ref={canvasRef}\n        style={{\n          clipPath:\n            'polygon(23% 10.65%, 90.71% 17.2%, 89.23% 74.13%, 20.99% 67.79%)'\n        }}\n      />\n    </div>\n  )\n}\n"]}

package/dist/ui/globals.css

@@ -328,7 +328,7 @@
   }
 
   html {
-    font-size: clamp(12px, calc(12px + 2 * ((100vw - 1400px) / 400)), 16px);
+    font-size: clamp(14px, calc(14px + 2 * ((100vw - 1400px) / 400)), 18px);
   }
 
   body {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nous-research/ui",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "type": "module",
   "license": "MIT",
   "sideEffects": [
@@ -36,6 +36,14 @@
     "./assets/*": "./dist/assets/*",
     "./styles/globals.css": "./dist/ui/globals.css"
   },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "prepublishOnly": "pnpm build",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp -r src/assets dist/assets && cp -r src/fonts dist/fonts && cd src && find . -name '*.css' -exec sh -c 'mkdir -p \"../dist/$(dirname \"$1\")\" && cp \"$1\" \"../dist/$1\"' _ {} \\;",
+    "build:watch": "pnpm build && tsc -p tsconfig.build.json --watch --preserveWatchOutput",
+    "build-storybook": "storybook build -o storybook-static",
+    "release": "./scripts/release.sh"
+  },
   "dependencies": {
     "@nanostores/react": "^1.0.0",
     "class-variance-authority": "^0.7.1",
@@ -95,12 +103,5 @@
     "gsap": {
       "optional": true
     }
-  },
-  "scripts": {
-    "dev": "storybook dev -p 6006",
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp -r src/assets dist/assets && cp -r src/fonts dist/fonts && cd src && find . -name '*.css' -exec sh -c 'mkdir -p \"../dist/$(dirname \"$1\")\" && cp \"$1\" \"../dist/$1\"' _ {} \\;",
-    "build:watch": "pnpm build && tsc -p tsconfig.build.json --watch --preserveWatchOutput",
-    "build-storybook": "storybook build -o storybook-static",
-    "release": "./scripts/release.sh"
   }
-}
+}