videowright 0.1.0

package/skill/assets/styles/risograph/sample/kinetic.ts

@@ -0,0 +1,125 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "risograph-sample-kinetic",
+	advances: [2.0, 4.0],
+	voiceover:
+		"Kinetic statements in Risograph. Words stamp in one by one, the last word in pink at larger size with misregistration.",
+
+	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: url(&quot;data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>&quot;);
+          opacity: var(--grain-opacity); mix-blend-mode: multiply;
+        "></div>
+
+        <div style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 220px;
+          right: var(--safe-x);
+        ">
+          <div style="
+            font-family: var(--font-display);
+            font-size: 200px;
+            line-height: 0.95;
+            letter-spacing: -0.025em;
+            display: flex;
+            flex-wrap: wrap;
+            column-gap: 30px;
+            row-gap: 10px;
+          ">
+            <span data-ref="w0" style="opacity: 0; display: inline-block; transform: rotate(-2deg);">
+              <span style="position: relative; display: inline-block;">
+                <span style="position: absolute; left: var(--misreg); top: var(--misreg); color: var(--color-accent); pointer-events: none;" aria-hidden="true">most</span>
+                <span style="position: relative;">most</span>
+              </span>
+            </span>
+            <span data-ref="w1" style="opacity: 0; display: inline-block; transform: rotate(1deg);">
+              <span style="position: relative; display: inline-block;">
+                <span style="position: absolute; left: var(--misreg); top: var(--misreg); color: var(--color-accent); pointer-events: none;" aria-hidden="true">agents</span>
+                <span style="position: relative;">agents</span>
+              </span>
+            </span>
+            <span data-ref="w2" style="opacity: 0; display: inline-block; transform: rotate(-3deg);">
+              <span style="position: relative; display: inline-block;">
+                <span style="position: absolute; left: var(--misreg); top: var(--misreg); color: var(--color-accent); pointer-events: none;" aria-hidden="true">fail</span>
+                <span style="position: relative;">fail</span>
+              </span>
+            </span>
+            <span data-ref="w3" style="opacity: 0; display: inline-block; transform: rotate(1deg);">
+              <span style="position: relative; display: inline-block;">
+                <span style="position: absolute; left: var(--misreg); top: var(--misreg); color: var(--color-accent); pointer-events: none;" aria-hidden="true">because</span>
+                <span style="position: relative;">because</span>
+              </span>
+            </span>
+            <span data-ref="w4" style="opacity: 0; display: inline-block; transform: rotate(-1deg);">
+              <span style="position: relative; display: inline-block;">
+                <span style="position: absolute; left: var(--misreg); top: var(--misreg); color: var(--color-accent); pointer-events: none;" aria-hidden="true">they</span>
+                <span style="position: relative;">they</span>
+              </span>
+            </span>
+            <!-- Last word: pink-dominant variant — blue ghost / pink top (inverted from standard misreg) to emphasize the accent word -->
+            <span data-ref="w5" style="opacity: 0; display: inline-block; transform: rotate(2deg); font-size: 320px; color: var(--color-accent);">
+              <span style="position: relative; display: inline-block;">
+                <span style="position: absolute; left: var(--misreg); top: var(--misreg); color: var(--color-fg); pointer-events: none;" aria-hidden="true">forget.</span>
+                <span style="position: relative; color: var(--color-accent);">forget.</span>
+              </span>
+            </span>
+          </div>
+        </div>
+
+        <div data-ref="counter" style="
+          position: absolute;
+          right: var(--safe-x);
+          top: 60px;
+          font-family: var(--font-display);
+          font-size: 36px;
+          color: var(--color-accent);
+          transform: rotate(-3deg);
+          opacity: 0;
+        ">&#9733; 03/10 &#9733;</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const counter = host?.querySelector('[data-ref="counter"]') as HTMLElement;
+
+		const ease = "steps(6, end)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		counter.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 200 });
+
+		const rotations = [-2, 1, -3, 1, -1, 2];
+		for (let i = 0; i < 6; i++) {
+			const word = host?.querySelector(`[data-ref="w${i}"]`) as HTMLElement;
+			const rot = rotations[i];
+			word.animate(
+				[
+					{ opacity: 0, transform: `rotate(${rot}deg) scale(0.85)` },
+					{ opacity: 1, transform: `rotate(${rot}deg) scale(1)` },
+				],
+				{ ...opts, duration: 280, delay: 300 + i * 200 },
+			);
+		}
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/risograph/sample/section.ts

@@ -0,0 +1,130 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "risograph-sample-section",
+	advances: [2.0, 4.0],
+	voiceover:
+		"Section headers in Risograph. A big pink chapter number overlaps the section title, the whole thing tilted.",
+
+	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: url(&quot;data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>&quot;);
+          opacity: var(--grain-opacity); mix-blend-mode: multiply;
+        "></div>
+
+        <!-- Pink-dominant variant: blue ghost / pink top — the chapter number is the accent element per the recipe -->
+        <div data-ref="number" style="
+          position: absolute;
+          left: 80px;
+          top: 100px;
+          font-family: var(--font-display);
+          font-size: 760px;
+          line-height: 0.85;
+          transform: rotate(-4deg);
+          opacity: 0;
+        ">
+          <span style="position: relative; display: inline-block;">
+            <span style="position: absolute; left: var(--misreg); top: var(--misreg); color: var(--color-fg); pointer-events: none;" aria-hidden="true">02</span>
+            <span style="position: relative; color: var(--color-accent);">02</span>
+          </span>
+        </div>
+
+        <div data-ref="title" style="
+          position: absolute;
+          left: 700px;
+          top: 560px;
+          font-family: var(--font-display);
+          font-size: 200px;
+          line-height: 0.9;
+          letter-spacing: -0.025em;
+          transform: rotate(-2deg);
+          opacity: 0;
+        ">
+          <span style="position: relative; display: inline-block;">
+            <span style="position: absolute; left: var(--misreg); top: var(--misreg); color: var(--color-accent); pointer-events: none;" aria-hidden="true">the architecture</span>
+            <span style="position: relative; color: var(--color-fg);">the architecture</span>
+          </span>
+        </div>
+
+        <div data-ref="subtitle" style="
+          position: absolute;
+          left: 720px;
+          top: 820px;
+          font-family: var(--font-body);
+          font-size: 30px;
+          font-weight: 600;
+          text-transform: uppercase;
+          letter-spacing: 0.1em;
+          transform: rotate(1deg);
+          opacity: 0;
+        ">memory &#183; reasoning &#183; recovery</div>
+
+        <div data-ref="counter" style="
+          position: absolute;
+          right: var(--safe-x);
+          top: 60px;
+          font-family: var(--font-display);
+          font-size: 36px;
+          color: var(--color-accent);
+          transform: rotate(-3deg);
+          opacity: 0;
+        ">&#9733; 02/10 &#9733;</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const number = host?.querySelector('[data-ref="number"]') as HTMLElement;
+		const title = host?.querySelector('[data-ref="title"]') as HTMLElement;
+		const subtitle = host?.querySelector('[data-ref="subtitle"]') as HTMLElement;
+		const counter = host?.querySelector('[data-ref="counter"]') as HTMLElement;
+
+		const ease = "steps(6, end)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		counter.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 200 });
+
+		number.animate(
+			[
+				{ opacity: 0, transform: "rotate(-4deg) scale(0.85)" },
+				{ opacity: 1, transform: "rotate(-4deg) scale(1)" },
+			],
+			{ ...opts, duration: 300, delay: 300 },
+		);
+
+		title.animate(
+			[
+				{ opacity: 0, transform: "rotate(-2deg) scale(0.9)" },
+				{ opacity: 1, transform: "rotate(-2deg) scale(1)" },
+			],
+			{ ...opts, duration: 300, delay: 900 },
+		);
+
+		subtitle.animate(
+			[
+				{ opacity: 0, transform: "rotate(1deg)" },
+				{ opacity: 1, transform: "rotate(1deg)" },
+			],
+			{ ...opts, duration: 280, delay: 1400 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/risograph/sample/stat.ts

@@ -0,0 +1,145 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "risograph-sample-stat",
+	advances: [2.0, 4.0],
+	voiceover:
+		"Stat cards in Risograph. A huge pink number with misregistration, caption underneath in a slim column.",
+
+	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: url(&quot;data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>&quot;);
+          opacity: var(--grain-opacity); mix-blend-mode: multiply;
+        "></div>
+
+        <div data-ref="label" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 120px;
+          font-family: var(--font-mono);
+          font-size: 22px;
+          letter-spacing: 0.1em;
+          font-weight: 700;
+          text-transform: uppercase;
+          opacity: 0;
+        ">&#9733; failure data &#183; Q1 2026</div>
+
+        <svg data-ref="blob" style="position: absolute; left: 140px; top: 240px; overflow: visible; opacity: 0;" width="1300" height="700">
+          <ellipse cx="650" cy="350" rx="640" ry="310" fill="var(--color-accent)" />
+        </svg>
+
+        <div data-ref="number" style="
+          position: absolute;
+          left: 280px;
+          top: 360px;
+          font-family: var(--font-display);
+          font-size: 560px;
+          line-height: 0.85;
+          letter-spacing: -0.025em;
+          color: var(--color-bg);
+          transform: rotate(-3deg);
+          opacity: 0;
+        ">
+          <span style="position: relative; display: inline-block;">
+            <span style="position: absolute; left: var(--misreg); top: var(--misreg); color: var(--color-fg); pointer-events: none; opacity: 0.4;" aria-hidden="true"><span data-ref="digitGhost">0</span>%</span>
+            <span style="position: relative; color: var(--color-bg);"><span data-ref="digits">0</span>%</span>
+          </span>
+        </div>
+
+        <div data-ref="caption" style="
+          position: absolute;
+          left: 140px;
+          bottom: 140px;
+          width: 1300px;
+          opacity: 0;
+        ">
+          <div style="font-size: 40px; font-weight: 600; line-height: 1.3;">
+            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: 16px; margin-top: 14px; letter-spacing: 0.1em;">BEACON.LOGS &#183; N=12,840</div>
+        </div>
+
+        <div data-ref="counter" style="
+          position: absolute;
+          right: var(--safe-x);
+          top: 60px;
+          font-family: var(--font-display);
+          font-size: 36px;
+          color: var(--color-accent);
+          transform: rotate(-3deg);
+          opacity: 0;
+        ">&#9733; 05/10 &#9733;</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const label = host?.querySelector('[data-ref="label"]') as HTMLElement;
+		const blob = host?.querySelector('[data-ref="blob"]') as SVGElement;
+		const number = host?.querySelector('[data-ref="number"]') as HTMLElement;
+		const digits = host?.querySelector('[data-ref="digits"]') as HTMLElement;
+		const digitGhost = host?.querySelector('[data-ref="digitGhost"]') as HTMLElement;
+		const caption = host?.querySelector('[data-ref="caption"]') as HTMLElement;
+		const counter = host?.querySelector('[data-ref="counter"]') as HTMLElement;
+
+		const ease = "steps(6, end)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		counter.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 200 });
+
+		label.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 280, delay: 200 });
+
+		blob.animate(
+			[
+				{ opacity: 0, transform: "rotate(4deg) scale(0.85)" },
+				{ opacity: 1, transform: "rotate(4deg) scale(1)" },
+			],
+			{ ...opts, duration: 300, delay: 400 },
+		);
+
+		number.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 300, delay: 700 });
+
+		// Count up from 0 to 84 in stepped increments
+		const target = 84;
+		const steps = 14;
+		const stepDuration = 50;
+		await ctx.hold(800);
+		for (let i = 1; i <= steps; i++) {
+			const progress = i / steps;
+			const eased = 1 - (1 - progress) ** 3;
+			const val = String(Math.round(eased * target));
+			digits.textContent = val;
+			digitGhost.textContent = val;
+			await ctx.hold(stepDuration);
+		}
+		digits.textContent = String(target);
+		digitGhost.textContent = String(target);
+
+		caption.animate(
+			[
+				{ opacity: 0, transform: "rotate(-1deg)" },
+				{ opacity: 1, transform: "rotate(-1deg)" },
+			],
+			{ ...opts, duration: 280 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/risograph/sample/title.ts

@@ -0,0 +1,132 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "risograph-sample-title",
+	advances: [2.0, 4.0],
+	voiceover:
+		"Title cards in Risograph. Huge misregistered display type stamps in on warm paper, a pink star punches 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: url(&quot;data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>&quot;);
+          opacity: var(--grain-opacity); mix-blend-mode: multiply;
+        "></div>
+
+        <svg data-ref="star" style="position: absolute; left: var(--safe-x); top: 140px; opacity: 0;" width="160" height="160">
+          <polygon points="80,0 100,60 160,60 110,100 130,160 80,124 30,160 50,100 0,60 60,60" fill="var(--color-accent)" />
+        </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;
+          font-weight: 600;
+          opacity: 0;
+        ">BEACON &#183; LONG-RUNNING AGENTS</div>
+
+        <div data-ref="title" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 380px;
+          font-family: var(--font-display);
+          font-size: 340px;
+          line-height: 0.9;
+          letter-spacing: -0.025em;
+          opacity: 0;
+        ">
+          <span style="position: relative; display: inline-block;">
+            <span style="position: absolute; left: var(--misreg); top: var(--misreg); color: var(--color-accent); pointer-events: none;" aria-hidden="true">BEACON.</span>
+            <span style="position: relative; color: var(--color-fg);">BEACON.</span>
+          </span>
+        </div>
+
+        <div data-ref="subtitle" style="
+          position: absolute;
+          left: 280px;
+          top: 760px;
+          font-family: var(--font-display);
+          font-size: 92px;
+          color: var(--color-accent);
+          transform: rotate(-2deg);
+          opacity: 0;
+        ">agents that don't forget.</div>
+
+        <div data-ref="counter" style="
+          position: absolute;
+          right: var(--safe-x);
+          top: 60px;
+          font-family: var(--font-display);
+          font-size: 36px;
+          color: var(--color-accent);
+          transform: rotate(-3deg);
+          opacity: 0;
+        ">&#9733; 01/10 &#9733;</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const star = host?.querySelector('[data-ref="star"]') as SVGElement;
+		const label = host?.querySelector('[data-ref="label"]') as HTMLElement;
+		const title = host?.querySelector('[data-ref="title"]') as HTMLElement;
+		const subtitle = host?.querySelector('[data-ref="subtitle"]') as HTMLElement;
+		const counter = host?.querySelector('[data-ref="counter"]') as HTMLElement;
+
+		const ease = "steps(6, end)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		counter.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 200 });
+
+		star.animate(
+			[
+				{ opacity: 0, transform: "rotate(-15deg) scale(0.85)" },
+				{ opacity: 1, transform: "rotate(-15deg) scale(1)" },
+			],
+			{ ...opts, duration: 280, delay: 200 },
+		);
+
+		label.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 280,
+			delay: 500,
+		});
+
+		title.animate(
+			[
+				{ opacity: 0, transform: "scale(0.9)" },
+				{ opacity: 1, transform: "scale(1)" },
+			],
+			{ ...opts, duration: 320, delay: 800 },
+		);
+
+		subtitle.animate(
+			[
+				{ opacity: 0, transform: "rotate(-2deg) scale(0.9)" },
+				{ opacity: 1, transform: "rotate(-2deg) scale(1)" },
+			],
+			{ ...opts, duration: 280, delay: 1400 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/risograph/sample/ui-showcase.ts

@@ -0,0 +1,147 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "risograph-sample-ui-showcase",
+	advances: [2.0, 4.0],
+	voiceover:
+		"UI showcases in Risograph. The product interface redrawn flat in two colors with solid fills and slight misregistration.",
+
+	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: url(&quot;data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>&quot;);
+          opacity: var(--grain-opacity); mix-blend-mode: multiply;
+        "></div>
+
+        <div data-ref="headline" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 100px;
+          font-family: var(--font-display);
+          font-size: 110px;
+          line-height: 0.9;
+          letter-spacing: -0.025em;
+          transform: rotate(-2deg);
+          opacity: 0;
+        ">
+          <span style="position: relative; display: inline-block;">
+            <span style="position: absolute; left: var(--misreg); top: var(--misreg); color: var(--color-accent); pointer-events: none;" aria-hidden="true">the console.</span>
+            <span style="position: relative;">the console.</span>
+          </span>
+        </div>
+
+        <div data-ref="ui" style="
+          position: absolute;
+          left: var(--safe-x);
+          top: 320px;
+          right: var(--safe-x);
+          height: 700px;
+          background: var(--color-fg);
+          color: var(--color-bg);
+          transform: rotate(-0.5deg);
+          opacity: 0;
+        ">
+          <div style="position: absolute; inset: 0; left: 4px; top: 4px; background: var(--color-accent); mix-blend-mode: multiply; opacity: 0.6;"></div>
+
+          <div style="position: relative; display: grid; grid-template-columns: 220px 1fr 260px; height: 100%;">
+            <div style="padding: 24px; border-right: 3px solid var(--color-bg);">
+              <div style="font-family: var(--font-display); font-size: 28px; color: var(--color-accent); margin-bottom: 24px;">BEACON</div>
+              <div style="padding: 10px 12px; font-size: 18px; font-weight: 700;">&#9733; runs</div>
+              <div style="padding: 10px 12px; font-size: 18px; font-weight: 700; background: var(--color-accent); color: var(--color-fg);">&#9733; memory</div>
+              <div style="padding: 10px 12px; font-size: 18px; font-weight: 700;">&#9733; plans</div>
+              <div style="padding: 10px 12px; font-size: 18px; font-weight: 700;">&#9733; tools</div>
+              <div style="padding: 10px 12px; font-size: 18px; font-weight: 700;">&#9733; traces</div>
+              <div style="padding: 10px 12px; font-size: 18px; font-weight: 700;">&#9733; evals</div>
+            </div>
+
+            <div style="padding: 28px;">
+              <div style="font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.2em; font-weight: 700; margin-bottom: 22px;">TIMELINE &#183; 41AC</div>
+              <svg width="100%" height="120">
+                <line x1="20" y1="60" x2="98%" y2="60" stroke="var(--color-bg)" stroke-width="3" />
+                <circle cx="8%" cy="60" r="10" fill="var(--color-bg)" />
+                <circle cx="22%" cy="60" r="10" fill="var(--color-bg)" />
+                <circle cx="36%" cy="60" r="10" fill="var(--color-bg)" />
+                <circle cx="50%" cy="60" r="10" fill="var(--color-bg)" />
+                <circle cx="64%" cy="60" r="10" fill="var(--color-bg)" />
+                <circle cx="78%" cy="60" r="16" fill="var(--color-accent)" />
+                <circle cx="92%" cy="60" r="10" fill="var(--color-bg)" />
+              </svg>
+              <div style="font-family: var(--font-display); font-size: 40px; color: var(--color-accent); margin-top: 16px;">&#9733; active: snap_006</div>
+              <div style="font-family: var(--font-mono); font-size: 16px; margin-top: 16px; line-height: 1.7; font-weight: 600;">
+                <div>[t05] tool.search &#8594; 12 results</div>
+                <div style="color: var(--color-accent);">[t06] plan.revise &#8594; step 4 dropped</div>
+                <div>[t07] memory.snap &#8594; ok</div>
+              </div>
+            </div>
+
+            <div style="padding: 24px; border-left: 3px solid var(--color-bg);">
+              <div style="font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.2em; font-weight: 700; margin-bottom: 16px;">MEMORY</div>
+              <div style="font-family: var(--font-mono); font-size: 13px; padding: 6px 0; display: flex; justify-content: space-between; font-weight: 700;"><span>snap_000</span><span>0.0s</span></div>
+              <div style="font-family: var(--font-mono); font-size: 13px; padding: 6px 0; display: flex; justify-content: space-between; font-weight: 700;"><span>snap_001</span><span>0.4s</span></div>
+              <div style="font-family: var(--font-mono); font-size: 13px; padding: 6px 0; display: flex; justify-content: space-between; font-weight: 700;"><span>snap_002</span><span>0.8s</span></div>
+              <div style="font-family: var(--font-mono); font-size: 13px; padding: 6px 0; display: flex; justify-content: space-between; font-weight: 700;"><span>snap_003</span><span>1.2s</span></div>
+              <div style="font-family: var(--font-mono); font-size: 13px; padding: 6px 0; display: flex; justify-content: space-between; font-weight: 700;"><span>snap_004</span><span>1.6s</span></div>
+              <div style="font-family: var(--font-mono); font-size: 13px; padding: 6px 0; display: flex; justify-content: space-between; font-weight: 700; color: var(--color-accent);"><span>snap_005</span><span>&#9679; now</span></div>
+            </div>
+          </div>
+        </div>
+
+        <div data-ref="counter" style="
+          position: absolute;
+          right: var(--safe-x);
+          top: 60px;
+          font-family: var(--font-display);
+          font-size: 36px;
+          color: var(--color-accent);
+          transform: rotate(-3deg);
+          opacity: 0;
+        ">&#9733; 08/10 &#9733;</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const headline = host?.querySelector('[data-ref="headline"]') as HTMLElement;
+		const ui = host?.querySelector('[data-ref="ui"]') as HTMLElement;
+		const counter = host?.querySelector('[data-ref="counter"]') as HTMLElement;
+
+		const ease = "steps(6, end)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		counter.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 200 });
+
+		headline.animate(
+			[
+				{ opacity: 0, transform: "rotate(-2deg) scale(0.9)" },
+				{ opacity: 1, transform: "rotate(-2deg) scale(1)" },
+			],
+			{ ...opts, duration: 300, delay: 200 },
+		);
+
+		ui.animate(
+			[
+				{ opacity: 0, transform: "rotate(-0.5deg) scale(0.92)" },
+				{ opacity: 1, transform: "rotate(-0.5deg) scale(1)" },
+			],
+			{ ...opts, duration: 350, delay: 600 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});