@nadicodeai/ui 12.1.52 → 12.1.53

package/dist/components/company-card/renderer.js

@@ -0,0 +1,138 @@
+// nadicode: vgpu's holographic card renderer (MIT, https://github.com/vercel-labs/vgpu,
+// examples/holographic-card, revision 6fa27bb4), with its WebGPU set-up, frame
+// loop and cleanup as they are. The pointer is read on the whole page, as the
+// example reads it on its whole stage, so the foil wakes as the pointer comes
+// within one card width; the turn it computes is handed to the page, which
+// turns the card and its words together.
+import { clock, frameLoop, init, surface } from "vgpu";
+import { approach, SWEEP_MS, SWEEP_TURN } from "./approach.js";
+import { createScene } from "./scene.js";
+export function createRenderer(canvas, options) {
+    const { colors, onTilt } = options;
+    let disposed = false;
+    let gpu;
+    let removeInput = () => { };
+    let requestSweep = () => { };
+    const dispose = () => {
+        if (disposed)
+            return;
+        disposed = true;
+        removeInput();
+        gpu?.dispose();
+    };
+    const ready = (async () => {
+        const context = await init();
+        if (disposed) {
+            context.dispose();
+            return;
+        }
+        gpu = context;
+        const output = surface(context, canvas, { dpr: [1, 2] });
+        const shader = createScene(context, output, colors);
+        await shader.compile({ colors: [output.format] });
+        if (disposed)
+            return;
+        const motion = window.matchMedia("(prefers-reduced-motion: reduce)");
+        let targetHover = 0;
+        let pointerX = 0;
+        let pointerY = 0;
+        let tiltX = 0;
+        let tiltY = 0;
+        let hover = 0;
+        let lightX = 0.2;
+        let lightY = -0.25;
+        // A sweep turns the card once in the light, the way a hand turns a card to
+        // see its foil: it leans one way and the other while the light crosses it
+        // from its top-left corner to its bottom-right, then rests. It tells a
+        // person at a glance that this is a card that answers the pointer.
+        let sweepStart = null;
+        // Under reduced motion the card keeps still: the light moves only with the pointer.
+        requestSweep = () => {
+            if (!motion.matches)
+                sweepStart = performance.now();
+        };
+        const move = (event) => {
+            if (!event.isPrimary)
+                return;
+            const near = approach(canvas.getBoundingClientRect(), event.clientX, event.clientY);
+            // A pointer elsewhere on the page leaves a sweep to finish; one that
+            // comes near takes the card over.
+            if (near.hover > 0)
+                sweepStart = null;
+            if (sweepStart !== null)
+                return;
+            pointerX = near.x;
+            pointerY = near.y;
+            targetHover = near.hover;
+        };
+        const leave = () => {
+            if (sweepStart === null)
+                targetHover = 0;
+        };
+        const up = (event) => {
+            if (event.pointerType !== "mouse")
+                leave();
+        };
+        const root = document.documentElement;
+        window.addEventListener("pointermove", move, { passive: true });
+        window.addEventListener("pointerdown", move, { passive: true });
+        window.addEventListener("pointercancel", leave);
+        window.addEventListener("pointerup", up);
+        root.addEventListener("pointerleave", leave);
+        const unsubscribeResize = output.onResize(() => {
+            shader.set({ params: { resolution: output.size } });
+        });
+        removeInput = () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerdown", move);
+            window.removeEventListener("pointercancel", leave);
+            window.removeEventListener("pointerup", up);
+            root.removeEventListener("pointerleave", leave);
+            unsubscribeResize();
+        };
+        const time = clock(context);
+        frameLoop(context, (currentFrame) => {
+            let turn = null;
+            if (sweepStart !== null) {
+                const progress = (performance.now() - sweepStart) / SWEEP_MS;
+                if (progress >= 1) {
+                    sweepStart = null;
+                    targetHover = 0;
+                }
+                else {
+                    const along = progress * progress * (3 - 2 * progress);
+                    pointerX = -1.1 + 2.2 * along;
+                    pointerY = -0.55 + 1.1 * along;
+                    targetHover = Math.sin(Math.PI * progress) ** 0.6 * 0.95;
+                    turn = [
+                        -Math.sin(2 * Math.PI * along) * SWEEP_TURN,
+                        Math.sin(Math.PI * progress) * SWEEP_TURN * 0.3,
+                    ];
+                }
+            }
+            const targetX = motion.matches
+                ? 0
+                : (turn?.[0] ?? Math.max(-1, Math.min(1, pointerX)) * 0.16 * targetHover);
+            const targetY = motion.matches
+                ? 0
+                : (turn?.[1] ?? -Math.max(-1, Math.min(1, pointerY)) * 0.12 * targetHover);
+            const blend = motion.matches ? 1 : 1 - Math.exp(-10 * Math.min(time.deltaTime, 0.1));
+            tiltX += (targetX - tiltX) * blend;
+            tiltY += (targetY - tiltY) * blend;
+            hover += (targetHover - hover) * blend;
+            if (targetHover > 0) {
+                lightX += (pointerX - lightX) * blend;
+                lightY += (pointerY - lightY) * blend;
+            }
+            onTilt(tiltX, tiltY);
+            shader.set({ params: { tilt: [tiltX, tiltY], pointer: [lightX, lightY], hover } });
+            currentFrame.pass(output, shader);
+        }, { fps: 60 });
+    })().catch((error) => {
+        if (disposed)
+            return;
+        dispose();
+        throw error;
+    });
+    return { ready, dispose, sweep: () => requestSweep() };
+}

package/dist/components/company-card/scene.d.ts

@@ -0,0 +1,10 @@
+import { type Gpu, type Target } from "vgpu";
+/** The design-system colours the foil is struck in, as sRGB channels from 0 to 1. */
+export type FoilColors = {
+    graphite: readonly [number, number, number];
+    ink: readonly [number, number, number];
+    /** Six hues in spectral order: the diffraction and the pearl run through them. */
+    hues: readonly (readonly [number, number, number])[];
+};
+export declare function createScene(gpu: Gpu, output: Target, colors: FoilColors): import("vgpu").Effect;
+//# sourceMappingURL=scene.d.ts.map

package/dist/components/company-card/scene.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scene.d.ts","sourceRoot":"","sources":["../../../src/components/company-card/scene.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,GAAG,EAAE,KAAK,MAAM,EAAE,MAAM,MAAM,CAAC;AAGrD,qFAAqF;AACrF,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,GAAG,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,kFAAkF;IAClF,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC;CACtD,CAAC;AAEF,wBAAgB,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,yBAsBvE"}

package/dist/components/company-card/scene.js

@@ -0,0 +1,25 @@
+import { effect } from "vgpu";
+import { CARD_FOIL_SHADER } from "./shader.js";
+export function createScene(gpu, output, colors) {
+    const [hue0, hue1, hue2, hue3, hue4, hue5] = colors.hues;
+    const shader = effect(gpu, CARD_FOIL_SHADER, {
+        label: "holographic-card",
+        set: {
+            params: {
+                resolution: output.size,
+                tilt: [0, 0],
+                pointer: [0.2, -0.25],
+                hover: 0,
+                graphite: colors.graphite,
+                ink: colors.ink,
+                hue0,
+                hue1,
+                hue2,
+                hue3,
+                hue4,
+                hue5,
+            },
+        },
+    });
+    return shader;
+}

package/dist/components/company-card/shader.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The holographic foil's fragment shader, as a string.
+ *
+ * This package builds with tsc alone, so a `.wgsl` file would neither be
+ * emitted into `dist` nor compiled by a consumer's bundler. vgpu's `effect`
+ * takes WGSL source, so the shader travels as the module below and needs no
+ * loader in any host.
+ */
+export declare const CARD_FOIL_SHADER = "\n// nadicode: vgpu's holographic card (MIT, https://github.com/vercel-labs/vgpu,\n// examples/holographic-card, revision 6fa27bb4). Its light model is unchanged.\n// The surface is the company card itself, 85.6 x 54 mm, which the page tilts;\n// vgpu's triangle, fractal and lettering give way to the card's own marks; and\n// every colour is a design-system token: the spectrum and the pearl fall in\n// pure bands of the identity hues, never a colour between two of them.\nstruct Params {\n  resolution: vec2f,\n  tilt: vec2f,\n  pointer: vec2f,\n  hover: f32,\n  graphite: vec3f,\n  ink: vec3f,\n  hue0: vec3f,\n  hue1: vec3f,\n  hue2: vec3f,\n  hue3: vec3f,\n  hue4: vec3f,\n  hue5: vec3f,\n}\n@group(0) @binding(0) var<uniform> params: Params;\n\nconst HALF = vec2f(0.856, 0.54);\nconst ROSETTE = vec2f(0.448, -0.016);\n\nfn stroke(distance: f32, width: f32, aa: f32) -> f32 {\n  return 1.0 - smoothstep(width, width + aa, abs(distance));\n}\n\n// The identity hues in spectral order, each a band of its own: a blend of two\n// neighbours is a colour the palette does not have.\nfn palette(t: f32) -> vec3f {\n  let hues = array<vec3f, 6>(params.hue0, params.hue1, params.hue2, params.hue3, params.hue4, params.hue5);\n  return hues[min(u32(clamp(t, 0.0, 1.0) * 6.0), 5u)];\n}\n\n// vgpu's visible-light window, drawn with the identity band instead of display RGB.\nfn wavelengthColor(wavelength: f32) -> vec3f {\n  let visible = smoothstep(0.380, 0.410, wavelength) * (1.0 - smoothstep(0.700, 0.780, wavelength));\n  return palette((wavelength - 0.44) / 0.22) * visible * 0.8;\n}\n\n// Reflection grating approximation: m * wavelength = d * dot(L + V, across).\n// L and V point away from the surface; across is perpendicular to the grooves.\n// Based on the diffraction-order model in GPU Gems, chapter 8 (Jos Stam).\nfn diffraction(across: vec2f, lightAndView: vec2f, spacing: f32) -> vec3f {\n  let pathDifference = spacing * abs(dot(lightAndView, across));\n  let along = dot(lightAndView, vec2f(-across.y, across.x));\n  // Finite, imperfect groove patches broaden the directional reflection.\n  let envelope = exp(-along * along / 0.36);\n  var reflected = vec3f(0);\n  for (var order = 1; order <= 3; order++) {\n    let m = f32(order);\n    reflected += wavelengthColor(pathDifference / m) / (m * m);\n  }\n  return reflected * envelope;\n}\n\n// Broad pearlescence underneath the finer diffraction detail, in the same hues.\nfn pearlColor(phase: f32) -> vec3f {\n  let cycle = abs(fract(phase * 0.5) * 2.0 - 1.0);\n  return mix(palette(cycle), vec3f(0.82), 0.35);\n}\n\nfn grain(point: vec2f) -> f32 {\n  let p = vec2u(abs(point) * 2400.0);\n  var n = (p.x * 1597334677u) ^ (p.y * 3812015801u);\n  n = (n ^ (n >> 16u)) * 2246822519u;\n  return f32(n & 1023u) / 1023.0 - 0.5;\n}\n\nfn etchedPhase(p: vec2f) -> f32 {\n  // Warp the surface before tracing contours, so their spacing flows in soft waves.\n  let warp = vec2f(\n    sin(p.y * 7.0 + sin(p.x * 4.0)) * 0.085,\n    sin(p.x * 6.0 - p.y * 3.0) * 0.07\n  );\n  let q = p + warp - ROSETTE;\n  let radius = length(q * vec2f(1.0, 0.86));\n  return radius * 142.0 + sin(atan2(q.y, q.x) * 3.0 + radius * 8.0) * 1.7;\n}\n\n@fragment\nfn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {\n  let p = (uv - 0.5) * 2.0 * HALF;\n  let sx = sin(params.tilt.y);\n  let cx = cos(params.tilt.y);\n  let sy = sin(params.tilt.x);\n  let cy = cos(params.tilt.x);\n  let right = vec3f(cy, 0, -sy);\n  let down = vec3f(sy * sx, cx, cy * sx);\n  let normal = cross(right, down);\n  let eye = vec3f(0, 0, 4.5);\n  let hit = right * p.x + down * p.y;\n  let aa = max(length(fwidth(p)), 0.0006);\n\n  // Matte graphite remains dark; only the cursor's grazing light reveals the foil.\n  let hover = clamp(params.hover, 0.0, 1.0);\n  let lightCenter = params.pointer * HALF;\n  let delta = p - lightCenter;\n  let sweepDistance = delta.x * 0.72 + delta.y * 0.52 + sin(p.y * 4.0 + p.x * 3.0) * 0.08;\n  let bandDistance = sweepDistance / 0.36;\n  let lightBand = exp(-bandDistance * bandDistance);\n  let glintDistance = sweepDistance / 0.085;\n  let glint = exp(-glintDistance * glintDistance);\n  let spotlight = exp(-dot(delta * vec2f(0.9, 1.1), delta * vec2f(0.9, 1.1)) * 2.6);\n  let light = lightBand * spotlight * hover;\n  let lightDirection = normalize(vec3f(lightCenter, 1.2) - hit);\n  let viewDirection = normalize(eye - hit);\n  let lightAndView = vec2f(dot(lightDirection + viewDirection, right), dot(lightDirection + viewDirection, down));\n  let illumination = max(dot(normal, lightDirection), 0.0) * max(dot(normal, viewDirection), 0.0);\n  let tint = params.ink * 0.78;\n  let noise = grain(p + vec2f(2));\n  var color = params.graphite + 0.008 * (0.9 - p.y);\n  // Fine, surface-locked grain catches the grazing reflection without animated static.\n  color += noise * (0.022 + light * 0.085);\n  color += light * (vec3f(0.045) + tint * 0.065);\n\n  // One engraving over the whole card, where vgpu keeps a triangle and a fractal.\n  let contour = etchedPhase(p);\n  // Transform screen derivatives back into the card plane: microscopic grooves\n  // follow the visible contours, but their 1.65um spacing is independent of zoom.\n  let dx = dpdx(p);\n  let dy = dpdy(p);\n  let gradient = vec2f(dpdx(contour) * dy.y - dpdy(contour) * dx.y, dpdy(contour) * dx.x - dpdx(contour) * dy.x);\n  let across = gradient / max(length(gradient), 0.00000001);\n  let foilDiffraction = diffraction(across, lightAndView, 1.65) * illumination;\n  let contours = stroke(sin(contour), 0.06, min(fwidth(contour), 1.0));\n  let reveal = hover * (0.06 + 0.24 * spotlight + light * 1.15);\n  let pearlPhase = dot(lightAndView, vec2f(0.48, -0.32)) + p.y * 0.32 + contour * 0.003;\n  let pearl = pearlColor(pearlPhase);\n  color += pearl * light * 0.24;\n  color += (pearl * 0.5 + vec3f(0.5)) * glint * spotlight * hover * 0.12;\n  let sparkle = pow(max(noise + 0.5, 0.0), 24.0) * glint * spotlight * hover;\n  color += pearl * sparkle * 0.22;\n  let foil = vec3f(0.12, 0.14, 0.18) + pearl * 0.65 + foilDiffraction * 0.12;\n  color += contours * 0.65 * foil * reveal;\n\n  // A delicate spectral echo stays clipped to the same engraving.\n  let foilPoint = p - (vec2f(0.007, -0.004) + params.tilt * 0.012);\n  let foilPhase = etchedPhase(foilPoint);\n  let foilLines = stroke(sin(foilPhase), 0.025, min(fwidth(foilPhase), 1.0));\n  color += foilLines * 0.65 * (pearl + foilDiffraction * 0.2) * reveal * 0.22;\n\n  // Sparse microdots and registration ticks emerge in the foil.\n  let grid = (fract((p + 1.0) * 20.0) - 0.5) / 20.0;\n  let dots = stroke(length(grid), 0.0008, aa * 0.4);\n  color += dots * reveal * 0.17;\n  let guide = abs(p) - (HALF - vec2f(0.07, 0.07));\n  let horizontal = stroke(guide.y, 0.0006, aa * 0.5) * (1.0 - smoothstep(0.012, 0.017, abs(guide.x)));\n  let vertical = stroke(guide.x, 0.0006, aa * 0.5) * (1.0 - smoothstep(0.012, 0.017, abs(guide.y)));\n  color += max(horizontal, vertical) * hover * (0.12 + light * 0.22);\n\n  return vec4f(color, 1);\n}\n";
+//# sourceMappingURL=shader.d.ts.map

package/dist/components/company-card/shader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shader.d.ts","sourceRoot":"","sources":["../../../src/components/company-card/shader.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,u3NA4J5B,CAAC"}

package/dist/components/company-card/shader.js

@@ -0,0 +1,165 @@
+/**
+ * The holographic foil's fragment shader, as a string.
+ *
+ * This package builds with tsc alone, so a `.wgsl` file would neither be
+ * emitted into `dist` nor compiled by a consumer's bundler. vgpu's `effect`
+ * takes WGSL source, so the shader travels as the module below and needs no
+ * loader in any host.
+ */
+export const CARD_FOIL_SHADER = /* wgsl */ `
+// nadicode: vgpu's holographic card (MIT, https://github.com/vercel-labs/vgpu,
+// examples/holographic-card, revision 6fa27bb4). Its light model is unchanged.
+// The surface is the company card itself, 85.6 x 54 mm, which the page tilts;
+// vgpu's triangle, fractal and lettering give way to the card's own marks; and
+// every colour is a design-system token: the spectrum and the pearl fall in
+// pure bands of the identity hues, never a colour between two of them.
+struct Params {
+  resolution: vec2f,
+  tilt: vec2f,
+  pointer: vec2f,
+  hover: f32,
+  graphite: vec3f,
+  ink: vec3f,
+  hue0: vec3f,
+  hue1: vec3f,
+  hue2: vec3f,
+  hue3: vec3f,
+  hue4: vec3f,
+  hue5: vec3f,
+}
+@group(0) @binding(0) var<uniform> params: Params;
+
+const HALF = vec2f(0.856, 0.54);
+const ROSETTE = vec2f(0.448, -0.016);
+
+fn stroke(distance: f32, width: f32, aa: f32) -> f32 {
+  return 1.0 - smoothstep(width, width + aa, abs(distance));
+}
+
+// The identity hues in spectral order, each a band of its own: a blend of two
+// neighbours is a colour the palette does not have.
+fn palette(t: f32) -> vec3f {
+  let hues = array<vec3f, 6>(params.hue0, params.hue1, params.hue2, params.hue3, params.hue4, params.hue5);
+  return hues[min(u32(clamp(t, 0.0, 1.0) * 6.0), 5u)];
+}
+
+// vgpu's visible-light window, drawn with the identity band instead of display RGB.
+fn wavelengthColor(wavelength: f32) -> vec3f {
+  let visible = smoothstep(0.380, 0.410, wavelength) * (1.0 - smoothstep(0.700, 0.780, wavelength));
+  return palette((wavelength - 0.44) / 0.22) * visible * 0.8;
+}
+
+// Reflection grating approximation: m * wavelength = d * dot(L + V, across).
+// L and V point away from the surface; across is perpendicular to the grooves.
+// Based on the diffraction-order model in GPU Gems, chapter 8 (Jos Stam).
+fn diffraction(across: vec2f, lightAndView: vec2f, spacing: f32) -> vec3f {
+  let pathDifference = spacing * abs(dot(lightAndView, across));
+  let along = dot(lightAndView, vec2f(-across.y, across.x));
+  // Finite, imperfect groove patches broaden the directional reflection.
+  let envelope = exp(-along * along / 0.36);
+  var reflected = vec3f(0);
+  for (var order = 1; order <= 3; order++) {
+    let m = f32(order);
+    reflected += wavelengthColor(pathDifference / m) / (m * m);
+  }
+  return reflected * envelope;
+}
+
+// Broad pearlescence underneath the finer diffraction detail, in the same hues.
+fn pearlColor(phase: f32) -> vec3f {
+  let cycle = abs(fract(phase * 0.5) * 2.0 - 1.0);
+  return mix(palette(cycle), vec3f(0.82), 0.35);
+}
+
+fn grain(point: vec2f) -> f32 {
+  let p = vec2u(abs(point) * 2400.0);
+  var n = (p.x * 1597334677u) ^ (p.y * 3812015801u);
+  n = (n ^ (n >> 16u)) * 2246822519u;
+  return f32(n & 1023u) / 1023.0 - 0.5;
+}
+
+fn etchedPhase(p: vec2f) -> f32 {
+  // Warp the surface before tracing contours, so their spacing flows in soft waves.
+  let warp = vec2f(
+    sin(p.y * 7.0 + sin(p.x * 4.0)) * 0.085,
+    sin(p.x * 6.0 - p.y * 3.0) * 0.07
+  );
+  let q = p + warp - ROSETTE;
+  let radius = length(q * vec2f(1.0, 0.86));
+  return radius * 142.0 + sin(atan2(q.y, q.x) * 3.0 + radius * 8.0) * 1.7;
+}
+
+@fragment
+fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
+  let p = (uv - 0.5) * 2.0 * HALF;
+  let sx = sin(params.tilt.y);
+  let cx = cos(params.tilt.y);
+  let sy = sin(params.tilt.x);
+  let cy = cos(params.tilt.x);
+  let right = vec3f(cy, 0, -sy);
+  let down = vec3f(sy * sx, cx, cy * sx);
+  let normal = cross(right, down);
+  let eye = vec3f(0, 0, 4.5);
+  let hit = right * p.x + down * p.y;
+  let aa = max(length(fwidth(p)), 0.0006);
+
+  // Matte graphite remains dark; only the cursor's grazing light reveals the foil.
+  let hover = clamp(params.hover, 0.0, 1.0);
+  let lightCenter = params.pointer * HALF;
+  let delta = p - lightCenter;
+  let sweepDistance = delta.x * 0.72 + delta.y * 0.52 + sin(p.y * 4.0 + p.x * 3.0) * 0.08;
+  let bandDistance = sweepDistance / 0.36;
+  let lightBand = exp(-bandDistance * bandDistance);
+  let glintDistance = sweepDistance / 0.085;
+  let glint = exp(-glintDistance * glintDistance);
+  let spotlight = exp(-dot(delta * vec2f(0.9, 1.1), delta * vec2f(0.9, 1.1)) * 2.6);
+  let light = lightBand * spotlight * hover;
+  let lightDirection = normalize(vec3f(lightCenter, 1.2) - hit);
+  let viewDirection = normalize(eye - hit);
+  let lightAndView = vec2f(dot(lightDirection + viewDirection, right), dot(lightDirection + viewDirection, down));
+  let illumination = max(dot(normal, lightDirection), 0.0) * max(dot(normal, viewDirection), 0.0);
+  let tint = params.ink * 0.78;
+  let noise = grain(p + vec2f(2));
+  var color = params.graphite + 0.008 * (0.9 - p.y);
+  // Fine, surface-locked grain catches the grazing reflection without animated static.
+  color += noise * (0.022 + light * 0.085);
+  color += light * (vec3f(0.045) + tint * 0.065);
+
+  // One engraving over the whole card, where vgpu keeps a triangle and a fractal.
+  let contour = etchedPhase(p);
+  // Transform screen derivatives back into the card plane: microscopic grooves
+  // follow the visible contours, but their 1.65um spacing is independent of zoom.
+  let dx = dpdx(p);
+  let dy = dpdy(p);
+  let gradient = vec2f(dpdx(contour) * dy.y - dpdy(contour) * dx.y, dpdy(contour) * dx.x - dpdx(contour) * dy.x);
+  let across = gradient / max(length(gradient), 0.00000001);
+  let foilDiffraction = diffraction(across, lightAndView, 1.65) * illumination;
+  let contours = stroke(sin(contour), 0.06, min(fwidth(contour), 1.0));
+  let reveal = hover * (0.06 + 0.24 * spotlight + light * 1.15);
+  let pearlPhase = dot(lightAndView, vec2f(0.48, -0.32)) + p.y * 0.32 + contour * 0.003;
+  let pearl = pearlColor(pearlPhase);
+  color += pearl * light * 0.24;
+  color += (pearl * 0.5 + vec3f(0.5)) * glint * spotlight * hover * 0.12;
+  let sparkle = pow(max(noise + 0.5, 0.0), 24.0) * glint * spotlight * hover;
+  color += pearl * sparkle * 0.22;
+  let foil = vec3f(0.12, 0.14, 0.18) + pearl * 0.65 + foilDiffraction * 0.12;
+  color += contours * 0.65 * foil * reveal;
+
+  // A delicate spectral echo stays clipped to the same engraving.
+  let foilPoint = p - (vec2f(0.007, -0.004) + params.tilt * 0.012);
+  let foilPhase = etchedPhase(foilPoint);
+  let foilLines = stroke(sin(foilPhase), 0.025, min(fwidth(foilPhase), 1.0));
+  color += foilLines * 0.65 * (pearl + foilDiffraction * 0.2) * reveal * 0.22;
+
+  // Sparse microdots and registration ticks emerge in the foil.
+  let grid = (fract((p + 1.0) * 20.0) - 0.5) / 20.0;
+  let dots = stroke(length(grid), 0.0008, aa * 0.4);
+  color += dots * reveal * 0.17;
+  let guide = abs(p) - (HALF - vec2f(0.07, 0.07));
+  let horizontal = stroke(guide.y, 0.0006, aa * 0.5) * (1.0 - smoothstep(0.012, 0.017, abs(guide.x)));
+  let vertical = stroke(guide.x, 0.0006, aa * 0.5) * (1.0 - smoothstep(0.012, 0.017, abs(guide.y)));
+  color += max(horizontal, vertical) * hover * (0.12 + light * 0.22);
+
+  return vec4f(color, 1);
+}
+`;

package/dist/components/company-card/snapshot.d.ts

@@ -0,0 +1,7 @@
+import { type FoilColors } from "./scene.js";
+/**
+ * One frame of the foil at `width` × `height` device pixels, copied out before
+ * the browser presents it: a WebGPU canvas keeps no readable image afterwards.
+ */
+export declare function snapshotFoil(colors: FoilColors, width: number, height: number): Promise<HTMLCanvasElement>;
+//# sourceMappingURL=snapshot.d.ts.map

package/dist/components/company-card/snapshot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapshot.d.ts","sourceRoot":"","sources":["../../../src/components/company-card/snapshot.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAKvD;;;GAGG;AACH,wBAAsB,YAAY,CAChC,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,OAAO,CAAC,iBAAiB,CAAC,CA2B5B"}

package/dist/components/company-card/snapshot.js

@@ -0,0 +1,37 @@
+import { frame, init, surface } from "vgpu";
+import { createScene } from "./scene.js";
+/** The pose a still of the card is taken in: lit from the upper left, nearly flat. */
+const POSE = { tilt: [0.04, -0.03], pointer: [-0.25, -0.35], hover: 1 };
+/**
+ * One frame of the foil at `width` × `height` device pixels, copied out before
+ * the browser presents it: a WebGPU canvas keeps no readable image afterwards.
+ */
+export async function snapshotFoil(colors, width, height) {
+    const gpu = await init();
+    const canvas = document.createElement("canvas");
+    Object.assign(canvas.style, {
+        position: "fixed",
+        left: "-10000px",
+        top: "0",
+        width: `${width / 2}px`,
+        height: `${height / 2}px`,
+    });
+    document.body.append(canvas);
+    try {
+        const output = surface(gpu, canvas, { dpr: [2, 2] });
+        const shader = createScene(gpu, output, colors);
+        await shader.compile({ colors: [output.format] });
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        shader.set({ params: { resolution: output.size, ...POSE } });
+        frame(gpu, (current) => current.pass(output, shader));
+        const still = document.createElement("canvas");
+        still.width = canvas.width;
+        still.height = canvas.height;
+        still.getContext("2d")?.drawImage(canvas, 0, 0);
+        return still;
+    }
+    finally {
+        canvas.remove();
+        gpu.dispose();
+    }
+}

package/dist/components/company-card.d.ts

@@ -0,0 +1,31 @@
+export type CompanyCardEdition = "company" | "partner";
+export type CompanyCardLabels = {
+    edition: string;
+    since: string;
+    namePlaceholder: string;
+    domainPlaceholder: string;
+};
+/**
+ * The company's nadicode card: what the person is making while they sign up,
+ * and what the website shows being issued. It carries every word it shows as a
+ * prop, fills in as the form is typed and turns to the pointer, so the foil in
+ * its engraving catches the light. The words are the caller's, so the card is
+ * hidden from assistive technology and holds nothing interactive.
+ */
+export declare function CompanyCard({ name, domain, edition, issued, labels, logo, sweepInView, }: {
+    name: string;
+    domain: string;
+    edition: CompanyCardEdition;
+    issued: boolean;
+    labels: CompanyCardLabels;
+    /** The company's own logo, one ink in white; absent until someone has found it. */
+    logo?: string;
+    /**
+     * Waits for most of the card to be on screen before it turns once in the
+     * light, for a page the reader scrolls the card into. A card the page shows
+     * already, such as the one beside a sign-up form, leaves this off and turns
+     * as soon as any of it is seen. Reduced motion holds it still either way.
+     */
+    sweepInView?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=company-card.d.ts.map

package/dist/components/company-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"company-card.d.ts","sourceRoot":"","sources":["../../src/components/company-card.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAqBF;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,MAAM,EACN,MAAM,EACN,IAAI,EACJ,WAAmB,GACpB,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,kBAAkB,CAAC;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,mFAAmF;IACnF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,+BAsSA"}