videowright 0.1.0

package/skill/assets/styles/editorial-mono/sample/stat.ts

@@ -0,0 +1,128 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "editorial-mono-sample-stat",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Stat cards in Editorial Mono. A large serif number counts up, then a red underline draws beneath it.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        align-items: center;
+        padding: 0 var(--safe-x);
+        gap: 80px;
+        box-sizing: border-box;
+        overflow: hidden;
+      ">
+        <div>
+          <div data-ref="label" style="
+            font-family: var(--font-mono);
+            font-size: 14px;
+            letter-spacing: 0.16em;
+            text-transform: uppercase;
+            color: var(--color-muted);
+            margin-bottom: 48px;
+            opacity: 0;
+          ">Finding / 03</div>
+
+          <div style="position: relative; display: inline-block;">
+            <div data-ref="number" style="
+              font-family: var(--font-display);
+              font-size: 320px;
+              line-height: 0.9;
+            "><span data-ref="digits">0</span><span style="color: var(--color-accent);">%</span></div>
+
+            <div data-ref="underline" style="
+              position: absolute;
+              left: 0;
+              bottom: -16px;
+              height: 6px;
+              width: 0;
+              background: var(--color-accent);
+            "></div>
+          </div>
+        </div>
+
+        <div data-ref="description" style="opacity: 0;">
+          <div style="
+            font-family: var(--font-body);
+            font-size: 40px;
+            line-height: 1.3;
+            font-weight: 400;
+            max-width: 640px;
+          ">of agent failures occur <em style="font-family: var(--font-display); font-style: italic;">after</em> the fourth tool call.</div>
+
+          <div style="
+            font-family: var(--font-mono);
+            font-size: 14px;
+            letter-spacing: 0.16em;
+            text-transform: uppercase;
+            color: var(--color-muted);
+            margin-top: 32px;
+          ">Source / Internal Logs, Q1 2026</div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const label = host?.querySelector('[data-ref="label"]') as HTMLElement;
+		const digits = host?.querySelector('[data-ref="digits"]') as HTMLElement;
+		const description = host?.querySelector('[data-ref="description"]') as HTMLElement;
+		const underline = host?.querySelector('[data-ref="underline"]') as HTMLElement;
+
+		const ease = "cubic-bezier(0.16, 1, 0.3, 1)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		label.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 480 });
+
+		// Count up from 0 to 84 over --duration-slow (900ms) using stepped holds.
+		// This is the documented exception to "avoid hold-driven mutation loops":
+		// counter/ticker animations are discrete text changes that cannot use WAAPI,
+		// so a ctx.hold loop with DOM text updates is the correct pattern here.
+		// See architecture.md §4.6 and authoring_segment.md render-safety checklist.
+		const target = 84;
+		const steps = 30;
+		const stepDuration = 900 / steps;
+		await ctx.hold(200);
+		for (let i = 1; i <= steps; i++) {
+			const progress = i / steps;
+			// easeOutQuart curve for the count-up
+			const eased = 1 - (1 - progress) ** 4;
+			digits.textContent = String(Math.round(eased * target));
+			await ctx.hold(stepDuration);
+		}
+		digits.textContent = String(target);
+
+		description.animate(
+			[
+				{ opacity: 0, transform: "translateY(20px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 480 },
+		);
+
+		underline.animate([{ width: "0%" }, { width: "80%" }], {
+			duration: 900,
+			delay: 200,
+			fill: "forwards",
+			easing: ease,
+		});
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/editorial-mono/sample/title.ts

@@ -0,0 +1,97 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "editorial-mono-sample-title",
+	advances: [2.0, 5.0],
+	voiceover:
+		"The Editorial Mono title card. Cream paper, serif display, a red period that lands at the end.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        font-family: var(--font-body);
+        overflow: hidden;
+      ">
+        <div style="
+          position: absolute;
+          left: var(--safe-x);
+          top: var(--safe-y);
+          right: var(--safe-x);
+          height: 1px;
+          background: var(--color-border);
+        "></div>
+
+        <div style="position: absolute; left: var(--safe-x); top: 240px;">
+          <div data-ref="label" style="
+            font-family: var(--font-mono);
+            font-size: 14px;
+            letter-spacing: 0.16em;
+            text-transform: uppercase;
+            color: var(--color-muted);
+            margin-bottom: 48px;
+            opacity: 0;
+          ">Vol. 01 / 2026</div>
+
+          <div data-ref="headline" style="
+            font-family: var(--font-display);
+            font-size: 200px;
+            line-height: 0.98;
+            letter-spacing: -0.01em;
+            opacity: 0;
+          ">Sample<span style="color: var(--color-accent); font-style: italic;">.</span></div>
+
+          <div data-ref="subtitle" style="
+            font-family: var(--font-display);
+            font-style: italic;
+            font-size: 40px;
+            margin-top: 56px;
+            opacity: 0;
+          ">A demonstration of the editorial register.</div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const label = host?.querySelector('[data-ref="label"]') as HTMLElement;
+		const headline = host?.querySelector('[data-ref="headline"]') as HTMLElement;
+		const subtitle = host?.querySelector('[data-ref="subtitle"]') as HTMLElement;
+
+		const ease = "cubic-bezier(0.16, 1, 0.3, 1)";
+
+		label.animate([{ opacity: 0 }, { opacity: 1 }], {
+			duration: 480,
+			fill: "forwards",
+			easing: ease,
+		});
+
+		headline.animate(
+			[
+				{ opacity: 0, transform: "translateY(16px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ duration: 480, delay: 480, fill: "forwards", easing: ease },
+		);
+
+		subtitle.animate(
+			[
+				{ opacity: 0, transform: "translateY(16px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ duration: 480, delay: 560, fill: "forwards", easing: ease },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/editorial-mono/sample/ui-showcase.ts

@@ -0,0 +1,159 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "editorial-mono-sample-ui-showcase",
+	advances: [2.5, 5.0],
+	voiceover:
+		"UI showcases in Editorial Mono. A product mock framed in hairline rules with red callout arrows.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        overflow: hidden;
+      ">
+        <div data-ref="label" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 110px;
+          font-family: var(--font-mono);
+          font-size: 14px;
+          letter-spacing: 0.16em;
+          text-transform: uppercase;
+          color: var(--color-muted);
+          opacity: 0;
+        ">Plate II / The Console</div>
+
+        <div data-ref="mock" style="
+          position: absolute;
+          left: 360px;
+          top: 200px;
+          width: 1200px;
+          height: 680px;
+          background: var(--color-surface);
+          border: var(--rule-weight) solid var(--color-fg);
+          opacity: 0;
+        ">
+          <div style="
+            height: 48px;
+            border-bottom: var(--rule-weight) solid var(--color-fg);
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            gap: 10px;
+          ">
+            <span style="width: 10px; height: 10px; border-radius: 5px; border: 1px solid var(--color-fg);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; border: 1px solid var(--color-fg);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; border: 1px solid var(--color-fg);"></span>
+            <span style="font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); margin-left: 16px;">SESSION 41ac</span>
+          </div>
+          <div style="padding: 32px; display: grid; grid-template-columns: 240px 1fr; gap: 32px; height: calc(100% - 48px); box-sizing: border-box;">
+            <div style="border-right: var(--rule-weight) solid var(--color-border); padding-right: 24px; display: flex; flex-direction: column; gap: 14px;">
+              <div style="font-family: var(--font-body); font-size: 18px; color: var(--color-muted);">Run</div>
+              <div style="font-family: var(--font-body); font-size: 18px; color: var(--color-muted);">Memory</div>
+              <div style="font-family: var(--font-body); font-size: 18px; color: var(--color-fg); font-weight: 500;">Plan</div>
+              <div style="font-family: var(--font-body); font-size: 18px; color: var(--color-muted);">Tools</div>
+              <div style="font-family: var(--font-body); font-size: 18px; color: var(--color-muted);">Trace</div>
+            </div>
+            <div style="display: flex; flex-direction: column; gap: 18px;">
+              <div style="font-family: var(--font-display); font-size: 36px;">Plan / v3</div>
+              <div style="display: flex; gap: 16px; align-items: baseline;">
+                <span style="font-family: var(--font-mono); font-size: 13px; color: var(--color-muted); min-width: 32px;">01</span>
+                <span style="font-family: var(--font-body); font-size: 20px;">Read the eval spec</span>
+              </div>
+              <div style="display: flex; gap: 16px; align-items: baseline;">
+                <span style="font-family: var(--font-mono); font-size: 13px; color: var(--color-muted); min-width: 32px;">02</span>
+                <span style="font-family: var(--font-body); font-size: 20px;">Generate candidate prompts</span>
+              </div>
+              <div style="display: flex; gap: 16px; align-items: baseline;">
+                <span style="font-family: var(--font-mono); font-size: 13px; color: var(--color-muted); min-width: 32px;">03</span>
+                <span style="font-family: var(--font-body); font-size: 20px;">Score against the rubric</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div data-ref="callout-a" style="
+          position: absolute;
+          left: 80px;
+          top: 360px;
+          width: 280px;
+          opacity: 0;
+        ">
+          <div style="font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent);">A / Sidebar</div>
+          <div style="font-family: var(--font-body); font-size: 20px; margin-top: 8px; line-height: 1.35;">Five views of the same run.</div>
+          <div data-ref="arrow-a" style="height: 1px; width: 0; background: var(--color-accent); margin-top: 14px;"></div>
+        </div>
+
+        <div data-ref="callout-b" style="
+          position: absolute;
+          right: var(--safe-x);
+          top: 540px;
+          width: 260px;
+          text-align: right;
+          opacity: 0;
+        ">
+          <div style="font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent);">B / Plan</div>
+          <div style="font-family: var(--font-body); font-size: 20px; margin-top: 8px; line-height: 1.35;">Versioned, diff-able, replayable.</div>
+          <div data-ref="arrow-b" style="height: 1px; width: 0; background: var(--color-accent); margin-top: 14px; margin-left: auto;"></div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const label = host?.querySelector('[data-ref="label"]') as HTMLElement;
+		const mock = host?.querySelector('[data-ref="mock"]') as HTMLElement;
+		const calloutA = host?.querySelector('[data-ref="callout-a"]') as HTMLElement;
+		const calloutB = host?.querySelector('[data-ref="callout-b"]') as HTMLElement;
+		const arrowA = host?.querySelector('[data-ref="arrow-a"]') as HTMLElement;
+		const arrowB = host?.querySelector('[data-ref="arrow-b"]') as HTMLElement;
+
+		const ease = "cubic-bezier(0.16, 1, 0.3, 1)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		label.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 480 });
+
+		mock.animate(
+			[
+				{ opacity: 0, transform: "translateY(16px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 480, delay: 200 },
+		);
+
+		calloutA.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 480,
+			delay: 1000,
+		});
+		arrowA.animate([{ width: "0px" }, { width: "200px" }], {
+			...opts,
+			duration: 480,
+			delay: 1000,
+		});
+
+		calloutB.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 480,
+			delay: 1400,
+		});
+		arrowB.animate([{ width: "0px" }, { width: "200px" }], {
+			...opts,
+			duration: 480,
+			delay: 1400,
+		});
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/editorial-mono/tokens.css

@@ -0,0 +1,44 @@
+/* Editorial Mono — design tokens
+ * Black ink on cream paper. One red accent. Long-form editorial feel.
+ */
+
+:root {
+	/* Core palette */
+	--color-bg: #f2efe8; /* warm cream paper */
+	--color-fg: #14110e; /* near-black ink */
+	--color-accent: #c8392c; /* editorial red */
+
+	/* Extended palette */
+	--color-muted: #7b756b; /* warm gray for secondary type */
+	--color-border: #d9d3c7; /* hairline rule, very subtle */
+	--color-surface: #ebe7dd; /* slightly darker paper for cards */
+
+	/* Typography */
+	--font-display: "Instrument Serif", "Times New Roman", serif;
+	--font-body: "Geist", "Helvetica Neue", system-ui, sans-serif;
+	--font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+	/* Spacing (px on 1920×1080 canvas) */
+	--space-sm: 16px;
+	--space-md: 32px;
+	--space-lg: 64px;
+	--space-xl: 128px;
+
+	/* Motion */
+	--duration-fast: 220ms;
+	--duration-normal: 480ms;
+	--duration-slow: 900ms;
+
+	/* Template-specific extensions */
+	--radius-sm: 2px; /* almost no rounding — print sensibility */
+	--radius-md: 4px;
+	--stagger: 80ms; /* base stagger increment */
+	--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* easeOutQuart */
+	--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
+	--rule-weight: 1px; /* hairline rule */
+	--scene-hold: 4s; /* default per-scene duration */
+
+	/* Safe area for 1920×1080 */
+	--safe-x: 128px;
+	--safe-y: 96px;
+}

package/skill/assets/styles/iso-diagram/STYLE.md

@@ -0,0 +1,109 @@
+---
+title: Iso Diagram
+slug: iso-diagram
+picker_description: 'Pencil-and-paper explainer aesthetic. Hand-drawn lines, pastel fills, isometric drawings.'
+font_sources:
+  - https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;700&display=swap
+  - https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap
+  - https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap
+mood: [explanatory, warm, thoughtful, hand-built, approachable]
+good_for:
+  - Concept explainers and educational content
+  - Onboarding videos
+  - Technical ideas that benefit from a picture
+  - Products with abstract value props that need to be visualized
+bad_for:
+  - Hard product launches with specific UI
+  - Lifestyle / brand-led launches
+  - Anything that needs to feel enterprise-serious
+tags: [illustration, isometric, explainer, pastel, warm, hand-drawn]
+references: [Excalidraw, "Maggie Appleton's notes", "Stripe's old illustrations", Explorable Explanations]
+---
+
+# Iso Diagram — STYLE.md
+
+## Identity
+
+Paper background, graphite line, pastel fills. The aesthetic of a brilliant whiteboard explanation — hand-feeling but precise. Things *draw themselves on*. Fills flood in. Labels arrive on curly leader lines.
+
+This is the *explainer* template. It's designed for scripts that *teach a concept* rather than *announce a product*.
+
+**Mood:** explanatory, warm, thoughtful, hand-built, approachable.
+
+## When to use
+
+- Concept explainers and educational content
+- Onboarding videos
+- Technical ideas that benefit from a picture
+- Products with abstract value props that need to be visualized
+
+## When to avoid
+
+- Hard product launches with specific UI to showcase
+- Brand/lifestyle reels
+- Anything that needs to feel enterprise-serious or premium-luxury
+
+## Layout principles
+
+- **Paper canvas.** Slight off-white. Optional very faint dot-grid (5% opacity, 32px).
+- **Isometric drawings.** 30° projection. Boxes, columns, planes. Stack 3D objects with clear faces.
+- **Labels float, leader lines connect.** Curly hand-drawn leader lines (a slight curve, not straight). Each label has an underline.
+- **Hand-written display, set sans body.** Display in **Caveat** (handwritten), body in **Nunito** (rounded sans).
+- **Generous margins.** Drawings need air around them.
+
+## Color application
+
+- Paper bg, graphite fg.
+- One accent color per scene (pencil blue is default).
+- Pastel fills (`--fill-*`) inside iso shapes. Different objects use different fills — but only 2–3 colors per scene.
+- No hard saturated colors. Everything is soft.
+
+## Type rules
+
+- **Display: Caveat** (handwritten). For titles, headlines, kinetic words, labels on diagrams. Sizes 56–220.
+- **Body: Nunito.** Regular (400) and SemiBold (600). 22–34px.
+- **Mono: JetBrains Mono.** Sparingly, for measurements/coordinates only — this style isn't mono-heavy.
+- Title-case headlines. Sentence-case body. Underline key words with a hand-drawn pen line.
+
+## Motion principles
+
+- **Strokes draw on.** SVG `stroke-dashoffset` animation. ~400–600ms per stroke.
+- **Fills flood in after strokes.** A soft fill arrives 150ms after its outline closes.
+- **Labels swing in.** Slight rotate + fade. ~250ms with soft overshoot ease.
+- **Numbers count up.** Tickers like Motion Engineering, but with a gentler curve.
+- **Scene transitions:** the next drawing "erases" the current one — a soft white-paper wipe.
+- **Ambient layer:** a thin pencil "doodle" cursor occasionally appears in margins making a stray mark.
+- **Forbidden:** smooth gradients, glow, blur, hard cuts, mono motion (this isn't a terminal).
+
+## Pacing
+
+Patient. 4.0–4.5s per scene. The drawing itself is the content; let it finish before the label lands.
+
+## Per-scene recipes
+
+| Scene | Recipe |
+|---|---|
+| **Title** | Hand-written title draws stroke-by-stroke. Underline scribble below. Small iso icon (cube, paper stack) in corner. |
+| **Section** | Big handwritten chapter number "02" with the section title written below. A curly underline draws on. |
+| **Kinetic** | Sentence written word-by-word in handwriting. Key word boxed with a hand-drawn ellipse (irregular oval) in accent color. |
+| **Bullet** | Each item has a hand-drawn checkbox/dot-pip on the left. Underline scribbles under each. |
+| **Stat** | Big handwritten number with concentric hand-drawn circles around it. Arrow leader to a caption. |
+| **Feature** | Left: an isometric drawing of the concept (e.g. stacked memory blocks). Right: handwritten feature name + sans body description. |
+| **Grid** | 3 isometric mini-diagrams in a row, each with a hand-drawn box around it. Labels under. |
+| **UI showcase** | Isometric "exploded view" of the product — the app surface lifted off a base, with floating layered components. Curly leader-line callouts. |
+| **Content** | A short paragraph in body sans with one phrase circled/underlined; an arrow points from it to a small inline drawing. |
+| **CTA** | Handwritten CTA inside a hand-drawn rectangle that "draws itself." Small iso icon below. |
+
+### Connective elements
+
+- **Lower third:** small notebook-margin annotation — `~ scene 4 ~` in handwriting
+- **Scene transition:** paper wipe / "erase" effect
+- **Ambient:** occasional pencil scribble in margin, faint dot grid breathing
+
+## Pitfalls
+
+- **Don't make the iso drawings actually 3D-rendered.** They must look hand-built — line drawings filled with flat pastel.
+- **Don't use more than 2-3 pastel colors in one scene.** Otherwise it becomes a children's book.
+- **Don't keep leader lines straight.** They should curve gently.
+- **Don't go cute.** Restraint is what separates this from clipart.
+- **No emoji.** Hand-drawn glyphs only.

package/skill/assets/styles/iso-diagram/brand.md

@@ -0,0 +1,32 @@
+# Iso Diagram — Brand
+
+## Color
+
+**`--color-bg` `#FAF7F2`** — warm paper. Slight cream, not pure white. Reads as "notebook page."
+
+**`--color-fg` `#2A2620`** — soft graphite. Not black; warmer and softer.
+
+**`--color-accent` `#1F6FB3`** — pencil blue. The default accent — the color of a Pilot G2.
+
+**Pastel fills:**
+- `--fill-blue` `#C8DEEF` — sky
+- `--fill-pink` `#F4CFCB` — coral
+- `--fill-yellow` `#F5E4A8` — paper-yellow
+- `--fill-green` `#C9DEC6` — sage
+- `--fill-lavender` `#DCD3E8` — lavender
+
+Use 2–3 per scene. Don't mix all five at once.
+
+## Typography
+
+**Caveat** — Google Fonts handwriting face. Slightly irregular, readable, warm. For all display, kinetic text, and diagram labels.
+
+**Nunito** — soft, rounded sans for body. Plays well with the handwritten display.
+
+## Motion
+
+The signature motion is **drawing on**: outlines extend along their path, then fills flood. Use SVG `stroke-dasharray` + `stroke-dashoffset` for the line drawing effect.
+
+## Pencil cursor
+
+An invisible "pencil tip" leads each stroke as it draws. Reveal-points are paced like someone is actually drawing — not too fast.