videowright 0.1.0

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

@@ -0,0 +1,104 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "editorial-mono-sample-content",
+	advances: [2.0, 5.0],
+	voiceover:
+		"Content cards in Editorial Mono. A headline and body paragraph with generous line height.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        overflow: hidden;
+      ">
+        <div style="position: absolute; left: var(--safe-x); right: var(--safe-x); top: 200px;">
+          <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;
+          ">On the Record</div>
+
+          <div data-ref="headline" style="
+            font-family: var(--font-display);
+            font-style: italic;
+            font-size: 120px;
+            line-height: 0.98;
+            margin-bottom: 64px;
+            opacity: 0;
+          ">What we believe.</div>
+
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 96px;">
+            <div data-ref="col1" style="
+              font-family: var(--font-body);
+              font-size: 28px;
+              line-height: 1.5;
+              font-weight: 400;
+              opacity: 0;
+            ">The next decade of AI infrastructure will be built around <em style="font-family: var(--font-display); font-style: italic;">long</em> runs — agents that work for hours, not seconds. The bottleneck will be everything around the model.</div>
+
+            <div data-ref="col2" style="
+              font-family: var(--font-body);
+              font-size: 22px;
+              line-height: 1.55;
+              color: var(--color-muted);
+              opacity: 0;
+            ">A workbench for long-running agents: memory, recovery, observability. Designed for research engineers at labs, founders shipping product, evaluators who need to know what their model just did and why.</div>
+          </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 col1 = host?.querySelector('[data-ref="col1"]') as HTMLElement;
+		const col2 = host?.querySelector('[data-ref="col2"]') 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 });
+
+		headline.animate(
+			[
+				{ opacity: 0, transform: "translateY(16px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 480, delay: 200 },
+		);
+
+		col1.animate(
+			[
+				{ opacity: 0, transform: "translateY(16px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 480, delay: 450 },
+		);
+
+		col2.animate(
+			[
+				{ opacity: 0, transform: "translateY(16px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 480, delay: 650 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

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

@@ -0,0 +1,113 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "editorial-mono-sample-cta",
+	advances: [2.0, 5.0],
+	voiceover:
+		"CTA cards in Editorial Mono. A centered italic headline with a red arrow pointing to the destination.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 56px;
+        overflow: hidden;
+      ">
+        <div data-ref="label" style="
+          font-family: var(--font-mono);
+          font-size: 14px;
+          letter-spacing: 0.16em;
+          text-transform: uppercase;
+          color: var(--color-muted);
+          opacity: 0;
+        ">Continued in Vol. 02</div>
+
+        <div data-ref="headline" style="
+          font-family: var(--font-display);
+          font-style: italic;
+          font-size: 100px;
+          line-height: 0.98;
+          text-align: center;
+          opacity: 0;
+        ">Read the brief.</div>
+
+        <div data-ref="cta" style="
+          display: flex;
+          align-items: center;
+          gap: 24px;
+          opacity: 0;
+        ">
+          <span style="font-family: var(--font-body); font-size: 36px; font-weight: 500;">example.com</span>
+          <span style="font-family: var(--font-display); font-style: italic; font-size: 60px; line-height: 1; color: var(--color-accent);">&rarr;</span>
+        </div>
+
+        <div data-ref="logo" style="
+          position: absolute;
+          bottom: var(--safe-y);
+          display: flex;
+          align-items: center;
+          gap: 14px;
+          opacity: 0;
+        ">
+          <div style="
+            width: 24px;
+            height: 24px;
+            border: 1.5px solid var(--color-fg);
+            position: relative;
+          "><div style="position: absolute; inset: 6px; background: var(--color-accent);"></div></div>
+          <span style="font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase;">Sample / 2026</span>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const label = host?.querySelector('[data-ref="label"]') as HTMLElement;
+		const headline = host?.querySelector('[data-ref="headline"]') as HTMLElement;
+		const cta = host?.querySelector('[data-ref="cta"]') as HTMLElement;
+		const logo = host?.querySelector('[data-ref="logo"]') 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 });
+
+		headline.animate(
+			[
+				{ opacity: 0, transform: "translateY(16px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 480, delay: 150 },
+		);
+
+		cta.animate(
+			[
+				{ opacity: 0, transform: "translateY(16px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 480, delay: 400 },
+		);
+
+		logo.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 480,
+			delay: 650,
+		});
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

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

@@ -0,0 +1,111 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "editorial-mono-sample-feature",
+	advances: [2.0, 5.0],
+	voiceover: "Feature cards in Editorial Mono. One feature per scene with generous negative space.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        overflow: hidden;
+      ">
+        <div style="position: absolute; left: var(--safe-x); top: 220px; right: var(--safe-x);">
+          <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: 64px;
+            opacity: 0;
+          ">Feature / 01 of 03</div>
+
+          <div style="display: grid; grid-template-columns: 180px 1fr; gap: 64px; align-items: start;">
+            <div data-ref="icon" style="
+              width: 140px;
+              height: 140px;
+              border: var(--rule-weight) solid var(--color-fg);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-family: var(--font-display);
+              font-size: 100px;
+              font-style: italic;
+              opacity: 0;
+            ">C</div>
+
+            <div>
+              <div data-ref="name" style="
+                font-family: var(--font-display);
+                font-style: italic;
+                font-size: 80px;
+                line-height: 0.98;
+                opacity: 0;
+              ">Checkpoint memory.</div>
+
+              <div data-ref="body" style="
+                font-family: var(--font-body);
+                font-size: 32px;
+                line-height: 1.4;
+                max-width: 1100px;
+                margin-top: 48px;
+                font-weight: 400;
+                opacity: 0;
+              ">Snapshots an agent's reasoning state at each tool boundary. When a plan goes stale, the agent rewinds to the last point its model of the world was correct.</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const label = host?.querySelector('[data-ref="label"]') as HTMLElement;
+		const icon = host?.querySelector('[data-ref="icon"]') as HTMLElement;
+		const name = host?.querySelector('[data-ref="name"]') as HTMLElement;
+		const body = host?.querySelector('[data-ref="body"]') 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 });
+
+		icon.animate(
+			[
+				{ opacity: 0, transform: "translateY(16px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 480, delay: 150 },
+		);
+
+		name.animate(
+			[
+				{ opacity: 0, transform: "translateY(16px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 480, delay: 250 },
+		);
+
+		body.animate(
+			[
+				{ opacity: 0, transform: "translateY(16px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 480, delay: 500 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

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

@@ -0,0 +1,97 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "editorial-mono-sample-grid",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Card grids in Editorial Mono. Three items separated by hairline rules, staggered entry.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        overflow: hidden;
+      ">
+        <div style="position: absolute; left: var(--safe-x); top: 220px; right: var(--safe-x);">
+          <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: 64px;
+            opacity: 0;
+          ">The Architecture</div>
+
+          <div data-ref="headline" style="
+            font-family: var(--font-display);
+            font-style: italic;
+            font-size: 100px;
+            line-height: 0.98;
+            margin-bottom: 96px;
+            opacity: 0;
+          ">Three primitives.</div>
+
+          <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--color-border);">
+            <div data-ref="card0" style="background: var(--color-bg); padding: 48px 56px 56px; min-height: 360px; opacity: 0;">
+              <div style="font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.16em; color: var(--color-accent); margin-bottom: 32px;">01</div>
+              <div style="font-family: var(--font-display); font-size: 64px; margin-bottom: 32px;">Memory</div>
+              <div style="font-family: var(--font-body); font-size: 24px; color: var(--color-muted); line-height: 1.4; max-width: 320px;">Persistent state across long sessions.</div>
+            </div>
+            <div data-ref="card1" style="background: var(--color-bg); padding: 48px 56px 56px; min-height: 360px; opacity: 0;">
+              <div style="font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.16em; color: var(--color-accent); margin-bottom: 32px;">02</div>
+              <div style="font-family: var(--font-display); font-size: 64px; margin-bottom: 32px;">Reasoning</div>
+              <div style="font-family: var(--font-body); font-size: 24px; color: var(--color-muted); line-height: 1.4; max-width: 320px;">Plans that adapt to fresh evidence.</div>
+            </div>
+            <div data-ref="card2" style="background: var(--color-bg); padding: 48px 56px 56px; min-height: 360px; opacity: 0;">
+              <div style="font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.16em; color: var(--color-accent); margin-bottom: 32px;">03</div>
+              <div style="font-family: var(--font-display); font-size: 64px; margin-bottom: 32px;">Recovery</div>
+              <div style="font-family: var(--font-body); font-size: 24px; color: var(--color-muted); line-height: 1.4; max-width: 320px;">Rewind to a last-known-good moment.</div>
+            </div>
+          </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 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 });
+
+		headline.animate(
+			[
+				{ opacity: 0, transform: "translateY(16px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 480, delay: 150 },
+		);
+
+		for (let i = 0; i < 3; i++) {
+			const card = host?.querySelector(`[data-ref="card${i}"]`) as HTMLElement;
+			card.animate(
+				[
+					{ opacity: 0, transform: "translateY(20px)" },
+					{ opacity: 1, transform: "translateY(0)" },
+				],
+				{ ...opts, duration: 480, delay: 450 + i * 180 },
+			);
+		}
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

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

@@ -0,0 +1,96 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "editorial-mono-sample-kinetic",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Kinetic statements in Editorial Mono. Words enter one at a time, the last marked in red.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        overflow: hidden;
+      ">
+        <div style="position: absolute; left: var(--safe-x); top: 260px; max-width: 1500px;">
+          <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;
+          ">Statement</div>
+
+          <div style="
+            font-family: var(--font-display);
+            font-style: italic;
+            font-size: 110px;
+            line-height: 1.0;
+            display: flex;
+            flex-wrap: wrap;
+            column-gap: 38px;
+            row-gap: 12px;
+          ">
+            <span data-ref="w0" style="opacity: 0;">Most</span>
+            <span data-ref="w1" style="opacity: 0;">agents</span>
+            <span data-ref="w2" style="opacity: 0;">fail</span>
+            <span data-ref="w3" style="opacity: 0;">because</span>
+            <span data-ref="w4" style="opacity: 0;">they</span>
+            <span data-ref="w5" style="opacity: 0; position: relative;">forget.
+              <span data-ref="underline" style="
+                position: absolute;
+                left: 0;
+                bottom: 18px;
+                height: 8px;
+                width: 0;
+                background: var(--color-accent);
+              "></span>
+            </span>
+          </div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const label = host?.querySelector('[data-ref="label"]') 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 });
+
+		for (let i = 0; i < 6; i++) {
+			const word = host?.querySelector(`[data-ref="w${i}"]`) as HTMLElement;
+			word.animate(
+				[
+					{ opacity: 0, transform: "translateY(28px)" },
+					{ opacity: 1, transform: "translateY(0)" },
+				],
+				{ ...opts, duration: 480, delay: 80 * i },
+			);
+		}
+
+		underline.animate([{ width: "0%" }, { width: "calc(100% - 14px)" }], {
+			duration: 480,
+			delay: 1000,
+			fill: "forwards",
+			easing: ease,
+		});
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

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

@@ -0,0 +1,101 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "editorial-mono-sample-section",
+	advances: [2.0, 4.0],
+	voiceover: "Section headers in Editorial Mono. Centered italic serif between two hairline rules.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 56px;
+        overflow: hidden;
+      ">
+        <div data-ref="label" style="
+          font-family: var(--font-mono);
+          font-size: 18px;
+          letter-spacing: 0.16em;
+          text-transform: uppercase;
+          color: var(--color-muted);
+          opacity: 0;
+        ">Chapter One</div>
+
+        <div data-ref="rule-top" style="
+          width: 240px;
+          height: 1px;
+          background: var(--color-border);
+          opacity: 0;
+        "></div>
+
+        <div data-ref="headline" style="
+          font-family: var(--font-display);
+          font-style: italic;
+          font-size: 140px;
+          line-height: 0.98;
+          text-align: center;
+          opacity: 0;
+        ">The Problem</div>
+
+        <div data-ref="rule-bottom" style="
+          width: 240px;
+          height: 1px;
+          background: var(--color-border);
+          opacity: 0;
+        "></div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const label = host?.querySelector('[data-ref="label"]') as HTMLElement;
+		const ruleTop = host?.querySelector('[data-ref="rule-top"]') as HTMLElement;
+		const headline = host?.querySelector('[data-ref="headline"]') as HTMLElement;
+		const ruleBottom = host?.querySelector('[data-ref="rule-bottom"]') 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 });
+
+		ruleTop.animate(
+			[
+				{ opacity: 0, transform: "translateY(8px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 480, delay: 150 },
+		);
+
+		headline.animate(
+			[
+				{ opacity: 0, transform: "translateY(16px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 480, delay: 300 },
+		);
+
+		ruleBottom.animate(
+			[
+				{ opacity: 0, transform: "translateY(8px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 480, delay: 550 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});