videowright 0.1.0

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

@@ -0,0 +1,181 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "iso-diagram-sample-grid",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Card grids in Iso Diagram. Three isometric mini-diagrams in a row, each framed with a hand-drawn box and a labeled cube inside.",
+
+	mount(el) {
+		host = el;
+
+		const cards = [
+			{ name: "Memory", fill: "var(--fill-blue)", desc: "~ remembers ~" },
+			{ name: "Reasoning", fill: "var(--fill-yellow)", desc: "~ revises ~" },
+			{ name: "Recovery", fill: "var(--fill-green)", desc: "~ rewinds ~" },
+		];
+
+		const cardHtml = cards
+			.map(
+				(c, i) => `
+        <div data-ref="card${i}" style="
+          position: relative;
+          height: 540px;
+          opacity: 0;
+        ">
+          <svg style="position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;">
+            <path data-ref="frame${i}" d="M 8 8 L 528 12 L 524 528 L 12 524 Z" stroke="var(--color-fg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2100" stroke-dashoffset="2100" />
+          </svg>
+          <svg width="100%" height="280" style="overflow: visible;">
+            <g transform="translate(170,80)">
+              <polygon data-ref="cubeTop${i}" points="0,45 90,0 180,45 90,90" fill="${c.fill}" opacity="0" />
+              <polygon data-ref="cubeLeft${i}" points="0,45 90,90 90,135 0,90" fill="${c.fill}" opacity="0" />
+              <polygon data-ref="cubeRight${i}" points="90,90 180,45 180,90 90,135" fill="${c.fill}" opacity="0" />
+              <path data-ref="cubeOutlineA${i}" d="M0,45 L90,0 L180,45 L90,90 Z" stroke="var(--color-fg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="400" stroke-dashoffset="400" />
+              <path data-ref="cubeOutlineB${i}" d="M0,45 L90,90 L90,135 L0,90 Z" stroke="var(--color-fg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="400" stroke-dashoffset="400" />
+              <path data-ref="cubeOutlineC${i}" d="M90,90 L180,45 L180,90 L90,135 Z" stroke="var(--color-fg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="400" stroke-dashoffset="400" />
+            </g>
+          </svg>
+          <div style="font-family: var(--font-display); font-size: 80px; text-align: center; margin-top: 24px;">${c.name}</div>
+          <div style="font-family: var(--font-display); font-size: 40px; text-align: center; margin-top: -4px; color: var(--color-muted);">${c.desc}</div>
+        </div>`,
+			)
+			.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: 130px;">Three primitives.</div>
+          <svg style="margin-top: 8px;" width="520" height="14">
+            <path data-ref="headingUnderline" d="M 0 6 q 86 -8 172 0 t 172 0 t 172 0" stroke="var(--color-accent)" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-dasharray="600" stroke-dashoffset="600" />
+          </svg>
+        </div>
+
+        <div style="
+          position: absolute; left: 140px; right: 140px; top: 400px;
+          display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 56px;
+        ">
+          ${cardHtml}
+        </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 7 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 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,
+		});
+
+		for (let i = 0; i < 3; i++) {
+			const card = host?.querySelector(`[data-ref="card${i}"]`) as HTMLElement;
+			const frame = host?.querySelector(`[data-ref="frame${i}"]`) as SVGPathElement;
+			const outA = host?.querySelector(`[data-ref="cubeOutlineA${i}"]`) as SVGPathElement;
+			const outB = host?.querySelector(`[data-ref="cubeOutlineB${i}"]`) as SVGPathElement;
+			const outC = host?.querySelector(`[data-ref="cubeOutlineC${i}"]`) as SVGPathElement;
+			const top = host?.querySelector(`[data-ref="cubeTop${i}"]`) as SVGPolygonElement;
+			const left = host?.querySelector(`[data-ref="cubeLeft${i}"]`) as SVGPolygonElement;
+			const right = host?.querySelector(`[data-ref="cubeRight${i}"]`) as SVGPolygonElement;
+
+			const base = 900 + i * 200;
+
+			card.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 250, delay: base });
+
+			// Frame draws on
+			frame.animate([{ strokeDashoffset: "2100" }, { strokeDashoffset: "0" }], {
+				...opts,
+				duration: 600,
+				delay: base,
+			});
+
+			// Cube outlines draw on
+			outA.animate([{ strokeDashoffset: "400" }, { strokeDashoffset: "0" }], {
+				...opts,
+				duration: 400,
+				delay: base + 200,
+			});
+			outB.animate([{ strokeDashoffset: "400" }, { strokeDashoffset: "0" }], {
+				...opts,
+				duration: 400,
+				delay: base + 350,
+			});
+			outC.animate([{ strokeDashoffset: "400" }, { strokeDashoffset: "0" }], {
+				...opts,
+				duration: 400,
+				delay: base + 350,
+			});
+
+			// Fills flood in
+			top.animate([{ opacity: 0 }, { opacity: 0.9 }], {
+				...opts,
+				duration: 400,
+				delay: base + 550,
+			});
+			left.animate([{ opacity: 0 }, { opacity: 0.65 }], {
+				...opts,
+				duration: 400,
+				delay: base + 600,
+			});
+			right.animate([{ opacity: 0 }, { opacity: 0.5 }], {
+				...opts,
+				duration: 400,
+				delay: base + 600,
+			});
+		}
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

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

@@ -0,0 +1,102 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "iso-diagram-sample-kinetic",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Kinetic statements in Iso Diagram. Words appear one at a time in handwriting, the last circled with a hand-drawn ellipse.",
+
+	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>
+
+        <div style="
+          position: absolute;
+          left: 140px;
+          top: 280px;
+          width: 1640px;
+          display: flex;
+          flex-wrap: wrap;
+          column-gap: 32px;
+          row-gap: 12px;
+          font-family: var(--font-display);
+          font-size: 200px;
+          line-height: 1.05;
+        ">
+          <span data-ref="w0" style="opacity: 0; display: inline-block;">Most</span>
+          <span data-ref="w1" style="opacity: 0; display: inline-block;">agents</span>
+          <span data-ref="w2" style="opacity: 0; display: inline-block;">fail</span>
+          <span data-ref="w3" style="opacity: 0; display: inline-block;">because</span>
+          <span data-ref="w4" style="opacity: 0; display: inline-block;">they</span>
+          <span data-ref="w5" style="opacity: 0; display: inline-block; position: relative; color: var(--color-accent);">forget.
+            <svg data-ref="ellipse" style="position: absolute; inset: -28px; width: calc(100% + 56px); height: calc(100% + 56px); overflow: visible;">
+              <path data-ref="ellipsePath" d="M 20 100 q 0 -95 150 -95 t 150 95 t -150 95 t -150 -95 Z" stroke="var(--color-accent)" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-dasharray="1000" stroke-dashoffset="1000" />
+            </svg>
+          </span>
+        </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 3 of 10 ~</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const counter = host?.querySelector('[data-ref="counter"]') as HTMLElement;
+		const ellipsePath = host?.querySelector('[data-ref="ellipsePath"]') as SVGPathElement;
+
+		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 });
+
+		// Words swing in one at a time with slight alternating rotation
+		for (let i = 0; i < 6; i++) {
+			const word = host?.querySelector(`[data-ref="w${i}"]`) as HTMLElement;
+			const rot = i % 2 === 0 ? -1.5 : 1.5;
+			word.animate(
+				[
+					{ opacity: 0, transform: `rotate(${rot}deg) translateY(12px)` },
+					{ opacity: 1, transform: "rotate(0deg) translateY(0)" },
+				],
+				{ ...opts, duration: 300, delay: 400 + i * 220 },
+			);
+		}
+
+		// Ellipse draws on around the last word
+		ellipsePath.animate([{ strokeDashoffset: "1000" }, { strokeDashoffset: "0" }], {
+			...opts,
+			duration: 700,
+			delay: 1800,
+		});
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

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

@@ -0,0 +1,149 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "iso-diagram-sample-section",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Section headers in Iso Diagram. A big handwritten chapter number with the section title below and a curly underline that draws itself on.",
+
+	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>
+
+        <div data-ref="chapter" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 180px;
+          font-family: var(--font-display);
+          font-size: 80px;
+          color: var(--color-muted);
+          opacity: 0;
+          transform: rotate(-3deg);
+        ">Chapter</div>
+
+        <div data-ref="number" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 260px;
+          font-family: var(--font-display);
+          font-size: 420px;
+          line-height: 0.9;
+          color: var(--color-accent);
+          opacity: 0;
+        ">02</div>
+
+        <div data-ref="title" style="
+          position: absolute;
+          left: calc(var(--safe-x) + 400px);
+          top: 380px;
+          font-family: var(--font-display);
+          font-size: 160px;
+          opacity: 0;
+        ">The architecture.</div>
+
+        <svg data-ref="underlineSvg" style="position: absolute; left: calc(var(--safe-x) + 400px); top: 580px;" width="720" height="14">
+          <path data-ref="underline" d="M 0 6 q 120 -8 240 0 t 240 0 t 240 0" stroke="var(--color-fg)" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-dasharray="900" stroke-dashoffset="900" />
+        </svg>
+
+        <div data-ref="caption" style="
+          position: absolute;
+          left: calc(var(--safe-x) + 400px);
+          top: 640px;
+          font-family: var(--font-body);
+          font-size: 32px;
+          color: var(--color-muted);
+          opacity: 0;
+        ">three primitives: memory, reasoning, recovery</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 2 of 10 ~</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const chapter = host?.querySelector('[data-ref="chapter"]') as HTMLElement;
+		const number = host?.querySelector('[data-ref="number"]') as HTMLElement;
+		const title = host?.querySelector('[data-ref="title"]') as HTMLElement;
+		const underline = host?.querySelector('[data-ref="underline"]') 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 });
+
+		// Chapter label swings in
+		chapter.animate(
+			[
+				{ opacity: 0, transform: "rotate(-5deg) translateY(12px)" },
+				{ opacity: 1, transform: "rotate(-3deg) translateY(0)" },
+			],
+			{ ...opts, duration: 300, delay: 300 },
+		);
+
+		// Big number
+		number.animate(
+			[
+				{ opacity: 0, transform: "translateY(16px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 400, delay: 700 },
+		);
+
+		// Section title swings in
+		title.animate(
+			[
+				{ opacity: 0, transform: "rotate(-1deg) translateY(12px)" },
+				{ opacity: 1, transform: "rotate(0deg) translateY(0)" },
+			],
+			{ ...opts, duration: 350, delay: 1300 },
+		);
+
+		// Underline draws on
+		underline.animate([{ strokeDashoffset: "900" }, { strokeDashoffset: "0" }], {
+			...opts,
+			duration: 500,
+			delay: 1800,
+		});
+
+		// Caption
+		caption.animate(
+			[
+				{ opacity: 0, transform: "rotate(-1deg) translateY(8px)" },
+				{ opacity: 1, transform: "rotate(0deg) translateY(0)" },
+			],
+			{ ...opts, duration: 300, delay: 2000 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

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

@@ -0,0 +1,164 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "iso-diagram-sample-stat",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Stat cards in Iso Diagram. A big handwritten number with concentric hand-drawn circles and an arrow leader to a caption.",
+
+	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>
+
+        <div data-ref="label" style="
+          position: absolute;
+          left: 140px;
+          top: 160px;
+          font-family: var(--font-body);
+          font-size: 28px;
+          letter-spacing: 0.05em;
+          color: var(--color-muted);
+          opacity: 0;
+        ">BEACON &middot; failure data, Q1 2026</div>
+
+        <div style="position: absolute; left: 0; right: 0; top: 280px; text-align: center;">
+          <svg style="position: absolute; left: 50%; top: 0; transform: translateX(-50%); overflow: visible;" width="700" height="700">
+            <path data-ref="outerCircle" d="M 350 50 a 300 300 0 1 0 0.1 0 Z" stroke="var(--color-accent)" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-dasharray="1900" stroke-dashoffset="1900" />
+            <path data-ref="innerCircle" d="M 350 110 a 240 240 0 1 0 0.1 0 Z" stroke="var(--color-muted)" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-dasharray="1520" stroke-dashoffset="1520" />
+          </svg>
+
+          <div data-ref="stat" style="
+            position: relative;
+            z-index: 1;
+            padding-top: 180px;
+            font-family: var(--font-display);
+            font-size: 340px;
+            line-height: 0.9;
+            color: var(--color-accent);
+          "><span data-ref="digits">0</span>%</div>
+        </div>
+
+        <svg style="position: absolute; left: 50%; bottom: 260px; transform: translateX(-50%); overflow: visible;" width="200" height="120">
+          <path data-ref="leaderArrow" d="M 100 0 Q 130 50 100 100" stroke="var(--color-accent)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-dasharray="140" stroke-dashoffset="140" />
+          <polygon data-ref="arrowHead" points="100,100 93,86 107,86" fill="var(--color-accent)" opacity="0" />
+        </svg>
+
+        <div data-ref="caption" style="
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 180px;
+          text-align: center;
+          opacity: 0;
+        ">
+          <div style="font-family: var(--font-body); font-size: 36px; font-weight: 600; max-width: 1200px; margin: 0 auto;">
+            of agent failures happen <span style="color: var(--color-accent);">after</span> the 4th tool call.
+          </div>
+          <div style="font-family: var(--font-mono); font-size: 18px; color: var(--color-muted); margin-top: 14px;">n=12,840 sessions</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 5 of 10 ~</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const label = host?.querySelector('[data-ref="label"]') as HTMLElement;
+		const outerCircle = host?.querySelector('[data-ref="outerCircle"]') as SVGPathElement;
+		const innerCircle = host?.querySelector('[data-ref="innerCircle"]') as SVGPathElement;
+		const digits = host?.querySelector('[data-ref="digits"]') as HTMLElement;
+		const leaderArrow = host?.querySelector('[data-ref="leaderArrow"]') as SVGPathElement;
+		const arrowHead = host?.querySelector('[data-ref="arrowHead"]') as SVGPolygonElement;
+		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 });
+
+		label.animate(
+			[
+				{ opacity: 0, transform: "translateY(8px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 300, delay: 300 },
+		);
+
+		// Concentric circles draw on
+		outerCircle.animate([{ strokeDashoffset: "1900" }, { strokeDashoffset: "0" }], {
+			...opts,
+			duration: 1000,
+			delay: 500,
+		});
+		innerCircle.animate([{ strokeDashoffset: "1520" }, { strokeDashoffset: "0" }], {
+			...opts,
+			duration: 1000,
+			delay: 800,
+		});
+
+		// Count up from 0 to 84 using ctx.hold (justified ticker exception)
+		const target = 84;
+		const steps = 30;
+		const stepDuration = 900 / steps;
+		await ctx.hold(900);
+		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);
+
+		// Leader arrow draws on from circles to caption
+		leaderArrow.animate([{ strokeDashoffset: "140" }, { strokeDashoffset: "0" }], {
+			...opts,
+			duration: 400,
+			delay: 0,
+		});
+		arrowHead.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 200,
+			delay: 300,
+		});
+
+		// Caption swings in
+		caption.animate(
+			[
+				{ opacity: 0, transform: "rotate(-1deg) translateY(12px)" },
+				{ opacity: 1, transform: "rotate(0deg) translateY(0)" },
+			],
+			{ ...opts, duration: 350, delay: 0 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});