videowright 0.1.0

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

@@ -0,0 +1,192 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "iso-diagram-sample-content",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Content cards in Iso Diagram. A body paragraph with a key phrase underlined by a hand-drawn stroke, and a small isometric illustration to the side.",
+
+	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="heading" style="
+          position: absolute;
+          left: 140px;
+          top: 180px;
+          opacity: 0;
+        ">
+          <div style="font-family: var(--font-display); font-size: 130px;">What we believe.</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: 440px;
+          display: grid;
+          grid-template-columns: 1.4fr 1fr;
+          gap: 64px;
+        ">
+          <div data-ref="body" style="opacity: 0;">
+            <div style="font-family: var(--font-body); font-size: 34px; line-height: 1.5;">
+              The next decade of AI is not about
+              <span style="position: relative; display: inline-block;">bigger models
+                <svg style="position: absolute; left: 0; right: 0; bottom: -10px; width: 100%;" height="14">
+                  <path data-ref="phraseUnderline" d="M 4 8 q 60 -8 120 0 t 120 0" stroke="var(--color-accent)" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-dasharray="300" stroke-dashoffset="300" />
+                </svg>
+              </span>.
+            </div>
+            <div style="font-family: var(--font-body); font-size: 30px; line-height: 1.5; margin-top: 32px; color: var(--color-muted);">
+              It's about agents that can <span style="color: var(--color-accent);">run long enough to matter</span> — and the unglamorous infrastructure that lets them.
+            </div>
+          </div>
+
+          <div data-ref="illustration" style="opacity: 0;">
+            <svg width="100%" height="380" style="overflow: visible;">
+              <g transform="translate(120,80)">
+                <polygon data-ref="isoTop0" points="0,40 80,0 160,40 80,80" fill="var(--fill-blue)" opacity="0" />
+                <polygon data-ref="isoLeft0" points="0,40 80,80 80,120 0,80" fill="var(--fill-blue)" opacity="0" />
+                <polygon data-ref="isoRight0" points="80,80 160,40 160,80 80,120" fill="var(--fill-blue)" opacity="0" />
+                <path data-ref="isoOutline0" d="M0,40 L80,0 L160,40 L80,80 Z M0,40 L80,80 L80,120 L0,80 Z M80,80 L160,40 L160,80 L80,120" stroke="var(--color-fg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="700" stroke-dashoffset="700" />
+              </g>
+              <g transform="translate(200,120)">
+                <polygon data-ref="isoTop1" points="0,40 80,0 160,40 80,80" fill="var(--fill-yellow)" opacity="0" />
+                <polygon data-ref="isoLeft1" points="0,40 80,80 80,120 0,80" fill="var(--fill-yellow)" opacity="0" />
+                <polygon data-ref="isoRight1" points="80,80 160,40 160,80 80,120" fill="var(--fill-yellow)" opacity="0" />
+                <path data-ref="isoOutline1" d="M0,40 L80,0 L160,40 L80,80 Z M0,40 L80,80 L80,120 L0,80 Z M80,80 L160,40 L160,80 L80,120" stroke="var(--color-fg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="700" stroke-dashoffset="700" />
+              </g>
+              <g transform="translate(40,120)">
+                <polygon data-ref="isoTop2" points="0,40 80,0 160,40 80,80" fill="var(--fill-pink)" opacity="0" />
+                <polygon data-ref="isoLeft2" points="0,40 80,80 80,120 0,80" fill="var(--fill-pink)" opacity="0" />
+                <polygon data-ref="isoRight2" points="80,80 160,40 160,80 80,120" fill="var(--fill-pink)" opacity="0" />
+                <path data-ref="isoOutline2" d="M0,40 L80,0 L160,40 L80,80 Z M0,40 L80,80 L80,120 L0,80 Z M80,80 L160,40 L160,80 L80,120" stroke="var(--color-fg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="700" stroke-dashoffset="700" />
+              </g>
+              <path data-ref="leaderLine" d="M 280 260 Q 310 230 420 340" stroke="var(--color-accent)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-dasharray="250" stroke-dashoffset="250" />
+              <text data-ref="leaderText" x="430" y="345" font-family="var(--font-display)" font-size="40" fill="var(--color-accent)" transform="rotate(-3 430 345)" opacity="0">us, building.</text>
+            </svg>
+          </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 9 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 body = host?.querySelector('[data-ref="body"]') as HTMLElement;
+		const phraseUnderline = host?.querySelector('[data-ref="phraseUnderline"]') as SVGPathElement;
+		const illustration = host?.querySelector('[data-ref="illustration"]') as HTMLElement;
+		const leaderLine = host?.querySelector('[data-ref="leaderLine"]') as SVGPathElement;
+		const leaderText = host?.querySelector('[data-ref="leaderText"]') as SVGTextElement;
+		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,
+		});
+
+		body.animate(
+			[
+				{ opacity: 0, transform: "translateY(8px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 400, delay: 800 },
+		);
+
+		phraseUnderline.animate([{ strokeDashoffset: "300" }, { strokeDashoffset: "0" }], {
+			...opts,
+			duration: 500,
+			delay: 1300,
+		});
+
+		illustration.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 300, delay: 1400 });
+
+		// Draw iso cube outlines and flood fills
+		for (let i = 0; i < 3; i++) {
+			const outline = host?.querySelector(`[data-ref="isoOutline${i}"]`) as SVGPathElement;
+			const top = host?.querySelector(`[data-ref="isoTop${i}"]`) as SVGPolygonElement;
+			const left = host?.querySelector(`[data-ref="isoLeft${i}"]`) as SVGPolygonElement;
+			const right = host?.querySelector(`[data-ref="isoRight${i}"]`) as SVGPolygonElement;
+
+			const base = 1400 + i * 200;
+			outline.animate([{ strokeDashoffset: "700" }, { strokeDashoffset: "0" }], {
+				...opts,
+				duration: 500,
+				delay: base,
+			});
+			top.animate([{ opacity: 0 }, { opacity: 0.9 }], {
+				...opts,
+				duration: 400,
+				delay: base + 400,
+			});
+			left.animate([{ opacity: 0 }, { opacity: 0.65 }], {
+				...opts,
+				duration: 400,
+				delay: base + 450,
+			});
+			right.animate([{ opacity: 0 }, { opacity: 0.5 }], {
+				...opts,
+				duration: 400,
+				delay: base + 450,
+			});
+		}
+
+		// Leader line and label
+		leaderLine.animate([{ strokeDashoffset: "250" }, { strokeDashoffset: "0" }], {
+			...opts,
+			duration: 500,
+			delay: 2200,
+		});
+		leaderText.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 300, delay: 2600 });
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

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

@@ -0,0 +1,162 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "iso-diagram-sample-cta",
+	advances: [2.5, 5.0],
+	voiceover:
+		"CTA cards in Iso Diagram. A hand-drawn rectangle draws itself on screen, then the call-to-action text appears inside with a small isometric icon below.",
+
+	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="prompt" style="
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 240px;
+          text-align: center;
+          font-family: var(--font-display);
+          font-size: 56px;
+          color: var(--color-muted);
+          opacity: 0;
+          transform: rotate(-1deg);
+        ">Try it</div>
+
+        <div style="position: absolute; left: 50%; top: 380px; transform: translateX(-50%);">
+          <svg width="1100" height="280" style="overflow: visible;">
+            <path data-ref="ctaBox" d="M 20 40 L 1080 30 L 1060 240 L 30 230 Z" stroke="var(--color-accent)" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="3000" stroke-dashoffset="3000" />
+          </svg>
+          <div data-ref="ctaText" style="
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: var(--font-display);
+            font-size: 160px;
+            color: var(--color-accent);
+            opacity: 0;
+          ">beacon.run</div>
+        </div>
+
+        <svg data-ref="iconSvg" style="position: absolute; left: 50%; top: 720px; transform: translateX(-50%); overflow: visible; opacity: 0;" width="240" height="240">
+          <g transform="translate(40,40)">
+            <polygon data-ref="iconTop" points="0,35 70,0 140,35 70,70" fill="var(--fill-yellow)" opacity="0" />
+            <polygon data-ref="iconLeft" points="0,35 70,70 70,105 0,70" fill="var(--fill-yellow)" opacity="0" />
+            <polygon data-ref="iconRight" points="70,70 140,35 140,70 70,105" fill="var(--fill-yellow)" opacity="0" />
+            <path data-ref="iconOutline" d="M0,35 L70,0 L140,35 L70,70 Z M0,35 L70,70 L70,105 L0,70 Z M70,70 L140,35 L140,70 L70,105" stroke="var(--color-fg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="600" stroke-dashoffset="600" />
+          </g>
+        </svg>
+
+        <div data-ref="tagline" style="
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 100px;
+          text-align: center;
+          font-family: var(--font-display);
+          font-size: 40px;
+          color: var(--color-muted);
+          transform: rotate(-2deg);
+          opacity: 0;
+        ">~ beacon &middot; may 2026 ~</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 10 of 10 ~</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const prompt = host?.querySelector('[data-ref="prompt"]') as HTMLElement;
+		const ctaBox = host?.querySelector('[data-ref="ctaBox"]') as SVGPathElement;
+		const ctaText = host?.querySelector('[data-ref="ctaText"]') as HTMLElement;
+		const iconSvg = host?.querySelector('[data-ref="iconSvg"]') as SVGElement;
+		const iconOutline = host?.querySelector('[data-ref="iconOutline"]') as SVGPathElement;
+		const iconTop = host?.querySelector('[data-ref="iconTop"]') as SVGPolygonElement;
+		const iconLeft = host?.querySelector('[data-ref="iconLeft"]') as SVGPolygonElement;
+		const iconRight = host?.querySelector('[data-ref="iconRight"]') as SVGPolygonElement;
+		const tagline = host?.querySelector('[data-ref="tagline"]') 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 });
+
+		// Prompt swings in
+		prompt.animate(
+			[
+				{ opacity: 0, transform: "rotate(-3deg) translateY(12px)" },
+				{ opacity: 1, transform: "rotate(-1deg) translateY(0)" },
+			],
+			{ ...opts, duration: 300, delay: 200 },
+		);
+
+		// CTA box draws on
+		ctaBox.animate([{ strokeDashoffset: "3000" }, { strokeDashoffset: "0" }], {
+			...opts,
+			duration: 900,
+			delay: 500,
+		});
+
+		// CTA text appears inside
+		ctaText.animate(
+			[
+				{ opacity: 0, transform: "translateY(8px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 400, delay: 1200 },
+		);
+
+		// Small iso icon: outline draws then fills flood
+		iconSvg.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 200, delay: 1600 });
+		iconOutline.animate([{ strokeDashoffset: "600" }, { strokeDashoffset: "0" }], {
+			...opts,
+			duration: 500,
+			delay: 1600,
+		});
+		iconTop.animate([{ opacity: 0 }, { opacity: 0.95 }], { ...opts, duration: 400, delay: 2000 });
+		iconLeft.animate([{ opacity: 0 }, { opacity: 0.7 }], { ...opts, duration: 400, delay: 2050 });
+		iconRight.animate([{ opacity: 0 }, { opacity: 0.55 }], { ...opts, duration: 400, delay: 2050 });
+
+		// Tagline
+		tagline.animate(
+			[
+				{ opacity: 0, transform: "rotate(-4deg) translateY(8px)" },
+				{ opacity: 1, transform: "rotate(-2deg) translateY(0)" },
+			],
+			{ ...opts, duration: 350, delay: 2200 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

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

@@ -0,0 +1,205 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "iso-diagram-sample-feature",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Feature cards in Iso Diagram. An isometric stack of memory blocks on the left with outlines drawing on and pastel fills flooding in, feature details on the right.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        font-family: var(--font-body);
+        overflow: hidden;
+      ">
+        <div style="
+          position: absolute; inset: 0; pointer-events: none;
+          background-image: radial-gradient(circle, rgba(42,38,32,0.10) 1px, transparent 1.6px);
+          background-size: 32px 32px;
+        "></div>
+
+        <svg style="position: absolute; left: 140px; top: 200px; overflow: visible;" width="800" height="700">
+          ${[0, 1, 2, 3]
+						.map(
+							(i) => `
+            <g data-ref="block${i}" transform="translate(200,${500 - i * 90})">
+              <polygon data-ref="blockTop${i}" points="0,40 160,-40 320,40 160,120" fill="${i === 3 ? "var(--fill-pink)" : "var(--fill-blue)"}" opacity="0" />
+              <polygon data-ref="blockLeft${i}" points="0,40 160,120 160,180 0,100" fill="${i === 3 ? "var(--fill-pink)" : "var(--fill-blue)"}" opacity="0" />
+              <polygon data-ref="blockRight${i}" points="160,120 320,40 320,100 160,180" fill="${i === 3 ? "var(--fill-pink)" : "var(--fill-blue)"}" opacity="0" />
+              <path data-ref="blockOutlineA${i}" d="M0,40 L160,-40 L320,40 L160,120 Z" stroke="var(--color-fg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="750" stroke-dashoffset="750" />
+              <path data-ref="blockOutlineB${i}" d="M0,40 L160,120 L160,180 L0,100 Z" stroke="var(--color-fg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="750" stroke-dashoffset="750" />
+              <path data-ref="blockOutlineC${i}" d="M160,120 L320,40 L320,100 L160,180 Z" stroke="var(--color-fg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="750" stroke-dashoffset="750" />
+            </g>`,
+						)
+						.join("")}
+
+          <path data-ref="leader" d="M 600 180 Q 630 150 540 140" stroke="var(--color-accent)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200" />
+          <polygon data-ref="arrow" points="540,140 555,130 555,150" fill="var(--color-accent)" opacity="0" />
+          <text data-ref="leaderLabel" x="470" y="115" font-family="var(--font-display)" font-size="40" fill="var(--color-accent)" transform="rotate(-6 470 115)" opacity="0">rewind</text>
+        </svg>
+
+        <div data-ref="featureTag" style="
+          position: absolute;
+          right: var(--safe-x);
+          top: 180px;
+          width: 720px;
+          font-family: var(--font-mono);
+          font-size: 18px;
+          letter-spacing: 0.1em;
+          color: var(--color-muted);
+          opacity: 0;
+        ">FEATURE 01 / 03</div>
+
+        <div data-ref="featureName" style="
+          position: absolute;
+          right: var(--safe-x);
+          top: 240px;
+          width: 720px;
+          font-family: var(--font-display);
+          font-size: 120px;
+          color: var(--color-accent);
+          opacity: 0;
+        ">Checkpoint memory.</div>
+
+        <svg data-ref="nameUnderline" style="position: absolute; right: var(--safe-x); top: 400px;" width="520" height="14">
+          <path data-ref="nameUnderlinePath" 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 data-ref="featureDesc" style="
+          position: absolute;
+          right: var(--safe-x);
+          top: 440px;
+          width: 720px;
+          font-family: var(--font-body);
+          font-size: 28px;
+          line-height: 1.5;
+          opacity: 0;
+        ">Snapshots the agent's reasoning at each tool boundary. When a plan goes stale, the agent rewinds to the last correct checkpoint.</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 6 of 10 ~</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const counter = host?.querySelector('[data-ref="counter"]') as HTMLElement;
+		const featureTag = host?.querySelector('[data-ref="featureTag"]') as HTMLElement;
+		const featureName = host?.querySelector('[data-ref="featureName"]') as HTMLElement;
+		const nameUnderlinePath = host?.querySelector(
+			'[data-ref="nameUnderlinePath"]',
+		) as SVGPathElement;
+		const featureDesc = host?.querySelector('[data-ref="featureDesc"]') as HTMLElement;
+		const leader = host?.querySelector('[data-ref="leader"]') as SVGPathElement;
+		const arrow = host?.querySelector('[data-ref="arrow"]') as SVGPolygonElement;
+		const leaderLabel = host?.querySelector('[data-ref="leaderLabel"]') as SVGTextElement;
+
+		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 });
+
+		// Feature tag and name
+		featureTag.animate(
+			[
+				{ opacity: 0, transform: "rotate(-1deg) translateY(8px)" },
+				{ opacity: 1, transform: "rotate(0deg) translateY(0)" },
+			],
+			{ ...opts, duration: 300, delay: 400 },
+		);
+
+		featureName.animate(
+			[
+				{ opacity: 0, transform: "translateY(12px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 400, delay: 700 },
+		);
+
+		nameUnderlinePath.animate([{ strokeDashoffset: "600" }, { strokeDashoffset: "0" }], {
+			...opts,
+			duration: 500,
+			delay: 1300,
+		});
+
+		// Iso blocks: outlines draw on then fills flood
+		for (let i = 0; i < 4; i++) {
+			const outA = host?.querySelector(`[data-ref="blockOutlineA${i}"]`) as SVGPathElement;
+			const outB = host?.querySelector(`[data-ref="blockOutlineB${i}"]`) as SVGPathElement;
+			const outC = host?.querySelector(`[data-ref="blockOutlineC${i}"]`) as SVGPathElement;
+			const top = host?.querySelector(`[data-ref="blockTop${i}"]`) as SVGPolygonElement;
+			const left = host?.querySelector(`[data-ref="blockLeft${i}"]`) as SVGPolygonElement;
+			const right = host?.querySelector(`[data-ref="blockRight${i}"]`) as SVGPolygonElement;
+
+			const base = 500 + i * 200;
+			outA.animate([{ strokeDashoffset: "750" }, { strokeDashoffset: "0" }], {
+				...opts,
+				duration: 500,
+				delay: base,
+			});
+			outB.animate([{ strokeDashoffset: "750" }, { strokeDashoffset: "0" }], {
+				...opts,
+				duration: 500,
+				delay: base + 150,
+			});
+			outC.animate([{ strokeDashoffset: "750" }, { strokeDashoffset: "0" }], {
+				...opts,
+				duration: 500,
+				delay: base + 150,
+			});
+			top.animate([{ opacity: 0 }, { opacity: 0.9 }], {
+				...opts,
+				duration: 400,
+				delay: base + 400,
+			});
+			left.animate([{ opacity: 0 }, { opacity: 0.65 }], {
+				...opts,
+				duration: 400,
+				delay: base + 450,
+			});
+			right.animate([{ opacity: 0 }, { opacity: 0.5 }], {
+				...opts,
+				duration: 400,
+				delay: base + 450,
+			});
+		}
+
+		featureDesc.animate(
+			[
+				{ opacity: 0, transform: "translateY(8px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 350, delay: 1400 },
+		);
+
+		// Leader line and label
+		leader.animate([{ strokeDashoffset: "200" }, { strokeDashoffset: "0" }], {
+			...opts,
+			duration: 500,
+			delay: 2000,
+		});
+		arrow.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 200, delay: 2400 });
+		leaderLabel.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 200, delay: 2400 });
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});