@anvpx/motion-scenes 0.0.0-stage → 0.1.1

package/dist/runtime/timeline.js

@@ -0,0 +1,199 @@
+// @ts-check
+// Pure timeline core: every value is a function of (inputs, t) only.
+import { clamp01, ease } from "./easing.js";
+/** @typedef {{ from: number, to: number, start: number, end: number, ease: string }} Track */
+/** @typedef {{ baseDelay: number, staggerFrames: number, rise: number }} Plan */
+/** @typedef {{ opacity: number, y: number, dash: number, scale: number }} EntranceState */
+export const ENTRANCE_SECONDS = 0.6;
+export const MIN_STAGGER_FRAMES = 3;
+export const MAX_STAGGER_FRAMES = 6;
+export const COUNT_SECONDS = 1.4;
+/** Share of the scene a count-up may take, and its ceiling in seconds. */
+export const COUNT_SHARE = 0.25;
+export const MAX_COUNT_SECONDS = 3;
+/** Opacity of a "rise" element at progress 0, so no scene opens on a blank frame. */
+export const RISE_FLOOR = 0.45;
+/** Size of a counting number at progress 0, relative to its final size. */
+export const COUNT_SCALE_FROM = 0.7;
+/** Fade-in and fade-out length of an overlay window, in seconds. */
+export const ENVELOPE_SECONDS = 0.4;
+/** Extra size of a countdown number at the start of each step. */
+export const PULSE_SCALE = 0.25;
+const PULSE_SHARE = 0.4;
+const DRIFT_RATE = 0.35;
+const GROUP_SIZE = /\B(?=(\d{3})+(?!\d))/g;
+const LEADING_NUMBER = /^(\D*?)(\d[\d,]*(?:\.\d+)?)(\D*)$/;
+const DIM_OPACITY = 0.3;
+const MOVE_DELTA = 0.04;
+/**
+ * Value of a single-segment track at time t (seconds).
+ * @param {Track} track
+ * @param {number} t
+ * @returns {number}
+ */
+export const sample = (track, t) => {
+    const span = track.end - track.start;
+    const progress = span > 0 ? clamp01((t - track.start) / span) : Number(t >= track.end);
+    return track.from + (track.to - track.from) * ease(track.ease, progress);
+};
+/**
+ * Stagger between consecutive steps, in seconds, from a frame count.
+ * @param {number} frames 3-6
+ * @param {number} fps
+ * @returns {number}
+ */
+export const staggerSeconds = (frames, fps) => {
+    if (frames < MIN_STAGGER_FRAMES || frames > MAX_STAGGER_FRAMES) {
+        throw new RangeError(`stagger must be ${MIN_STAGGER_FRAMES}-${MAX_STAGGER_FRAMES} frames`);
+    }
+    return frames / fps;
+};
+/**
+ * Progress track (0 -> 1) of the entrance of step `step`.
+ * @param {number} step
+ * @param {Plan} plan
+ * @param {number} fps
+ * @param {string} easing
+ * @returns {Track}
+ */
+export const entranceTrack = (step, plan, fps, easing) => {
+    const start = plan.baseDelay + step * staggerSeconds(plan.staggerFrames, fps);
+    return { from: 0, to: 1, start, end: start + ENTRANCE_SECONDS, ease: easing };
+};
+/**
+ * @param {string} kind
+ * @param {number} p
+ * @returns {number}
+ */
+const entranceOpacity = (kind, p) => {
+    if (kind === "draw")
+        return 1;
+    return kind === "rise" ? RISE_FLOOR + (1 - RISE_FLOOR) * clamp01(p) : clamp01(p);
+};
+/**
+ * Visual state of an element kind at entrance progress p.
+ * @param {string} kind rise | fade | draw | grow
+ * @param {number} p progress; may overshoot for springs
+ * @param {number} rise rise distance in px
+ * @returns {EntranceState}
+ */
+export const entranceState = (kind, p, rise) => ({
+    opacity: entranceOpacity(kind, p),
+    y: kind === "rise" ? (1 - p) * rise : 0,
+    dash: 1 - p,
+    scale: kind === "grow" ? clamp01(p) : 1,
+});
+/**
+ * Count-up length: COUNT_SECONDS, stretched to a quarter of a long scene (max MAX_COUNT_SECONDS).
+ * @param {number} duration scene seconds; 0 or unknown keeps COUNT_SECONDS
+ * @returns {number}
+ */
+export const countSeconds = (duration) => Math.min(MAX_COUNT_SECONDS, Math.max(COUNT_SECONDS, duration * COUNT_SHARE));
+/**
+ * Track of a count-up that starts with the entrance of `step`.
+ * @param {number} step
+ * @param {Plan} plan
+ * @param {number} fps
+ * @param {string} easing
+ * @param {number} [duration] scene seconds
+ * @returns {Track}
+ */
+export const countTrack = (step, plan, fps, easing, duration = 0) => {
+    const { start } = entranceTrack(step, plan, fps, easing);
+    return { from: 0, to: 1, start, end: start + countSeconds(duration), ease: easing };
+};
+/**
+ * Scale of a counting number at count progress p: grows from COUNT_SCALE_FROM to 1.
+ * @param {number} p
+ * @returns {number}
+ */
+export const countScale = (p) => COUNT_SCALE_FROM + (1 - COUNT_SCALE_FROM) * clamp01(p);
+/** @param {string} digits */
+const withGrouping = (digits) => digits.replace(GROUP_SIZE, ",");
+/**
+ * The first number of `text` scaled to progress p, keeping prefix, suffix, decimals and
+ * thousands separators; p >= 1 and text without one leading number return `text` verbatim.
+ * @param {string} text
+ * @param {number} p
+ * @returns {string}
+ */
+export const countText = (text, p) => {
+    const match = LEADING_NUMBER.exec(text);
+    if (!match || p >= 1)
+        return text;
+    const [, prefix = "", number = "", suffix = ""] = match;
+    const decimals = number.includes(".") ? number.length - number.indexOf(".") - 1 : 0;
+    const [whole = "", fraction] = (parseFloat(number.replaceAll(",", "")) * clamp01(p))
+        .toFixed(decimals)
+        .split(".");
+    const grouped = number.includes(",") ? withGrouping(whole) : whole;
+    return `${prefix}${fraction === undefined ? grouped : `${grouped}.${fraction}`}${suffix}`;
+};
+/**
+ * Slow background drift in [-1, 1]: one cycle every ~18 s.
+ * @param {number} t seconds
+ * @returns {number}
+ */
+export const driftOf = (t) => Math.sin(t * DRIFT_RATE);
+/**
+ * Root scale of the supported camera moves; other moves are applied by the build.
+ * @param {string} move
+ * @param {number} t
+ * @param {number} duration
+ * @returns {number}
+ */
+export const cameraScale = (move, t, duration) => {
+    const progress = duration > 0 ? clamp01(t / duration) : 0;
+    if (move === "push-in")
+        return 1 + MOVE_DELTA * progress;
+    if (move === "pull-out")
+        return 1 + MOVE_DELTA * (1 - progress);
+    return 1;
+};
+/**
+ * Opacity multiplier of `focus`: elements outside the focus dim.
+ * @param {string} focus focused key; empty means no focus
+ * @param {string} keys space-separated keys of the element; empty means never dim
+ * @returns {number}
+ */
+export const dimOpacity = (focus, keys) => !focus || !keys || keys.split(" ").includes(focus) ? 1 : DIM_OPACITY;
+/**
+ * Opacity of an overlay at local time t: eased fade in, hold, eased fade out.
+ * @param {number} t seconds from the start of the overlay window
+ * @param {number} duration window length in seconds
+ * @param {string} easing
+ * @returns {number}
+ */
+export const overlayEnvelope = (t, duration, easing) => {
+    const edge = Math.min(ENVELOPE_SECONDS, duration / 2);
+    if (!(edge > 0))
+        return 1;
+    return clamp01(Math.min(ease(easing, t / edge), ease(easing, (duration - t) / edge)));
+};
+/**
+ * Countdown value and pulse scale at local time t: one equal step per integer from -> to.
+ * @param {number} t
+ * @param {number} duration
+ * @param {number} from
+ * @param {number} to
+ * @returns {{ value: number, scale: number }}
+ */
+export const countdownState = (t, duration, from, to) => {
+    const steps = Math.abs(to - from) + 1;
+    const length = duration / steps;
+    const index = Math.min(steps - 1, Math.floor(clamp01(t / duration) * steps));
+    const local = length > 0 ? (t - index * length) / length : 1;
+    return {
+        value: from + Math.sign(to - from) * index,
+        scale: 1 + PULSE_SCALE * (1 - ease("out", local / PULSE_SHARE)),
+    };
+};
+/**
+ * Linear value from -> to across the duration (progress bars).
+ * @param {number} t
+ * @param {number} duration
+ * @param {number} from
+ * @param {number} to
+ * @returns {number}
+ */
+export const spanProgress = (t, duration, from, to) => from + (to - from) * (duration > 0 ? clamp01(t / duration) : 1);

package/dist/runtime-files.d.ts

@@ -0,0 +1,4 @@
+/** True only for a browser module that this package emits; does not read disk. */
+export declare const isSharedModulePath: (path: string) => boolean;
+/** Shared browser modules; the build emits them once under `runtime/` and `shared/`. */
+export declare const runtimeFiles: () => Map<string, string>;

package/dist/runtime-files.js

@@ -0,0 +1,18 @@
+import { readText } from "./text-file.js";
+const RUNTIME_MODULES = ["easing.js", "timeline.js", "mount.js", "compose.js"];
+/** Pure helpers shared with emit time; they import `../runtime/easing.js`, so they sit beside it. */
+const SHARED_MODULES = ["motion.js", "format.js"];
+/** True only for a browser module that this package emits; does not read disk. */
+export const isSharedModulePath = (path) => RUNTIME_MODULES.some((name) => path === `runtime/${name}`) ||
+    SHARED_MODULES.some((name) => path === `shared/${name}`);
+/** Shared browser modules; the build emits them once under `runtime/` and `shared/`. */
+export const runtimeFiles = () => new Map([
+    ...RUNTIME_MODULES.map((name) => [
+        `runtime/${name}`,
+        readText(`./runtime/${name}`, import.meta.url),
+    ]),
+    ...SHARED_MODULES.map((name) => [
+        `shared/${name}`,
+        readText(`./shared/${name}`, import.meta.url),
+    ]),
+]);

package/dist/scene-contract.d.ts

@@ -0,0 +1,7 @@
+import type { ScenePlugin } from "@anvpx/motion-schema";
+export interface ContractFixture {
+    readonly valid: Record<string, unknown>;
+    /** Valid props whose every text field contains markup and quotes. */
+    readonly hostile: Record<string, unknown>;
+}
+export declare const describeSceneContract: (plugin: ScenePlugin, fixture: ContractFixture) => void;

package/dist/scene-contract.js

@@ -0,0 +1,104 @@
+import { resolveTheme, THEME_NAMES, toCssVars } from "@anvpx/motion-themes";
+import { describe, expect, it } from "vitest";
+import { runtimeFiles } from "./runtime-files.js";
+import { emitContext, entryOf } from "./test-fixtures.js";
+const MIN_TEXT_PX = 28;
+const HEX_COLOR = /#[0-9a-fA-F]{3,8}\b/;
+const FUNCTION_COLOR = /\b(?:rgb|rgba|hsl|hsla)\(/;
+const files = (plugin, props, extra = {}) => {
+    const id = `${plugin.type}-1`;
+    const out = plugin.emit(entryOf(plugin.type, props, extra), emitContext());
+    const get = (name) => out.get(`scenes/${id}/${name}`) ?? "";
+    return { id, out, html: get("fragment.html"), css: get("style.css"), js: get("scene.js") };
+};
+const declared = (css) => new Set([...css.matchAll(/(--mk-[\w-]+):/g)].map((m) => m[1] ?? ""));
+const referenced = (css) => [...css.matchAll(/var\((--mk-[\w-]+)\)/g)].map((m) => m[1] ?? "");
+const themeVars = (name) => declared(toCssVars(resolveTheme(name)));
+export const describeSceneContract = (plugin, fixture) => {
+    describe(`${plugin.type} emit contract`, () => {
+        it("emits fragment, style and script under scenes/<id>/", () => {
+            const { out, id } = files(plugin, fixture.valid);
+            expect([...out.keys()]).toEqual([
+                `scenes/${id}/fragment.html`,
+                `scenes/${id}/style.css`,
+                `scenes/${id}/scene.js`,
+            ]);
+        });
+        it("fragment is one root element with id scene-<id> and no clip class", () => {
+            const { html, id } = files(plugin, fixture.valid);
+            expect(html.startsWith(`<section id="scene-${id}" `)).toBe(true);
+            expect(html.trimEnd().endsWith("</section>")).toBe(true);
+            expect(html.match(/<section/g)).toHaveLength(1);
+            expect(html).not.toMatch(/class="[^"]*\bclip\b/);
+        });
+        it("matches the golden output", () => {
+            const { out } = files(plugin, fixture.valid, { move: "push-in", focus: "title" });
+            const text = [...out].map(([path, body]) => `=== ${path}\n${body}`).join("\n");
+            expect(text).toMatchSnapshot();
+        });
+        it("is byte-identical when run twice", () => {
+            expect([...files(plugin, fixture.valid).out]).toEqual([...files(plugin, fixture.valid).out]);
+        });
+        it("escapes all prop text", () => {
+            const { html } = files(plugin, fixture.hostile);
+            expect(html).not.toContain("<script");
+            expect(html).toContain("&lt;script&gt;");
+            expect(html).toContain("&quot;");
+        });
+        it("has no inline handlers or external urls", () => {
+            const { html, css, js } = files(plugin, fixture.valid);
+            expect(html + css + js).not.toMatch(/\son[a-z]+\s*=|https?:\/\/|javascript:/);
+        });
+        it("css uses only theme custom properties and no hard-coded colours", () => {
+            const { css } = files(plugin, fixture.valid);
+            expect(css).not.toMatch(HEX_COLOR);
+            expect(css).not.toMatch(FUNCTION_COLOR);
+            for (const theme of THEME_NAMES) {
+                const defined = themeVars(theme);
+                for (const name of referenced(css))
+                    expect(defined.has(name), `${theme} ${name}`).toBe(true);
+            }
+        });
+        it("text is >= 28px and uses one theme font family", () => {
+            const { css } = files(plugin, fixture.valid);
+            const sizes = [...css.matchAll(/(?<![-\w])font-size:\s*([^;]+);/g)].map((m) => m[1] ?? "");
+            expect(sizes.length).toBeGreaterThan(0);
+            for (const size of sizes) {
+                const step = /^var\(--mk-font-size-(\w+)\)$/.exec(size)?.[1] ?? "";
+                const px = emitContext().theme.fontSizes[step] ?? 0;
+                expect(px, size).toBeGreaterThanOrEqual(MIN_TEXT_PX);
+            }
+            const families = [...css.matchAll(/font-family:\s*([^;]+);/g)].map((m) => m[1]);
+            // Sans everywhere; code-like scenes may add the theme mono stack.
+            const allowed = new Set([
+                "var(--mk-font-sans)",
+                "var(--mk-font-mono)",
+                "var(--mk-font-display, var(--mk-font-sans))",
+            ]);
+            expect(families.every((family) => allowed.has(family ?? ""))).toBe(true);
+            expect(families).toContain("var(--mk-font-sans)");
+        });
+        it("keeps the safe margin from the context size", () => {
+            expect(files(plugin, fixture.valid).css).toContain("padding: 54px 96px;");
+        });
+        it("carries ease (default out), fps and duration on the root", () => {
+            const { html } = files(plugin, fixture.valid);
+            expect(html).toContain('data-ease="out"');
+            expect(html).toContain('data-fps="30"');
+            expect(html).toContain('data-duration="6"');
+            expect(files(plugin, fixture.valid, { ease: "in-out" }).html).toContain('data-ease="in-out"');
+        });
+        it("script is an ES module importing only emitted runtime files", () => {
+            const { js } = files(plugin, fixture.valid);
+            expect(js).toMatch(/export function createScene\(root, config, ctx\)/);
+            const runtime = runtimeFiles();
+            const imports = [...js.matchAll(/from "\.\.\/\.\.\/(runtime\/[\w-]+\.js)"/g)];
+            expect(imports.length).toBeGreaterThan(0);
+            for (const match of imports)
+                expect(runtime.has(match[1] ?? "")).toBe(true);
+        });
+        it("rejects invalid props on emit", () => {
+            expect(() => plugin.emit(entryOf(plugin.type, { bogus: 1 }), emitContext())).toThrow();
+        });
+    });
+};

package/dist/scene3d/post.d.ts

@@ -0,0 +1,12 @@
+export declare const POST_PRESETS: readonly ["clean", "bloom", "cinematic", "vintage"];
+export type PostPreset = (typeof POST_PRESETS)[number];
+export interface PostParams {
+    readonly bloom: number;
+    readonly grain: number;
+    readonly vignette: number;
+    readonly toneMapping: "none" | "agx";
+}
+export declare const isPostPreset: (value: unknown) => value is PostPreset;
+export declare const resolvePost: (preset: PostPreset) => PostParams;
+/** Seeded film-grain frame: pure function of t (30 fps lattice, spike receipt). */
+export declare const grainSeed: (t: number) => number;

package/dist/scene3d/post.js

@@ -0,0 +1,16 @@
+// Clean-room post chain for the scene3d base scene.
+// MIT attribution: three.js (MIT), postprocessing (MIT). Behaviour reimplemented
+// from projects/spike-scene3d/src/main.js (do not copy); diorama concept follows
+// MIT-licensed three.js examples (e.g. RoomEnvironment). No CDN, no copied code.
+// Curated post presets: small, spike-proven combos (bloom / AgX / vignette / grain).
+export const POST_PRESETS = ["clean", "bloom", "cinematic", "vintage"];
+const POST_TABLE = {
+    clean: { bloom: 0, grain: 0.01, vignette: 0, toneMapping: "none" },
+    bloom: { bloom: 1.1, grain: 0.02, vignette: 0.3, toneMapping: "none" },
+    cinematic: { bloom: 1.1, grain: 0.035, vignette: 0.55, toneMapping: "agx" },
+    vintage: { bloom: 0.6, grain: 0.06, vignette: 0.7, toneMapping: "agx" },
+};
+export const isPostPreset = (value) => typeof value === "string" && POST_PRESETS.includes(value);
+export const resolvePost = (preset) => POST_TABLE[preset];
+/** Seeded film-grain frame: pure function of t (30 fps lattice, spike receipt). */
+export const grainSeed = (t) => Math.floor(t * 30) % 1000;

package/dist/scene3d/reflector.d.ts

@@ -0,0 +1,9 @@
+export declare const REFLECTOR_PRESETS: readonly ["off", "gloss", "mirror"];
+export type ReflectorPreset = (typeof REFLECTOR_PRESETS)[number];
+export interface ReflectorParams {
+    readonly reflectivity: number;
+    readonly roughness: number;
+}
+export declare const resolveReflector: (preset: ReflectorPreset) => ReflectorParams;
+/** Fresnel-ish mix: 0 when off, otherwise reflectivity faded by surface roughness. */
+export declare const reflectorMix: (roughness: number, preset: ReflectorPreset) => number;

package/dist/scene3d/reflector.js

@@ -0,0 +1,17 @@
+// Clean-room planar reflector preset for scene3d (MIT: three.js).
+// Pure math; no DOM, no clock.
+export const REFLECTOR_PRESETS = ["off", "gloss", "mirror"];
+const TABLE = {
+    off: { reflectivity: 0, roughness: 1 },
+    gloss: { reflectivity: 0.4, roughness: 0.35 },
+    mirror: { reflectivity: 0.9, roughness: 0.05 },
+};
+export const resolveReflector = (preset) => TABLE[preset];
+/** Fresnel-ish mix: 0 when off, otherwise reflectivity faded by surface roughness. */
+export const reflectorMix = (roughness, preset) => {
+    const { reflectivity } = TABLE[preset];
+    if (reflectivity === 0)
+        return 0;
+    const clamped = Math.min(1, Math.max(0, roughness));
+    return Math.min(1, reflectivity * (1 - clamped));
+};

package/dist/scene3d/textures.d.ts

@@ -0,0 +1,9 @@
+export declare const HDRI_PRESETS: readonly ["neutral", "studio", "sunset", "night"];
+export type HdriPreset = (typeof HDRI_PRESETS)[number];
+export interface HdriParams {
+    readonly intensity: number;
+    readonly background: number;
+    readonly exposure: number;
+}
+export declare const resolveHdri: (preset: HdriPreset) => HdriParams;
+export declare const hdriEnv: (preset: HdriPreset) => HdriParams;

package/dist/scene3d/textures.js

@@ -0,0 +1,11 @@
+// Clean-room procedural environment for scene3d (MIT: three.js incl. RoomEnvironment).
+// No fetches, no HDRI downloads: curated studio gradients resolved offline.
+export const HDRI_PRESETS = ["neutral", "studio", "sunset", "night"];
+const TABLE = {
+    neutral: { intensity: 0.6, background: 0x0a0c12, exposure: 1.0 },
+    studio: { intensity: 1.2, background: 0x111318, exposure: 1.1 },
+    sunset: { intensity: 0.9, background: 0x1a1210, exposure: 1.0 },
+    night: { intensity: 0.4, background: 0x05070c, exposure: 0.9 },
+};
+export const resolveHdri = (preset) => TABLE[preset];
+export const hdriEnv = (preset) => TABLE[preset];

package/dist/scene3d/volumetric.d.ts

@@ -0,0 +1,9 @@
+export declare const VOLUMETRIC_PRESETS: readonly ["off", "soft", "dense"];
+export type VolumetricPreset = (typeof VOLUMETRIC_PRESETS)[number];
+export interface VolumetricParams {
+    readonly density: number;
+    readonly steps: number;
+}
+export declare const resolveVolumetric: (preset: VolumetricPreset) => VolumetricParams;
+/** Gentle breathing of the shaft: deterministic in t, zero when off. */
+export declare const volumetricIntensity: (t: number, preset: VolumetricPreset) => number;

package/dist/scene3d/volumetric.js

@@ -0,0 +1,16 @@
+// Clean-room volumetric preset for scene3d (MIT: three.js, postprocessing).
+// Pure function of t; no clock, no random.
+export const VOLUMETRIC_PRESETS = ["off", "soft", "dense"];
+const TABLE = {
+    off: { density: 0, steps: 0 },
+    soft: { density: 0.35, steps: 32 },
+    dense: { density: 0.7, steps: 64 },
+};
+export const resolveVolumetric = (preset) => TABLE[preset];
+/** Gentle breathing of the shaft: deterministic in t, zero when off. */
+export const volumetricIntensity = (t, preset) => {
+    const { density } = TABLE[preset];
+    if (density === 0)
+        return 0;
+    return density * (0.9 + 0.1 * Math.cos(t));
+};

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

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

package/dist/scenes/bug/index.js

@@ -0,0 +1,45 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { cornerSchema, positionClass, positionCss } from "../../position.js";
+import { readText } from "../../text-file.js";
+import { text } from "../../words.js";
+const configSchema = z
+    .strictObject({
+    text: text.max(32).optional(),
+    image: text.optional(),
+    position: cornerSchema.default("top-right"),
+    opacity: z.enum(["subtle", "medium", "full"]).default("medium"),
+})
+    .superRefine((props, ctx) => {
+    if ((props.text === undefined) === (props.image === undefined)) {
+        ctx.addIssue({
+            code: "custom",
+            message: "give exactly one of text or image",
+            params: { suggestion: "set text for a word mark, or image for a ledger asset" },
+        });
+    }
+});
+const mark = (props, resolve) => props.image === undefined
+    ? `<span class="mk-text">${esc(props.text ?? "")}</span>`
+    : `<img class="mk-image" src="${esc(resolve(props.image))}" alt="" />`;
+const render = (props, resolve) => [
+    `<div class="mk-op-${props.opacity} ${positionClass(props.position)}">`,
+    `<div class="mk-bug" ${animAttrs("fade", 0)}>${mark(props, resolve)}</div>`,
+    "</div>",
+].join("\n");
+export const bugScene = defineScene({
+    type: "bug",
+    layer: "overlay",
+    configSchema,
+    meta: {
+        purpose: "Corner word mark or ledger image; give exactly one of text or image.",
+        example: { text: "ACME" },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, ctx, root) => ({
+        body: render(props, ctx.assetResolver),
+        css: positionCss(root),
+    }),
+});

package/dist/scenes/bug/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/bug/scene.js

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

package/dist/scenes/bug/style.css

@@ -0,0 +1,30 @@
+#scene-root .mk-op-subtle {
+  opacity: var(--mk-opacity-subtle);
+}
+#scene-root .mk-op-medium {
+  opacity: var(--mk-opacity-medium);
+}
+#scene-root .mk-op-full {
+  opacity: var(--mk-opacity-full);
+}
+#scene-root .mk-bug {
+  display: flex;
+  align-items: center;
+  padding: var(--mk-space-sm) var(--mk-space-lg);
+  border-radius: var(--mk-radius-full);
+  border: var(--mk-stroke-card, 2px) solid var(--mk-color-divider);
+  background: var(--mk-color-card);
+}
+#scene-root .mk-text {
+  font-size: var(--mk-font-size-sm);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--mk-color-fg);
+}
+#scene-root .mk-image {
+  display: block;
+  height: var(--mk-space-xl);
+  max-width: 360px;
+  object-fit: contain;
+}

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

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