@anvpx/motion-scenes 0.0.0-stage → 0.1.0

package/dist/scenes/callout/index.js

@@ -0,0 +1,95 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { sceneIcon } from "../../shared/icon.js";
+import { accentSegments, stripAccent } from "../../shared/markup.js";
+import { readText } from "../../text-file.js";
+import { limitWords, present, text } from "../../words.js";
+const MAX_CHARS = 120;
+const ICON_SIZE = 48;
+const KINDS = ["formula", "statement", "definition", "warning", "tip"];
+const KIND_ICON = {
+    formula: "sigma",
+    statement: "quote",
+    definition: "book-open",
+    warning: "triangle-alert",
+    tip: "lightbulb",
+};
+/** Text of at most this many characters (accent brackets excluded) gets the next size up. */
+const SIZE_STEPS = {
+    formula: [16, 40],
+    statement: [28, 70],
+    definition: [28, 70],
+    warning: [28, 70],
+    tip: [28, 70],
+};
+const capped = (max) => text.max(max, `max ${max} characters`);
+const configSchema = limitWords(z.strictObject({
+    text: capped(MAX_CHARS),
+    kind: z.enum(KINDS).default("statement"),
+    label: capped(30).optional(),
+    note: capped(80).optional(),
+}), (props) => [...present(stripAccent(props.text), props.label, props.note)]);
+const OPERATOR = /^[+\-−–×÷*/=<>≈≠≤≥·^%→⇒±∑∏√]+$/;
+/** Words of accent markup as tokens: split at spaces, adjacent pieces (`[c]²`) stay together. */
+export const tokenize = (source) => {
+    const tokens = [];
+    let pieces = [];
+    const flush = () => {
+        if (pieces.length === 0)
+            return;
+        const plain = pieces.every((p) => !p.accent);
+        const joined = pieces.map((p) => p.text).join("");
+        tokens.push({ pieces, op: plain && OPERATOR.test(joined) });
+        pieces = [];
+    };
+    for (const segment of accentSegments(source)) {
+        segment.text.split(/(\s+)/).forEach((part, index) => {
+            if (index % 2 === 1)
+                flush();
+            else if (part !== "")
+                pieces.push({ text: part, accent: segment.accent });
+        });
+    }
+    flush();
+    return tokens;
+};
+const termHtml = (token, index) => {
+    const inner = token.pieces
+        .map((p) => (p.accent ? `<span class="accent">${esc(p.text)}</span>` : esc(p.text)))
+        .join("");
+    return `<span class="mk-term${token.op ? " mk-op" : ""}" data-term="${index}">${inner}</span>`;
+};
+/** Size class by visible length so the text fills the card without crowding it. */
+const sizeClass = (kind, visible) => {
+    const [big, mid] = SIZE_STEPS[kind];
+    if (visible <= big)
+        return "mk-size-1";
+    return visible <= mid ? "mk-size-2" : "mk-size-3";
+};
+const render = (props) => {
+    const plain = stripAccent(props.text);
+    const terms = tokenize(props.text).map(termHtml).join(" ");
+    const icon = sceneIcon(KIND_ICON[props.kind], { at: "props.kind", size: ICON_SIZE });
+    const label = props.label ? `<span class="mk-label">${esc(props.label)}</span>` : "";
+    const note = props.note
+        ? `<p class="mk-note" ${animAttrs("rise", 6, "note")}>${esc(props.note)}</p>`
+        : "";
+    return `<div class="mk-card mk-${props.kind} ${sizeClass(props.kind, plain.length)}">
+<div class="mk-kind" ${animAttrs("rise", 0, "label")}><span class="mk-icon">${icon}</span>${label}</div>
+<p class="mk-text" aria-label="${esc(plain)}">${terms}</p>
+<span class="mk-rule" data-rule></span>
+${note}
+</div>`;
+};
+export const calloutScene = defineScene({
+    type: "callout",
+    configSchema,
+    meta: {
+        purpose: "One formula, rule, definition, warning or tip made big; [x] marks accent terms, revealed term by term.",
+        example: { text: "[Profit] = [Revenue] − [Costs]", kind: "formula" },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props) => ({ body: render(props) }),
+});

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

@@ -0,0 +1,43 @@
+// @ts-check
+import { ease } from "../../runtime/easing.js";
+import { mountTimeline } from "../../runtime/mount.js";
+import { progress, revealProgress } from "../../shared/motion.js";
+const DEFAULT_DURATION = 6;
+const START = 0.25;
+const MAX_SPAN = 2.4;
+const SPAN_SHARE = 0.4;
+/** Opacity of a term before its reveal, so the frame is never blank. */
+const FLOOR = 0.12;
+const RISE_PX = 24;
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export function createScene(root, config, ctx) {
+    const inner = mountTimeline(root, config, ctx, { baseDelay: 0.1, staggerFrames: 5, rise: 28 });
+    const duration = ctx.duration || Number(root.dataset.duration) || DEFAULT_DURATION;
+    const span = Math.min(MAX_SPAN, duration * SPAN_SHARE);
+    const terms = /** @type {HTMLElement[]} */ (Array.from(root.querySelectorAll("[data-term]")));
+    const rule = /** @type {HTMLElement | null} */ (root.querySelector("[data-rule]"));
+    const dimmed = terms.map((el) => el.classList.contains("mk-op"));
+    /** @param {number} t */
+    const seek = (t) => {
+        inner.seek(t);
+        const shown = revealProgress(terms.length, Math.max(0, t - START), span);
+        terms.forEach((el, i) => {
+            const p = shown[i] ?? 0;
+            const target = dimmed[i] ? 0.45 : 1;
+            el.style.opacity = String(FLOOR + (target - FLOOR) * p);
+            el.style.transform = `translateY(${(1 - p) * RISE_PX}px)`;
+        });
+        if (rule)
+            rule.style.transform = `scaleX(${ease("out", progress(t, START, START + span))})`;
+    };
+    const dispose = () => {
+        inner.dispose();
+        for (const el of terms) {
+            el.style.removeProperty("opacity");
+            el.style.removeProperty("transform");
+        }
+        rule?.style.removeProperty("transform");
+    };
+    seek(0);
+    return { seek, dispose, ready: inner.ready };
+}

package/dist/scenes/callout/style.css

@@ -0,0 +1,97 @@
+#scene-root .mk-card {
+  --k: var(--mk-color-accent);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--mk-space-lg);
+  padding: var(--mk-space-xl) var(--mk-space-xxl);
+  background: var(--mk-color-card);
+  border: var(--mk-stroke-card, 2px) solid var(--mk-color-divider);
+  border-radius: var(--mk-radius-xl);
+  box-shadow:
+    inset 16px 0 0 var(--k),
+    0 24px 56px -28px color-mix(in srgb, var(--mk-color-fg) 40%, transparent);
+}
+#scene-root .mk-warning {
+  --k: var(--mk-chart-2);
+}
+#scene-root .mk-tip {
+  --k: var(--mk-color-accent2);
+}
+#scene-root .mk-formula {
+  align-items: center;
+  text-align: center;
+  box-shadow:
+    inset 0 16px 0 var(--k),
+    0 24px 56px -28px color-mix(in srgb, var(--mk-color-fg) 40%, transparent);
+  background: color-mix(in srgb, var(--mk-color-accentSoft) 45%, var(--mk-color-card));
+}
+#scene-root .mk-kind {
+  display: flex;
+  align-items: center;
+  gap: var(--mk-space-md);
+  color: var(--k);
+}
+#scene-root .mk-icon {
+  display: grid;
+  place-items: center;
+  width: 80px;
+  height: 80px;
+  border-radius: var(--mk-radius-full);
+  background: color-mix(in srgb, var(--k) 16%, var(--mk-color-card));
+}
+#scene-root .mk-label {
+  font-size: var(--mk-font-size-md);
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+#scene-root .mk-text {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  font-weight: 800;
+  line-height: 1.12;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+}
+#scene-root .mk-formula .mk-text {
+  font-weight: 700;
+}
+#scene-root .mk-definition .mk-text,
+#scene-root .mk-tip .mk-text {
+  font-weight: 600;
+}
+#scene-root .mk-size-1 .mk-text {
+  font-size: var(--mk-font-size-display);
+}
+#scene-root .mk-size-2 .mk-text {
+  font-size: var(--mk-font-size-title);
+}
+#scene-root .mk-size-3 .mk-text {
+  font-size: var(--mk-font-size-xl);
+}
+#scene-root .mk-term {
+  display: inline-block;
+}
+#scene-root .mk-op {
+  color: var(--mk-color-muted);
+  font-weight: 500;
+}
+#scene-root .accent {
+  color: var(--k);
+}
+#scene-root .mk-rule {
+  background: linear-gradient(90deg, var(--k), var(--mk-color-accent2));
+  transform: scaleX(0);
+}
+#scene-root .mk-formula .mk-rule {
+  transform-origin: center;
+}
+#scene-root .mk-note {
+  font-size: var(--mk-font-size-md);
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--mk-color-muted);
+  max-width: 90%;
+}

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

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

package/dist/scenes/caption/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, text } from "../../words.js";
+/**
+ * One caption word on the clip clock (seconds). Same shape as the canonical
+ * `WordTiming` (`packages/schema/src/audio.ts`): `kit.reveal(words, t)` and
+ * voice word timings plug in with zero scene changes.
+ */
+const captionWordSchema = z
+    .strictObject({
+    w: text.max(40),
+    start: z.number().min(0),
+    end: z.number().positive(),
+})
+    .refine((word) => word.end > word.start, "end must be after start");
+const captionWordsSchema = z
+    .array(captionWordSchema)
+    .min(1)
+    .max(40)
+    .superRefine((words, ctx) => {
+    words.forEach((word, index) => {
+        const prev = words[index - 1];
+        if (prev && word.start < prev.end) {
+            ctx.addIssue({
+                code: "custom",
+                path: [index, "start"],
+                message: `word "${word.w}" overlaps "${prev.w}"`,
+            });
+        }
+    });
+});
+const configSchema = limitWords(z
+    .strictObject({
+    text: text.max(140).optional(),
+    words: captionWordsSchema.optional(),
+})
+    .superRefine((props, ctx) => {
+    if (props.text === undefined && props.words === undefined) {
+        ctx.addIssue({ code: "custom", message: "give text, words, or both" });
+    }
+}), (props) => [...(props.text ? [props.text] : []), ...(props.words?.map((word) => word.w) ?? [])]);
+const render = (props) => {
+    const line = props.words
+        ? props.words
+            .map((word, index) => `<span class="mk-word" data-i="${index}" data-start="${word.start}" data-end="${word.end}">${esc(word.w)}</span>`)
+            .join(" ")
+        : `<span class="mk-full">${esc(props.text ?? "")}</span>`;
+    return [
+        `<div class="mk-caption" ${animAttrs("fade", 0)}>`,
+        `<p class="mk-line">${line}</p>`,
+        "</div>",
+    ].join("\n");
+};
+export const captionScene = defineScene({
+    type: "caption",
+    layer: "overlay",
+    configSchema,
+    meta: {
+        purpose: "Voice word timings as karaoke captions; falls back to a full-text card.",
+        example: {
+            words: [
+                { w: "Hello", start: 0, end: 0.4 },
+                { w: "world", start: 0.4, end: 0.9 },
+            ],
+        },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props) => ({ body: render(props) }),
+});

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

@@ -0,0 +1,11 @@
+/**
+ * Karaoke captions: each `.mk-word` carries its clip-clock window in
+ * `data-start`/`data-end` (kit.reveal-compatible `WordTiming` shape).
+ * `seek(t)` is a pure function of `t`: the live word gets `mk-now`,
+ * spoken words keep `mk-on`, everything else is dimmed by CSS.
+ * Without `words` the fragment holds a static `.mk-full` card and
+ * seek is a no-op envelope fade.
+ *
+ * @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/caption/scene.js

@@ -0,0 +1,33 @@
+// @ts-check
+import { mountOverlay } from "../../runtime/mount.js";
+/**
+ * Karaoke captions: each `.mk-word` carries its clip-clock window in
+ * `data-start`/`data-end` (kit.reveal-compatible `WordTiming` shape).
+ * `seek(t)` is a pure function of `t`: the live word gets `mk-now`,
+ * spoken words keep `mk-on`, everything else is dimmed by CSS.
+ * Without `words` the fragment holds a static `.mk-full` card and
+ * seek is a no-op envelope fade.
+ *
+ * @type {import("../../runtime/mount.js").CreateScene}
+ */
+export function createScene(root, config, ctx) {
+    const words = /** @type {HTMLElement[]} */ (Array.from(root.querySelectorAll(".mk-word")));
+    const times = words.map((el) => ({
+        el,
+        start: Number(el.dataset.start),
+        end: Number(el.dataset.end),
+    }));
+    return mountOverlay(root, config, ctx, { baseDelay: 0.1, staggerFrames: 4, rise: 0 }, {
+        /** @param {number} t */
+        update: (t) => {
+            for (const { el, start, end } of times) {
+                el.classList.toggle("mk-now", t >= start && t < end);
+                el.classList.toggle("mk-on", t >= end);
+            }
+        },
+        reset: () => {
+            for (const { el } of times)
+                el.classList.remove("mk-now", "mk-on");
+        },
+    });
+}

package/dist/scenes/caption/style.css

@@ -0,0 +1,33 @@
+#scene-root {
+  justify-content: flex-end;
+  align-items: center;
+  padding-bottom: calc(var(--mk-space-xxl) + var(--mk-space-lg));
+}
+#scene-root .mk-caption {
+  align-self: center;
+  max-width: min(88ch, 100%);
+  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);
+  text-align: center;
+}
+#scene-root .mk-line {
+  font-family: var(--mk-font-sans);
+  font-size: var(--mk-font-size-lg);
+  font-weight: 600;
+  line-height: 1.4;
+  text-wrap: balance;
+}
+#scene-root .mk-word {
+  color: var(--mk-color-muted);
+}
+#scene-root .mk-word.mk-on {
+  color: var(--mk-color-fg);
+}
+#scene-root .mk-word.mk-now {
+  color: var(--mk-color-accent);
+}
+#scene-root .mk-full {
+  color: var(--mk-color-fg);
+}

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

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

package/dist/scenes/chapter/index.js

@@ -0,0 +1,29 @@
+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 { limitWords, present, text } from "../../words.js";
+const configSchema = limitWords(z.strictObject({
+    number: z.number().int().min(0).max(99),
+    label: text,
+    position: cornerSchema.default("top-left"),
+}), (props) => present(props.number, props.label));
+const render = (props) => [
+    `<div class="mk-chip ${positionClass(props.position)}" ${animAttrs("fade", 0)}>`,
+    `<span class="mk-number">${props.number}</span>`,
+    `<span class="mk-label">${esc(props.label)}</span>`,
+    "</div>",
+].join("\n");
+export const chapterScene = defineScene({
+    type: "chapter",
+    layer: "overlay",
+    configSchema,
+    meta: {
+        purpose: "Numbered chapter chip in a corner.",
+        example: { number: 1, label: "Intro" },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, _ctx, root) => ({ body: render(props), css: positionCss(root) }),
+});

package/dist/scenes/chapter/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/chapter/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: 24 });
+}

package/dist/scenes/chapter/style.css

@@ -0,0 +1,25 @@
+#scene-root .mk-chip {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+  border-radius: var(--mk-radius-full);
+  border: var(--mk-stroke-card, 2px) solid var(--mk-color-divider);
+  background: var(--mk-color-card);
+  font-weight: 700;
+}
+#scene-root .mk-number {
+  display: grid;
+  place-items: center;
+  min-width: var(--mk-space-xxl);
+  padding: var(--mk-space-sm) var(--mk-space-md);
+  background: var(--mk-color-accent);
+  color: var(--mk-color-onAccent);
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+}
+#scene-root .mk-label {
+  display: grid;
+  align-items: center;
+  padding: var(--mk-space-sm) var(--mk-space-lg);
+  color: var(--mk-color-fg);
+}

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

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

package/dist/scenes/chart/index.js

@@ -0,0 +1,24 @@
+import { defineScene } from "../../define-scene.js";
+import { readText } from "../../text-file.js";
+import { render } from "./render.js";
+import { configSchema } from "./schema.js";
+export const chartScene = defineScene({
+    type: "chart",
+    configSchema,
+    meta: {
+        purpose: "Animated bar, line or donut chart for ranking, trend or share, with values shown and an optional highlight.",
+        example: {
+            kind: "bar",
+            title: "Signups by channel",
+            data: [
+                { label: "Search", value: 420 },
+                { label: "Referral", value: 310 },
+                { label: "Social", value: 190 },
+            ],
+            highlight: 0,
+        },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render,
+});

package/dist/scenes/chart/render.d.ts

@@ -0,0 +1,4 @@
+import type { EmitContext } from "@anvpx/motion-schema";
+import type { Rendered } from "../../define-scene.ts";
+import type { Props } from "./schema.ts";
+export declare const render: (props: Props, ctx: EmitContext, root: string) => Rendered;