videowright 0.1.0

package/skill/assets/styles/neon-terminal/sample/stat.ts

@@ -0,0 +1,123 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "neon-terminal-sample-stat",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Stat cards in Neon Terminal. A big number counts up digit by digit with a phosphor glow, caption below in muted.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        font-family: var(--font-mono);
+        overflow: hidden;
+      ">
+        <div style="
+          position: absolute; inset: 0; pointer-events: none;
+          background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(74, 222, 128, 0.04) 3px 4px);
+        "></div>
+
+        <div style="
+          position: absolute;
+          inset: var(--safe-y) var(--safe-x);
+          border: 1px solid var(--color-border);
+          background: rgba(10,14,11,0.6);
+        ">
+          <div style="
+            display: flex; align-items: center;
+            padding: 14px 20px;
+            border-bottom: 1px solid var(--color-border);
+            gap: 12px; font-size: 14px; color: var(--color-muted);
+          ">
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="margin-left: 16px;">beacon@console:~$ metrics --id=03</span>
+            <span style="margin-left: auto; color: var(--color-accent); text-shadow: var(--glow);">[ Q1 2026 ]</span>
+          </div>
+
+          <div style="padding: 48px 56px; overflow: hidden;">
+            <div data-ref="prompt" style="font-size: 22px; color: var(--color-muted); opacity: 0;">
+              $ metrics.failure_rate(step > 4)
+            </div>
+
+            <div data-ref="number" style="
+              font-size: 320px; font-weight: 500; line-height: 0.95;
+              margin-top: 48px;
+              color: var(--color-accent); text-shadow: var(--glow);
+              opacity: 0;
+            "><span data-ref="digits">0</span>%</div>
+
+            <div data-ref="caption" style="font-size: 26px; margin-top: 28px; max-width: 1300px; opacity: 0;">
+              <span style="color: var(--color-muted);">// </span>of agent failures occur after the 4<span style="color: var(--color-muted);">th</span> tool call.
+            </div>
+
+            <div data-ref="source" style="font-size: 18px; color: var(--color-muted); margin-top: 16px; opacity: 0;">
+              source: beacon.logs · n=12,840 sessions
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const prompt = host?.querySelector('[data-ref="prompt"]') as HTMLElement;
+		const number = host?.querySelector('[data-ref="number"]') as HTMLElement;
+		const digits = host?.querySelector('[data-ref="digits"]') as HTMLElement;
+		const caption = host?.querySelector('[data-ref="caption"]') as HTMLElement;
+		const source = host?.querySelector('[data-ref="source"]') as HTMLElement;
+
+		const ease = "steps(8, end)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		prompt.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+		});
+
+		number.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 200,
+			delay: 300,
+		});
+
+		// Count up from 0 to 84 using discrete ctx.hold steps.
+		// Counter/ticker animations are discrete text changes that cannot use WAAPI.
+		const target = 84;
+		const steps = 20;
+		const stepDuration = 600 / steps;
+		await ctx.hold(350);
+		for (let i = 1; i <= steps; i++) {
+			const progress = i / steps;
+			const eased = 1 - (1 - progress) ** 3;
+			digits.textContent = String(Math.round(eased * target));
+			await ctx.hold(stepDuration);
+		}
+		digits.textContent = String(target);
+
+		caption.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 200,
+		});
+
+		source.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 200,
+			delay: 160,
+		});
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/neon-terminal/sample/title.ts

@@ -0,0 +1,122 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "neon-terminal-sample-title",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Title cards in Neon Terminal. A boot sequence types in, then an ASCII logo block and tagline appear stepped.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <style>
+        @keyframes nt-blink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
+      </style>
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        font-family: var(--font-mono);
+        overflow: hidden;
+      ">
+        <div style="
+          position: absolute; inset: 0; pointer-events: none;
+          background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(74, 222, 128, 0.04) 3px 4px);
+        "></div>
+
+        <div style="
+          position: absolute;
+          inset: var(--safe-y) var(--safe-x);
+          border: 1px solid var(--color-border);
+          background: rgba(10,14,11,0.6);
+        ">
+          <div style="
+            display: flex; align-items: center;
+            padding: 14px 20px;
+            border-bottom: 1px solid var(--color-border);
+            gap: 12px; font-size: 14px; color: var(--color-muted);
+          ">
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="margin-left: 16px;">beacon@console:~$</span>
+            <span style="margin-left: auto; color: var(--color-accent); text-shadow: var(--glow);">[ booting ]</span>
+          </div>
+
+          <div style="padding: 48px 56px; overflow: hidden; position: relative;">
+            <div data-ref="prompt" style="font-size: 22px; color: var(--color-muted); opacity: 0;">
+              $ beacon --launch
+            </div>
+
+            <div data-ref="init" style="font-size: 22px; color: var(--color-muted); margin-top: 8px; opacity: 0;">
+              loaded 12 modules in 240ms
+            </div>
+
+            <pre data-ref="logo" style="
+              font-size: 72px; line-height: 1.1; font-weight: 500;
+              margin: 40px 0 24px; white-space: pre;
+              color: var(--color-accent); text-shadow: var(--glow);
+              opacity: 0;
+            ">  ____  ___    ___    ___ ___  _  _
+ | __ )| __|  / __|  / __/ _ \\| \\| |
+ | _ \\| _|  | (__  | (_| (_) | .  |
+ |___/|___|  \\___|  \\___\\___/|_|\\_|</pre>
+
+            <div data-ref="tagline" style="font-size: 28px; font-weight: 500; margin-top: 28px; opacity: 0;">
+              // long-running agents for research labs<span style="
+                display: inline-block; width: 0.6em; height: 1em;
+                background: var(--color-accent);
+                box-shadow: 0 0 12px rgba(74,222,128,0.7);
+                vertical-align: text-bottom;
+                animation: nt-blink 1s steps(2, end) infinite;
+                margin-left: 4px;
+              "></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const prompt = host?.querySelector('[data-ref="prompt"]') as HTMLElement;
+		const init = host?.querySelector('[data-ref="init"]') as HTMLElement;
+		const logo = host?.querySelector('[data-ref="logo"]') as HTMLElement;
+		const tagline = host?.querySelector('[data-ref="tagline"]') as HTMLElement;
+
+		const ease = "steps(8, end)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		prompt.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+		});
+
+		init.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+			delay: 400,
+		});
+
+		logo.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+			delay: 800,
+		});
+
+		tagline.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+			delay: 1200,
+		});
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/neon-terminal/sample/ui-showcase.ts

@@ -0,0 +1,127 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "neon-terminal-sample-ui-showcase",
+	advances: [2.5, 5.0],
+	voiceover:
+		"UI showcases in Neon Terminal. A full TUI mock with sidebar navigation, main plan pane, and memory panel on the right.",
+
+	mount(el) {
+		host = el;
+
+		const menuItems = ["run", "memory", "plan", "tools", "trace", "eval"];
+		const menuHtml = menuItems
+			.map(
+				(x, i) =>
+					`<div style="
+            padding: 6px 10px; font-size: 16px;
+            ${i === 2 ? "color: var(--color-accent); text-shadow: var(--glow); background: rgba(74,222,128,0.08);" : "color: var(--color-muted);"}
+          ">${i === 2 ? "▸ " : "  "}${x}</div>`,
+			)
+			.join("");
+
+		const planItems = [
+			{ status: "done", text: "Read eval spec" },
+			{ status: "done", text: "Generate 12 candidate prompts" },
+			{ status: "done", text: "Score each against rubric" },
+			{ status: "··", text: "Select top-3 by F1" },
+			{ status: "··", text: "Iterate with reasoning trace" },
+			{ status: "··", text: "Submit batch to coordinator" },
+		];
+		const planHtml = planItems
+			.map(
+				(item, i) =>
+					`<div style="display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--color-border);">
+            <span style="min-width: 20px; color: var(--color-muted);">${String(i + 1).padStart(2, "0")}</span>
+            <span style="flex: 1; font-size: 16px;">${item.text}</span>
+            <span style="
+              min-width: 60px; text-align: right;
+              ${item.status === "done" ? "color: var(--color-accent); text-shadow: var(--glow);" : "color: var(--amber); text-shadow: 0 0 12px rgba(245,158,11,0.45);"}
+            ">[${item.status}]</span>
+          </div>`,
+			)
+			.join("");
+
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        font-family: var(--font-mono);
+        overflow: hidden;
+      ">
+        <div style="
+          position: absolute; inset: 0; pointer-events: none;
+          background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(74, 222, 128, 0.04) 3px 4px);
+        "></div>
+
+        <div style="
+          position: absolute;
+          inset: var(--safe-y) var(--safe-x);
+          border: 1px solid var(--color-border);
+          background: rgba(10,14,11,0.6);
+        ">
+          <div style="
+            display: flex; align-items: center;
+            padding: 14px 20px;
+            border-bottom: 1px solid var(--color-border);
+            gap: 12px; font-size: 14px; color: var(--color-muted);
+          ">
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="margin-left: 16px;">beacon@console:~$ tui --session=41ac</span>
+            <span style="margin-left: auto; color: var(--color-accent); text-shadow: var(--glow);">[ live ]</span>
+          </div>
+
+          <div style="padding: 16px; overflow: hidden;">
+            <div data-ref="tui" style="
+              display: grid; grid-template-columns: 200px 1fr 240px;
+              height: 720px; border: 1px solid var(--color-border);
+              font-size: 16px; opacity: 0;
+            ">
+              <div style="padding: 16px; border-right: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 6px;">
+                <div style="font-size: 12px; color: var(--color-muted); margin-bottom: 8px;">── MENU ──</div>
+                ${menuHtml}
+                <div style="margin-top: auto; color: var(--color-muted);">── status ──</div>
+                <div style="color: var(--color-accent); text-shadow: var(--glow); font-size: 14px;">● running 00:14:22</div>
+              </div>
+
+              <div style="padding: 20px;">
+                <div style="font-size: 14px; color: var(--color-muted);">── PLAN · v3 ────────────────────────────</div>
+                ${planHtml}
+              </div>
+
+              <div style="padding: 16px; border-left: 1px solid var(--color-border);">
+                <div style="font-size: 14px; color: var(--color-muted); margin-bottom: 12px;">── MEMORY ──</div>
+                <pre style="font-size: 14px; margin: 0; line-height: 1.7; color: var(--color-muted);">t=00:02 ✓ snap_001
+t=00:05 ✓ snap_002
+t=00:09 ✓ snap_003</pre>
+                <pre style="font-size: 14px; margin: 0; line-height: 1.7; color: var(--color-accent); text-shadow: var(--glow);">t=00:14 ● snap_004</pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const tui = host?.querySelector('[data-ref="tui"]') as HTMLElement;
+
+		tui.animate([{ opacity: 0 }, { opacity: 1 }], {
+			duration: 250,
+			easing: "steps(8, end)",
+			fill: "forwards",
+		});
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/neon-terminal/tokens.css

@@ -0,0 +1,39 @@
+/* Neon Terminal — design tokens
+ * Dark-mode native. Phosphor green on near-black. Mono dominant.
+ */
+:root {
+	--color-bg: #0a0e0b;
+	--color-fg: #d8f3d8;
+	--color-accent: #4ade80; /* phosphor green */
+
+	--color-muted: #5a6f5c;
+	--color-border: #1f2a21;
+	--color-surface: #11171210;
+
+	--font-display: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
+	--font-body: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
+	--font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+	--space-sm: 12px;
+	--space-md: 24px;
+	--space-lg: 48px;
+	--space-xl: 96px;
+
+	--duration-fast: 100ms;
+	--duration-normal: 250ms;
+	--duration-slow: 600ms;
+
+	--radius-sm: 0px;
+	--radius-md: 2px;
+	--stagger: 40ms;
+	--ease-out: steps(8, end);
+	--ease-in: steps(8, end);
+	--scene-hold: 4s;
+
+	--safe-x: 96px;
+	--safe-y: 80px;
+
+	--glow: 0 0 12px rgba(74, 222, 128, 0.45);
+	--glow-soft: 0 0 24px rgba(74, 222, 128, 0.18);
+	--amber: #f59e0b;
+}

package/skill/assets/styles/risograph/STYLE.md

@@ -0,0 +1,110 @@
+---
+title: Risograph
+slug: risograph
+picker_description: 'Two-color screen-print on warm paper. Pink + ink-blue, visible grain, stop-motion cadence.'
+font_sources:
+  - https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap
+  - https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap
+  - https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap
+mood: [playful, tactile, indie, energetic, warm]
+good_for:
+  - Creative tools, design products
+  - Indie launches with personality
+  - Brand-forward consumer products
+  - Anything that wants charm without going corny
+bad_for:
+  - Enterprise / serious B2B
+  - Fintech, security, infra
+  - Anything technically dense
+tags: [print, two-color, grain, indie, playful, type-led]
+references: [It's Nice That, riso zines, modern indie design studios]
+---
+
+# Risograph — STYLE.md
+
+## Identity
+
+A two-color screen-print aesthetic on warm uncoated paper. Fluorescent pink and ink blue, with paper showing through. Visible grain. Slight color-channel misregistration on display type. Motion has a stop-motion cadence — stepped easing, 6–8 frames per move, like flipping through a riso-printed zine.
+
+This is the *personality* template. Type-led, opinionated, alive. It's the right choice when a script wants to feel like a small studio made it on a Saturday.
+
+**Mood:** playful, tactile, indie, energetic, warm.
+
+## When to use
+
+- Creative tools, design products
+- Indie launches with personality
+- Brand-forward consumer products
+- "We're not corporate" launches
+
+## When to avoid
+
+- Enterprise / serious B2B
+- Fintech, security, infrastructure
+- Anything technically dense or specification-heavy
+
+## Layout principles
+
+- **Big type, asymmetric.** Display type is the protagonist. Lines wrap dramatically. Some lines are intentionally angled (-2° to -6°).
+- **Type bleeds.** Display type runs into the edge of the safe area or off-canvas.
+- **Layering.** Type on top of duotone color shapes, or two type elements overlapping with one in pink, one in blue. Don't fear overlap.
+- **Paper grain everywhere.** A subtle noise/grain layer is permanent.
+- **Misregistration on heavy display type only.** Pink ghost 3px offset to the right; blue layer on top. Not on body. Not on icons.
+
+## Color application
+
+- Cream paper bg, ink-blue fg.
+- **Pink accent** for kinetic emphasis, key words, large shapes.
+- **Yellow** (`--color-second`) sparingly — for a third punctuation note on at most one scene per video.
+- Solid fills only. No gradients. No glow.
+
+## Type rules
+
+- **Display: Archivo Black** (heavy display sans, free, similar to Druk Wide). For everything large. Sizes 64–280.
+- **Body: Archivo** (regular & medium). 22–34px.
+- **Mono: JetBrains Mono.** For numbers and labels only.
+- Lowercase headlines are fair game (alongside Title Case). Lean expressive.
+- Misregistered display: render the text twice in absolute-positioned siblings — pink layer offset by `--misreg`, blue on top.
+
+## Motion principles
+
+- **Stop-motion stepped.** `steps(6, end)` or `steps(8, end)` easing. Things jump-cut into position.
+- **Color flashes.** A frame of pure pink may flash for 80ms between scenes.
+- **Type bounces in chunks.** A whole word "stamps" into position in 4–6 frames.
+- **Grain breathes.** The grain layer shifts subtly every 200ms (re-randomized).
+- **Scene transitions:** **stamp-cut** — old scene flashes pink, new scene snaps in.
+- **Ambient layer:** grain noise drift; a small repeating motif (asterisk, star, arrow) ticks in a corner.
+- **Forbidden:** smooth easing, gradients, glow, blur, drop shadows, anything "pro."
+
+## Pacing
+
+Brisk. 3.5–4s per scene. Stop-motion cadence keeps energy up.
+
+## Per-scene recipes
+
+| Scene | Recipe |
+|---|---|
+| **Title** | Huge misregistered display title (one word per line). Pink star/asterisk stamps in. |
+| **Section** | Big chapter number (pink) overlapping the section title (blue). Tilted -3°. |
+| **Kinetic** | Sentence stamps in word-by-word. Last word in pink at 1.5× size. |
+| **Bullet** | Each item is its own riso row: pink number, blue text, optional yellow tag chip. Hand-stamped feel. |
+| **Stat** | Huge pink stat number; misregistered. Caption in blue body underneath in a slim column. |
+| **Feature** | Left: a riso-style cut-paper illustration (blob shape + pink overlap). Right: heavy display name + body. |
+| **Grid** | 3 cards, each with a duotone shape on top and display name beneath. Different shape per card. |
+| **UI showcase** | Product UI redrawn flat in two colors — solid fills, no gradients, slightly misregistered. |
+| **Content** | A short paragraph in body. One phrase highlighter-marked (pink rectangle behind text). |
+| **CTA** | Massive CTA in misregistered display. Pink star stamps. URL in mono beneath. |
+
+### Connective elements
+
+- **Lower third:** `★ scene 4 ★` in pink, stop-motion ticking
+- **Scene transition:** pink flash → snap
+- **Ambient:** grain drift, small repeating ★ motif in corner
+
+## Pitfalls
+
+- **Don't overdo misregistration.** Display type only. Body, icons, labels stay clean.
+- **Don't use more than 3 colors per scene.** Even with yellow available, two is usually right.
+- **Don't smooth-fade.** Stamp-cut everything.
+- **Don't use rounded corners.** Print doesn't have them.
+- **No emoji.** Riso glyph set: ★ ◆ ● ► ▲ ✱ ➜

package/skill/assets/styles/risograph/brand.md

@@ -0,0 +1,26 @@
+# Risograph — Brand
+
+## Color
+
+**`--color-bg` `#F2EBDC`** — warm uncoated paper. Cream with a slight pink tilt. Reads as printed-on-stock.
+
+**`--color-fg` `#1A2A6A`** — riso ink blue. Deep, slightly violet. Standard riso "Federal Blue" / "Blue."
+
+**`--color-accent` `#FF4F8B`** — fluorescent pink. The signature riso flat color.
+
+**`--color-second` `#FFC83D`** — riso yellow. The "use once per video" third color.
+
+## Grain & misregistration
+
+- **Grain layer:** SVG fractal noise at 18% opacity, on top of everything. Re-randomized every 200ms for a "breathing" feel.
+- **Misregistration:** display type rendered twice — pink layer at `(+3px, +3px)`, blue layer on top. Body type stays sharp.
+
+## Typography
+
+**Archivo Black** is a free near-substitute for **Druk Wide** — the canonical riso display face. Set it tight (`letter-spacing: -0.02em`), heavy, expressive.
+
+**Archivo** Regular/Medium for body.
+
+## Motion
+
+Stepped easing (`steps(6, end)`). Stamps and snaps, not slides and fades. Pink flash transitions between scenes for energy.