@orangecheck/design 0.25.0 → 0.27.0

package/dist/tokens.mjs

@@ -1,11 +1,385 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useRef, useEffect, useState, useCallback, useMemo, useContext } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useTheme } from 'next-themes';
-import { Palette, Check, Sun, Moon, Monitor } from 'lucide-react';
+import { Palette, Check, Sun, Moon, Monitor, Waves, Pause } from 'lucide-react';
 
-// src/tokens/cn.ts
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/tokens/scene-tokens.ts
+function parseColor(value) {
+  let m = value.match(/color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)/);
+  if (m?.[1] != null && m[2] != null && m[3] != null) {
+    return { r: +m[1], g: +m[2], b: +m[3] };
+  }
+  m = value.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/);
+  if (m?.[1] != null && m[2] != null && m[3] != null) {
+    return { r: +m[1] / 255, g: +m[2] / 255, b: +m[3] / 255 };
+  }
+  return null;
+}
+function srgbToOklab({ r, g, b }) {
+  const lin = (c) => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  const lr = lin(r);
+  const lg = lin(g);
+  const lb = lin(b);
+  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+  return {
+    L: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    a: 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    b: 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  };
+}
+function oklabToSrgb(L, a, bb) {
+  const l = Math.pow(L + 0.3963377774 * a + 0.2158037573 * bb, 3);
+  const m = Math.pow(L - 0.1055613458 * a - 0.0638541728 * bb, 3);
+  const s = Math.pow(L - 0.0894841775 * a - 1.291485548 * bb, 3);
+  const lr = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+  const lg = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+  const lb = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+  const un = (c) => Math.min(1, Math.max(0, c <= 31308e-7 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055));
+  return { r: un(lr), g: un(lg), b: un(lb) };
+}
+function normalizeHue(c, isDark) {
+  const { L, a, b } = srgbToOklab(c);
+  const C = Math.hypot(a, b);
+  const targetL = isDark ? Math.min(0.75, Math.max(0.55, L)) : Math.min(0.95, Math.max(0.82, L + 0.25));
+  const scale = C > 1e-6 ? Math.min(C, 0.14) / C : 0;
+  return oklabToSrgb(targetL, a * scale, b * scale);
+}
+function readOcSceneTokens(host) {
+  if (typeof document === "undefined") return null;
+  const probe = document.createElement("div");
+  probe.setAttribute("aria-hidden", "true");
+  probe.style.cssText = "position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;";
+  const cells = SLOTS.map((slot) => {
+    const cell = document.createElement("span");
+    cell.style.color = `color-mix(in srgb, var(${slot}), var(${slot}))`;
+    probe.appendChild(cell);
+    return cell;
+  });
+  host.appendChild(probe);
+  try {
+    const parsed = cells.map((cell) => parseColor(getComputedStyle(cell).color));
+    const [orange, green, blue, violet, background] = parsed;
+    if (!orange || !green || !blue || !violet || !background) return null;
+    const root = document.documentElement;
+    return {
+      palette: [orange, green, blue, violet],
+      background,
+      isDark: root.classList.contains("dark"),
+      motionOff: root.getAttribute("data-oc-motion") === "off"
+    };
+  } finally {
+    host.removeChild(probe);
+  }
+}
+function subscribeOcTheme(cb) {
+  if (typeof document === "undefined") return () => {
+  };
+  let raf1 = 0;
+  let raf2 = 0;
+  const schedule = () => {
+    cancelAnimationFrame(raf1);
+    cancelAnimationFrame(raf2);
+    raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(cb);
+    });
+  };
+  const mo = new MutationObserver(schedule);
+  mo.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "data-oc-theme", "data-oc-motion"]
+  });
+  return () => {
+    mo.disconnect();
+    cancelAnimationFrame(raf1);
+    cancelAnimationFrame(raf2);
+  };
+}
+var SLOTS;
+var init_scene_tokens = __esm({
+  "src/tokens/scene-tokens.ts"() {
+    SLOTS = ["--au-orange", "--au-green", "--au-blue", "--au-violet", "--background"];
+  }
+});
+
+// src/tokens/aurora-gl.ts
+var aurora_gl_exports = {};
+__export(aurora_gl_exports, {
+  mountAuroraGL: () => mountAuroraGL
+});
+function killFlagged() {
+  try {
+    const raw = localStorage.getItem(KILL_KEY);
+    if (!raw) return false;
+    if (Date.now() - Number(raw) > KILL_TTL_MS) {
+      localStorage.removeItem(KILL_KEY);
+      return false;
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+function setKillFlag() {
+  try {
+    localStorage.setItem(KILL_KEY, String(Date.now()));
+  } catch {
+  }
+}
+function cypherFinish() {
+  const skin = document.documentElement.getAttribute("data-oc-theme");
+  return skin !== null && skin !== "ember";
+}
+function samplePalette(host) {
+  const tokens = readOcSceneTokens(host);
+  if (!tokens) return null;
+  return {
+    hues: tokens.palette.map((h) => normalizeHue(h, tokens.isDark)),
+    bg: tokens.background,
+    isDark: tokens.isDark,
+    finish: cypherFinish() ? 1 : 0
+  };
+}
+function mountAuroraGL(container) {
+  if (killFlagged()) return null;
+  if (getComputedStyle(container).getPropertyValue("--oc-aurora-gl").trim() === "off") {
+    return null;
+  }
+  const canvas = document.createElement("canvas");
+  canvas.className = "oc-aurora__gl";
+  const glMaybe = canvas.getContext("webgl2", {
+    antialias: false,
+    depth: false,
+    stencil: false,
+    alpha: false,
+    powerPreference: "low-power",
+    failIfMajorPerformanceCaveat: true
+    // SwiftShader/blocklist → CSS floor, free
+  });
+  if (!glMaybe) return null;
+  const gl = glMaybe;
+  const first = samplePalette(container);
+  if (!first) return null;
+  let prog;
+  const uni = {};
+  try {
+    const compile = (type, src) => {
+      const s = gl.createShader(type);
+      gl.shaderSource(s, src);
+      gl.compileShader(s);
+      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error("compile");
+      return s;
+    };
+    prog = gl.createProgram();
+    gl.attachShader(prog, compile(gl.VERTEX_SHADER, VS));
+    gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FS));
+    gl.linkProgram(prog);
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) throw new Error("link");
+    gl.useProgram(prog);
+    const buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    const loc = gl.getAttribLocation(prog, "p");
+    gl.enableVertexAttribArray(loc);
+    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+    for (const k of ["uRes", "uT", "uIsDark", "uFinish", "uMix", "uA0", "uA1", "uA2", "uA3", "uB0", "uB1", "uB2", "uB3", "uBg"]) {
+      uni[k] = gl.getUniformLocation(prog, k);
+    }
+  } catch {
+    return null;
+  }
+  container.appendChild(canvas);
+  let palFrom = first;
+  let palTo = first;
+  let mixStart = 0;
+  let raf = 0;
+  let lastFrame = 0;
+  let clock = 0;
+  let lastTick = 0;
+  let lastInput = performance.now();
+  let live = false;
+  let disposed = false;
+  let slowStreak = 0;
+  const setVec = (k, c) => gl.uniform3f(uni[k] ?? null, c.r, c.g, c.b);
+  function resize() {
+    const coarse = matchMedia("(pointer: coarse)").matches;
+    const dpr = Math.min(devicePixelRatio || 1, coarse ? 1.5 : 2) * 0.75;
+    const w = Math.max(1, Math.round(container.clientWidth * dpr));
+    const hgt = Math.max(1, Math.round(container.clientHeight * dpr));
+    if (canvas.width !== w || canvas.height !== hgt) {
+      canvas.width = w;
+      canvas.height = hgt;
+      gl.viewport(0, 0, w, hgt);
+    }
+  }
+  function draw(now) {
+    raf = requestAnimationFrame(draw);
+    if (now - lastFrame < FRAME_MS) return;
+    const frameGap = now - lastFrame;
+    lastFrame = now;
+    if (frameGap > FRAME_MS * 2.5) {
+      if (++slowStreak > 90) {
+        setKillFlag();
+        dispose();
+        return;
+      }
+    } else if (slowStreak > 0) slowStreak--;
+    const settled = now - lastInput > SETTLE_MS;
+    if (!settled) {
+      clock += Math.min(now - lastTick, 100) / 1e3;
+    }
+    lastTick = now;
+    if (settled && live && mixDone(now)) return;
+    resize();
+    const mix = Math.min(1, (now - mixStart) / CROSSFADE_MS);
+    gl.uniform2f(uni.uRes ?? null, canvas.width, canvas.height);
+    gl.uniform1f(uni.uT ?? null, clock);
+    gl.uniform1f(uni.uIsDark ?? null, palTo.isDark ? 1 : 0);
+    gl.uniform1f(uni.uFinish ?? null, palTo.finish);
+    gl.uniform1f(uni.uMix ?? null, mix);
+    setVec("uA0", palFrom.hues[0]);
+    setVec("uA1", palFrom.hues[1]);
+    setVec("uA2", palFrom.hues[2]);
+    setVec("uA3", palFrom.hues[3]);
+    setVec("uB0", palTo.hues[0]);
+    setVec("uB1", palTo.hues[1]);
+    setVec("uB2", palTo.hues[2]);
+    setVec("uB3", palTo.hues[3]);
+    setVec("uBg", palTo.bg);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    if (!live) {
+      live = true;
+      container.classList.add("oc-aurora--gl-live");
+    }
+  }
+  function mixDone(now) {
+    return now - mixStart >= CROSSFADE_MS;
+  }
+  const onInput = () => {
+    lastInput = performance.now();
+  };
+  const onVisibility = () => {
+    if (document.hidden) {
+      cancelAnimationFrame(raf);
+      raf = 0;
+    } else if (!raf && !disposed) {
+      lastFrame = 0;
+      lastTick = performance.now();
+      raf = requestAnimationFrame(draw);
+    }
+  };
+  const onContextLost = (e) => {
+    e.preventDefault();
+    cancelAnimationFrame(raf);
+    raf = 0;
+  };
+  const onContextRestored = () => {
+    dispose();
+  };
+  const unsubscribeTheme = subscribeOcTheme(() => {
+    if (disposed) return;
+    const root = document.documentElement;
+    if (root.getAttribute("data-oc-motion") === "off") {
+      dispose();
+      return;
+    }
+    const next = samplePalette(container);
+    if (!next) return;
+    palFrom = { ...palTo, hues: [...palTo.hues] };
+    palTo = next;
+    mixStart = performance.now();
+    lastInput = performance.now();
+  });
+  window.addEventListener("pointermove", onInput, { passive: true });
+  window.addEventListener("scroll", onInput, { passive: true });
+  window.addEventListener("keydown", onInput, { passive: true });
+  document.addEventListener("visibilitychange", onVisibility);
+  canvas.addEventListener("webglcontextlost", onContextLost);
+  canvas.addEventListener("webglcontextrestored", onContextRestored);
+  function dispose() {
+    if (disposed) return;
+    disposed = true;
+    cancelAnimationFrame(raf);
+    unsubscribeTheme();
+    window.removeEventListener("pointermove", onInput);
+    window.removeEventListener("scroll", onInput);
+    window.removeEventListener("keydown", onInput);
+    document.removeEventListener("visibilitychange", onVisibility);
+    canvas.removeEventListener("webglcontextlost", onContextLost);
+    canvas.removeEventListener("webglcontextrestored", onContextRestored);
+    container.classList.remove("oc-aurora--gl-live");
+    canvas.remove();
+    const ext = gl.getExtension("WEBGL_lose_context");
+    if (ext) ext.loseContext();
+  }
+  resize();
+  mixStart = performance.now();
+  lastTick = performance.now();
+  raf = requestAnimationFrame(draw);
+  return dispose;
+}
+var KILL_KEY, KILL_TTL_MS, SETTLE_MS, FRAME_MS, CROSSFADE_MS, VS, FS;
+var init_aurora_gl = __esm({
+  "src/tokens/aurora-gl.ts"() {
+    init_scene_tokens();
+    KILL_KEY = "oc-aurora-gl-kill:1";
+    KILL_TTL_MS = 7 * 24 * 60 * 60 * 1e3;
+    SETTLE_MS = 9e4;
+    FRAME_MS = 33;
+    CROSSFADE_MS = 250;
+    VS = `#version 300 es
+in vec2 p;void main(){gl_Position=vec4(p,0.,1.);}`;
+    FS = `#version 300 es
+precision highp float;
+out vec4 o;
+uniform vec2 uRes;uniform float uT,uIsDark,uFinish,uMix;
+uniform vec3 uA0,uA1,uA2,uA3,uB0,uB1,uB2,uB3,uBg;
+float h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
+float n2(vec2 p){vec2 i=floor(p),f=fract(p);f=f*f*(3.-2.*f);
+return mix(mix(h(i),h(i+vec2(1,0)),f.x),mix(h(i+vec2(0,1)),h(i+vec2(1,1)),f.x),f.y);}
+float fbm(vec2 p){float v=0.,a=.55;for(int i=0;i<3;i++){v+=a*n2(p);p=p*2.03+vec2(1.7,9.2);a*=.5;}return v;}
+float B2(vec2 a){a=floor(a);return fract(a.x/2.+a.y*a.y*.75);}
+// OKLab mix (Ottosson) so skin crossfades never transit gray-brown.
+vec3 l2s(vec3 c){return mix(12.92*c,1.055*pow(c,vec3(1./2.4))-.055,step(.0031308,c));}
+vec3 s2l(vec3 c){return mix(c/12.92,pow((c+.055)/1.055,vec3(2.4)),step(.04045,c));}
+vec3 okmix(vec3 a,vec3 b,float t){
+vec3 la=s2l(a),lb=s2l(b);
+mat3 M1=mat3(.4122214708,.2119034982,.0883024619,.5363325363,.6806995451,.2817188376,.0514459929,.1073969566,.6299787005);
+mat3 M2=mat3(4.0767416621,-1.2684380046,-.0041960863,-3.3077115913,2.6097574011,-.7034186147,.2309699292,-.3413193965,1.707614701);
+vec3 ka=pow(M1*la,vec3(1./3.)),kb=pow(M1*lb,vec3(1./3.));
+vec3 k=mix(ka,kb,t);return clamp(l2s(M2*(k*k*k)),0.,1.);}
+void main(){
+vec2 uv=gl_FragCoord.xy/uRes;
+vec2 p=(uv-.5)*vec2(uRes.x/uRes.y,1.)*1.9;
+float t=uT*.018;
+vec2 w=vec2(fbm(p+vec2(0.,t)),fbm(p+vec2(5.2,1.3)-t*.7));
+float f=fbm(p+1.9*w+vec2(t*.5,-t*.3));
+float g=fbm(p*.6+w*1.2+vec2(9.1,3.7));
+vec3 c0=okmix(uA0,uB0,uMix),c1=okmix(uA1,uB1,uMix),c2=okmix(uA2,uB2,uMix),c3=okmix(uA3,uB3,uMix);
+vec3 c=mix(mix(c0,c1,smoothstep(.25,.55,g)),mix(c2,c3,smoothstep(.45,.8,g)),smoothstep(.4,.7,g));
+float e=smoothstep(.32,.9,f);
+if(uFinish>.5){
+float b=B2(.125*gl_FragCoord.xy)*.0625+B2(.25*gl_FragCoord.xy)*.25+B2(.5*gl_FragCoord.xy);
+e=floor(e*5.+b*.8-.4)/5.;}
+// container CSS already applies the mode-op \xD7 intensity opacity + radial mask
+vec3 col=(uIsDark>.5)?clamp(uBg+c*e*1.15,0.,1.):mix(uBg,c,e);
+col+=(fract(52.9829189*fract(dot(gl_FragCoord.xy,vec2(0.06711056,0.00583715))))-.5)/255.;
+o=vec4(col,1.);}`;
+  }
+});
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -55,13 +429,85 @@ function resolveTheme(id) {
   return isKnownTheme(id) ? id : DEFAULT_OC_THEME;
 }
 var OC_SKIN_COOKIE = "oc_skin";
+var OC_MOTION_COOKIE = "oc_motion";
 var BLOBS = [1, 2, 3, 4, 5];
-function OcAurora({ intensity, className }) {
+function onIdle(cb, timeout) {
+  if (typeof requestIdleCallback === "function") {
+    const id2 = requestIdleCallback(cb, { timeout });
+    return () => cancelIdleCallback(id2);
+  }
+  const id = setTimeout(cb, timeout);
+  return () => clearTimeout(id);
+}
+function OcAurora({ intensity, gl = false, className }) {
+  const hostRef = useRef(null);
+  useEffect(() => {
+    if (!gl) return;
+    const host = hostRef.current;
+    if (!host) return;
+    let disposed = false;
+    let disposeScene = null;
+    let cancelIdle = null;
+    const prm = matchMedia("(prefers-reduced-motion: reduce)");
+    const forced = matchMedia("(forced-colors: active)");
+    function gatesPass() {
+      if (prm.matches || forced.matches) return false;
+      if (document.documentElement.getAttribute("data-oc-motion") === "off") return false;
+      const nav = navigator;
+      if (nav.connection?.saveData === true) return false;
+      if (typeof nav.deviceMemory === "number" && nav.deviceMemory <= 4) return false;
+      return true;
+    }
+    function boot() {
+      cancelIdle = onIdle(async () => {
+        if (disposed || disposeScene || !gatesPass()) return;
+        try {
+          const mod = await Promise.resolve().then(() => (init_aurora_gl(), aurora_gl_exports));
+          if (disposed || disposeScene || !gatesPass()) return;
+          disposeScene = mod.mountAuroraGL(host);
+        } catch {
+        }
+      }, 2e3);
+    }
+    function teardownScene() {
+      disposeScene?.();
+      disposeScene = null;
+    }
+    const onPrmChange = () => {
+      if (prm.matches) teardownScene();
+      else if (!disposeScene) boot();
+    };
+    prm.addEventListener?.("change", onPrmChange);
+    const mo = new MutationObserver(() => {
+      const off = document.documentElement.getAttribute("data-oc-motion") === "off";
+      if (!off && !disposeScene && !disposed) boot();
+    });
+    mo.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-oc-motion"]
+    });
+    if (document.readyState === "complete") boot();
+    else {
+      const onLoad = () => boot();
+      window.addEventListener("load", onLoad, { once: true });
+    }
+    return () => {
+      disposed = true;
+      cancelIdle?.();
+      prm.removeEventListener?.("change", onPrmChange);
+      mo.disconnect();
+      teardownScene();
+    };
+  }, [gl]);
   const style = intensity == null ? void 0 : { "--oc-aurora-intensity": String(intensity) };
-  return /* @__PURE__ */ jsx("div", { className: cn("oc-aurora", className), style, "aria-hidden": "true", children: BLOBS.map((n) => /* @__PURE__ */ jsx("div", { className: `oc-aurora__blob oc-aurora__blob-${n}` }, n)) });
+  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: cn("oc-aurora", className), style, "aria-hidden": "true", children: [
+    BLOBS.map((n) => /* @__PURE__ */ jsx("div", { className: `oc-aurora__blob oc-aurora__blob-${n}` }, n)),
+    /* @__PURE__ */ jsx("div", { className: "oc-aurora__grain" })
+  ] });
 }
 var ONE_YEAR = 60 * 60 * 24 * 365;
 var ATTR = "data-oc-theme";
+var MOTION_ATTR = "data-oc-motion";
 function readSkinCookie() {
   if (typeof document === "undefined") return null;
   const prefix = `${OC_SKIN_COOKIE}=`;
@@ -93,6 +539,38 @@ function applyAttr(skin) {
   if (typeof document === "undefined") return;
   document.documentElement.setAttribute(ATTR, skin);
 }
+function readMotionCookie() {
+  if (typeof document === "undefined") return null;
+  const prefix = `${OC_MOTION_COOKIE}=`;
+  for (const part of document.cookie.split(";")) {
+    const trimmed = part.trim();
+    if (trimmed.startsWith(prefix)) {
+      const v = decodeURIComponent(trimmed.slice(prefix.length));
+      return v === "off" ? "off" : v === "on" ? "on" : null;
+    }
+  }
+  return null;
+}
+function writeMotionCookie(value) {
+  if (typeof document === "undefined") return;
+  const isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
+  const parts = [
+    `${OC_MOTION_COOKIE}=${encodeURIComponent(value)}`,
+    "Path=/",
+    `Max-Age=${ONE_YEAR}`,
+    "SameSite=Lax"
+  ];
+  if (!isLocal) {
+    parts.push("Domain=.ochk.io");
+    parts.push("Secure");
+  }
+  document.cookie = parts.join("; ");
+}
+function applyMotionAttr(motion) {
+  if (typeof document === "undefined") return;
+  if (motion === "off") document.documentElement.setAttribute(MOTION_ATTR, "off");
+  else document.documentElement.removeAttribute(MOTION_ATTR);
+}
 function applySkinChrome(skin) {
   if (typeof window === "undefined") return;
   if (typeof window.__ocApplySkinChrome === "function") {
@@ -109,6 +587,7 @@ function OcThemeProvider({
   aurora = true
 }) {
   const [skin, setSkinState] = useState(() => resolveTheme(defaultSkin));
+  const [motion, setMotionState] = useState("on");
   const hydratedRef = useRef(false);
   useEffect(() => {
     if (hydratedRef.current) return;
@@ -117,6 +596,9 @@ function OcThemeProvider({
     applyAttr(fromCookie);
     applySkinChrome(fromCookie);
     setSkinState(fromCookie);
+    const motionCookie = readMotionCookie() ?? "on";
+    applyMotionAttr(motionCookie);
+    setMotionState(motionCookie);
   }, [defaultSkin]);
   useEffect(() => {
     function sync() {
@@ -126,6 +608,11 @@ function OcThemeProvider({
         applySkinChrome(fromCookie);
         setSkinState(fromCookie);
       }
+      const motionCookie = readMotionCookie() ?? "on";
+      if (motionCookie !== motion) {
+        applyMotionAttr(motionCookie);
+        setMotionState(motionCookie);
+      }
     }
     window.addEventListener("focus", sync);
     document.addEventListener("visibilitychange", sync);
@@ -133,7 +620,7 @@ function OcThemeProvider({
       window.removeEventListener("focus", sync);
       document.removeEventListener("visibilitychange", sync);
     };
-  }, [skin]);
+  }, [skin, motion]);
   const setSkin = useCallback((id) => {
     const next = resolveTheme(id);
     applyAttr(next);
@@ -141,12 +628,24 @@ function OcThemeProvider({
     writeSkinCookie(next);
     setSkinState(next);
   }, []);
+  const setMotion = useCallback((value2) => {
+    const next = value2 === "off" ? "off" : "on";
+    applyMotionAttr(next);
+    writeMotionCookie(next);
+    setMotionState(next);
+  }, []);
   const value = useMemo(
-    () => ({ skin, setSkin, themes: OC_THEMES }),
-    [skin, setSkin]
+    () => ({ skin, setSkin, themes: OC_THEMES, motion, setMotion }),
+    [skin, setSkin, motion, setMotion]
   );
   return /* @__PURE__ */ jsxs(OcSkinContext.Provider, { value, children: [
-    aurora !== false && /* @__PURE__ */ jsx(OcAurora, { intensity: typeof aurora === "object" ? aurora.intensity : void 0 }),
+    aurora !== false && /* @__PURE__ */ jsx(
+      OcAurora,
+      {
+        intensity: typeof aurora === "object" ? aurora.intensity : void 0,
+        gl: typeof aurora === "object" ? aurora.gl : void 0
+      }
+    ),
     children
   ] });
 }
@@ -157,9 +656,13 @@ function useOcSkin() {
   }
   return ctx;
 }
+function useOcMotion() {
+  const { motion, setMotion } = useOcSkin();
+  return { motion, setMotion };
+}
 function getOcThemeInitScript(defaultSkin = DEFAULT_OC_THEME) {
   const accents = Object.fromEntries(OC_THEMES.map((t) => [t.id, t.accent]));
-  return `(function(){var ACC=${JSON.stringify(accents)},DEF=${JSON.stringify(defaultSkin)},ORIG=${JSON.stringify(OC_DEFAULT_ACCENT)},fav=null;function acc(s){return ACC[s]||ACC[DEF]||ORIG;}window.__ocApplySkinChrome=function(s){try{var a=acc(s);var meta=document.querySelector('meta[name="theme-color"]');if(meta){meta.setAttribute('content',a);}var link=document.querySelector('link[rel~="icon"][type="image/svg+xml"]');if(!link){return;}var paint=function(svg){link.setAttribute('href','data:image/svg+xml,'+encodeURIComponent(svg.split(ORIG).join(a)));};if(fav!=null){paint(fav);return;}var h=link.getAttribute('href');if(!h||h.indexOf('data:')===0){return;}fetch(h).then(function(r){return r.text();}).then(function(svg){fav=svg;paint(svg);}).catch(function(){});}catch(e){}};try{var m=document.cookie.match(/(?:^|; )${OC_SKIN_COOKIE}=([^;]*)/);var s=m?decodeURIComponent(m[1]):DEF;if(!s){s=DEF;}document.documentElement.setAttribute('${ATTR}',s);window.__ocApplySkinChrome(s);}catch(e){document.documentElement.setAttribute('${ATTR}',DEF);}})();`;
+  return `(function(){var ACC=${JSON.stringify(accents)},DEF=${JSON.stringify(defaultSkin)},ORIG=${JSON.stringify(OC_DEFAULT_ACCENT)},fav=null;function acc(s){return ACC[s]||ACC[DEF]||ORIG;}window.__ocApplySkinChrome=function(s){try{var a=acc(s);var meta=document.querySelector('meta[name="theme-color"]');if(meta){meta.setAttribute('content',a);}var link=document.querySelector('link[rel~="icon"][type="image/svg+xml"]');if(!link){return;}var paint=function(svg){link.setAttribute('href','data:image/svg+xml,'+encodeURIComponent(svg.split(ORIG).join(a)));};if(fav!=null){paint(fav);return;}var h=link.getAttribute('href');if(!h||h.indexOf('data:')===0){return;}fetch(h).then(function(r){return r.text();}).then(function(svg){fav=svg;paint(svg);}).catch(function(){});}catch(e){}};try{var m=document.cookie.match(/(?:^|; )${OC_SKIN_COOKIE}=([^;]*)/);var s=m?decodeURIComponent(m[1]):DEF;if(!s){s=DEF;}document.documentElement.setAttribute('${ATTR}',s);window.__ocApplySkinChrome(s);}catch(e){document.documentElement.setAttribute('${ATTR}',DEF);}try{var mm=document.cookie.match(/(?:^|; )${OC_MOTION_COOKIE}=([^;]*)/);if(mm&&decodeURIComponent(mm[1])==='off'){document.documentElement.setAttribute('${MOTION_ATTR}','off');}}catch(e){}})();`;
 }
 var COOKIE = "oc_theme";
 var ALLOWED = /* @__PURE__ */ new Set(["light", "dark", "system"]);
@@ -294,10 +797,12 @@ var MODES = [
 ];
 function AppearanceControls({ className }) {
   const { skin, setSkin, themes } = useOcSkin();
+  const { motion, setMotion } = useOcMotion();
   const { theme, setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
   const activeMode = mounted ? theme ?? "system" : null;
+  const activeMotion = mounted ? motion : null;
   return /* @__PURE__ */ jsxs("div", { className, children: [
     /* @__PURE__ */ jsx("div", { className: "label-mono text-muted-foreground px-3 pt-3 pb-2", children: "mode" }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1 px-2 pb-2", children: MODES.map(({ id, label, Icon }) => {
@@ -344,6 +849,32 @@ function AppearanceControls({ className }) {
           ]
         }
       ) }, t.id);
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "label-mono text-muted-foreground border-t px-3 pt-3 pb-2", children: "ambient motion" }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1 px-2 pb-3", children: [
+      { id: "on", label: "on", Icon: Waves },
+      { id: "off", label: "off", Icon: Pause }
+    ].map(({ id, label, Icon }) => {
+      const active = activeMotion === id;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitemradio",
+          "aria-checked": active,
+          "aria-label": id === "off" ? "pause ambient motion" : "ambient motion on",
+          onClick: () => setMotion(id),
+          className: cn(
+            "flex flex-col items-center gap-1 rounded-md border py-2 text-[11px] transition-colors",
+            active ? "border-primary text-foreground bg-accent" : "border-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": true }),
+            label
+          ]
+        },
+        id
+      );
     }) })
   ] });
 }
@@ -400,6 +931,9 @@ function OcAppearanceMenu({
   ] });
 }
 
-export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcAurora, OcThemeBridge, OcThemePicker, OcThemeProvider, accentFor, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcSkin };
+// src/tokens/index.ts
+init_scene_tokens();
+
+export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_MOTION_COOKIE, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcAurora, OcThemeBridge, OcThemePicker, OcThemeProvider, accentFor, cn, getOcThemeInitScript, isKnownTheme, normalizeHue, readOcSceneTokens, resolveTheme, subscribeOcTheme, useOcMotion, useOcSkin };
 //# sourceMappingURL=tokens.mjs.map
 //# sourceMappingURL=tokens.mjs.map