@nous-research/ui 0.3.0 → 0.5.0

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

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

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

@@ -0,0 +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"]}

package/dist/ui/components/overlays/index.d.ts

@@ -34,12 +34,26 @@ export declare const LENS_5I: {
     };
 };
 export declare const lens0: (l?: Partial<typeof LENS_0.Lens>, g?: Partial<typeof LENS_0.Globe>) => LensPreset;
+export declare const lens5i: (l?: Partial<typeof LENS_5I.Lens>, g?: Partial<typeof LENS_5I.Globe>) => LensPreset;
 export declare const LENSES: [string, LensPreset][];
 export declare const applyLens: (preset: LensPreset, animate?: boolean) => void;
 export declare const $lightMode: import("nanostores").PreinitializedWritableAtom<boolean> & object;
 export declare const toggleLens: () => void;
-export declare function Overlays({ dark }: {
+export declare function Overlays({ dark, initial }: OverlaysProps): import("react/jsx-runtime").JSX.Element;
+export interface LensPreset {
+    Globe: typeof LENS_0.Globe;
+    Lens: typeof LENS_0.Lens;
+}
+interface OverlaysProps {
     dark?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-export type LensPreset = Record<string, Record<string, unknown>>;
+    /**
+     * Exact preset to seed the internal Leva controls with. When omitted the
+     * component falls back to `LENS_0` / `LENS_5I` based on `dark`. Pass the
+     * actual preset from a host (e.g. Storybook toolbar) to guarantee the
+     * first-paint colors match the selected lens without needing a followup
+     * `applyLens` that can be lost in useSmoothControls' startup window.
+     */
+    initial?: LensPreset;
+}
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/overlays/index.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,WAAW,EAYR,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,CAAA;AAErD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAYlB,CAAA;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;CAYnB,CAAA;AAED,eAAO,MAAM,KAAK,GAChB,IAAI,OAAO,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,EAC/B,IAAI,OAAO,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,KAC/B,UAGD,CAAA;AAEF,eAAO,MAAM,MAAM,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EAiBxC,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,QAAQ,UAAU,EAAE,iBAAe,SAK1D,CAAA;AAEH,eAAO,MAAM,UAAU,mEAAa,CAAA;AAEpC,eAAO,MAAM,UAAU,YAMtB,CAAA;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,2CAmFpD;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/overlays/index.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,WAAW,EAYR,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,CAAA;AAErD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAYlB,CAAA;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;CAYnB,CAAA;AAED,eAAO,MAAM,KAAK,GAChB,IAAI,OAAO,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,EAC/B,IAAI,OAAO,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,KAC/B,UAGD,CAAA;AAQF,eAAO,MAAM,MAAM,GACjB,IAAI,OAAO,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,EAChC,IAAI,OAAO,CAAC,OAAO,OAAO,CAAC,KAAK,CAAC,KAChC,UAGD,CAAA;AAKF,eAAO,MAAM,MAAM,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EASxC,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,QAAQ,UAAU,EAAE,iBAAe,SAK1D,CAAA;AAEH,eAAO,MAAM,UAAU,mEAAa,CAAA;AAEpC,eAAO,MAAM,UAAU,YAMtB,CAAA;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,aAAa,2CAkGxD;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,OAAO,MAAM,CAAC,KAAK,CAAA;IAC1B,IAAI,EAAE,OAAO,MAAM,CAAC,IAAI,CAAA;CACzB;AAED,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,UAAU,CAAA;CACrB"}

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

@@ -53,23 +53,28 @@ export const lens0 = (l, g) => ({
     Globe: { ...LENS_0.Globe, ...g },
     Lens: { ...LENS_0.Lens, ...l }
 });
+// The Hermes light-mode look is produced by a fullscreen opaque-white
+// `mix-blend-mode: difference` foreground layer that inverts everything.
+// Colored lenses that want a "white + accent" look MUST be built from
+// LENS_5I, not LENS_0 — otherwise `bgBlend: 'difference'` + an opaque
+// colored bg + active fg inversion land halfway between dark and light
+// mode and produce a muddy warm wash instead of a clean inversion.
+export const lens5i = (l, g) => ({
+    Globe: { ...LENS_5I.Globe, ...g },
+    Lens: { ...LENS_5I.Lens, ...l }
+});
+// Accent colors are the *pre-inversion* source; after the difference FG
+// layer they read as their visual complement. e.g. `#FFAC02` (orange)
+// renders as blue #0053FD on screen — that's the default LENS_5I accent.
 export const LENSES = [
     ['0', LENS_0],
-    ['1', lens0({ bgColor: '#041C1C', fgOpacity: 1 })],
-    ['2', lens0({ bgColor: '#0E0313', fgOpacity: 1 })],
-    ['3', lens0({ bgColor: '#003EB4', fgColor: '#001289', fgOpacity: 1 })],
-    ['4', lens0({ bgColor: '#0E39AA', fgColor: '#001289', fgOpacity: 1 })],
+    ['1', lens0({ bgColor: '#0A1F1F' })],
+    ['2', lens0({ bgColor: '#0E0313', mgColor: '#e6cbff' })],
+    ['3', lens5i({ mgColor: '#FFAC02' })],
+    ['4', lens5i({ bgColor: '#0E0313', mgColor: '#FF5500' })],
     ['5', lens0({ bgColor: '#1540B1', bgOpacity: 0.7 })],
     ['5i', LENS_5I],
-    [
-        '6',
-        lens0({
-            bgColor: '#0e39aa',
-            fgColor: '#001289',
-            fgOpacity: 1,
-            mgColor: '#ffffff'
-        })
-    ],
+    ['6', lens5i({ bgColor: '#170D02', mgColor: '#00E5FF' })]
 ];
 export const applyLens = (preset, animate = false) => Object.entries(preset).forEach(([g, v]) => Object.entries(v).forEach(([k, val]) => setControlValue(g, k, val, { animate })));
 export const $lightMode = atom(true);
@@ -79,23 +84,27 @@ export const toggleLens = () => {
     $lightMode.set(!isLight);
     applyLens(next, true);
 };
-export function Overlays({ dark }) {
-    const init = dark ? LENS_0.Lens : LENS_5I.Lens;
+export function Overlays({ dark, initial }) {
+    // `initial` lets the host (e.g. Storybook) seed the Leva/atom state with
+    // the *exact* lens preset the user selected, avoiding a one-cycle lag
+    // where useSmoothControls emits old colors for the first paint (and, on
+    // Storybook's fast iframe reload, sometimes never catches up because
+    // useControls' ready-gate swallows the instant color writes).
+    const base = initial?.Lens ?? (dark ? LENS_0.Lens : LENS_5I.Lens);
     const lens = useSmoothControls('Lens', {
-        bgBlend: { options: BLEND_MODES, value: init.bgBlend },
-        bgColor: { value: init.bgColor },
-        bgOpacity: { max: 1, min: 0, step: 0.01, value: init.bgOpacity },
+        bgBlend: { options: BLEND_MODES, value: base.bgBlend },
+        bgColor: { value: base.bgColor },
+        bgOpacity: { max: 1, min: 0, step: 0.01, value: base.bgOpacity },
         fgBlend: { options: BLEND_MODES, value: 'difference' },
-        fgColor: { value: init.fgColor },
-        fgOpacity: { max: 1, min: 0, step: 0.01, value: init.fgOpacity },
+        fgColor: { value: base.fgColor },
+        fgOpacity: { max: 1, min: 0, step: 0.01, value: base.fgOpacity },
         fillerBlend: { options: BLEND_MODES, value: 'difference' },
-        fillerOpacity: { max: 1, min: 0, step: 0.01, value: init.fillerOpacity },
-        mgColor: { value: init.mgColor },
-        mgOpacity: { max: 1, min: 0, step: 0.01, value: init.mgOpacity }
+        fillerOpacity: { max: 1, min: 0, step: 0.01, value: base.fillerOpacity },
+        mgColor: { value: base.mgColor },
+        mgOpacity: { max: 1, min: 0, step: 0.01, value: base.mgOpacity }
     }, { collapsed: false });
     useEffect(() => {
         $lightMode.set(!dark);
-        applyLens(dark ? LENS_0 : LENS_5I);
     }, [dark]);
     useEffect(() => {
         const s = document.documentElement.style;
@@ -114,12 +123,23 @@ export function Overlays({ dark }) {
         window.addEventListener('keydown', handle);
         return () => window.removeEventListener('keydown', handle);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(Noise, { className: `${LAYER} z-101` }), _jsx("div", { className: `${LAYER} z-100`, style: {
+    // NOTE: z-index is inlined because Tailwind's JIT sometimes doesn't emit
+    // these non-default utilities (e.g. in Storybook's isolated content
+    // scan), which silently collapses the overlay stack to DOM order and
+    // breaks the mix-blend-mode inversion — producing a muddy warm wash
+    // instead of the intended clean black/white inversion.
+    return (_jsxs(_Fragment, { children: [_jsx(Noise, { className: LAYER, style: { zIndex: 101 } }), _jsx("div", { className: LAYER, style: {
                     backgroundColor: colorMix(lens.fgColor, lens.fgOpacity),
-                    mixBlendMode: lens.fgBlend
-                } }), _jsx(Vignette, { className: `${LAYER} z-99` }), _jsx(Greys, { className: `${LAYER} z-200` }), _jsx(Glitch, { className: `${LAYER} z-201` }), _jsx("div", { className: `${LAYER} z-2`, style: { mixBlendMode: lens.fillerBlend, opacity: lens.fillerOpacity }, children: _jsx("img", { alt: "", className: "h-[150dvh] w-auto min-w-dvw object-cover object-top-left invert", fetchPriority: "low", src: fillerBg.src }) }), _jsx("div", { className: `${LAYER} z-1`, style: {
+                    mixBlendMode: lens.fgBlend,
+                    zIndex: 100
+                } }), _jsx(Vignette, { className: LAYER, style: { zIndex: 99 } }), _jsx(Greys, { className: LAYER, style: { zIndex: 200 } }), _jsx(Glitch, { className: LAYER, style: { zIndex: 201 } }), _jsx("div", { className: LAYER, style: {
+                    mixBlendMode: lens.fillerBlend,
+                    opacity: lens.fillerOpacity,
+                    zIndex: 2
+                }, children: _jsx("img", { alt: "", className: "h-[150dvh] w-auto min-w-dvw object-cover object-top-left invert", fetchPriority: "low", src: fillerBg.src }) }), _jsx("div", { className: LAYER, style: {
                     backgroundColor: colorMix(lens.bgColor, lens.bgOpacity),
-                    mixBlendMode: lens.bgBlend
+                    mixBlendMode: lens.bgBlend,
+                    zIndex: 1
                 } })] }));
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/components/overlays/index.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { atom } from 'nanostores'\nimport { useEffect } from 'react'\n\nimport {\n  getControlAtom,\n  setControlValue,\n  useSmoothControls\n} from '../../../hooks/use-smooth-controls'\nimport { colorMix } from '../../../utils/color'\n\nimport fillerBg from '../../../assets/filler-bg0.jpg'\n\nimport { Glitch } from './glitch'\nimport { Greys } from './greys'\nimport { Noise } from './noise'\nimport { Vignette } from './vignette'\n\nconst LAYER = 'pointer-events-none fixed inset-0'\n\nexport const BLEND_MODES = [\n  'overlay',\n  'multiply',\n  'screen',\n  'difference',\n  'exclusion',\n  'color-dodge',\n  'color-burn',\n  'hard-light',\n  'soft-light',\n  'darken',\n  'lighten'\n] as unknown as React.CSSProperties['mixBlendMode'][]\n\nexport const LENS_0 = {\n  Globe: { innerColor: '#170d02', innerOpacity: 0.1, outerColor: '#FFAC02' },\n  Lens: {\n    bgBlend: 'difference',\n    bgColor: '#041C1C',\n    bgOpacity: 1,\n    fgColor: '#FFFFFF',\n    fgOpacity: 0,\n    fillerOpacity: 0.033,\n    mgColor: '#ffe6cb',\n    mgOpacity: 1\n  }\n}\n\nexport const LENS_5I = {\n  Globe: { innerColor: '#170d02', innerOpacity: 0.3, outerColor: '#FFAC02' },\n  Lens: {\n    bgBlend: 'multiply',\n    bgColor: '#170d02',\n    bgOpacity: 1,\n    fgColor: '#FFFFFF',\n    fgOpacity: 1,\n    fillerOpacity: 0.06,\n    mgColor: '#FFAC02',\n    mgOpacity: 1\n  }\n}\n\nexport const lens0 = (\n  l?: Partial<typeof LENS_0.Lens>,\n  g?: Partial<typeof LENS_0.Globe>\n): LensPreset => ({\n  Globe: { ...LENS_0.Globe, ...g },\n  Lens: { ...LENS_0.Lens, ...l }\n})\n\nexport const LENSES: [string, LensPreset][] = [\n  ['0', LENS_0],\n  ['1', lens0({ bgColor: '#041C1C', fgOpacity: 1 })],\n  ['2', lens0({ bgColor: '#0E0313', fgOpacity: 1 })],\n  ['3', lens0({ bgColor: '#003EB4', fgColor: '#001289', fgOpacity: 1 })],\n  ['4', lens0({ bgColor: '#0E39AA', fgColor: '#001289', fgOpacity: 1 })],\n  ['5', lens0({ bgColor: '#1540B1', bgOpacity: 0.7 })],\n  ['5i', LENS_5I],\n  [\n    '6',\n    lens0({\n      bgColor: '#0e39aa',\n      fgColor: '#001289',\n      fgOpacity: 1,\n      mgColor: '#ffffff'\n    })\n  ],\n]\n\nexport const applyLens = (preset: LensPreset, animate = false) =>\n  Object.entries(preset).forEach(([g, v]) =>\n    Object.entries(v).forEach(([k, val]) =>\n      setControlValue(g, k, val, { animate })\n    )\n  )\n\nexport const $lightMode = atom(true)\n\nexport const toggleLens = () => {\n  const isLight = $lightMode.get()\n  const next = isLight ? LENS_0 : LENS_5I\n\n  $lightMode.set(!isLight)\n  applyLens(next, true)\n}\n\nexport function Overlays({ dark }: { dark?: boolean }) {\n  const init = dark ? LENS_0.Lens : LENS_5I.Lens\n\n  const lens = useSmoothControls(\n    'Lens',\n    {\n      bgBlend: { options: BLEND_MODES, value: init.bgBlend as 'multiply' },\n      bgColor: { value: init.bgColor },\n      bgOpacity: { max: 1, min: 0, step: 0.01, value: init.bgOpacity },\n      fgBlend: { options: BLEND_MODES, value: 'difference' as const },\n      fgColor: { value: init.fgColor },\n      fgOpacity: { max: 1, min: 0, step: 0.01, value: init.fgOpacity },\n      fillerBlend: { options: BLEND_MODES, value: 'difference' as const },\n      fillerOpacity: { max: 1, min: 0, step: 0.01, value: init.fillerOpacity },\n      mgColor: { value: init.mgColor },\n      mgOpacity: { max: 1, min: 0, step: 0.01, value: init.mgOpacity }\n    },\n    { collapsed: false }\n  )\n\n  useEffect(() => {\n    $lightMode.set(!dark)\n    applyLens(dark ? LENS_0 : LENS_5I)\n  }, [dark])\n\n  useEffect(() => {\n    const s = document.documentElement.style\n\n    for (const [name, color, alpha] of [\n      ['foreground', lens.fgColor, lens.fgOpacity],\n      ['midground', lens.mgColor, lens.mgOpacity],\n      ['background', lens.bgColor, lens.bgOpacity]\n    ] as [string, string, number][]) {\n      s.setProperty(`--${name}`, colorMix(color, alpha))\n      s.setProperty(`--${name}-base`, color)\n      s.setProperty(`--${name}-alpha`, `${alpha}`)\n    }\n  }, [lens])\n\n  useEffect(() => {\n    const handle = (e: KeyboardEvent) => e.key === 'x' && toggleLens()\n    window.addEventListener('keydown', handle)\n    return () => window.removeEventListener('keydown', handle)\n  }, [])\n\n  return (\n    <>\n      <Noise className={`${LAYER} z-101`} />\n\n      <div\n        className={`${LAYER} z-100`}\n        style={{\n          backgroundColor: colorMix(lens.fgColor, lens.fgOpacity),\n          mixBlendMode: lens.fgBlend\n        }}\n      />\n\n      <Vignette className={`${LAYER} z-99`} />\n      <Greys className={`${LAYER} z-200`} />\n      <Glitch className={`${LAYER} z-201`} />\n\n      <div\n        className={`${LAYER} z-2`}\n        style={{ mixBlendMode: lens.fillerBlend, opacity: lens.fillerOpacity }}\n      >\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          alt=\"\"\n          className=\"h-[150dvh] w-auto min-w-dvw object-cover object-top-left invert\"\n          fetchPriority=\"low\"\n          src={fillerBg.src}\n        />\n      </div>\n\n      <div\n        className={`${LAYER} z-1`}\n        style={{\n          backgroundColor: colorMix(lens.bgColor, lens.bgOpacity),\n          mixBlendMode: lens.bgBlend\n        }}\n      />\n    </>\n  )\n}\n\nexport type LensPreset = Record<string, Record<string, unknown>>\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/components/overlays/index.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { atom } from 'nanostores'\nimport { useEffect } from 'react'\n\nimport {\n  getControlAtom,\n  setControlValue,\n  useSmoothControls\n} from '../../../hooks/use-smooth-controls'\nimport { colorMix } from '../../../utils/color'\n\nimport fillerBg from '../../../assets/filler-bg0.jpg'\n\nimport { Glitch } from './glitch'\nimport { Greys } from './greys'\nimport { Noise } from './noise'\nimport { Vignette } from './vignette'\n\nconst LAYER = 'pointer-events-none fixed inset-0'\n\nexport const BLEND_MODES = [\n  'overlay',\n  'multiply',\n  'screen',\n  'difference',\n  'exclusion',\n  'color-dodge',\n  'color-burn',\n  'hard-light',\n  'soft-light',\n  'darken',\n  'lighten'\n] as unknown as React.CSSProperties['mixBlendMode'][]\n\nexport const LENS_0 = {\n  Globe: { innerColor: '#170d02', innerOpacity: 0.1, outerColor: '#FFAC02' },\n  Lens: {\n    bgBlend: 'difference',\n    bgColor: '#041C1C',\n    bgOpacity: 1,\n    fgColor: '#FFFFFF',\n    fgOpacity: 0,\n    fillerOpacity: 0.033,\n    mgColor: '#ffe6cb',\n    mgOpacity: 1\n  }\n}\n\nexport const LENS_5I = {\n  Globe: { innerColor: '#170d02', innerOpacity: 0.3, outerColor: '#FFAC02' },\n  Lens: {\n    bgBlend: 'multiply',\n    bgColor: '#170d02',\n    bgOpacity: 1,\n    fgColor: '#FFFFFF',\n    fgOpacity: 1,\n    fillerOpacity: 0.06,\n    mgColor: '#FFAC02',\n    mgOpacity: 1\n  }\n}\n\nexport const lens0 = (\n  l?: Partial<typeof LENS_0.Lens>,\n  g?: Partial<typeof LENS_0.Globe>\n): LensPreset => ({\n  Globe: { ...LENS_0.Globe, ...g },\n  Lens: { ...LENS_0.Lens, ...l }\n})\n\n// The Hermes light-mode look is produced by a fullscreen opaque-white\n// `mix-blend-mode: difference` foreground layer that inverts everything.\n// Colored lenses that want a \"white + accent\" look MUST be built from\n// LENS_5I, not LENS_0 — otherwise `bgBlend: 'difference'` + an opaque\n// colored bg + active fg inversion land halfway between dark and light\n// mode and produce a muddy warm wash instead of a clean inversion.\nexport const lens5i = (\n  l?: Partial<typeof LENS_5I.Lens>,\n  g?: Partial<typeof LENS_5I.Globe>\n): LensPreset => ({\n  Globe: { ...LENS_5I.Globe, ...g },\n  Lens: { ...LENS_5I.Lens, ...l }\n})\n\n// Accent colors are the *pre-inversion* source; after the difference FG\n// layer they read as their visual complement. e.g. `#FFAC02` (orange)\n// renders as blue #0053FD on screen — that's the default LENS_5I accent.\nexport const LENSES: [string, LensPreset][] = [\n  ['0', LENS_0],\n  ['1', lens0({ bgColor: '#0A1F1F' })],\n  ['2', lens0({ bgColor: '#0E0313', mgColor: '#e6cbff' })],\n  ['3', lens5i({ mgColor: '#FFAC02' })],\n  ['4', lens5i({ bgColor: '#0E0313', mgColor: '#FF5500' })],\n  ['5', lens0({ bgColor: '#1540B1', bgOpacity: 0.7 })],\n  ['5i', LENS_5I],\n  ['6', lens5i({ bgColor: '#170D02', mgColor: '#00E5FF' })]\n]\n\nexport const applyLens = (preset: LensPreset, animate = false) =>\n  Object.entries(preset).forEach(([g, v]) =>\n    Object.entries(v).forEach(([k, val]) =>\n      setControlValue(g, k, val, { animate })\n    )\n  )\n\nexport const $lightMode = atom(true)\n\nexport const toggleLens = () => {\n  const isLight = $lightMode.get()\n  const next = isLight ? LENS_0 : LENS_5I\n\n  $lightMode.set(!isLight)\n  applyLens(next, true)\n}\n\nexport function Overlays({ dark, initial }: OverlaysProps) {\n  // `initial` lets the host (e.g. Storybook) seed the Leva/atom state with\n  // the *exact* lens preset the user selected, avoiding a one-cycle lag\n  // where useSmoothControls emits old colors for the first paint (and, on\n  // Storybook's fast iframe reload, sometimes never catches up because\n  // useControls' ready-gate swallows the instant color writes).\n  const base = initial?.Lens ?? (dark ? LENS_0.Lens : LENS_5I.Lens)\n\n  const lens = useSmoothControls(\n    'Lens',\n    {\n      bgBlend: { options: BLEND_MODES, value: base.bgBlend as 'multiply' },\n      bgColor: { value: base.bgColor },\n      bgOpacity: { max: 1, min: 0, step: 0.01, value: base.bgOpacity },\n      fgBlend: { options: BLEND_MODES, value: 'difference' as const },\n      fgColor: { value: base.fgColor },\n      fgOpacity: { max: 1, min: 0, step: 0.01, value: base.fgOpacity },\n      fillerBlend: { options: BLEND_MODES, value: 'difference' as const },\n      fillerOpacity: { max: 1, min: 0, step: 0.01, value: base.fillerOpacity },\n      mgColor: { value: base.mgColor },\n      mgOpacity: { max: 1, min: 0, step: 0.01, value: base.mgOpacity }\n    },\n    { collapsed: false }\n  )\n\n  useEffect(() => {\n    $lightMode.set(!dark)\n  }, [dark])\n\n  useEffect(() => {\n    const s = document.documentElement.style\n\n    for (const [name, color, alpha] of [\n      ['foreground', lens.fgColor, lens.fgOpacity],\n      ['midground', lens.mgColor, lens.mgOpacity],\n      ['background', lens.bgColor, lens.bgOpacity]\n    ] as [string, string, number][]) {\n      s.setProperty(`--${name}`, colorMix(color, alpha))\n      s.setProperty(`--${name}-base`, color)\n      s.setProperty(`--${name}-alpha`, `${alpha}`)\n    }\n  }, [lens])\n\n  useEffect(() => {\n    const handle = (e: KeyboardEvent) => e.key === 'x' && toggleLens()\n    window.addEventListener('keydown', handle)\n    return () => window.removeEventListener('keydown', handle)\n  }, [])\n\n  // NOTE: z-index is inlined because Tailwind's JIT sometimes doesn't emit\n  // these non-default utilities (e.g. in Storybook's isolated content\n  // scan), which silently collapses the overlay stack to DOM order and\n  // breaks the mix-blend-mode inversion — producing a muddy warm wash\n  // instead of the intended clean black/white inversion.\n  return (\n    <>\n      <Noise className={LAYER} style={{ zIndex: 101 }} />\n\n      <div\n        className={LAYER}\n        style={{\n          backgroundColor: colorMix(lens.fgColor, lens.fgOpacity),\n          mixBlendMode: lens.fgBlend,\n          zIndex: 100\n        }}\n      />\n\n      <Vignette className={LAYER} style={{ zIndex: 99 }} />\n      <Greys className={LAYER} style={{ zIndex: 200 }} />\n      <Glitch className={LAYER} style={{ zIndex: 201 }} />\n\n      <div\n        className={LAYER}\n        style={{\n          mixBlendMode: lens.fillerBlend,\n          opacity: lens.fillerOpacity,\n          zIndex: 2\n        }}\n      >\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          alt=\"\"\n          className=\"h-[150dvh] w-auto min-w-dvw object-cover object-top-left invert\"\n          fetchPriority=\"low\"\n          src={fillerBg.src}\n        />\n      </div>\n\n      <div\n        className={LAYER}\n        style={{\n          backgroundColor: colorMix(lens.bgColor, lens.bgOpacity),\n          mixBlendMode: lens.bgBlend,\n          zIndex: 1\n        }}\n      />\n    </>\n  )\n}\n\nexport interface LensPreset {\n  Globe: typeof LENS_0.Globe\n  Lens: typeof LENS_0.Lens\n}\n\ninterface OverlaysProps {\n  dark?: boolean\n  /**\n   * Exact preset to seed the internal Leva controls with. When omitted the\n   * component falls back to `LENS_0` / `LENS_5I` based on `dark`. Pass the\n   * actual preset from a host (e.g. Storybook toolbar) to guarantee the\n   * first-paint colors match the selected lens without needing a followup\n   * `applyLens` that can be lost in useSmoothControls' startup window.\n   */\n  initial?: LensPreset\n}\n"]}