@anvpx/motion-scenes 0.0.0-stage → 0.1.0

package/dist/scenes/lower-third/index.js

@@ -0,0 +1,33 @@
+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";
+const configSchema = limitWords(z.strictObject({
+    name: text,
+    title: text.optional(),
+    align: z.enum(["left", "right"]).default("left"),
+}), (props) => present(props.name, props.title));
+const render = (props) => {
+    const title = props.title
+        ? `\n<p class="mk-title" ${animAttrs("rise", 2)}>${esc(props.title)}</p>`
+        : "";
+    return [
+        `<div class="mk-panel mk-align-${props.align}" ${animAttrs("fade", 0)}>`,
+        `<h2 class="mk-name" ${animAttrs("rise", 1)}>${esc(props.name)}</h2>`,
+        `<span class="mk-rule" ${animAttrs("grow", 1)}></span>${title}`,
+        "</div>",
+    ].join("\n");
+};
+export const lowerThirdScene = defineScene({
+    type: "lower-third",
+    layer: "overlay",
+    configSchema,
+    meta: {
+        purpose: "Name plate with optional title at the lower edge.",
+        example: { name: "Ada Lovelace" },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props) => ({ body: render(props) }),
+});

package/dist/scenes/lower-third/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/lower-third/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: 5, rise: 40 });
+}

package/dist/scenes/lower-third/style.css

@@ -0,0 +1,45 @@
+#scene-root {
+  justify-content: flex-end;
+  padding-bottom: calc(var(--mk-space-xxl) + var(--mk-space-lg));
+}
+#scene-root .mk-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-sm);
+  max-width: 1100px;
+  padding: var(--mk-space-md) var(--mk-space-lg);
+  border-radius: var(--mk-radius-lg);
+  border: var(--mk-stroke-card, 2px) solid var(--mk-color-divider);
+  background: var(--mk-color-card);
+  color: var(--mk-color-fg);
+}
+#scene-root .mk-align-left {
+  align-self: flex-start;
+}
+#scene-root .mk-align-right {
+  align-self: flex-end;
+  text-align: right;
+}
+#scene-root .mk-name {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  font-size: var(--mk-font-size-lg);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+#scene-root .mk-rule {
+  display: block;
+  width: 96px;
+  height: 6px;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-accent);
+  transform-origin: left center;
+}
+#scene-root .mk-align-right .mk-rule {
+  align-self: flex-end;
+  transform-origin: right center;
+}
+#scene-root .mk-title {
+  font-size: var(--mk-font-size-md);
+  font-weight: 600;
+  color: var(--mk-color-muted);
+}

package/dist/scenes/media-frame/index.d.ts

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

package/dist/scenes/media-frame/index.js

@@ -0,0 +1,99 @@
+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";
+const MAX_CALLOUTS = 3;
+/** Past this share of the screen width a label opens toward the left. */
+const FLIP_AT = 55;
+const PHONE_FLIP_AT = 50;
+const calloutSchema = z.strictObject({
+    x: z.number().min(0).max(100),
+    y: z.number().min(0).max(100),
+    label: text.max(24),
+});
+const configSchema = limitWords(z
+    .strictObject({
+    image: text,
+    device: z.enum(["none", "browser", "phone", "laptop"]).default("browser"),
+    layout: z.enum(["full", "left", "right"]).default("full"),
+    title: text.max(60).optional(),
+    caption: text.max(140).optional(),
+    motion: z.enum(["none", "kenburns", "tilt"]).default("kenburns"),
+    callouts: z.array(calloutSchema).max(MAX_CALLOUTS).optional(),
+})
+    .superRefine((props, ctx) => {
+    if (props.layout !== "full" && props.title === undefined && props.caption === undefined) {
+        ctx.addIssue({
+            code: "custom",
+            path: ["layout"],
+            message: `layout "${props.layout}" puts text beside the image`,
+            params: { suggestion: "set title or caption, or use layout full" },
+        });
+    }
+}), (props) => [
+    ...present(props.title, props.caption),
+    ...(props.callouts ?? []).map((callout) => callout.label),
+]);
+const sideOf = (callout, phone) => {
+    if (phone)
+        return callout.x < PHONE_FLIP_AT ? "below-start" : "below-end";
+    return callout.x > FLIP_AT ? "toward-left" : "toward-right";
+};
+const markHtml = (callout, index, phone) => `<div class="mk-mark mk-${sideOf(callout, phone)}" style="left:${callout.x}%;top:${callout.y}%" data-i="${index}">
+<span class="mk-ring"></span><span class="mk-dot">${index + 1}</span><span class="mk-chip">${esc(callout.label)}</span>
+</div>`;
+const copyHtml = (props) => {
+    if (props.title === undefined && props.caption === undefined)
+        return "";
+    const parts = [];
+    if (props.title !== undefined) {
+        parts.push(`<h1 class="mk-title" ${animAttrs("rise", 0, "title")}>${esc(props.title)}</h1>`);
+        parts.push(`<span class="mk-rule" ${animAttrs("grow", 0, "title")}></span>`);
+    }
+    if (props.caption !== undefined) {
+        parts.push(`<p class="mk-caption" ${animAttrs("rise", 1, "caption")}>${esc(props.caption)}</p>`);
+    }
+    return `<div class="mk-copy">\n${parts.join("\n")}\n</div>\n`;
+};
+const chromeHtml = (device) => device === "browser"
+    ? `<div class="mk-chrome" aria-hidden="true"><span class="mk-dots"><i></i><i></i><i></i></span><span class="mk-url"></span></div>`
+    : "";
+const baseHtml = (device) => device === "laptop" ? '<div class="mk-base" aria-hidden="true"></div>' : "";
+const render = (props, resolve, portrait) => {
+    const src = esc(resolve(props.image));
+    const alt = esc(props.title ?? props.caption ?? "");
+    const phone = props.device === "phone";
+    const marks = (props.callouts ?? []).map((callout, index) => markHtml(callout, index, phone));
+    const step = props.title !== undefined || props.caption !== undefined ? 2 : 0;
+    const shape = `mk-layout-${props.layout}${portrait ? " mk-portrait" : ""}`;
+    return `<div class="mk-wrap ${shape}">
+${copyHtml(props)}<div class="mk-stage">
+<div class="mk-rig" ${animAttrs("rise", step, "media")}>
+<div class="mk-device mk-dev-${props.device}" data-motion="${props.motion}">
+${chromeHtml(props.device)}<div class="mk-screen">
+<div class="mk-media"><img class="mk-shot" src="${src}" alt="${alt}" /></div>
+<div class="mk-marks">
+${marks.join("\n")}
+</div>
+</div>
+${baseHtml(props.device)}</div>
+</div>
+</div>
+</div>`;
+};
+export const mediaFrameScene = defineScene({
+    type: "media-frame",
+    configSchema,
+    meta: {
+        purpose: "Screenshot or photo, bare or in a browser, phone or laptop frame, with optional title, caption and numbered callout dots.",
+        example: {
+            image: "screenshot.png",
+            device: "browser",
+            callouts: [{ x: 30, y: 40, label: "Start here" }],
+        },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, ctx) => ({ body: render(props, ctx.assetResolver, ctx.height > ctx.width) }),
+});

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

@@ -0,0 +1,85 @@
+// @ts-check
+import { clamp01, ease } from "../../runtime/easing.js";
+import { mountTimeline } from "../../runtime/mount.js";
+const MARK_START = 0.9;
+const MARK_GAP = 0.4;
+const MARK_POP = 0.4;
+const CHIP_DELAY = 0.12;
+const CHIP_FADE = 0.3;
+const CHIP_SLIDE_PX = 14;
+const PULSE_SECONDS = 1.6;
+const PULSE_GROW = 1.1;
+const PULSE_ALPHA = 0.5;
+const ZOOM_FROM = 1.02;
+const ZOOM_TO = 1.08;
+const PAN_PERCENT = 1.5;
+const TILT_Y = [-9, 3];
+const TILT_X = [4, 1];
+const PERSPECTIVE_PX = 2400;
+/**
+ * @param {number} t
+ * @param {number} from
+ * @param {number} span
+ */
+const within = (t, from, span) => clamp01(span > 0 ? (t - from) / span : t >= from ? 1 : 0);
+/**
+ * @param {number} a
+ * @param {number} b
+ * @param {number} p
+ */
+const mix = (a, b, p) => a + (b - a) * p;
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export function createScene(root, config, ctx) {
+    const inner = mountTimeline(root, config, ctx, { baseDelay: 0.2, staggerFrames: 5, rise: 32 });
+    const device = /** @type {HTMLElement} */ (root.querySelector(".mk-device"));
+    const shot = /** @type {HTMLElement} */ (root.querySelector(".mk-shot"));
+    const motion = device.dataset.motion;
+    const duration = ctx.duration ?? (Number(root.dataset.duration) || 6);
+    const marks = Array.from(root.querySelectorAll(".mk-mark"), (node) => ({
+        dot: /** @type {HTMLElement} */ (node.querySelector(".mk-dot")),
+        ring: /** @type {HTMLElement} */ (node.querySelector(".mk-ring")),
+        chip: /** @type {HTMLElement} */ (node.querySelector(".mk-chip")),
+        flip: node.classList.contains("mk-toward-left") || node.classList.contains("mk-below-end") ? -1 : 1,
+    }));
+    const first = Math.min(MARK_START, duration * 0.2);
+    /** @param {number} t */
+    const seek = (t) => {
+        inner.seek(t);
+        const p = duration > 0 ? clamp01(t / duration) : 1;
+        if (motion === "kenburns") {
+            const zoom = mix(ZOOM_FROM, ZOOM_TO, p);
+            shot.style.transform = `translate(${mix(-PAN_PERCENT, PAN_PERCENT, p)}%, ${mix(PAN_PERCENT / 2, -PAN_PERCENT / 2, p)}%) scale(${zoom})`;
+        }
+        if (motion === "tilt") {
+            const e = ease("in-out", p);
+            device.style.transform = `perspective(${PERSPECTIVE_PX}px) rotateY(${mix(TILT_Y[0] ?? 0, TILT_Y[1] ?? 0, e)}deg) rotateX(${mix(TILT_X[0] ?? 0, TILT_X[1] ?? 0, e)}deg)`;
+        }
+        marks.forEach((mark, i) => {
+            const start = first + i * MARK_GAP;
+            const pop = within(t, start, MARK_POP);
+            const scale = pop > 0 ? ease("spring-snappy", pop) : 0;
+            mark.dot.style.opacity = String(clamp01(pop * 4));
+            mark.dot.style.transform = `scale(${scale})`;
+            const chip = within(t, start + CHIP_DELAY, CHIP_FADE);
+            mark.chip.style.opacity = String(ease("out", chip));
+            mark.chip.style.transform = `translateX(${(1 - ease("out", chip)) * CHIP_SLIDE_PX * -mark.flip}px)`;
+            const since = t - start - MARK_POP;
+            const phase = since > 0 ? (since % PULSE_SECONDS) / PULSE_SECONDS : 0;
+            mark.ring.style.opacity = since > 0 ? String((1 - phase) * PULSE_ALPHA) : "0";
+            mark.ring.style.transform = `scale(${1 + PULSE_GROW * phase})`;
+        });
+    };
+    const dispose = () => {
+        inner.dispose();
+        shot.style.removeProperty("transform");
+        device.style.removeProperty("transform");
+        for (const mark of marks) {
+            for (const el of [mark.dot, mark.ring, mark.chip]) {
+                el.style.removeProperty("opacity");
+                el.style.removeProperty("transform");
+            }
+        }
+    };
+    seek(0);
+    return { seek, dispose, ready: inner.ready };
+}

package/dist/scenes/media-frame/style.css

@@ -0,0 +1,275 @@
+#scene-root {
+  align-items: stretch;
+}
+#scene-root .mk-wrap {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  gap: var(--mk-space-xl);
+  align-items: stretch;
+}
+#scene-root .mk-layout-full {
+  flex-direction: column;
+  gap: var(--mk-space-lg);
+}
+#scene-root .mk-layout-left {
+  flex-direction: row;
+}
+#scene-root .mk-layout-right {
+  flex-direction: row-reverse;
+}
+#scene-root .mk-wrap.mk-portrait {
+  flex-direction: column;
+  gap: var(--mk-space-lg);
+}
+#scene-root .mk-copy {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--mk-space-lg);
+}
+#scene-root .mk-layout-left .mk-copy,
+#scene-root .mk-layout-right .mk-copy {
+  flex: 0 0 32%;
+  align-items: flex-start;
+}
+#scene-root .mk-layout-full .mk-copy {
+  flex: none;
+  align-items: center;
+  text-align: center;
+  gap: var(--mk-space-sm);
+}
+#scene-root .mk-wrap.mk-portrait .mk-copy {
+  flex: none;
+}
+#scene-root .mk-layout-full .mk-rule {
+  display: none;
+}
+#scene-root .mk-title {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  font-size: var(--mk-font-size-xl);
+  font-weight: 800;
+  line-height: 1.04;
+  letter-spacing: -0.03em;
+  text-wrap: balance;
+}
+#scene-root .mk-layout-full .mk-title {
+  font-size: var(--mk-font-size-lg);
+}
+#scene-root .mk-caption {
+  font-size: var(--mk-font-size-md);
+  line-height: 1.3;
+  color: var(--mk-color-muted);
+  text-wrap: pretty;
+}
+#scene-root .mk-stage {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  container-type: size;
+  display: grid;
+  place-items: center;
+}
+#scene-root .mk-rig {
+  display: flex;
+  justify-content: center;
+}
+#scene-root .mk-device {
+  position: relative;
+  width: var(--dw);
+}
+#scene-root .mk-screen {
+  position: relative;
+  aspect-ratio: 16 / 10;
+}
+#scene-root .mk-media {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background: var(--mk-color-surface);
+}
+#scene-root .mk-shot {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+#scene-root .mk-dev-none {
+  --dw: min(100cqw, calc(100cqh * 1.6));
+}
+#scene-root .mk-dev-none .mk-screen {
+  border-radius: var(--mk-radius-xl);
+  box-shadow:
+    0 0 0 2px var(--mk-color-divider),
+    0 40px 80px -32px color-mix(in srgb, var(--mk-color-fg) 50%, transparent);
+}
+#scene-root .mk-dev-none .mk-media {
+  border-radius: var(--mk-radius-xl);
+}
+#scene-root .mk-dev-browser {
+  --dw: min(100cqw, calc((100cqh - 72px) * 1.6));
+  background: var(--mk-color-card);
+  border: var(--mk-stroke-card, 2px) solid var(--mk-color-divider);
+  border-radius: var(--mk-radius-xl);
+  box-shadow: var(
+    --mk-shadow-card,
+    0 40px 80px -32px color-mix(in srgb, var(--mk-color-fg) 50%, transparent)
+  );
+}
+#scene-root .mk-chrome {
+  display: flex;
+  align-items: center;
+  gap: var(--mk-space-lg);
+  height: 72px;
+  padding: 0 var(--mk-space-lg);
+  background: var(--mk-color-surface);
+  border-bottom: 2px solid var(--mk-color-divider);
+  border-radius: calc(var(--mk-radius-xl) - 2px) calc(var(--mk-radius-xl) - 2px) 0 0;
+}
+#scene-root .mk-dots {
+  display: flex;
+  gap: var(--mk-space-md);
+}
+#scene-root .mk-dots i {
+  display: block;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-divider);
+}
+#scene-root .mk-url {
+  flex: 1;
+  max-width: 56%;
+  height: 36px;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-card);
+  border: 2px solid var(--mk-color-divider);
+}
+#scene-root .mk-dev-browser .mk-media {
+  border-radius: 0 0 calc(var(--mk-radius-xl) - 2px) calc(var(--mk-radius-xl) - 2px);
+}
+#scene-root .mk-dev-laptop {
+  --dw: min(88cqw, calc((100cqh - 28px) * 1.6));
+}
+#scene-root .mk-dev-laptop .mk-screen {
+  border: 18px solid var(--mk-color-deepEnd);
+  border-radius: var(--mk-radius-xl) var(--mk-radius-xl) 0 0;
+  box-shadow: 0 0 0 2px var(--mk-color-divider);
+}
+#scene-root .mk-dev-laptop .mk-media {
+  border-radius: var(--mk-radius-md);
+}
+#scene-root .mk-base {
+  width: 112%;
+  height: 28px;
+  margin-left: -6%;
+  border-radius: 0 0 var(--mk-radius-xl) var(--mk-radius-xl);
+  background: linear-gradient(var(--mk-color-divider), var(--mk-color-surface));
+  border: var(--mk-stroke-card, 2px) solid var(--mk-color-divider);
+  box-shadow: var(
+    --mk-shadow-card,
+    0 40px 60px -28px color-mix(in srgb, var(--mk-color-fg) 55%, transparent)
+  );
+}
+#scene-root .mk-dev-phone {
+  --dw: min(100cqw, calc(100cqh * 9 / 19.5));
+}
+#scene-root .mk-dev-phone .mk-screen {
+  aspect-ratio: 9 / 19.5;
+  border: 16px solid var(--mk-color-deepEnd);
+  border-radius: 72px;
+  box-shadow:
+    0 0 0 2px var(--mk-color-divider),
+    0 40px 80px -32px color-mix(in srgb, var(--mk-color-fg) 50%, transparent);
+}
+#scene-root .mk-dev-phone .mk-media {
+  border-radius: 56px;
+}
+#scene-root .mk-dev-phone .mk-media::after {
+  content: "";
+  position: absolute;
+  top: 18px;
+  left: 50%;
+  width: 30%;
+  height: 30px;
+  margin-left: -15%;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-deepEnd);
+}
+#scene-root .mk-marks {
+  position: absolute;
+  inset: 0;
+}
+#scene-root .mk-mark {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+#scene-root .mk-dot,
+#scene-root .mk-ring {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 56px;
+  height: 56px;
+  margin: -28px 0 0 -28px;
+  border-radius: var(--mk-radius-full);
+}
+#scene-root .mk-dot {
+  display: grid;
+  place-items: center;
+  background: var(--mk-color-accent);
+  color: var(--mk-color-onAccent);
+  border: 4px solid var(--mk-color-card);
+  font-size: var(--mk-font-size-sm);
+  font-weight: 800;
+  line-height: 1;
+  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--mk-color-fg) 60%, transparent);
+  opacity: 0;
+}
+#scene-root .mk-ring {
+  border: 4px solid var(--mk-color-accent);
+  opacity: 0;
+}
+#scene-root .mk-chip {
+  position: absolute;
+  top: 0;
+  translate: 0 -50%;
+  width: max-content;
+  max-width: 440px;
+  padding: var(--mk-space-sm) var(--mk-space-lg);
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-card);
+  color: var(--mk-color-fg);
+  border: var(--mk-stroke-card, 2px) solid var(--mk-color-divider);
+  font-size: var(--mk-font-size-sm);
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+  box-shadow: var(
+    --mk-shadow-card,
+    0 12px 28px -12px color-mix(in srgb, var(--mk-color-fg) 55%, transparent)
+  );
+  opacity: 0;
+}
+#scene-root .mk-toward-right .mk-chip {
+  left: 44px;
+}
+#scene-root .mk-toward-left .mk-chip {
+  right: 44px;
+}
+#scene-root .mk-below-start .mk-chip,
+#scene-root .mk-below-end .mk-chip {
+  top: 44px;
+  translate: none;
+  max-width: 300px;
+  white-space: normal;
+  border-radius: var(--mk-radius-lg);
+  text-wrap: balance;
+}
+#scene-root .mk-below-start .mk-chip {
+  left: -28px;
+}
+#scene-root .mk-below-end .mk-chip {
+  right: -28px;
+}

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

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

package/dist/scenes/outro/index.js

@@ -0,0 +1,54 @@
+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, text } from "../../words.js";
+const configSchema = limitWords(z.strictObject({
+    title: text,
+    lines: z.array(text).max(3, "max 3 lines").optional(),
+    credits: z.array(text).max(4, "max 4 credits").optional(),
+}), (props) => [props.title, ...(props.lines ?? []), ...(props.credits ?? [])]);
+/** Tall frames: air around the block; portrait also gets a bigger title and lines so the card is not mostly empty. */
+const TALL_CSS = `#scene-root { padding-block: calc(var(--mk-space-xxl) * 2); }
+#scene-root .mk-main { gap: var(--mk-space-xl); }`;
+const PORTRAIT_CSS = `#scene-root .mk-heading { font-size: calc(var(--mk-font-size-title) * 1.3); }
+#scene-root .mk-line { font-size: var(--mk-font-size-xl); }
+#scene-root .mk-credit { font-size: var(--mk-font-size-md); }`;
+const ORBIT = '<div class="mk-orbit" aria-hidden="true"><i class="mk-orbit-1"></i><i class="mk-orbit-2"></i></div>';
+const mainBlock = (title, lines) => {
+    const rows = lines.map((line, index) => {
+        const attrs = animAttrs("rise", index + 1, `line-${index + 1}`);
+        return `<p class="mk-line" ${attrs}>${esc(line)}</p>`;
+    });
+    const heading = `<h1 class="mk-heading" ${animAttrs("rise", 0, "title")}>${esc(title)}</h1>`;
+    const rule = `<span class="mk-rule" ${animAttrs("grow", 0, "title")}></span>`;
+    return `<div class="mk-main">\n${[rule, heading, ...rows].join("\n")}\n</div>`;
+};
+const creditsBlock = (credits, firstStep) => {
+    if (credits.length === 0)
+        return "";
+    const rows = credits.map((credit, index) => {
+        const attrs = animAttrs("fade", firstStep + index, "credits");
+        return `<li class="mk-credit" ${attrs}>${esc(credit)}</li>`;
+    });
+    return `\n<ul class="mk-credits">\n${rows.join("\n")}\n</ul>`;
+};
+const render = (props) => {
+    const lines = props.lines ?? [];
+    return `${ORBIT}\n${mainBlock(props.title, lines)}${creditsBlock(props.credits ?? [], lines.length + 1)}`;
+};
+export const outroScene = defineScene({
+    type: "outro",
+    configSchema,
+    meta: {
+        purpose: "Closing card with title, up to 3 lines and up to 4 credits.",
+        example: { title: "Thanks" },
+    },
+    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, portrait: PORTRAIT_CSS }),
+    }),
+});

package/dist/scenes/outro/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/outro/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.3, staggerFrames: 6, rise: 32 });
+}