videowright 0.1.0

package/skill/assets/styles/swiss-console/sample/content.ts

@@ -0,0 +1,137 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "swiss-console-sample-content",
+	advances: [2.0, 5.0],
+	voiceover:
+		"Content cards in Swiss Console. Two-column layout with heading on the left and body paragraph on the right, divided by a vertical rule.",
+
+	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: 56px; height: 1px; background: var(--color-border);"></div>
+        <div style="position: absolute; left: var(--safe-x); right: var(--safe-x); bottom: 56px; height: 1px; background: var(--color-border);"></div>
+
+        <div data-ref="label" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 140px;
+          font-family: var(--font-mono);
+          font-size: 14px;
+          letter-spacing: 0.12em;
+          text-transform: uppercase;
+          color: var(--color-muted);
+          opacity: 0;
+        ">On the Record / 09</div>
+
+        <div style="position: absolute; left: var(--safe-x); right: var(--safe-x); top: 240px; display: grid; grid-template-columns: 500px 1px 1fr; gap: var(--space-lg);">
+          <div data-ref="heading" style="
+            font-family: var(--font-display);
+            font-size: 88px;
+            font-weight: 500;
+            line-height: 1.0;
+            opacity: 0;
+          ">What we believe<span style="color: var(--color-accent);">.</span></div>
+
+          <div style="background: var(--color-border);"></div>
+
+          <div>
+            <div data-ref="body-main" style="
+              font-family: var(--font-body);
+              font-size: 28px;
+              line-height: 1.5;
+              margin-bottom: 36px;
+              opacity: 0;
+            ">The next decade of AI infrastructure will be built around <span style="font-weight: 600;">long</span> runs — agents that work for hours, not seconds. The bottleneck will not be the model. It will be everything around the model.</div>
+
+            <div data-ref="body-secondary" style="
+              font-family: var(--font-body);
+              font-size: 22px;
+              line-height: 1.55;
+              color: var(--color-muted);
+              max-width: 720px;
+              opacity: 0;
+            ">A workbench for that world: memory, recovery, observability. Built for research engineers, founders shipping product, evaluators who need to know what their model just did and why.</div>
+
+            <div data-ref="attribution" style="margin-top: 48px; opacity: 0;">
+              <div style="height: 1px; background: var(--color-fg); margin-bottom: 16px; width: 400px;"></div>
+              <div style="
+                font-family: var(--font-mono);
+                font-size: 13px;
+                letter-spacing: 0.12em;
+                text-transform: uppercase;
+                color: var(--color-muted);
+              ">— Engineering team / May 2026</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const label = host?.querySelector('[data-ref="label"]') as HTMLElement;
+		const heading = host?.querySelector('[data-ref="heading"]') as HTMLElement;
+		const bodyMain = host?.querySelector('[data-ref="body-main"]') as HTMLElement;
+		const bodySecondary = host?.querySelector('[data-ref="body-secondary"]') as HTMLElement;
+		const attribution = host?.querySelector('[data-ref="attribution"]') as HTMLElement;
+
+		const ease = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		label.animate(
+			[
+				{ opacity: 0, transform: "translateX(-24px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360 },
+		);
+
+		heading.animate(
+			[
+				{ opacity: 0, transform: "translateX(-32px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360, delay: 60 },
+		);
+
+		bodyMain.animate(
+			[
+				{ opacity: 0, transform: "translateX(32px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360, delay: 180 },
+		);
+
+		bodySecondary.animate(
+			[
+				{ opacity: 0, transform: "translateX(32px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360, delay: 300 },
+		);
+
+		attribution.animate(
+			[
+				{ opacity: 0, transform: "translateY(24px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 360, delay: 420 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/swiss-console/sample/cta.ts

@@ -0,0 +1,109 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "swiss-console-sample-cta",
+	advances: [2.0, 4.0],
+	voiceover:
+		"CTA cards in Swiss Console. Micro-label top-left, large grotesk headline, mono URL bottom-right with a red arrow.",
+
+	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: 56px; height: 1px; background: var(--color-border);"></div>
+        <div style="position: absolute; left: var(--safe-x); right: var(--safe-x); bottom: 56px; height: 1px; background: var(--color-border);"></div>
+
+        <div data-ref="label" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 140px;
+          font-family: var(--font-mono);
+          font-size: 14px;
+          letter-spacing: 0.12em;
+          text-transform: uppercase;
+          color: var(--color-muted);
+          opacity: 0;
+        ">End / 10 of 10</div>
+
+        <div data-ref="headline" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 320px;
+          font-family: var(--font-display);
+          font-size: 200px;
+          font-weight: 600;
+          letter-spacing: -0.03em;
+          opacity: 0;
+        ">Read the spec<span style="color: var(--color-accent);">.</span></div>
+
+        <div data-ref="footer" style="
+          position: absolute;
+          left: var(--safe-x);
+          right: var(--safe-x);
+          bottom: 80px;
+          opacity: 0;
+        ">
+          <div style="height: 1px; background: var(--color-fg); margin-bottom: 24px;"></div>
+          <div style="display: flex; justify-content: space-between; align-items: flex-end;">
+            <div style="display: flex; align-items: center; gap: 14px;">
+              <div style="width: 28px; height: 28px; 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.12em; text-transform: uppercase; color: var(--color-fg);">Sample / 2026</span>
+            </div>
+            <div style="font-family: var(--font-mono); font-size: 56px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;">
+              example.run/spec <span style="color: var(--color-accent);">&rarr;</span>
+            </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 footer = host?.querySelector('[data-ref="footer"]') as HTMLElement;
+
+		const ease = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		label.animate(
+			[
+				{ opacity: 0, transform: "translateX(-24px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360 },
+		);
+
+		headline.animate(
+			[
+				{ opacity: 0, transform: "translateX(32px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360, delay: 60 },
+		);
+
+		footer.animate(
+			[
+				{ opacity: 0, transform: "translateY(24px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 360, delay: 180 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/swiss-console/sample/feature.ts

@@ -0,0 +1,163 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "swiss-console-sample-feature",
+	advances: [2.0, 5.0],
+	voiceover:
+		"Feature cards in Swiss Console. Three-column layout with icon, feature name, and description separated by hairline rules.",
+
+	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: 56px; height: 1px; background: var(--color-border);"></div>
+
+        <div data-ref="label" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 140px;
+          font-family: var(--font-mono);
+          font-size: 14px;
+          letter-spacing: 0.12em;
+          text-transform: uppercase;
+          color: var(--color-muted);
+          opacity: 0;
+        ">Feature 01 of 03</div>
+
+        <div style="position: absolute; left: var(--safe-x); top: 220px; right: var(--safe-x); display: grid; grid-template-columns: 300px 1px 1fr; gap: var(--space-lg);">
+          <div data-ref="icon-col" style="opacity: 0;">
+            <div style="
+              font-family: var(--font-mono);
+              font-size: 18px;
+              letter-spacing: 0.12em;
+              text-transform: uppercase;
+              color: var(--color-accent);
+              font-variant-numeric: tabular-nums;
+              margin-bottom: 16px;
+            ">F.01</div>
+            <div style="
+              width: 160px;
+              height: 160px;
+              border: 1.5px solid var(--color-fg);
+              display: grid;
+              place-items: center;
+              font-family: var(--font-mono);
+              font-size: 64px;
+              font-weight: 500;
+            ">C</div>
+            <div style="
+              font-family: var(--font-mono);
+              font-size: 13px;
+              letter-spacing: 0.12em;
+              text-transform: uppercase;
+              color: var(--color-muted);
+              margin-top: 20px;
+            ">Module: Memory</div>
+          </div>
+
+          <div style="background: var(--color-border);"></div>
+
+          <div>
+            <div data-ref="name" style="
+              font-family: var(--font-display);
+              font-size: 120px;
+              font-weight: 500;
+              line-height: 0.96;
+              margin-bottom: 32px;
+              opacity: 0;
+            ">Checkpoint memory<span style="color: var(--color-accent);">.</span></div>
+
+            <div data-ref="desc" style="
+              font-family: var(--font-body);
+              font-size: 28px;
+              line-height: 1.5;
+              max-width: 920px;
+              margin-bottom: 32px;
+              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 data-ref="stats" style="display: flex; gap: var(--space-lg); opacity: 0;">
+              <div>
+                <div style="font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted);">snapshots/min</div>
+                <div style="font-family: var(--font-display); font-size: 48px; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 8px;">120</div>
+              </div>
+              <div>
+                <div style="font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted);">avg restore</div>
+                <div style="font-family: var(--font-display); font-size: 48px; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 8px;">9 ms</div>
+              </div>
+              <div>
+                <div style="font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted);">retention</div>
+                <div style="font-family: var(--font-display); font-size: 48px; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 8px;">14 d</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const label = host?.querySelector('[data-ref="label"]') as HTMLElement;
+		const iconCol = host?.querySelector('[data-ref="icon-col"]') as HTMLElement;
+		const name = host?.querySelector('[data-ref="name"]') as HTMLElement;
+		const desc = host?.querySelector('[data-ref="desc"]') as HTMLElement;
+		const stats = host?.querySelector('[data-ref="stats"]') as HTMLElement;
+
+		const ease = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		label.animate(
+			[
+				{ opacity: 0, transform: "translateX(-24px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360 },
+		);
+
+		iconCol.animate(
+			[
+				{ opacity: 0, transform: "translateX(-24px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360, delay: 60 },
+		);
+
+		name.animate(
+			[
+				{ opacity: 0, transform: "translateX(32px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360, delay: 120 },
+		);
+
+		desc.animate(
+			[
+				{ opacity: 0, transform: "translateY(24px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 360, delay: 240 },
+		);
+
+		stats.animate(
+			[
+				{ opacity: 0, transform: "translateY(24px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 360, delay: 360 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/swiss-console/sample/grid.ts

@@ -0,0 +1,145 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "swiss-console-sample-grid",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Card grids in Swiss Console. Four dense columns with micro-labels, feature names, and mono API references, staggered in from below.",
+
+	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: 56px; height: 1px; background: var(--color-border);"></div>
+
+        <div data-ref="label" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 140px;
+          font-family: var(--font-mono);
+          font-size: 14px;
+          letter-spacing: 0.12em;
+          text-transform: uppercase;
+          color: var(--color-muted);
+          opacity: 0;
+        ">Architecture / 4 Primitives</div>
+
+        <div data-ref="headline" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 200px;
+          font-family: var(--font-display);
+          font-size: 88px;
+          font-weight: 500;
+          opacity: 0;
+        ">Four primitives, one runtime.</div>
+
+        <div style="position: absolute; left: var(--safe-x); right: var(--safe-x); top: 420px; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter);">
+          <div data-ref="card0" style="border: 1px solid var(--color-border); padding: 28px 24px 32px; min-height: 380px; position: relative; opacity: 0;">
+            <div style="font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 24px; font-variant-numeric: tabular-nums;">01 / 04</div>
+            <div style="font-family: var(--font-display); font-size: 44px; font-weight: 600; margin-bottom: 20px;">Memory</div>
+            <div style="font-family: var(--font-body); font-size: 18px; color: var(--color-muted); line-height: 1.45; margin-bottom: 28px;">Persistent state across long sessions.</div>
+            <div style="height: 1px; background: var(--color-border); margin-bottom: 12px;"></div>
+            <div style="font-family: var(--font-mono); font-size: 14px; color: var(--color-fg);">memory.snap()</div>
+          </div>
+
+          <div data-ref="card1" style="border: 1px solid var(--color-border); padding: 28px 24px 32px; min-height: 380px; position: relative; opacity: 0;">
+            <div style="font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 24px; font-variant-numeric: tabular-nums;">02 / 04</div>
+            <div style="font-family: var(--font-display); font-size: 44px; font-weight: 600; margin-bottom: 20px;">Reasoning</div>
+            <div style="font-family: var(--font-body); font-size: 18px; color: var(--color-muted); line-height: 1.45; margin-bottom: 28px;">Plans that adapt to fresh evidence.</div>
+            <div style="height: 1px; background: var(--color-border); margin-bottom: 12px;"></div>
+            <div style="font-family: var(--font-mono); font-size: 14px; color: var(--color-fg);">plan.revise()</div>
+          </div>
+
+          <div data-ref="card2" style="border: 1px solid var(--color-border); padding: 28px 24px 32px; min-height: 380px; position: relative; opacity: 0;">
+            <div style="font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 24px; font-variant-numeric: tabular-nums;">03 / 04</div>
+            <div style="font-family: var(--font-display); font-size: 44px; font-weight: 600; margin-bottom: 20px;">Recovery</div>
+            <div style="font-family: var(--font-body); font-size: 18px; color: var(--color-muted); line-height: 1.45; margin-bottom: 28px;">Rewind to a last-known-good moment.</div>
+            <div style="height: 1px; background: var(--color-border); margin-bottom: 12px;"></div>
+            <div style="font-family: var(--font-mono); font-size: 14px; color: var(--color-fg);">rewind.to(t)</div>
+          </div>
+
+          <div data-ref="card3" style="border: 1px solid var(--color-border); padding: 28px 24px 32px; min-height: 380px; position: relative; opacity: 0;">
+            <div style="font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 24px; font-variant-numeric: tabular-nums;">04 / 04</div>
+            <div style="font-family: var(--font-display); font-size: 44px; font-weight: 600; margin-bottom: 20px;">Eval</div>
+            <div style="font-family: var(--font-body); font-size: 18px; color: var(--color-muted); line-height: 1.45; margin-bottom: 28px;">Score runs against structured rubrics.</div>
+            <div style="height: 1px; background: var(--color-border); margin-bottom: 12px;"></div>
+            <div style="font-family: var(--font-mono); font-size: 14px; color: var(--color-fg);">eval.score(run)</div>
+          </div>
+        </div>
+
+        <div data-ref="footer" style="
+          position: absolute;
+          left: var(--safe-x);
+          right: var(--safe-x);
+          bottom: var(--safe-y);
+          display: grid;
+          grid-template-columns: repeat(var(--grid-cols), 1fr);
+          gap: var(--grid-gutter);
+          opacity: 0;
+        ">
+          <div style="grid-column: 1 / 5; height: 1px; background: var(--color-border); align-self: center;"></div>
+          <div style="grid-column: 5 / 13; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); font-variant-numeric: tabular-nums;">System: 04 of 12 cols active</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 footer = host?.querySelector('[data-ref="footer"]') as HTMLElement;
+
+		const ease = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		label.animate(
+			[
+				{ opacity: 0, transform: "translateX(-24px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360 },
+		);
+
+		headline.animate(
+			[
+				{ opacity: 0, transform: "translateX(32px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360, delay: 60 },
+		);
+
+		for (let i = 0; i < 4; i++) {
+			const card = host?.querySelector(`[data-ref="card${i}"]`) as HTMLElement;
+			card.animate(
+				[
+					{ opacity: 0, transform: "translateY(28px)" },
+					{ opacity: 1, transform: "translateY(0)" },
+				],
+				{ ...opts, duration: 360, delay: 240 + i * 60 },
+			);
+		}
+
+		footer.animate(
+			[
+				{ opacity: 0, transform: "translateY(24px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 360, delay: 500 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/swiss-console/sample/kinetic.ts

@@ -0,0 +1,117 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "swiss-console-sample-kinetic",
+	advances: [2.5, 4.5],
+	voiceover:
+		"Kinetic statements in Swiss Console. One sentence at large grotesk size, last word in red, sliding in from the right.",
+
+	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: 56px; height: 1px; background: var(--color-border);"></div>
+        <div style="position: absolute; left: var(--safe-x); right: var(--safe-x); bottom: 56px; height: 1px; background: var(--color-border);"></div>
+
+        <div data-ref="label" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 200px;
+          font-family: var(--font-mono);
+          font-size: 14px;
+          letter-spacing: 0.12em;
+          text-transform: uppercase;
+          color: var(--color-muted);
+          opacity: 0;
+        ">Statement 03</div>
+
+        <div style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 300px;
+          max-width: 1500px;
+          font-family: var(--font-display);
+          font-size: 96px;
+          font-weight: 500;
+          line-height: 1.05;
+          display: flex;
+          flex-wrap: wrap;
+          column-gap: 32px;
+          row-gap: 6px;
+        ">
+          <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; color: var(--color-accent);">forget.</span>
+        </div>
+
+        <div data-ref="source" style="
+          position: absolute;
+          left: var(--safe-x);
+          bottom: 120px;
+          opacity: 0;
+        ">
+          <div style="width: 400px; height: 1px; background: var(--color-fg); margin-bottom: 16px;"></div>
+          <div style="
+            font-family: var(--font-mono);
+            font-size: 13px;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+            color: var(--color-muted);
+          ">Source: Internal failure-mode taxonomy, Q1 2026</div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const label = host?.querySelector('[data-ref="label"]') as HTMLElement;
+		const source = host?.querySelector('[data-ref="source"]') as HTMLElement;
+
+		const ease = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		label.animate(
+			[
+				{ opacity: 0, transform: "translateX(-24px)" },
+				{ opacity: 1, transform: "translateX(0)" },
+			],
+			{ ...opts, duration: 360 },
+		);
+
+		for (let i = 0; i < 6; i++) {
+			const word = host?.querySelector(`[data-ref="w${i}"]`) as HTMLElement;
+			word.animate(
+				[
+					{ opacity: 0, transform: "translateX(32px)" },
+					{ opacity: 1, transform: "translateX(0)" },
+				],
+				{ ...opts, duration: 360, delay: 60 + i * 60 },
+			);
+		}
+
+		source.animate(
+			[
+				{ opacity: 0, transform: "translateY(24px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 360, delay: 600 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});