@orangecheck/app-design 0.3.1 → 0.4.0

package/dist/brand.mjs

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
 
 var merge = extendTailwindMerge({
   extend: {
@@ -91,39 +92,313 @@ function Lockup({ name = "orangecheck", size = 28, className }) {
     }
   );
 }
+
+// src/brand/portrait-tone.ts
+var PORTRAIT_TONE_SIZE = 128;
+var PORTRAIT_TONE_B64 = "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA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AAAAAAAAAAAAAAAAAAAAADCKz/v//9lYBgAAAAAAAAAAAAAAFUJqiaTD5/PdnFJZqub/////////6beKXzoFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAkEGl+dzPP/6XksDAAAAAAAAAAAAAABGjJTgavFzcyyhIrS////////////5serj0wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABggiVXWMv/vsj0YlDAAAAAAAAAAAAAAMHTVejKWwwr+1x/n/////////////7t/Vp00AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABDCdFSlWU6fGrXy4eFgAAAAAAAAAAAAsZLlB5oLrQ3Of///////////////////7hnTkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwABGTAzP3bK78yGOiErIQUAAAAAAAAACRYsWIa63fH/////////////////////+d2/fCUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAVMD1NdbXu6q9NGRoeGQ0AAAAAAAAJHTJbneH////////////////////////v0L+rcBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwGCR4zP09ync3uwlwYBgkQHCQgEAULGig8VYfP///////////////////////////v5NewYRAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAYMGSEkMFJ1pebdgSUAAAAIHTI9P0lieIyq3f//////////////////////////////9s2lVgEAAAAAAAAAAAAGBQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgsRGBAROni19v+1RgAAAAAGIT9efqfM5///////////////////////////////////2a9yIQAAAAAAAAAAABUcDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwULGB0lEgQoecf0/995FAAAAAAJKV+az/3////////////////////////////////////coGowAAAAAAAAAAAAHD0pAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBA0hLzwhARxlq9n77JIkAAAAAAAVUJrV////////////////////+fT///nm+f//////+dKfaCkAAAAAAAAAAA0iRjwHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEgEAAR5HZ0IUM3Wnz+/djS4AAAAAAAcwa6Xd///////////////////z4f7/39Lu///////76b9rDgAAAAAAAAAdPSkwMA4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAkAAAAJ3uiZSlFg7DP4s+ENgcAAAAABhQvXJ3q//////////////////Pn//jQyM/X6v//+OfqqzcAAAAAAAAAABI6MDAzHgkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEB4IAA1Gq7trNUZ5r8O/p2EoEAQFBwkRESFPlez/////////////////9Pb//9/Mt6qvx+bMpZRMAAAAAAAAAAAAABY1UmRJHgUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALDBglNV+tt3VMXJK7r5R7SSEQCw4RFiAkQoTP//////////////////////////HQqIyg2ch/MwAAAAAAAAAAAAAABihfnZRKFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABhAFHTY/aJ+YZUZntcCRe21HKBoSEBQaJUaM3P//////////////////////+Pn76dS9p6/V2n4JAAAAAAAAAAAAAAQLKG3H1Yc5DAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcJxElOkOPx5JKMGjCuIeGeUonHhwVEhUrddL////////////////////////4+em6r8/fzcqzWAAAAAAAAAAAAAAAFCRMkdDSom82DQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABSkhES5MZb30t1k5eMfHsreXWTUhGRUSHU2o+P//////////////////////////77OkzdzFolgLAAAAAAAAAAAAAAASRXKdx8+7q3gyCwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQGgAAHEJ+zfTDbUl4x+Lf2qhlQigYFBo5gd3////////////////////////////2xaqdnJJSAgAAAAAHDgAABAAAAAVHdpjN6eLcu2spDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwEAAAMMo3d36BrXIrV6ubqvWo3JCAgL1+y/////////////////////////+/7//TVs3tlTQsAAAAAAA0SAAcoBQAAAC5llcjm7vnvqFwkBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZHAAAAAkvkdzDf1xnr/bz6f7ffz0kHSdFidn/////////////////////////+fjmwKqSakYNAAAAAAAHDQQAABQEAAAAGEl2pc3s///IeTAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACs1AAAAEU2q1bt8TFy1///5/+mkYjIeL16o7v//////////////////////////9qtrXFVPLwAAAAAAAAQGAAAAAAAAAAAMNV6RwOz//9mUQBUJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJLykBAAw2ku75z4dTZaj0///51bOHRSc9drv2///////++//////////////////5nEozQ0kVAAAAAAAAAAAAAAAAAAAAAA5Ccpe44v303a9YGgcBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAATk8DAAAGF7H///afkZcoPb///bMspRWLkaHwPH//////fH2//////////////////6/bzc3MgAAAAAAAAAAAAAAAAAAAAAAHluVs7q7yNfPt3MuDAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANjIAAAAQcN///8dbKUqt//////bcuoFJXqDP+f/////c7P///////////////////+azazIAAAAAAAAAAAAAAAAAAAAAAAY3eL3ZvZSfx8jCoFkhCwUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOCwAAAByM+f//tVIuSrX////////4unh5sOr//////+T0/////////////////////+yyWAAAAAAAAAAAAAAAAAAAAAAAJG239P3DkaTDwNDQgSwOCwUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOFAgAAAAAPbX///+1WSs/q//////////FhmqN5P///////////////////////////////9+EDAAAAAAAAAAAAAAAAAAABilkre7//+mvpLC62e6qRhYLBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACEvGgYAAA5cx////8BYHD2z////////86VqSWjZ////////////////////////////////33wLAAAAAAAAAAAAAAAAAA09g7/n/////+GomLPQ58hqJQwCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQNTkiEQAAK5fs////6n4sUMX////////sklI6Z9r////////////////////////////////UWwAAAAAAAAAAAAAAAAUpWJXh////////9r+Xp7e1q20rDQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADCckHUJrUiEVAgBNz///////rVJhwv////////ONPzBq3P///////////////////////////////81AAAAAAAAAAAAAAAAWRoHD+P////////npzaWPkZGRazISBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQ4oPzc1Ypp2LxkFCXb5///////CeXan3P//////6oc2ImHZ////////////////////////////////0jYAAAAAAAAAAAAAFk2U1////////////vHisnlyhJR1OhkHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABonKT1JQEZojHtPLxUwq////////+e/p6Cy0vP////qj0MhVdD////////////////////////////////VNgAAAAAAAAAAABVJhtf////////////77tyvg3WGon88FggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQJCkyTFhHTG9+dnNWP2/d///////////it6Sgw/////+qTSdTvf///////////////////////////////7gpAAAAAAAAAAAHPYTF////////////89XIyrqqkpi1j0IVBwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAESkvKS4/Rz1GfpqGfHh1pfv////////////QlHaa5P///8hcN2rD///////////////////////////////UfBIAAAAAAAAAABllu+7////////////pxcrh2bqdp7OVVhwGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYgMjozKScvPGGlyKKBeITC//////////////61hInC////5oxomuf/////////////////////////////2nk8BAAAAAAAAAAAKXCrwtz//////////uzn8/TcsJylmoRTHQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFiszOjopIS9NkdnduKKJkeT///////////////vFp8r////+u4+1+f////////////////////////////+RPy8VAAAAAAAAAAAwW2pigdL///jm///v6f3/9uTNvauKb0AUBQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAkhLzMzOTowP3K44ce3w7rN///////////////////q/f/////KlLf/////////////////////////////vVZAXkUAAAAAAAAAACA2MydMr///9Ob///Hk8/356tzHnW9VMg4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEhwhLi4yQDZNmNDMr7ja5v7//////////////////////////9SfwP///////////////////////////9ptNVmVcwkAAAAAAAAADBESGkOk+///////+O7x+PHawK+SYUMpCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYcHiApLjM8L0Wc2tC7x+r/////////////////////////////5sDa////////////////////////////qzMhZbOdIgAAAAAAAAcOEBkoPZHz//////nc2urx8eHHuKdvPyACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFScrKCEoPUVGZ7js5Nzh+//////////////////////////////cw+T///////////////////b///////+gIhRbtbI6AAAAAAAQICgrOkVDe9z/////3MC6x9ns9unStYFHGQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZKC4uIS5JT2Kl6vju5ub//////////////////////////////8iz4f/////////////////+7P///////5EcAi91diwAAAAADBooPU1ZX1Nwx////+fQ1biaq8/v++a/lFUWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABRkkKSwvQFBTarDk2tnHv+/////////////////////////////cu8jv////////7+z////////////////ngRkAByQiDAYNERQdKC85RVVcU2S4////7+LfrYOcv9Xv58CSTREAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJHCgvLzM8P0xtorunp6Cf1///////////////////////////5Kqy5P//+/b7+/nfx+///////////////+qYKAAABwcCDhUWGSEwPDo/TU9JWar/////9M+il623wuHcvYxFDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAsZLj01LiwsTYmvsJKGhIa/////////////////5+bz//////TIrcr5/+fF1///6cWy3P//////////////+btGAgACBQcSFhgcITJFRUlVT0ZZqv7////0yqiyt6i94te1fjYFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACBAkNTMuJyVQoMzQuqSJeK3////////////25LqNg5i/3NC4sr/X8//z0Lvi///cu8rq/v/////////////9z2QNAAUIDBIWGBocJzk9P1BSSVuk9v///+e9pKuklLXm3bBtJwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIGDR0nJyQhJ0qNyunq2reSqvP//////////8+ddVxYebXNqIOY1fbx2sfM3////+/V3O/////////////////neRQABgcICw0OERQWJzA3SkxHVYPH////5rudkoNtj9XapFsWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgYVJygcGBooQ3W78f722rKw5P//////////uGhMXHCYzMeakr/k1K2Uj7Da/f///+/Q2v////////////////+KHQUGBQcHBwYMGB0pNT1NTE1VapTH8f/uyqKJdVZ1w8eDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEECEvLCEgIig3a8L////kysDX8f////////uaR0BniaKrl4y44cWKb2t1oMjS5Pv/78DF////////////////8YQhCAcGDRAMBw4cHCU2P0ZPW15faHyo1Nq9mpSKZXawqmcgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAkWJCUoLzU2LCxivf////bm0Mrm////////xWUuM1iRqJqJjauvf15hc4mour/a+f/nv8X////////////////hiSgFAgcYHRQQFRkSFik2MjpVXFlTUnOan4p7h41vcI+ESQ4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACxAZHSUvNj0sKWHC////9vPqz+H//////+6JNR4rT5/IvbCceWJWW3CNmpKSuOr9///q9P///////////////+qoOgUCCxYVDA4WFhASISwrNUlQUFZea3NrYmuDh3JeZVglAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGDRQdJyUiJyEpZM3////5///XyOr/////wGIsJzdfr+HawI1PP1l1jY97c4G77/v//////////////////////bdFDAwNDAgGCA4UEhQiLDA6QkdHWHNrUExWcoyBZUpALwgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYSGSElIRgWITZyyP///////9e63P///9d/Qi4vQG2w19SiXzlDc5+leVt7qs/U2fT///////////////7////5lCsIDQwJBwYGDBkYFBkgLDpARlBkc1Y2OlZ8jGpHMyEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABhAVGBwdGRgnR4zU/v//////1cLs////rVUnHCdAb6rIx6d2ZXiqv5RcZaDMv4+UyPj///js/////+rIwvP//9pbDQQICQkEAAANIiQcGRglNTpFXHBhPCkwUHh5UzIaBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACDA4SGBYUGSQ9eLPU/f///93F0Pn//8d1NxoWKDxeotXSuq2wsr2wg3CNq6qMZG+w5v//2bfS38zCr4N+ref/wkAFBAYLDAQAAAshJyEeHCIuMjlPW0wvICA8ZGVHJQIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAICxIeHR0lJCg9Xn+q2unHq7jQ5+m7bTUZFB0pMlOn5NnAzenXqIqXuruchHl2irjp//+6e3yDcG1wU0dVeauVMAAAAQkNBQAABRUeHBIWKDIzLCw1NSkeHDBVVjoUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIIFCIoLzcrISIwRVt/lIaHpbKwlGE3IRESHSIvW6jc4uz//+6rncXhu42Ej6vCyOH+0G81LjInJzUsJykvRkANAAAABwsCAAACDh0hGRknKyskGSElIBwYITk3HgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYZJzA8TEY3OTw3MDxDR1t1f2dDLB0VERggIjBZn9f4/////tDN18ir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";
+var portrait = null;
+function portraitTone() {
+  if (!portrait) {
+    const bin = atob(PORTRAIT_TONE_B64);
+    const data = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i++) data[i] = bin.charCodeAt(i);
+    portrait = { size: PORTRAIT_TONE_SIZE, data };
+  }
+  return portrait;
+}
+function sample(tone, u, v) {
+  const n = tone.size;
+  const x = Math.min(n - 1.001, Math.max(0, u * n - 0.5));
+  const y = Math.min(n - 1.001, Math.max(0, v * n - 0.5));
+  const x0 = Math.floor(x);
+  const y0 = Math.floor(y);
+  const fx = x - x0;
+  const fy = y - y0;
+  const d = tone.data;
+  const a = d[y0 * n + x0] * (1 - fx) + d[y0 * n + x0 + 1] * fx;
+  const b = d[(y0 + 1) * n + x0] * (1 - fx) + d[(y0 + 1) * n + x0 + 1] * fx;
+  return (a * (1 - fy) + b * fy) / 255;
+}
+var easeOut = (k) => 1 - Math.pow(1 - k, 3);
+function HalftoneCanvas({
+  tone,
+  density = 86,
+  lens = true,
+  intro = true,
+  breathe = true,
+  ink = "#0d0a08",
+  fallbackSrc,
+  alt,
+  className,
+  style
+}) {
+  const wrap = useRef(null);
+  const canvas = useRef(null);
+  const [live, setLive] = useState(false);
+  useEffect(() => {
+    const el = wrap.current;
+    const cv = canvas.current;
+    if (!el || !cv) return;
+    const ctx = cv.getContext("2d");
+    if (!ctx) return;
+    const t = tone ?? portraitTone();
+    const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    let size = 0;
+    let dots = new Float32Array(0);
+    let count = 0;
+    const pointer = { x: 0, y: 0, tx: 0, ty: 0, k: 0, on: false };
+    let start = 0;
+    let raf = 0;
+    let visible = true;
+    function layout() {
+      const s = el.clientWidth;
+      if (!s || s === size) return;
+      size = s;
+      const dpr = Math.min(2, window.devicePixelRatio || 1);
+      cv.width = Math.round(s * dpr);
+      cv.height = Math.round(s * dpr);
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      const pitch = s / density;
+      const c = s / 2;
+      const ca = Math.SQRT1_2;
+      const span = Math.ceil(s * 0.75 / pitch) + 1;
+      const out = [];
+      for (let i = -span; i <= span; i++) {
+        for (let j = -span; j <= span; j++) {
+          const u = i * pitch;
+          const v = j * pitch;
+          const x = c + (u - v) * ca;
+          const y = c + (u + v) * ca;
+          const dc = Math.hypot(x - c, y - c);
+          if (dc > c - pitch * 0.6) continue;
+          const inkv = sample(t, x / s, y / s);
+          if (inkv < 0.1) continue;
+          const r = pitch * Math.sqrt(inkv / Math.PI) * 1.1;
+          out.push(x, y, r, dc / c * 1100);
+        }
+      }
+      dots = Float32Array.from(out);
+      count = out.length / 4;
+    }
+    function frame(now) {
+      if (!start) start = now;
+      const el2 = now - start;
+      pointer.x += (pointer.tx - pointer.x) * 0.18;
+      pointer.y += (pointer.ty - pointer.y) * 0.18;
+      pointer.k += ((pointer.on ? 1 : 0) - pointer.k) * 0.12;
+      const L = size * 0.22;
+      ctx.clearRect(0, 0, size, size);
+      ctx.fillStyle = ink;
+      ctx.beginPath();
+      const wave = breathe && !still;
+      const sec = now / 1e3;
+      for (let n = 0; n < count; n++) {
+        let x = dots[n * 4];
+        let y = dots[n * 4 + 1];
+        let r = dots[n * 4 + 2];
+        if (intro && !still) {
+          const k = Math.min(1, Math.max(0, (el2 - dots[n * 4 + 3]) / 650));
+          if (k <= 0) continue;
+          r *= easeOut(k);
+        }
+        if (wave) r *= 1 + 0.05 * Math.sin(sec * 1.1 + (x + y) / size * 6);
+        if (pointer.k > 0.01) {
+          const dx = x - pointer.x;
+          const dy = y - pointer.y;
+          const d = Math.hypot(dx, dy);
+          if (d < L) {
+            const f = (1 - d / L) * pointer.k;
+            r *= 1 - 0.75 * f * f;
+            if (d > 1e-3) {
+              const push = f * (size / density) * 2.6;
+              x += dx / d * push;
+              y += dy / d * push;
+            }
+          }
+        }
+        ctx.moveTo(x + r, y);
+        ctx.arc(x, y, r, 0, Math.PI * 2);
+      }
+      ctx.fill();
+      const introDone = !intro || still || el2 > 1900;
+      const busy = wave || pointer.k > 0.01 || !introDone;
+      raf = busy && visible && !document.hidden ? requestAnimationFrame(frame) : 0;
+    }
+    const kick = () => {
+      if (!raf && visible && !document.hidden) raf = requestAnimationFrame(frame);
+    };
+    layout();
+    setLive(true);
+    kick();
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => (layout(), kick())) : null;
+    ro?.observe(el);
+    const io = typeof IntersectionObserver !== "undefined" ? new IntersectionObserver(([e]) => {
+      visible = Boolean(e?.isIntersecting);
+      kick();
+    }) : null;
+    io?.observe(el);
+    const onVis = () => kick();
+    document.addEventListener("visibilitychange", onVis);
+    const move = (e) => {
+      const b = el.getBoundingClientRect();
+      pointer.tx = e.clientX - b.left;
+      pointer.ty = e.clientY - b.top;
+      if (!pointer.on) {
+        pointer.x = pointer.tx;
+        pointer.y = pointer.ty;
+      }
+      pointer.on = true;
+      kick();
+    };
+    const leave = () => {
+      pointer.on = false;
+      kick();
+    };
+    if (lens && !still) {
+      el.addEventListener("pointermove", move);
+      el.addEventListener("pointerleave", leave);
+    }
+    return () => {
+      cancelAnimationFrame(raf);
+      ro?.disconnect();
+      io?.disconnect();
+      document.removeEventListener("visibilitychange", onVis);
+      el.removeEventListener("pointermove", move);
+      el.removeEventListener("pointerleave", leave);
+    };
+  }, [tone, density, lens, intro, breathe, ink]);
+  return /* @__PURE__ */ jsxs("div", { ref: wrap, className: cn("relative aspect-square w-full", className), style, "data-live": live || void 0, children: [
+    fallbackSrc ? (
+      // eslint-disable-next-line @next/next/no-img-element -- the still screen, until the live one draws
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: fallbackSrc,
+          alt: "",
+          "aria-hidden": true,
+          className: cn("absolute inset-0 size-full select-none transition-opacity duration-300", live && "opacity-0"),
+          draggable: false
+        }
+      )
+    ) : null,
+    /* @__PURE__ */ jsx("canvas", { ref: canvas, role: "img", "aria-label": alt, className: "absolute inset-0 size-full" })
+  ] });
+}
 var SPHERE_GRADIENT = "radial-gradient(86% 86% at 36% 32%, #fff7f0 0%, #ffdec8 14%, #ffa069 34%, #ff7030 56%, #f65210 78%, #de4006 100%)";
 var SPHERE_DEPTH = "inset -14px -22px 44px rgb(150 40 0 / 0.16), 0 36px 70px -34px rgb(234 88 11 / 0.45)";
-function Ball({ src, alt, float }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("relative size-full overflow-hidden rounded-full", float && "oca-animate-float"),
-      style: { background: SPHERE_GRADIENT, boxShadow: SPHERE_DEPTH },
-      children: /* @__PURE__ */ jsx("img", { src, alt, className: "absolute inset-0 size-full select-none", draggable: false })
-    }
-  );
+var SPHERE_GLOSS = "radial-gradient(38% 30% at 33% 22%, rgb(255 255 255 / 0.55), transparent 72%)";
+function Ball({ src, alt, float, live }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative size-full", float && "oca-animate-float"), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "absolute inset-x-[14%] -bottom-[7%] h-[10%] rounded-[50%] bg-[rgb(234_88_11/0.28)] blur-2xl"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative size-full overflow-hidden rounded-full",
+        style: { background: SPHERE_GRADIENT, boxShadow: SPHERE_DEPTH },
+        children: [
+          live ? /* @__PURE__ */ jsx(HalftoneCanvas, { fallbackSrc: src, alt }) : (
+            // eslint-disable-next-line @next/next/no-img-element -- a static dot layer, sized by CSS
+            /* @__PURE__ */ jsx("img", { src, alt, className: "absolute inset-0 size-full select-none", draggable: false })
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-0 rounded-full mix-blend-soft-light",
+              style: { background: SPHERE_GLOSS }
+            }
+          )
+        ]
+      }
+    )
+  ] });
 }
-function HalftoneSphere({ src, alt, stadium = false, float = false, className, style }) {
+function HalftoneSphere({
+  src,
+  alt,
+  stadium = false,
+  float = false,
+  live = false,
+  className,
+  style
+}) {
   if (!stadium) {
-    return /* @__PURE__ */ jsx("div", { className: cn("relative aspect-square w-full", className), style, children: /* @__PURE__ */ jsx(Ball, { src, alt, float }) });
+    return /* @__PURE__ */ jsx("div", { className: cn("relative aspect-square w-full", className), style, children: /* @__PURE__ */ jsx(Ball, { src, alt, float, live }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: cn("relative aspect-[1.255/1.127] w-full", className), style, children: [
     /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "oca-stadium pointer-events-none absolute left-0 top-0 h-full w-[88.4%] rounded-[32%]" }),
-    /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 right-0 aspect-square w-[79.7%]", children: /* @__PURE__ */ jsx(Ball, { src, alt, float }) })
+    /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 right-0 aspect-square w-[79.7%]", children: /* @__PURE__ */ jsx(Ball, { src, alt, float, live }) })
   ] });
 }
-function IsoCheck({ size = 360, settle = false, shadow = true, title, className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-block", settle && "oca-animate-settle", className), style: { width: size }, children: [
-    /* @__PURE__ */ jsx(Mark, { size, title, className: "relative z-10 block" }),
-    shadow ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        "aria-hidden": true,
-        className: "absolute left-[8%] right-[8%] rounded-[50%] opacity-60 blur-xl",
-        style: { height: size * 0.08, bottom: -size * 0.04, background: "rgb(234 88 11 / 0.18)" }
-      }
-    ) : null
-  ] });
+function IsoCheck({ size = 360, settle = false, shadow = true, tilt = false, title, className }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !tilt || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    let raf = 0;
+    let tx = 0;
+    let ty = 0;
+    let x = 0;
+    let y = 0;
+    const step = () => {
+      x += (tx - x) * 0.08;
+      y += (ty - y) * 0.08;
+      el.style.setProperty("--rx", `${(-y * 10).toFixed(2)}deg`);
+      el.style.setProperty("--ry", `${(x * 14).toFixed(2)}deg`);
+      raf = Math.abs(tx - x) + Math.abs(ty - y) > 1e-3 ? requestAnimationFrame(step) : 0;
+    };
+    const move = (e) => {
+      const b = el.getBoundingClientRect();
+      tx = Math.max(-1, Math.min(1, (e.clientX - (b.left + b.width / 2)) / (window.innerWidth / 2)));
+      ty = Math.max(-1, Math.min(1, (e.clientY - (b.top + b.height / 2)) / (window.innerHeight / 2)));
+      if (!raf) raf = requestAnimationFrame(step);
+    };
+    window.addEventListener("pointermove", move, { passive: true });
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("pointermove", move);
+    };
+  }, [tilt]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("relative inline-block", settle && "oca-animate-settle", className),
+      style: { width: size, perspective: tilt ? 900 : void 0 },
+      children: [
+        tilt ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute left-1/2 top-1/2 -z-0 aspect-square w-[120%] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-70 blur-3xl",
+            style: { background: "radial-gradient(closest-side, rgb(255 140 70 / 0.35), transparent)" }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative z-10 transition-transform duration-300 ease-out",
+            style: tilt ? { transform: "rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))", transformStyle: "preserve-3d" } : void 0,
+            children: /* @__PURE__ */ jsx(Mark, { size, title, className: "block" })
+          }
+        ),
+        shadow ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute left-[8%] right-[8%] rounded-[50%] opacity-60 blur-xl",
+            style: { height: size * 0.08, bottom: -size * 0.04, background: "rgb(234 88 11 / 0.18)" }
+          }
+        ) : null
+      ]
+    }
+  );
 }
 var CELL_W = 22;
 var CELL_H = 27;
@@ -143,6 +418,7 @@ function Crowd({
   seed = 21,
   tone = "ink",
   label = "A crowd of identical accounts. Only a few are real.",
+  story = false,
   className
 }) {
   const width = cols * CELL_W;
@@ -151,41 +427,56 @@ function Crowd({
   const nearFrom = Math.floor(rows / 2) * cols;
   const realSet = new Set([...picks(real, rows * cols - nearFrom, seed)].map((i) => i + nearFrom));
   const bot = tone === "ink" ? "#ffffff" : "#0a0a0a";
+  let lcg = seed * 7919 >>> 0;
+  const leaveAt = () => {
+    lcg = Math.imul(lcg, 1664525) + 1013904223 >>> 0;
+    return 0.12 + lcg / 2 ** 32 * 0.6;
+  };
   let y = 0;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "svg",
     {
       role: "img",
       "aria-label": label,
       viewBox: `0 0 ${width} ${Math.ceil(height)}`,
-      className: cn("block h-auto w-full", className),
-      children: scales.map((s, r) => {
-        const rowY = y;
-        y += CELL_H * s;
-        const rowW = cols * CELL_W * s;
-        const x0 = (width - rowW) / 2;
-        return Array.from({ length: cols }, (_, c) => {
-          const i = r * cols + c;
-          const isReal = realSet.has(i);
-          return /* @__PURE__ */ jsxs(
-            "g",
-            {
-              transform: `translate(${x0 + c * CELL_W * s} ${rowY}) scale(${s})`,
-              fill: isReal ? "var(--oca-orange)" : bot,
-              fillOpacity: isReal ? 1 : 0.1 + 0.16 * s,
-              children: [
-                /* @__PURE__ */ jsx("circle", { cx: 11, cy: 8, r: 4.4 }),
-                /* @__PURE__ */ jsx("path", { d: "M3 25a8 8.5 0 0 1 16 0Z" })
-              ]
-            },
-            i
-          );
-        });
-      })
+      className: cn("block h-auto w-full overflow-visible", className),
+      children: [
+        story ? /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { id: "oca-crowd-glow", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "#ff7a3d", stopOpacity: "0.55" }),
+          /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#ff7a3d", stopOpacity: "0" })
+        ] }) }) : null,
+        scales.map((s, r) => {
+          const rowY = y;
+          y += CELL_H * s;
+          const rowW = cols * CELL_W * s;
+          const x0 = (width - rowW) / 2;
+          return Array.from({ length: cols }, (_, c) => {
+            const i = r * cols + c;
+            const isReal = realSet.has(i);
+            const t = leaveAt();
+            return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0 + c * CELL_W * s} ${rowY}) scale(${s})`, children: [
+              isReal && story ? /* @__PURE__ */ jsx("circle", { className: "oca-crowd-halo", cx: 11, cy: 14, r: 13, fill: "url(#oca-crowd-glow)" }) : null,
+              /* @__PURE__ */ jsxs(
+                "g",
+                {
+                  className: story ? isReal ? "oca-crowd-real" : "oca-crowd-bot" : void 0,
+                  style: story && !isReal ? { "--t": t.toFixed(3) } : void 0,
+                  fill: isReal ? "var(--oca-orange)" : bot,
+                  fillOpacity: isReal ? 1 : 0.1 + 0.16 * s,
+                  children: [
+                    /* @__PURE__ */ jsx("circle", { cx: 11, cy: 8, r: 4.4 }),
+                    /* @__PURE__ */ jsx("path", { d: "M3 25a8 8.5 0 0 1 16 0Z" })
+                  ]
+                }
+              )
+            ] }, i);
+          });
+        })
+      ]
     }
   );
 }
 
-export { AppIcon, Crowd, HalftoneSphere, IsoCheck, Lockup, MARK_FACES, Mark, SPHERE_GRADIENT };
+export { AppIcon, Crowd, HalftoneCanvas, HalftoneSphere, IsoCheck, Lockup, MARK_FACES, Mark, SPHERE_GRADIENT, portraitTone };
 //# sourceMappingURL=brand.mjs.map
 //# sourceMappingURL=brand.mjs.map