@anvpx/motion-scenes 0.0.0-stage → 0.1.0

package/dist/scenes/scene3d/scene.js

@@ -0,0 +1,413 @@
+// @ts-check
+// scene3d browser runtime. WebGL diorama (three.js + postprocessing) with a 2D canvas fallback.
+// MIT attribution: three.js (MIT) and postprocessing (Zlib) are vendored, unmodified, by the build
+// (ADR-0006). Everything here is a pure function of t: rotation is one turn per duration, grain uses
+// floor(t * 30), and no clock, random source or accumulator is read. Render only in seek().
+import { BloomEffect, EffectComposer, EffectPass, RenderPass, ToneMappingEffect, VignetteEffect, } from "postprocessing";
+import * as THREE from "three";
+import { mountTimeline } from "../../runtime/mount.js";
+import { progress } from "../../shared/motion.js";
+const DEFAULT_DURATION = 5;
+const TAU = Math.PI * 2;
+/** Effect strength per post preset; the 2D fallback reads bloom/grain/vignette only. */
+const POST = {
+    clean: { bloom: 0, grain: 0.01, vignette: 0, bloomIntensity: 0, vignetteDarkness: 0 },
+    bloom: { bloom: 1.1, grain: 0.02, vignette: 0.3, bloomIntensity: 1.05, vignetteDarkness: 0.35 },
+    cinematic: {
+        bloom: 1.1,
+        grain: 0.035,
+        vignette: 0.55,
+        bloomIntensity: 1.2,
+        vignetteDarkness: 0.6,
+    },
+    vintage: { bloom: 0.6, grain: 0.06, vignette: 0.7, bloomIntensity: 0.7, vignetteDarkness: 0.78 },
+};
+/** Key and fill per light preset; `key` is the 3D sun colour, `orb` the emissive accent. */
+const LIGHT = {
+    studio: { orb: "#66ccff", sun: 1.0, key: "#ffffff" },
+    sunset: { orb: "#ff9a5c", sun: 0.9, key: "#ffb27a" },
+    night: { orb: "#8fb4ff", sun: 0.5, key: "#8fb4ff" },
+    soft: { orb: "#bfe8ff", sun: 0.7, key: "#e8f2ff" },
+};
+/** Background and framing per hdri preset: the stage backdrop and camera distance. */
+const ENV = {
+    neutral: { bg: "#0a0c12", ambient: "#93a4c8", ground: "#0b0d13", dist: 5.9, height: 1.15 },
+    studio: { bg: "#111318", ambient: "#c9d6f0", ground: "#0d1016", dist: 5.5, height: 1.0 },
+    sunset: { bg: "#1a1210", ambient: "#ffb489", ground: "#170f0c", dist: 5.8, height: 1.3 },
+    night: { bg: "#05070c", ambient: "#7d9bd6", ground: "#05070b", dist: 5.2, height: 1.05 },
+};
+/** Surface response per material preset. */
+const MATERIAL = {
+    clay: { roughness: 0.92, metalness: 0.02, emissiveIntensity: 0 },
+    gloss: { roughness: 0.16, metalness: 0.06, emissiveIntensity: 0 },
+    metal: { roughness: 0.3, metalness: 1, emissiveIntensity: 0 },
+    emissive: { roughness: 0.45, metalness: 0, emissiveIntensity: 1.6 },
+};
+/**
+ * @param {Record<string, any>} table
+ * @param {string | undefined} name
+ * @returns {any}
+ */
+const pick = (table, name) => (name !== undefined && name in table ? table[name] : null);
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+const seedOf = (t) => Math.floor(t * 30) % 1000;
+/**
+ * @param {number} x
+ * @param {number} y
+ * @param {number} s
+ * @returns {number}
+ */
+const hash2 = (x, y, s) => {
+    const h = Math.sin(x * 12.9898 + y * 78.233 + s * 43.7585) * 43758.5453;
+    return h - Math.floor(h);
+};
+/**
+ * @param {number} t
+ * @param {number} duration
+ * @returns {number}
+ */
+const rotOf = (t, duration) => ((t / duration) * TAU) % TAU;
+/* ---------- 2D fallback: a flat wireframe diorama, no WebGL required ---------- */
+/**
+ * @param {readonly [number, number, number]} p
+ * @param {number} ay
+ * @param {number} tilt
+ * @param {number} cx
+ * @param {number} cy
+ * @param {number} s
+ * @returns {[number, number]}
+ */
+const project = (p, ay, tilt, cx, cy, s) => {
+    const c = Math.cos(ay);
+    const sY = Math.sin(ay);
+    const x1 = p[0] * c + p[2] * sY;
+    const z1 = -p[0] * sY + p[2] * c;
+    const y1 = p[1] * Math.cos(tilt) - z1 * Math.sin(tilt);
+    return [cx + x1 * s, cy - y1 * s];
+};
+/** @type {Array<[number, number, number]>} */
+const CUBE = [
+    [-0.5, -0.5, -0.5],
+    [0.5, -0.5, -0.5],
+    [0.5, 0.5, -0.5],
+    [-0.5, 0.5, -0.5],
+    [-0.5, -0.5, 0.5],
+    [0.5, -0.5, 0.5],
+    [0.5, 0.5, 0.5],
+    [-0.5, 0.5, 0.5],
+];
+/** @type {Array<[number, number]>} */
+const EDGES = [
+    [0, 1],
+    [1, 2],
+    [2, 3],
+    [3, 0],
+    [4, 5],
+    [5, 6],
+    [6, 7],
+    [7, 4],
+    [0, 4],
+    [1, 5],
+    [2, 6],
+    [3, 7],
+];
+/**
+ * @param {CanvasRenderingContext2D} g
+ * @param {number} a
+ * @param {number} cx
+ * @param {number} cy
+ * @param {number} s
+ */
+const paintCube = (g, a, cx, cy, s) => {
+    const tilt = 0.42;
+    g.lineWidth = Math.max(2, cx / 320);
+    g.strokeStyle = "#e8ecf4";
+    for (const edge of EDGES) {
+        const a0 = CUBE[edge[0]] ?? CUBE[0];
+        const b0 = CUBE[edge[1]] ?? CUBE[0];
+        const p = project(/** @type {[number, number, number]} */ (a0), a, tilt, cx, cy, s);
+        const q = project(/** @type {[number, number, number]} */ (b0), a, tilt, cx, cy, s);
+        g.beginPath();
+        g.moveTo(p[0], p[1]);
+        g.lineTo(q[0], q[1]);
+        g.stroke();
+    }
+};
+/**
+ * @param {CanvasRenderingContext2D} g
+ * @param {number} a
+ * @param {number} cx
+ * @param {number} cy
+ * @param {number} s
+ * @param {{ bloom: number }} post
+ * @param {{ orb: string }} light
+ */
+const paintOrb = (g, a, cx, cy, s, post, light) => {
+    const ox = cx + Math.cos(a) * s * 1.6;
+    const oy = cy - 60 - Math.sin(a) * s * 0.5;
+    const glowR = s * (0.5 + post.bloom * 0.35);
+    const glow = g.createRadialGradient(ox, oy, 0, ox, oy, glowR);
+    glow.addColorStop(0, light.orb);
+    glow.addColorStop(1, "rgba(0,0,0,0)");
+    g.fillStyle = glow;
+    g.beginPath();
+    g.arc(ox, oy, glowR, 0, TAU);
+    g.fill();
+    g.fillStyle = light.orb;
+    g.beginPath();
+    g.arc(ox, oy, Math.max(6, s * 0.12), 0, TAU);
+    g.fill();
+};
+/**
+ * @param {CanvasRenderingContext2D} g
+ * @param {number} w
+ * @param {number} h
+ * @param {number} seed
+ * @param {number} amount
+ */
+const paintGrain = (g, w, h, seed, amount) => {
+    const step = 8;
+    g.fillStyle = `rgba(255,255,255,${String(amount)})`;
+    for (let y = 0; y < h; y += step) {
+        for (let x = 0; x < w; x += step) {
+            if (hash2(x, y, seed) > 0.5)
+                g.fillRect(x, y, 2, 2);
+        }
+    }
+};
+/**
+ * @param {CanvasRenderingContext2D} g
+ * @param {number} w
+ * @param {number} h
+ * @param {number} cx
+ * @param {number} cy
+ * @param {number} amount
+ */
+const paintVignette = (g, w, h, cx, cy, amount) => {
+    if (amount <= 0)
+        return;
+    const v = g.createRadialGradient(cx, cy, Math.min(w, h) * 0.35, cx, cy, Math.max(w, h) * 0.75);
+    v.addColorStop(0, "rgba(0,0,0,0)");
+    v.addColorStop(1, `rgba(0,0,0,${String(amount)})`);
+    g.fillStyle = v;
+    g.fillRect(0, 0, w, h);
+};
+/**
+ * @param {CanvasRenderingContext2D} g
+ * @param {number} w
+ * @param {number} h
+ * @param {number} t
+ * @param {number} duration
+ */
+const paintFade = (g, w, h, t, duration) => {
+    const fade = progress(t, duration - 0.5, duration);
+    if (fade <= 0)
+        return;
+    g.fillStyle = `rgba(0,0,0,${String(fade * 0.35)})`;
+    g.fillRect(0, 0, w, h);
+};
+/**
+ * @param {HTMLCanvasElement} canvas
+ * @param {{ post: { bloom: number, grain: number, vignette: number }, light: { orb: string }, bg: string }} presets
+ * @param {number} duration
+ */
+const flatStage = (canvas, presets, duration) => {
+    const g = canvas.getContext("2d");
+    if (g === null)
+        return null;
+    /** @param {number} t */
+    const render = (t) => {
+        const w = canvas.width;
+        const h = canvas.height;
+        const a = rotOf(t, duration);
+        g.save();
+        g.fillStyle = presets.bg;
+        g.fillRect(0, 0, w, h);
+        paintCube(g, a, w * 0.5, h * 0.58, Math.min(w, h) * 0.22);
+        paintOrb(g, a, w * 0.5, h * 0.58, Math.min(w, h) * 0.22, presets.post, presets.light);
+        paintGrain(g, w, h, seedOf(t), presets.post.grain);
+        paintVignette(g, w, h, w * 0.5, h * 0.58, presets.post.vignette);
+        paintFade(g, w, h, t, duration);
+        g.restore();
+    };
+    return { render, dispose: () => g.clearRect(0, 0, canvas.width, canvas.height) };
+};
+/* ---------- WebGL diorama ---------- */
+/**
+ * Builds the three.js stage. Any failure (no WebGL, a driver quirk, an API change in a vendored
+ * library) returns null so the caller falls back to the 2D diorama instead of a black frame.
+ * @param {HTMLCanvasElement} canvas
+ * @param {HTMLElement} root
+ * @param {{ post: any, light: any, material: any, env: any }} presets
+ * @param {number} duration
+ */
+const glStage = (canvas, root, presets, duration) => {
+    const width = Math.max(1, Math.round(canvas.clientWidth || canvas.width));
+    const height = Math.max(1, Math.round(canvas.clientHeight || canvas.height));
+    const renderer = new THREE.WebGLRenderer({
+        canvas,
+        antialias: true,
+        preserveDrawingBuffer: true,
+        powerPreference: "high-performance",
+    });
+    renderer.setPixelRatio(1);
+    renderer.setSize(width, height, false);
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFShadowMap;
+    /**
+     * @param {string} name
+     * @param {string} fallback
+     * @returns {string}
+     */
+    const cssVar = (name, fallback) => {
+        const value = getComputedStyle(root).getPropertyValue(name).trim();
+        return value === "" ? fallback : value;
+    };
+    const accent = cssVar("--mk-color-accent", "#7cc4ff");
+    const accent2 = cssVar("--mk-color-accent2", "#b58cff");
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(presets.env.bg);
+    const camera = new THREE.PerspectiveCamera(38, width / height, 0.1, 100);
+    camera.position.set(0, presets.env.height, presets.env.dist);
+    camera.lookAt(0, 0.1, 0);
+    scene.add(new THREE.HemisphereLight(presets.env.ambient, presets.env.ground, 0.85));
+    const sun = new THREE.DirectionalLight(presets.light.key, presets.light.sun * 2.4);
+    sun.position.set(3.4, 5.2, 2.6);
+    sun.castShadow = true;
+    sun.shadow.mapSize.set(1024, 1024);
+    sun.shadow.camera.near = 1;
+    sun.shadow.camera.far = 18;
+    sun.shadow.camera.left = -5;
+    sun.shadow.camera.right = 5;
+    sun.shadow.camera.top = 5;
+    sun.shadow.camera.bottom = -5;
+    sun.shadow.bias = -0.0012;
+    scene.add(sun);
+    // Shadow-only floor: the theme background shows through, so the diorama sits in the card.
+    const floor = new THREE.Mesh(new THREE.PlaneGeometry(24, 24), new THREE.ShadowMaterial({ opacity: 0.42 }));
+    floor.rotation.x = -Math.PI / 2;
+    floor.position.y = -1.25;
+    floor.receiveShadow = true;
+    scene.add(floor);
+    const surface = presets.material;
+    const heroMaterial = new THREE.MeshStandardMaterial({
+        color: new THREE.Color(accent),
+        roughness: surface.roughness,
+        metalness: surface.metalness,
+        emissive: new THREE.Color(accent2),
+        emissiveIntensity: surface.emissiveIntensity * 0.35,
+    });
+    const hero = new THREE.Mesh(new THREE.TorusKnotGeometry(0.82, 0.27, 160, 32), heroMaterial);
+    hero.position.y = 0.12;
+    hero.castShadow = true;
+    scene.add(hero);
+    const satelliteMaterial = new THREE.MeshStandardMaterial({
+        color: new THREE.Color(accent2),
+        roughness: 0.22,
+        metalness: 0.3,
+        emissive: new THREE.Color(accent2),
+        emissiveIntensity: 0.9,
+    });
+    const satellite = new THREE.Mesh(new THREE.SphereGeometry(0.13, 32, 24), satelliteMaterial);
+    satellite.castShadow = true;
+    scene.add(satellite);
+    // The orbit path itself: a thin ring the satellite travels along, so the motion reads as intended.
+    const ring = new THREE.Mesh(new THREE.TorusGeometry(1.95, 0.007, 6, 160), new THREE.MeshBasicMaterial({
+        color: new THREE.Color(accent),
+        transparent: true,
+        opacity: 0.32,
+    }));
+    ring.rotation.x = -Math.PI / 2;
+    ring.position.y = 0.1;
+    scene.add(ring);
+    const orbColor = new THREE.Color(presets.light.orb);
+    // Over-bright (HDR) so the bloom pass picks the orb up as a light source, not a flat disc.
+    const orb = new THREE.Mesh(new THREE.SphereGeometry(0.1, 32, 24), new THREE.MeshBasicMaterial({ color: orbColor.clone().multiplyScalar(2.6) }));
+    scene.add(orb);
+    const orbLight = new THREE.PointLight(orbColor, 14, 14, 2);
+    scene.add(orbLight);
+    const composer = new EffectComposer(renderer);
+    composer.addPass(new RenderPass(scene, camera));
+    /** @type {any[]} */
+    const effects = [];
+    if (presets.post.bloomIntensity > 0) {
+        effects.push(new BloomEffect({
+            intensity: presets.post.bloomIntensity,
+            luminanceThreshold: 0.52,
+            luminanceSmoothing: 0.28,
+            mipmapBlur: true,
+        }));
+    }
+    if (presets.post.vignetteDarkness > 0) {
+        effects.push(new VignetteEffect({ darkness: presets.post.vignetteDarkness, offset: 0.32 }));
+    }
+    effects.push(new ToneMappingEffect());
+    composer.addPass(new EffectPass(camera, ...effects));
+    composer.setSize(width, height);
+    /** @param {number} t */
+    const render = (t) => {
+        const a = rotOf(t, duration);
+        hero.rotation.set(0.32 + Math.sin(a * 0.5) * 0.12, a, 0);
+        hero.position.y = 0.12 + Math.sin(a) * 0.06;
+        satellite.position.set(Math.cos(a) * 1.95, 0.1, Math.sin(a) * 1.95);
+        satellite.rotation.set(a * 1.6, a, 0);
+        orb.position.set(Math.cos(-a) * 1.55, 1.35, Math.sin(-a) * 1.55);
+        orbLight.position.copy(orb.position);
+        camera.position.set(Math.sin(a * 0.35) * 0.4, presets.env.height, presets.env.dist);
+        camera.lookAt(0, 0.1, 0);
+        composer.render(0);
+    };
+    const dispose = () => {
+        composer.dispose();
+        for (const effect of effects)
+            effect.dispose?.();
+        for (const object of [hero, satellite, orb, ring]) {
+            object.geometry.dispose();
+            /** @type {any} */ (object.material).dispose();
+        }
+        floor.geometry.dispose();
+        /** @type {any} */ (floor.material).dispose();
+        renderer.dispose();
+        renderer.forceContextLoss();
+    };
+    return { render, dispose };
+};
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export function createScene(root, config, ctx) {
+    const inner = mountTimeline(root, config, ctx, { baseDelay: 0.2, staggerFrames: 5, rise: 36 });
+    const box = /** @type {HTMLElement | null} */ (root.querySelector(".mk-scene3d"));
+    const canvas = /** @type {HTMLCanvasElement | null} */ (root.querySelector("canvas.mk-gl"));
+    const duration = ctx.duration || Number(root.dataset.duration) || DEFAULT_DURATION;
+    const env = pick(ENV, box?.dataset.hdri) ?? ENV.neutral;
+    const presets = {
+        post: pick(POST, box?.dataset.post) ?? POST.cinematic,
+        light: pick(LIGHT, box?.dataset.light) ?? LIGHT.studio,
+        material: pick(MATERIAL, box?.dataset.material) ?? MATERIAL.clay,
+        env,
+        bg: env.bg,
+    };
+    /** @type {{ render: (t: number) => void, dispose: () => void } | null} */
+    let stage = null;
+    if (canvas !== null) {
+        try {
+            stage = glStage(canvas, root, presets, duration);
+        }
+        catch {
+            stage = flatStage(canvas, presets, duration);
+        }
+    }
+    /** @param {number} t */
+    const seek = (t) => {
+        inner.seek(t);
+        stage?.render(t);
+    };
+    const dispose = () => {
+        inner.dispose();
+        stage?.dispose();
+    };
+    seek(0);
+    return { seek, dispose, ready: inner.ready };
+}

package/dist/scenes/scene3d/style.css

@@ -0,0 +1,43 @@
+#scene-root .mk-scene3d {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-lg);
+  flex: 1;
+  min-height: 0;
+}
+#scene-root .mk-copy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-md);
+  max-width: 56%;
+}
+#scene-root .mk-title {
+  font-family: var(--mk-font-sans);
+  font-size: var(--mk-font-size-xl);
+  font-weight: 800;
+  line-height: 1.04;
+  letter-spacing: -0.02em;
+  color: var(--mk-color-fg);
+}
+#scene-root .mk-caption {
+  font-size: var(--mk-font-size-lg);
+  line-height: 1.3;
+  color: var(--mk-color-muted);
+}
+#scene-root .mk-stage {
+  position: relative;
+  flex: 1;
+  min-height: 320px;
+  border-radius: var(--mk-radius-xl);
+  overflow: hidden;
+  background: var(--mk-color-card);
+  border: 2px solid var(--mk-color-divider);
+}
+#scene-root .mk-gl {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: var(--mk-color-card);
+}

package/dist/scenes/stat/index.d.ts

@@ -0,0 +1,4 @@
+/** Doubles hold 15 digits exactly; beyond that the count-up would show wrong digits. */
+export declare const MAX_COUNT_DIGITS = 15;
+export declare const countsExactly: (value: string | number) => boolean;
+export declare const statScene: import("@anvpx/motion-schema").ScenePlugin;

package/dist/scenes/stat/index.js

@@ -0,0 +1,72 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { readText } from "../../text-file.js";
+import { limitWords, present, text } from "../../words.js";
+/** Doubles hold 15 digits exactly; beyond that the count-up would show wrong digits. */
+export const MAX_COUNT_DIGITS = 15;
+const LEADING_NUMBER = /\d[\d,]*(?:\.\d+)?/;
+export const countsExactly = (value) => {
+    if (typeof value === "number")
+        return Math.abs(value) < 10 ** MAX_COUNT_DIGITS;
+    const digits = LEADING_NUMBER.exec(value)?.[0].replace(/\D/g, "") ?? "";
+    return digits.length <= MAX_COUNT_DIGITS;
+};
+const configSchema = limitWords(z
+    .strictObject({
+    value: z.union([text, z.number()]),
+    label: text,
+    unit: text.optional(),
+    delta: text.optional(),
+    context: text.optional(),
+})
+    .superRefine((props, ctx) => {
+    if (!countsExactly(props.value)) {
+        ctx.addIssue({
+            code: "custom",
+            path: ["value"],
+            message: `too large to count up exactly (max ${MAX_COUNT_DIGITS} digits)`,
+        });
+    }
+}), (props) => present(props.value, props.unit, props.label, props.delta, props.context));
+const SHORT_VALUE = 4;
+const MEDIUM_VALUE = 7;
+/** Hero size class by value length so long values stay inside the frame. */
+const fit = (value) => {
+    if (value.length <= SHORT_VALUE)
+        return "mk-fit-hero";
+    return value.length <= MEDIUM_VALUE ? "mk-fit-md" : "mk-fit-sm";
+};
+/** The live span counts up from 0; the hidden ghost reserves the final width. */
+const figure = (props) => {
+    const value = esc(String(props.value));
+    const unit = props.unit ? `<span class="mk-unit">${esc(props.unit)}</span>` : "";
+    const live = `<span class="mk-live" data-step="0" data-count="${value}">${value}</span>`;
+    const ghost = `<span class="mk-ghost" aria-hidden="true">${value}</span>`;
+    return `<span class="mk-value ${fit(String(props.value))}">${ghost}${live}</span>${unit}`;
+};
+const render = (props) => {
+    const lines = [];
+    const add = (tag, cls, inner, key) => {
+        const attrs = animAttrs("rise", lines.length, key);
+        lines.push(`<${tag} class="${cls}" ${attrs}>${inner}</${tag}>`);
+    };
+    add("div", "mk-figure", figure(props), "value");
+    add("p", "mk-label", esc(props.label), "label");
+    if (props.delta)
+        add("p", "mk-delta", esc(props.delta), "delta");
+    if (props.context)
+        add("p", "mk-context", esc(props.context), "context");
+    return `<div class="mk-halo" aria-hidden="true"></div>\n${lines.join("\n")}`;
+};
+export const statScene = defineScene({
+    type: "stat",
+    configSchema,
+    meta: {
+        purpose: "One hero number with label, unit, delta and context; counts up.",
+        example: { value: 42, label: "Users" },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props) => ({ body: render(props) }),
+});

package/dist/scenes/stat/scene.d.ts

@@ -0,0 +1,2 @@
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export declare function createScene(root: HTMLElement, config: import("../../runtime/mount.js").SceneConfig, ctx: import("../../runtime/mount.js").RuntimeContext): import("../../runtime/mount.js").Runtime;

package/dist/scenes/stat/scene.js

@@ -0,0 +1,6 @@
+// @ts-check
+import { mountTimeline } from "../../runtime/mount.js";
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export function createScene(root, config, ctx) {
+    return mountTimeline(root, config, ctx, { baseDelay: 0.2, staggerFrames: 4, rise: 56 });
+}

package/dist/scenes/stat/style.css

@@ -0,0 +1,95 @@
+#scene-root {
+  align-items: center;
+  text-align: center;
+}
+#scene-root .mk-halo {
+  position: absolute;
+  z-index: -1;
+  left: 50%;
+  top: 50%;
+  width: 1280px;
+  height: 1280px;
+  margin: -640px 0 0 -640px;
+  border-radius: 50%;
+  border: 2px solid var(--mk-color-divider);
+  background: radial-gradient(
+    closest-side,
+    color-mix(in srgb, var(--mk-color-card) 80%, transparent),
+    transparent
+  );
+  transform: scale(calc(1 + var(--drift, 0) * 0.015));
+}
+#scene-root .mk-halo::after {
+  content: "";
+  position: absolute;
+  inset: 170px;
+  border-radius: 50%;
+  border: 2px solid var(--mk-color-accent);
+  opacity: 0.35;
+}
+#scene-root .mk-figure {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: var(--mk-space-lg);
+}
+#scene-root .mk-value {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  display: inline-grid;
+  font-weight: 800;
+  line-height: 0.9;
+  letter-spacing: -0.04em;
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+  color: var(--mk-color-accent);
+}
+#scene-root .mk-value > * {
+  grid-area: 1 / 1;
+  text-align: left;
+}
+#scene-root .mk-live {
+  text-align: right;
+  transform-origin: right 65%;
+}
+#scene-root .mk-ghost {
+  visibility: hidden;
+}
+#scene-root .mk-fit-hero {
+  font-size: var(--mk-font-size-hero);
+}
+#scene-root .mk-fit-md {
+  font-size: var(--mk-font-size-heroMd);
+}
+#scene-root .mk-fit-sm {
+  font-size: var(--mk-font-size-heroSm);
+}
+#scene-root .mk-unit {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  font-size: var(--mk-font-size-title);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+#scene-root .mk-label {
+  margin-top: var(--mk-space-lg);
+  max-width: 1200px;
+  font-size: var(--mk-font-size-lg);
+  font-weight: 600;
+  line-height: 1.25;
+}
+#scene-root .mk-delta {
+  margin-top: var(--mk-space-lg);
+  padding: var(--mk-space-sm) var(--mk-space-lg);
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-accentSoft);
+  font-size: var(--mk-font-size-md);
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--mk-color-accent);
+}
+#scene-root .mk-context {
+  margin-top: var(--mk-space-lg);
+  padding-top: var(--mk-space-lg);
+  max-width: 1000px;
+  border-top: 2px solid var(--mk-color-divider);
+  font-size: var(--mk-font-size-md);
+  color: var(--mk-color-muted);
+}

package/dist/scenes/steps/index.d.ts

@@ -0,0 +1 @@
+export declare const stepsScene: import("@anvpx/motion-schema").ScenePlugin;