videowright 0.1.0

package/skill/assets/styles/iso-diagram/sample/title.ts

@@ -0,0 +1,173 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "iso-diagram-sample-title",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Title cards in Iso Diagram. A handwritten title on paper, a wavy underline that draws itself, and a small isometric cube in the corner.",
+
+	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; inset: 0; pointer-events: none;
+          background-image: radial-gradient(circle, rgba(42,38,32,0.10) 1px, transparent 1.6px);
+          background-size: 32px 32px;
+        "></div>
+
+        <svg data-ref="cube" style="position: absolute; left: var(--safe-x); top: 100px; overflow: visible; opacity: 0;" width="180" height="180">
+          <path data-ref="cubeTop" d="M0,60 L60,0 L120,60 L60,120 Z" fill="var(--fill-yellow)" opacity="0" />
+          <path data-ref="cubeFrontL" d="M0,60 L60,120 L60,180 L0,120 Z" fill="var(--fill-yellow)" opacity="0" />
+          <path data-ref="cubeFrontR" d="M60,120 L120,60 L120,120 L60,180 Z" fill="var(--fill-yellow)" opacity="0" />
+          <path data-ref="cubeOutline" d="M0,60 L60,0 L120,60 L60,120 Z M0,60 L60,120 L60,180 L0,120 Z M60,120 L120,60 L120,120 L60,180" stroke="var(--color-fg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="800" stroke-dashoffset="800" />
+        </svg>
+
+        <div data-ref="label" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 320px;
+          font-family: var(--font-mono);
+          font-size: 22px;
+          letter-spacing: 0.1em;
+          color: var(--color-muted);
+          opacity: 0;
+        ">BEACON &middot; v0.4</div>
+
+        <div data-ref="headline" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 380px;
+          font-family: var(--font-display);
+          font-size: 280px;
+          color: var(--color-accent);
+          line-height: 1.0;
+          opacity: 0;
+        ">Beacon.</div>
+
+        <div data-ref="subtitle" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 720px;
+          font-family: var(--font-body);
+          font-size: 44px;
+          font-weight: 600;
+          opacity: 0;
+        ">Long-running agents,</div>
+
+        <div data-ref="subtitleMuted" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 780px;
+          font-family: var(--font-body);
+          font-size: 44px;
+          font-weight: 400;
+          color: var(--color-muted);
+          opacity: 0;
+        ">that don't forget where they were.</div>
+
+        <svg data-ref="underlineSvg" style="position: absolute; left: var(--safe-x); top: 855px;" width="580" height="14">
+          <path data-ref="underline" d="M 0 6 q 96 -8 192 0 t 192 0 t 192 0" stroke="var(--color-accent)" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-dasharray="700" stroke-dashoffset="700" />
+        </svg>
+
+        <div data-ref="counter" style="
+          position: absolute;
+          right: var(--safe-x);
+          top: 36px;
+          font-family: var(--font-display);
+          font-size: 28px;
+          color: var(--color-muted);
+          transform: rotate(-2deg);
+          opacity: 0;
+        ">~ scene 1 of 10 ~</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const cube = host?.querySelector('[data-ref="cube"]') as SVGElement;
+		const cubeOutline = host?.querySelector('[data-ref="cubeOutline"]') as SVGPathElement;
+		const cubeTop = host?.querySelector('[data-ref="cubeTop"]') as SVGPathElement;
+		const cubeFrontL = host?.querySelector('[data-ref="cubeFrontL"]') as SVGPathElement;
+		const cubeFrontR = host?.querySelector('[data-ref="cubeFrontR"]') as SVGPathElement;
+		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 subtitleMuted = host?.querySelector('[data-ref="subtitleMuted"]') as HTMLElement;
+		const underline = host?.querySelector('[data-ref="underline"]') as SVGPathElement;
+		const counter = host?.querySelector('[data-ref="counter"]') as HTMLElement;
+
+		const ease = "cubic-bezier(0.34, 1.2, 0.64, 1)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		// Cube outline draws on
+		cube.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 200 });
+		cubeOutline.animate([{ strokeDashoffset: "800" }, { strokeDashoffset: "0" }], {
+			...opts,
+			duration: 600,
+			delay: 200,
+		});
+		// Fills flood in after outline
+		cubeTop.animate([{ opacity: 0 }, { opacity: 0.95 }], { ...opts, duration: 400, delay: 700 });
+		cubeFrontL.animate([{ opacity: 0 }, { opacity: 0.7 }], { ...opts, duration: 400, delay: 750 });
+		cubeFrontR.animate([{ opacity: 0 }, { opacity: 0.55 }], { ...opts, duration: 400, delay: 750 });
+
+		// Label swings in
+		label.animate(
+			[
+				{ opacity: 0, transform: "rotate(-2deg) translateY(12px)" },
+				{ opacity: 1, transform: "rotate(0deg) translateY(0)" },
+			],
+			{ ...opts, duration: 300, delay: 800 },
+		);
+
+		// Headline fades in
+		headline.animate(
+			[
+				{ opacity: 0, transform: "translateY(12px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 400, delay: 1100 },
+		);
+
+		// Subtitles
+		subtitle.animate(
+			[
+				{ opacity: 0, transform: "translateY(12px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 350, delay: 1700 },
+		);
+		subtitleMuted.animate(
+			[
+				{ opacity: 0, transform: "translateY(12px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 350, delay: 1800 },
+		);
+
+		// Underline draws on
+		underline.animate([{ strokeDashoffset: "700" }, { strokeDashoffset: "0" }], {
+			...opts,
+			duration: 500,
+			delay: 2000,
+		});
+
+		counter.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 300, delay: 300 });
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/iso-diagram/sample/ui-showcase.ts

@@ -0,0 +1,162 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "iso-diagram-sample-ui-showcase",
+	advances: [2.5, 5.0],
+	voiceover:
+		"UI showcases in Iso Diagram. An exploded isometric view with four stacked diamond layers, each drawing its outline then flooding with pastel fill.",
+
+	mount(el) {
+		host = el;
+
+		const layers = [
+			{ y: 360, fill: "var(--fill-blue)", label: "TIMELINE" },
+			{ y: 240, fill: "var(--fill-yellow)", label: "MEMORY" },
+			{ y: 120, fill: "var(--fill-pink)", label: "TRACES" },
+			{ y: 0, fill: "var(--fill-green)", label: "AGENT" },
+		];
+
+		const layerHtml = layers
+			.map(
+				(layer, i) => `
+        <g data-ref="layer${i}" transform="translate(80,${layer.y})">
+          <polygon data-ref="layerFill${i}" points="0,80 360,-80 720,80 360,240" fill="${layer.fill}" opacity="0" />
+          <path data-ref="layerOutline${i}" d="M 0 80 L 360 -80 L 720 80 L 360 240 Z" stroke="var(--color-fg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1800" stroke-dashoffset="1800" />
+          <text data-ref="layerLabel${i}" x="760" y="70" font-family="var(--font-display)" font-size="44" fill="var(--color-fg)" opacity="0">${layer.label}</text>
+          <path data-ref="layerTick${i}" d="M 740 60 L 800 60" stroke="var(--color-accent)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-dasharray="60" stroke-dashoffset="60" />
+        </g>`,
+			)
+			.join("");
+
+		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; inset: 0; pointer-events: none;
+          background-image: radial-gradient(circle, rgba(42,38,32,0.10) 1px, transparent 1.6px);
+          background-size: 32px 32px;
+        "></div>
+
+        <div data-ref="heading" style="
+          position: absolute;
+          left: 140px;
+          top: 120px;
+          opacity: 0;
+        ">
+          <div style="font-family: var(--font-display); font-size: 110px;">Beacon Console.</div>
+          <svg style="margin-top: 8px;" width="480" height="14">
+            <path data-ref="headingUnderline" d="M 0 6 q 80 -8 160 0 t 160 0 t 160 0" stroke="var(--color-accent)" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-dasharray="600" stroke-dashoffset="600" />
+          </svg>
+        </div>
+
+        <svg style="position: absolute; left: 240px; top: 340px; overflow: visible;" width="1100" height="700">
+          ${layerHtml}
+        </svg>
+
+        <div data-ref="caption" style="
+          position: absolute;
+          right: 140px;
+          bottom: 180px;
+          width: 480px;
+          opacity: 0;
+        ">
+          <div style="font-family: var(--font-body); font-size: 26px; font-weight: 600;">Four layers, one console.</div>
+          <div style="font-family: var(--font-body); font-size: 22px; margin-top: 8px; color: var(--color-muted);">Each layer is independently inspectable and pinnable to the timeline.</div>
+        </div>
+
+        <div data-ref="counter" style="
+          position: absolute;
+          right: var(--safe-x);
+          top: 36px;
+          font-family: var(--font-display);
+          font-size: 28px;
+          color: var(--color-muted);
+          transform: rotate(-2deg);
+          opacity: 0;
+        ">~ scene 8 of 10 ~</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const heading = host?.querySelector('[data-ref="heading"]') as HTMLElement;
+		const headingUnderline = host?.querySelector('[data-ref="headingUnderline"]') as SVGPathElement;
+		const caption = host?.querySelector('[data-ref="caption"]') as HTMLElement;
+		const counter = host?.querySelector('[data-ref="counter"]') as HTMLElement;
+
+		const ease = "cubic-bezier(0.34, 1.2, 0.64, 1)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		counter.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 300 });
+
+		heading.animate(
+			[
+				{ opacity: 0, transform: "translateY(12px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 350, delay: 300 },
+		);
+
+		headingUnderline.animate([{ strokeDashoffset: "600" }, { strokeDashoffset: "0" }], {
+			...opts,
+			duration: 500,
+			delay: 700,
+		});
+
+		// Each layer: outline draws on, fill floods, label + tick appear
+		for (let i = 0; i < 4; i++) {
+			const outline = host?.querySelector(`[data-ref="layerOutline${i}"]`) as SVGPathElement;
+			const fill = host?.querySelector(`[data-ref="layerFill${i}"]`) as SVGPolygonElement;
+			const label = host?.querySelector(`[data-ref="layerLabel${i}"]`) as SVGTextElement;
+			const tick = host?.querySelector(`[data-ref="layerTick${i}"]`) as SVGPathElement;
+
+			const base = 700 + i * 250;
+
+			outline.animate([{ strokeDashoffset: "1800" }, { strokeDashoffset: "0" }], {
+				...opts,
+				duration: 500,
+				delay: base,
+			});
+
+			fill.animate([{ opacity: 0 }, { opacity: 0.85 }], {
+				...opts,
+				duration: 400,
+				delay: base + 400,
+			});
+
+			label.animate([{ opacity: 0 }, { opacity: 1 }], {
+				...opts,
+				duration: 300,
+				delay: base + 300,
+			});
+
+			tick.animate([{ strokeDashoffset: "60" }, { strokeDashoffset: "0" }], {
+				...opts,
+				duration: 300,
+				delay: base + 300,
+			});
+		}
+
+		caption.animate(
+			[
+				{ opacity: 0, transform: "rotate(-2deg) translateY(12px)" },
+				{ opacity: 1, transform: "rotate(0deg) translateY(0)" },
+			],
+			{ ...opts, duration: 350, delay: 2500 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/iso-diagram/tokens.css

@@ -0,0 +1,40 @@
+/* Iso Diagram — design tokens
+ * Pencil-and-paper aesthetic, soft pastel fills, hand-built but precise.
+ */
+:root {
+	--color-bg: #faf7f2; /* paper */
+	--color-fg: #2a2620; /* graphite */
+	--color-accent: #1f6fb3; /* pencil blue */
+
+	--color-muted: #8b8174;
+	--color-border: #2a2620;
+	--color-surface: #ffffff;
+
+	--fill-blue: #c8deef;
+	--fill-pink: #f4cfcb;
+	--fill-yellow: #f5e4a8;
+	--fill-green: #c9dec6;
+	--fill-lavender: #dcd3e8;
+
+	--font-display: "Caveat", "Marker Felt", cursive;
+	--font-body: "Nunito", "Inter", system-ui, sans-serif;
+	--font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+	--space-sm: 12px;
+	--space-md: 24px;
+	--space-lg: 48px;
+	--space-xl: 96px;
+
+	--duration-fast: 220ms;
+	--duration-normal: 480ms;
+	--duration-slow: 900ms;
+
+	--stroke: 2.4px;
+	--stagger: 80ms;
+	--ease-out: cubic-bezier(0.34, 1.2, 0.64, 1); /* soft overshoot */
+	--ease-in: cubic-bezier(0.4, 0, 1, 1);
+	--scene-hold: 4.5s;
+
+	--safe-x: 120px;
+	--safe-y: 96px;
+}

package/skill/assets/styles/motion-engineering/STYLE.md

@@ -0,0 +1,106 @@
+---
+title: Motion Engineering
+slug: motion-engineering
+picker_description: 'Aerospace HUD on a blueprint grid. Dimension lines, crosshairs, leader-lined callouts.'
+font_sources:
+  - https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap
+  - https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap
+mood: [technical, precise, industrial, mechanical, methodical]
+good_for:
+  - Hardware launches (robotics, drones, sensors, devices)
+  - Industrial / B2B technical products
+  - Explainers where annotation is the point (parts callouts, measurements)
+  - AI infrastructure that wants to feel engineered
+bad_for:
+  - Soft consumer apps
+  - Lifestyle / brand launches
+  - Anything where the script doesn't have specifics to annotate
+tags: [hud, blueprint, technical, annotation, dark-mode, industrial]
+references: [SpaceX webcast graphics, Linear annotations, For All Mankind UI, CAD documentation]
+---
+
+# Motion Engineering — STYLE.md
+
+## Identity
+
+An engineering-document aesthetic — half aerospace HUD, half CAD blueprint. Charcoal canvas with a faint grid; cyan-white type; an amber HUD accent. Elements *measure themselves in*: dimension lines draw, crosshairs sweep, callouts arrive on leader lines. Every scene looks like it was extracted from a technical drawing.
+
+**Mood:** technical, precise, industrial, mechanical, methodical.
+
+## When to use
+
+- Hardware launches (robotics, drones, sensors, devices)
+- Industrial / B2B technical products
+- Explainers where annotation is the point (parts callouts, measurements)
+- AI infrastructure that wants to feel engineered
+
+## When to avoid
+
+- Soft consumer apps
+- Lifestyle / brand launches
+- Anything where the script doesn't have specifics to annotate
+
+## Layout principles
+
+- **Faint grid is always visible.** 8% opacity, 32px or 64px cells. The scene sits on a drawing.
+- **Crosshairs and corner ticks frame the content area.** Top-left `+`, top-right `+`, bottom corners likewise. They sweep in on enter.
+- **Leader lines connect labels to things.** Never float a label — connect it with a 1px line to its referent.
+- **Tabular numerals everywhere.** All metrics in mono with `tnum`.
+- **Coordinate readouts.** Bottom strip shows `X 1240.00 Y 360.00` ticking subtly.
+
+## Color application
+
+- Charcoal bg, cyan-white fg.
+- **Amber accent (`--color-accent`) is the HUD signal.** Used for primary highlights, callouts, target marks, the active reading.
+- Cyan (`--cyan`) for measurement lines and secondary highlights.
+- Warning amber (`--warn`) for transitions / in-progress.
+- Muted slate for grid labels, axes, secondary type.
+
+## Type rules
+
+- **Display: Space Grotesk.** Geometric, slightly mechanical. Medium weight (500). Sizes 56–200.
+- **Body: Space Grotesk.** Regular (400), 20–32px.
+- **Mono: JetBrains Mono.** For all numerals, coordinates, units, identifiers.
+- Numerals always tabular. Units always set apart in mono at smaller size (`84` big, `mm` mono small below).
+
+## Motion principles
+
+- **Things draw in.** Lines extend, dimension arrows arrive at their endpoints, crosshairs sweep to position.
+- **Numbers tick.** Counter-style updates, not smooth interpolation — each digit flips.
+- **Stagger 50ms.** Many small staged events build up a frame.
+- **Scene transitions:** crosshair-sweep wipe (a thin amber line sweeps L→R, content updates as it passes).
+- **Ambient layer:** coordinate readout ticks; grid lines pulse very subtly; one crosshair on the canvas marks the camera origin.
+- **Forbidden:** bounce, spring, ease-in-out for entries, fade-only without geometry.
+
+## Pacing
+
+Methodical. 3.5–4s per scene. Multiple measurement reveals per scene — let each one land before the next starts.
+
+## Per-scene recipes
+
+| Scene | Recipe |
+|---|---|
+| **Title** | Crosshair tracks to center on the title; dimension lines bracket it left/right showing total width; small coordinate label below. |
+| **Section** | `CHAPTER 02 · SECTION TITLE` with a sweeping amber line under it. Grid intensifies briefly. |
+| **Kinetic** | Sentence reveals word-by-word. Each word is bracketed top and bottom with tiny tick marks. Last word boxed in amber. |
+| **Bullet** | Each item has an `[ITEM 01]` mono prefix; rows separated by hairlines; right column shows a tiny measurement (`Δ = 12.4 ms`). |
+| **Stat** | Big number with dimension lines drawing above and below it showing its "size." Caption in mono with unit. |
+| **Feature** | Two columns: left has a wireframe schematic with crosshair callouts; right has feature name and prose. |
+| **Grid** | 3 cards, each framed with corner ticks. Inside each: small wireframe diagram + name + metric. |
+| **UI showcase** | A wireframe of the product UI with amber leader-lined callouts pointing to parts. The mock looks like a blueprint of the app. |
+| **Content** | Title with crosshair marker; body in two columns; one block has an inline annotation with leader line. |
+| **CTA** | Target reticle centered on the CTA text; corner ticks; coordinate readout shows the URL as a coordinate. |
+
+### Connective elements
+
+- **Lower third:** measured bracket at bottom — `├── narration · t = 00:24 ──┤`
+- **Scene transition:** crosshair-sweep wipe
+- **Ambient:** coordinate ticker, grid pulse, one persistent canvas crosshair
+
+## Pitfalls
+
+- **Don't drop the grid.** The grid is the canvas of this style.
+- **Don't float a label without a leader line.** Connect everything.
+- **Don't use serifs.** Or any non-Grotesk/Mono.
+- **Don't smooth-number.** Numbers tick / flip.
+- **Don't use red.** Amber and cyan only.

package/skill/assets/styles/motion-engineering/brand.md

@@ -0,0 +1,29 @@
+# Motion Engineering — Brand
+
+## Color
+
+**`--color-bg` `#0E141A`** — deep charcoal with a slight blue tilt. Reads as "drawing paper" in dark mode.
+
+**`--color-fg` `#E8EEF5`** — cyan-white. Crisper than warm white, matches the engineering register.
+
+**`--color-accent` `#FF8800`** — HUD amber. The signal color. Used for active readings, primary callouts.
+
+**`--cyan` `#4FD1E0`** — dimension-line cyan. Secondary measurement color.
+
+**`--warn` `#FFB800`** — warning amber. For in-progress, transitions.
+
+**`--color-muted` `#6F8294`** — slate. Grid labels, axes, secondary type.
+
+## Typography
+
+**Space Grotesk** is the closest free analogue to the geometric-mechanical grotesks used in modern HUDs and CAD UIs. Slight personality where Helvetica would be neutral.
+
+**JetBrains Mono** for all numerals and identifiers — non-negotiable in this style.
+
+## Motion
+
+Geometry-led entries: lines draw, brackets close, crosshairs sweep. Smooth easing on the lines themselves; ticking on the numbers.
+
+## Grid
+
+The faint background grid is part of the brand. 64px cells at 6% white opacity. Always present on every scene.