@anvpx/motion-scenes 0.0.0-stage → 0.1.0

package/dist/scenes/outro/style.css

@@ -0,0 +1,92 @@
+#scene-root {
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  background: linear-gradient(155deg, var(--mk-color-deep) 0%, var(--mk-color-deepEnd) 100%);
+  color: var(--mk-color-onDeep);
+}
+#scene-root::before {
+  background:
+    radial-gradient(
+      46% 56% at calc(50% + var(--drift, 0) * 3%) 0%,
+      color-mix(in srgb, var(--mk-color-accent) 35%, transparent) 0%,
+      transparent 100%
+    ),
+    radial-gradient(
+      40% 50% at 50% 115%,
+      color-mix(in srgb, var(--mk-color-accent2) 30%, transparent) 0%,
+      transparent 100%
+    );
+}
+#scene-root::after {
+  background-image: radial-gradient(
+    color-mix(in srgb, var(--mk-color-onDeep) 14%, transparent) 2px,
+    transparent 2.5px
+  );
+}
+#scene-root .mk-orbit {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  pointer-events: none;
+}
+#scene-root .mk-orbit i {
+  position: absolute;
+  border-radius: 50%;
+  border: 2px solid color-mix(in srgb, var(--mk-color-onDeep) 18%, transparent);
+}
+#scene-root .mk-orbit-1 {
+  left: -420px;
+  bottom: -760px;
+  width: 1300px;
+  height: 1300px;
+  transform: translateX(calc(var(--drift, 0) * 16px));
+}
+#scene-root .mk-orbit-2 {
+  right: -420px;
+  top: -560px;
+  width: 1100px;
+  height: 1100px;
+  transform: translateX(calc(var(--drift, 0) * -16px));
+}
+#scene-root .mk-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mk-space-lg);
+  max-width: 1400px;
+}
+#scene-root .mk-rule {
+  transform-origin: center;
+  background: linear-gradient(90deg, var(--mk-color-onDeepMuted), var(--mk-color-accent2));
+}
+#scene-root .mk-heading {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  font-size: var(--mk-font-size-title);
+  font-weight: 800;
+  line-height: 1.08;
+  letter-spacing: -0.03em;
+  text-wrap: balance;
+}
+#scene-root .mk-line {
+  font-size: var(--mk-font-size-lg);
+  line-height: 1.3;
+  color: var(--mk-color-onDeepMuted);
+}
+#scene-root .mk-credits {
+  list-style: none;
+  padding: var(--mk-space-lg) 0 0;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--mk-space-sm) var(--mk-space-xl);
+  border-top: 2px solid color-mix(in srgb, var(--mk-color-onDeep) 24%, transparent);
+}
+#scene-root .mk-credit {
+  font-size: var(--mk-font-size-sm);
+  letter-spacing: 0.02em;
+  color: var(--mk-color-onDeepMuted);
+}

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

@@ -0,0 +1,3 @@
+/** Type size by the longest line, so one word fills the frame and three still fit. */
+export declare const sizeOf: (lines: readonly string[]) => string;
+export declare const posterScene: import("@anvpx/motion-schema").ScenePlugin;

package/dist/scenes/poster/index.js

@@ -0,0 +1,62 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { frameCss } from "../../shared/frame.js";
+import { accentHtml, stripAccent } from "../../shared/markup.js";
+import { readText } from "../../text-file.js";
+import { limitWords, present, text } from "../../words.js";
+const ALIGN = ["left", "center"];
+const configSchema = limitWords(z.strictObject({
+    lines: z.array(text.max(38)).min(1).max(3),
+    kicker: text.max(28).optional(),
+    foot: text.max(60).optional(),
+    align: z.enum(ALIGN).default("left"),
+    /** Render the last line as outline type: the one-line trick that makes a poster look designed. */
+    outline: z.boolean().default(false),
+}), (props) => [...props.lines.map(stripAccent), ...present(props.kicker, props.foot)]);
+/** Type size by the longest line, so one word fills the frame and three still fit. */
+export const sizeOf = (lines) => {
+    const longest = Math.max(...lines.map((line) => stripAccent(line).length), 0);
+    if (longest <= 12)
+        return "mk-size-1";
+    return longest <= 22 ? "mk-size-2" : "mk-size-3";
+};
+const render = (props) => {
+    const parts = [];
+    let step = 0;
+    if (props.kicker) {
+        parts.push(`<p class="mk-kicker" ${animAttrs("rise", step, "kicker")}><i class="mk-kicker-dot"></i>${esc(props.kicker)}</p>`);
+        step += 1;
+    }
+    const last = props.lines.length - 1;
+    const lines = props.lines.map((line, index) => {
+        const outline = props.outline && index === last ? " mk-outline" : "";
+        return `<span class="mk-line${outline}" ${animAttrs("rise", step + index, `line-${index}`)}>${accentHtml(line)}</span>`;
+    });
+    parts.push(`<h1 class="mk-lines" aria-label="${esc(props.lines.map(stripAccent).join(" "))}">\n${lines.join("\n")}\n</h1>`);
+    step += props.lines.length;
+    if (props.foot) {
+        parts.push(`<p class="mk-foot" ${animAttrs("rise", step, "foot")}>${esc(props.foot)}</p>`);
+    }
+    return `<div class="mk-poster ${sizeOf(props.lines)}" data-align="${props.align}">
+<div class="mk-wash" aria-hidden="true"></div>
+${parts.join("\n")}
+</div>`;
+};
+/** Tall frames keep the type large but tighten the tracking and drop the wash. */
+const TALL_CSS = `#scene-root .mk-poster { gap: var(--mk-space-md); }
+#scene-root .mk-wash { inset: -10% -40%; }`;
+export const posterScene = defineScene({
+    type: "poster",
+    configSchema,
+    meta: {
+        purpose: "Type-led statement: 1-3 oversized lines with [x] accents, optional kicker and foot; outline draws the last line as outline type and accent words keep their gradient fill.",
+        example: { lines: ["Make it", "move"], outline: true },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, ctx, root) => ({
+        body: render(props),
+        css: frameCss(ctx, root, { tall: TALL_CSS }),
+    }),
+});

package/dist/scenes/poster/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/poster/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: 6, rise: 56 });
+}

package/dist/scenes/poster/style.css

@@ -0,0 +1,102 @@
+#scene-root .mk-poster {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--mk-space-lg);
+  width: 100%;
+}
+#scene-root .mk-poster[data-align="center"] {
+  align-items: center;
+  text-align: center;
+}
+#scene-root .mk-wash {
+  position: absolute;
+  inset: -16% -8%;
+  z-index: -1;
+  pointer-events: none;
+  filter: blur(40px);
+  opacity: 0.9;
+  transform: translate3d(calc(var(--drift, 0) * 9px), calc(var(--drift, 0) * -6px), 0);
+  background:
+    radial-gradient(
+      44% 50% at 10% 24%,
+      color-mix(in srgb, var(--mk-color-accent) 34%, transparent) 0%,
+      transparent 72%
+    ),
+    radial-gradient(
+      40% 44% at 92% 76%,
+      color-mix(in srgb, var(--mk-color-accent2) 28%, transparent) 0%,
+      transparent 74%
+    );
+}
+#scene-root .mk-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mk-space-sm);
+  align-self: flex-start;
+  color: var(--mk-color-muted);
+  font-size: var(--mk-font-size-sm);
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+#scene-root .mk-poster[data-align="center"] .mk-kicker {
+  align-self: center;
+}
+#scene-root .mk-kicker-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-accent);
+}
+#scene-root .mk-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  font-weight: 800;
+  line-height: 0.92;
+  letter-spacing: -0.045em;
+  color: var(--mk-color-fg);
+}
+#scene-root .mk-size-1 .mk-lines {
+  font-size: var(--mk-font-size-hero);
+}
+#scene-root .mk-size-2 .mk-lines {
+  font-size: var(--mk-font-size-heroMd);
+}
+#scene-root .mk-size-3 .mk-lines {
+  font-size: var(--mk-font-size-heroSm);
+}
+#scene-root .mk-line {
+  display: block;
+}
+#scene-root .mk-line .accent {
+  background: linear-gradient(94deg, var(--mk-color-accent), var(--mk-color-accent2));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+#scene-root .mk-line.mk-outline {
+  color: transparent;
+  -webkit-text-stroke: 3px var(--mk-color-accent);
+}
+/* An accent inside an outlined line keeps its gradient fill: stroking a clipped background paints
+   the glyph twice and leaves artifacts in the counters. */
+#scene-root .mk-line.mk-outline .accent {
+  -webkit-text-stroke: 0;
+  background: linear-gradient(94deg, var(--mk-color-accent), var(--mk-color-accent2));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+#scene-root .mk-foot {
+  max-width: 40ch;
+  color: var(--mk-color-muted);
+  font-size: var(--mk-font-size-md);
+  line-height: 1.35;
+}
+#scene-root .mk-poster[data-align="center"] .mk-foot {
+  max-width: 52ch;
+}

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

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

package/dist/scenes/progress/index.js

@@ -0,0 +1,40 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { esc } from "../../html.js";
+import { readText } from "../../text-file.js";
+import { text } from "../../words.js";
+const configSchema = z.strictObject({
+    scope: z.enum(["scene", "timeline"]).default("scene"),
+    color: z.enum(["accent", "accent2"]).default("accent"),
+    label: text.optional(),
+});
+const ROUND = 10_000;
+const round = (value) => Math.round(value * ROUND) / ROUND;
+/** Fill range over the overlay window: its own span, or its share of the whole video. */
+const range = (props, start, duration, total) => props.scope === "timeline" && total > 0
+    ? [round(start / total), round((start + duration) / total)]
+    : [0, 1];
+export const progressScene = defineScene({
+    type: "progress",
+    layer: "overlay",
+    configSchema,
+    meta: {
+        purpose: "Thin progress bar over the scene or the whole timeline.",
+        example: {},
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, ctx) => {
+        const { start = 0, total = 0 } = ctx.timeline ?? {};
+        const [from, to] = range(props, start, ctx.duration, total);
+        const label = props.label ? `<p class="mk-label">${esc(props.label)}</p>` : "";
+        return {
+            body: [
+                label,
+                `<div class="mk-track" data-from="${from}" data-to="${to}" aria-hidden="true">`,
+                `<span class="mk-fill mk-fill-${props.color}"></span>`,
+                "</div>",
+            ].join("\n"),
+        };
+    },
+});

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

@@ -0,0 +1,17 @@
+// @ts-check
+import { mountOverlay } from "../../runtime/mount.js";
+import { spanProgress } from "../../runtime/timeline.js";
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export function createScene(root, config, ctx) {
+    const track = /** @type {HTMLElement} */ (root.querySelector("[data-from]"));
+    const fill = /** @type {HTMLElement} */ (root.querySelector(".mk-fill"));
+    const from = Number(track.dataset.from);
+    const to = Number(track.dataset.to);
+    const duration = ctx.duration ?? Number(root.dataset.duration);
+    return mountOverlay(root, config, ctx, { baseDelay: 0, staggerFrames: 3, rise: 0 }, {
+        update: (t) => {
+            fill.style.transform = `scaleX(${spanProgress(t, duration, from, to)})`;
+        },
+        reset: () => fill.style.removeProperty("transform"),
+    });
+}

package/dist/scenes/progress/style.css

@@ -0,0 +1,31 @@
+#scene-root {
+  justify-content: flex-end;
+  gap: var(--mk-space-sm);
+}
+#scene-root .mk-label {
+  align-self: flex-start;
+  font-size: var(--mk-font-size-sm);
+  font-weight: 700;
+  color: var(--mk-color-fg);
+}
+#scene-root .mk-track {
+  flex: none;
+  height: var(--mk-space-md);
+  overflow: hidden;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-divider);
+}
+#scene-root .mk-fill {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--mk-radius-full);
+  transform-origin: left center;
+  transform: scaleX(0);
+}
+#scene-root .mk-fill-accent {
+  background: var(--mk-color-accent);
+}
+#scene-root .mk-fill-accent2 {
+  background: var(--mk-color-accent2);
+}

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

@@ -0,0 +1,3 @@
+/** First letters of the first two words, upper-cased; shown when there is no image. */
+export declare const initials: (name: string) => string;
+export declare const quoteScene: import("@anvpx/motion-schema").ScenePlugin;

package/dist/scenes/quote/index.js

@@ -0,0 +1,69 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { sceneIcon } from "../../shared/icon.js";
+import { readText } from "../../text-file.js";
+import { limitWords, present, text } from "../../words.js";
+const MAX_STARS = 5;
+const STAR_SIZE = 56;
+const MARK_SIZE = 120;
+/** Quotes up to these lengths get the larger type steps. */
+const BIG_QUOTE = 50;
+const MID_QUOTE = 110;
+const capped = (max) => text.max(max, `max ${max} characters`);
+const configSchema = limitWords(z.strictObject({
+    quote: capped(200),
+    name: capped(40),
+    role: capped(40).optional(),
+    org: capped(40).optional(),
+    rating: z.number().int().min(1).max(MAX_STARS).optional(),
+    image: text.optional(),
+}), (props) => present(props.quote, props.name, props.role, props.org));
+/** First letters of the first two words, upper-cased; shown when there is no image. */
+export const initials = (name) => name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => (Array.from(word)[0] ?? "").toUpperCase())
+    .join("");
+const sizeClass = (quote) => {
+    const length = Array.from(quote).length;
+    if (length <= BIG_QUOTE)
+        return "mk-size-1";
+    return length <= MID_QUOTE ? "mk-size-2" : "mk-size-3";
+};
+const stars = (rating) => {
+    const items = Array.from({ length: MAX_STARS }, (_, i) => {
+        const on = i < rating;
+        const icon = sceneIcon("star", { at: "props.rating", size: STAR_SIZE });
+        return `<span class="mk-star${on ? " mk-on" : ""}">${icon}</span>`;
+    });
+    return `<span class="mk-stars" role="img" aria-label="${rating} of ${MAX_STARS}">${items.join("")}</span>`;
+};
+const avatar = (props, resolve) => props.image === undefined
+    ? `<span class="mk-avatar">${esc(initials(props.name))}</span>`
+    : `<span class="mk-avatar"><img class="mk-photo" src="${esc(resolve(props.image))}" alt="" /></span>`;
+const render = (props, resolve) => {
+    const meta = [props.role, props.org].filter((part) => part !== undefined);
+    const sub = meta.length > 0 ? `<p class="mk-meta">${meta.map(esc).join(" · ")}</p>` : "";
+    const rating = props.rating === undefined ? "" : stars(props.rating);
+    const mark = sceneIcon("quote", { at: "props.quote", size: MARK_SIZE });
+    return `<div class="mk-mark" ${animAttrs("rise", 0, "mark")} aria-hidden="true">${mark}</div>
+<blockquote class="mk-quote ${sizeClass(props.quote)}" ${animAttrs("rise", 1, "quote")}>${esc(props.quote)}</blockquote>
+<footer class="mk-by" ${animAttrs("rise", 5, "name")}>
+${avatar(props, resolve)}
+<div class="mk-who"><p class="mk-name">${esc(props.name)}</p>${sub}</div>
+${rating}
+</footer>`;
+};
+export const quoteScene = defineScene({
+    type: "quote",
+    configSchema,
+    meta: {
+        purpose: "Testimonial or quotation with attribution, optional 1-5 star rating and avatar.",
+        example: { quote: "Simple and fast.", name: "Alex Kim", rating: 5 },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, ctx) => ({ body: render(props, ctx.assetResolver) }),
+});

package/dist/scenes/quote/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/quote/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: 6, rise: 36 });
+}

package/dist/scenes/quote/style.css

@@ -0,0 +1,86 @@
+#scene-root {
+  justify-content: center;
+  gap: var(--mk-space-lg);
+  padding-left: calc(96px + var(--mk-space-xl));
+  padding-right: calc(96px + var(--mk-space-xl));
+}
+#scene-root .mk-mark {
+  color: var(--mk-color-accent);
+  line-height: 0;
+}
+#scene-root .mk-quote {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  font-weight: 700;
+  line-height: 1.14;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+#scene-root .mk-size-1 {
+  font-size: var(--mk-font-size-display);
+}
+#scene-root .mk-size-2 {
+  font-size: var(--mk-font-size-title);
+}
+#scene-root .mk-size-3 {
+  font-size: var(--mk-font-size-xl);
+}
+#scene-root .mk-by {
+  display: flex;
+  align-items: center;
+  gap: var(--mk-space-lg);
+  margin-top: var(--mk-space-md);
+  padding-top: var(--mk-space-lg);
+  border-top: 2px solid var(--mk-color-divider);
+}
+#scene-root .mk-avatar {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 128px;
+  height: 128px;
+  overflow: hidden;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-accent);
+  color: var(--mk-color-onAccent);
+  font-size: var(--mk-font-size-lg);
+  font-weight: 800;
+}
+#scene-root .mk-photo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+#scene-root .mk-who {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-xs);
+  min-width: 0;
+}
+#scene-root .mk-name {
+  font-size: var(--mk-font-size-lg);
+  font-weight: 800;
+  line-height: 1.1;
+}
+#scene-root .mk-meta {
+  font-size: var(--mk-font-size-md);
+  font-weight: 500;
+  color: var(--mk-color-muted);
+}
+#scene-root .mk-stars {
+  display: flex;
+  gap: var(--mk-space-xs);
+  margin-left: auto;
+}
+#scene-root .mk-star {
+  display: grid;
+  color: color-mix(in srgb, var(--mk-color-muted) 50%, transparent);
+}
+#scene-root .mk-star svg {
+  fill: none;
+}
+#scene-root .mk-star.mk-on {
+  color: var(--mk-color-accent);
+}
+#scene-root .mk-star.mk-on svg {
+  fill: currentColor;
+}

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

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

package/dist/scenes/scene3d/index.js

@@ -0,0 +1,58 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { frameCss } from "../../shared/frame.js";
+import { readText } from "../../text-file.js";
+import { limitWords, present, text } from "../../words.js";
+const POST = ["clean", "bloom", "cinematic", "vintage"];
+const LIGHT = ["studio", "sunset", "night", "soft"];
+// NOTE: material/volumetric/reflector presets apply to the three.js WebGL path
+// only. This 2D canvas fallback ignores `material` (kept in schema for
+// forward-compat); `post`/`light`/`hdri` drive the fallback rendering.
+const MATERIAL = ["clay", "gloss", "metal", "emissive"];
+const HDRI = ["neutral", "studio", "sunset", "night"];
+const configSchema = limitWords(z.strictObject({
+    title: text.max(60).optional(),
+    caption: text.max(140).optional(),
+    model: text.optional(),
+    post: z.enum(POST).default("cinematic"),
+    light: z.enum(LIGHT).default("studio"),
+    material: z.enum(MATERIAL).default("clay"),
+    hdri: z.enum(HDRI).default("neutral"),
+}), (props) => present(props.title, props.caption));
+const copy = (props) => {
+    const parts = [];
+    if (props.title !== undefined) {
+        parts.push(`<h1 class="mk-title" ${animAttrs("rise", 0, "title")}>${esc(props.title)}</h1>`);
+    }
+    if (props.caption !== undefined) {
+        parts.push(`<p class="mk-caption" ${animAttrs("rise", 1, "caption")}>${esc(props.caption)}</p>`);
+    }
+    return parts.length > 0 ? `<div class="mk-copy">\n${parts.join("\n")}\n</div>` : "";
+};
+const render = (props) => {
+    const data = [
+        `data-post="${esc(props.post)}"`,
+        `data-light="${esc(props.light)}"`,
+        `data-material="${esc(props.material)}"`,
+        `data-hdri="${esc(props.hdri)}"`,
+    ].join(" ");
+    return `<div class="mk-scene3d" data-no-timeline ${data}>
+${copy(props)}<div class="mk-stage"><canvas class="mk-gl" width="1920" height="1080" aria-label="3D diorama"></canvas></div>
+</div>`;
+};
+export const scene3dScene = defineScene({
+    type: "scene3d",
+    configSchema,
+    meta: {
+        purpose: "WebGL diorama (vendored three.js): post, light, material, environment presets; flat 2D canvas fallback without WebGL. 3D output is machine+GPU stable, not portable.",
+        example: { title: "Orbit" },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    vendor: ["three", "postprocessing"],
+    render: (props, ctx, root) => ({
+        body: render(props),
+        css: frameCss(ctx, root, {}),
+    }),
+});

package/dist/scenes/scene3d/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;