@nous-research/ui 0.15.0 → 0.17.0

package/src/ui/components/overlays/greys.tsx

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

package/src/ui/components/overlays/index.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { Glitch } from './glitch'
+import { Greys } from './greys'
+import { Lens } from './lens-layers'
+import { Noise } from './noise'
+import { Vignette } from './vignette'
+
+import type { LensPreset } from './lens'
+
+export { BLEND_MODES } from './blend-modes'
+export { Glitch } from './glitch'
+export { Greys } from './greys'
+export { Lens } from './lens-layers'
+export { Noise } from './noise'
+export { Vignette } from './vignette'
+export {
+  $lightMode,
+  applyLens,
+  lens0,
+  lens5i,
+  LENS_0,
+  LENS_5I,
+  LENSES,
+  toggleLens
+} from './lens'
+export type { LensPreset } from './lens'
+
+const LAYER = 'pointer-events-none fixed inset-0'
+
+export function Overlays({ dark, initial }: OverlaysProps) {
+  return (
+    <>
+      <Lens dark={dark} initial={initial} />
+
+      <Noise className={LAYER} style={{ zIndex: 101 }} />
+      <Vignette className={LAYER} style={{ zIndex: 99 }} />
+      <Greys className={LAYER} style={{ zIndex: 200 }} />
+      <Glitch className={LAYER} style={{ zIndex: 201 }} />
+    </>
+  )
+}
+
+interface OverlaysProps {
+  dark?: boolean
+  initial?: LensPreset
+}

package/src/ui/components/overlays/lens-layers.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import { useSmoothControls } from '../../../hooks/use-smooth-controls'
+import { colorMix } from '../../../utils/color'
+
+import fillerBg from '../../../assets/filler-bg0.webp'
+
+import { BLEND_MODES } from './blend-modes'
+import { $lightMode, LENS_0, LENS_5I, type LensPreset, toggleLens } from './lens'
+
+const LAYER = 'pointer-events-none fixed inset-0'
+
+export function Lens({ dark, initial }: LensProps) {
+  // `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: base.bgBlend as 'multiply' },
+      bgColor: { value: base.bgColor },
+      bgOpacity: { max: 1, min: 0, step: 0.01, value: base.bgOpacity },
+      fgBlend: { options: BLEND_MODES, value: 'difference' as const },
+      fgColor: { value: base.fgColor },
+      fgOpacity: { max: 1, min: 0, step: 0.01, value: base.fgOpacity },
+      fillerBlend: { options: BLEND_MODES, value: 'difference' as const },
+      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)
+  }, [dark])
+
+  useEffect(() => {
+    const s = document.documentElement.style
+
+    for (const [name, color, alpha] of [
+      ['foreground', lens.fgColor, lens.fgOpacity],
+      ['midground', lens.mgColor, lens.mgOpacity],
+      ['background', lens.bgColor, lens.bgOpacity]
+    ] as [string, string, number][]) {
+      s.setProperty(`--${name}`, colorMix(color, alpha))
+      s.setProperty(`--${name}-base`, color)
+      s.setProperty(`--${name}-alpha`, `${alpha}`)
+    }
+  }, [lens])
+
+  useEffect(() => {
+    const handle = (e: KeyboardEvent) => e.key === 'x' && toggleLens()
+    window.addEventListener('keydown', handle)
+    return () => window.removeEventListener('keydown', handle)
+  }, [])
+
+  // 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 (
+    <>
+      <div
+        className={LAYER}
+        style={{
+          backgroundColor: colorMix(lens.fgColor, lens.fgOpacity),
+          mixBlendMode: lens.fgBlend,
+          zIndex: 100
+        }}
+      />
+
+      <div
+        className={LAYER}
+        style={{
+          mixBlendMode: lens.fillerBlend,
+          opacity: lens.fillerOpacity,
+          zIndex: 2
+        }}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          alt=""
+          className="h-[150dvh] w-auto min-w-dvw object-cover object-top-left invert"
+          fetchPriority="low"
+          src={fillerBg.src}
+        />
+      </div>
+
+      <div
+        className={LAYER}
+        style={{
+          backgroundColor: colorMix(lens.bgColor, lens.bgOpacity),
+          mixBlendMode: lens.bgBlend,
+          zIndex: 1
+        }}
+      />
+    </>
+  )
+}
+
+interface LensProps {
+  dark?: boolean
+  /**
+   * 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
+}

package/src/ui/components/overlays/lens.ts

@@ -0,0 +1,91 @@
+'use client'
+
+import { atom } from 'nanostores'
+
+import { setControlValue } from '../../../hooks/use-smooth-controls'
+
+export const LENS_0 = {
+  Globe: { innerColor: '#170d02', innerOpacity: 0.1, outerColor: '#FFAC02' },
+  Lens: {
+    bgBlend: 'difference',
+    bgColor: '#041C1C',
+    bgOpacity: 1,
+    fgColor: '#FFFFFF',
+    fgOpacity: 0,
+    fillerOpacity: 0.033,
+    mgColor: '#ffe6cb',
+    mgOpacity: 1
+  }
+}
+
+export const LENS_5I = {
+  Globe: { innerColor: '#170d02', innerOpacity: 0.3, outerColor: '#FFAC02' },
+  Lens: {
+    bgBlend: 'multiply',
+    bgColor: '#170d02',
+    bgOpacity: 1,
+    fgColor: '#FFFFFF',
+    fgOpacity: 1,
+    fillerOpacity: 0.06,
+    mgColor: '#FFAC02',
+    mgOpacity: 1
+  }
+}
+
+export const lens0 = (
+  l?: Partial<typeof LENS_0.Lens>,
+  g?: Partial<typeof LENS_0.Globe>
+): LensPreset => ({
+  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?: Partial<typeof LENS_5I.Lens>,
+  g?: Partial<typeof LENS_5I.Globe>
+): LensPreset => ({
+  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: [string, LensPreset][] = [
+  ['0', LENS_0],
+  ['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', lens5i({ bgColor: '#170D02', mgColor: '#00E5FF' })]
+]
+
+export const applyLens = (preset: LensPreset, animate = false) =>
+  Object.entries(preset).forEach(([g, v]) =>
+    Object.entries(v).forEach(([k, val]) =>
+      setControlValue(g, k, val, { animate })
+    )
+  )
+
+export const $lightMode = atom(true)
+
+export const toggleLens = () => {
+  const isLight = $lightMode.get()
+  const next = isLight ? LENS_0 : LENS_5I
+
+  $lightMode.set(!isLight)
+  applyLens(next, true)
+}
+
+export interface LensPreset {
+  Globe: typeof LENS_0.Globe
+  Lens: typeof LENS_0.Lens
+}