videowright 0.1.0

package/skill/assets/styles/motion-engineering/sample/bullet.ts

@@ -0,0 +1,176 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+function cornerTicks() {
+	return `
+    <div style="position: absolute; left: -1px; top: -1px; width: 24px; height: 24px;">
+      <div style="position: absolute; left: 0; top: 0; width: 24px; height: 1.5px; background: var(--color-accent);"></div>
+      <div style="position: absolute; left: 0; top: 0; width: 1.5px; height: 24px; background: var(--color-accent);"></div>
+    </div>
+    <div style="position: absolute; right: -1px; top: -1px; width: 24px; height: 24px;">
+      <div style="position: absolute; right: 0; top: 0; width: 24px; height: 1.5px; background: var(--color-accent);"></div>
+      <div style="position: absolute; right: 0; top: 0; width: 1.5px; height: 24px; background: var(--color-accent);"></div>
+    </div>
+    <div style="position: absolute; left: -1px; bottom: -1px; width: 24px; height: 24px;">
+      <div style="position: absolute; left: 0; bottom: 0; width: 24px; height: 1.5px; background: var(--color-accent);"></div>
+      <div style="position: absolute; left: 0; bottom: 0; width: 1.5px; height: 24px; background: var(--color-accent);"></div>
+    </div>
+    <div style="position: absolute; right: -1px; bottom: -1px; width: 24px; height: 24px;">
+      <div style="position: absolute; right: 0; bottom: 0; width: 24px; height: 1.5px; background: var(--color-accent);"></div>
+      <div style="position: absolute; right: 0; bottom: 0; width: 1.5px; height: 24px; background: var(--color-accent);"></div>
+    </div>`;
+}
+
+export default defineSegment({
+	id: "motion-engineering-sample-bullet",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Bullet reveals in Motion Engineering. Items appear row by row with mono prefixes, hairline separators, and cyan measurement deltas on the right.",
+
+	mount(el) {
+		host = el;
+
+		const items = [
+			{ n: "ITEM 01", text: "Context windows decay.", delta: "Δ = 12.4ms" },
+			{ n: "ITEM 02", text: "Tool selection drifts.", delta: "Δ = 09.1ms" },
+			{ n: "ITEM 03", text: "Plans go stale.", delta: "Δ = 22.6ms" },
+			{ n: "ITEM 04", text: "Errors compound.", delta: "Δ = 31.0ms" },
+			{ n: "ITEM 05", text: "Recovery requires restart.", delta: "Δ = 88.4ms" },
+		];
+
+		const rowHtml = items
+			.map(
+				(item, i) => `
+        <div data-ref="row${i}" style="
+          display: grid;
+          grid-template-columns: 140px 1fr 200px;
+          align-items: baseline;
+          padding: 22px 0;
+          border-top: 1px solid var(--color-border);
+          opacity: 0;
+        ">
+          <span style="
+            font-family: var(--font-mono);
+            font-size: 13px;
+            letter-spacing: 0.2em;
+            color: var(--color-accent);
+          ">${item.n}</span>
+          <span style="font-size: 40px;">${item.text}</span>
+          <span style="
+            font-family: var(--font-mono);
+            font-size: 14px;
+            text-align: right;
+            color: var(--cyan);
+            font-variant-numeric: tabular-nums;
+          ">${item.delta}</span>
+        </div>`,
+			)
+			.join("");
+
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        font-family: var(--font-body);
+        overflow: hidden;
+      ">
+        <div style="
+          position: absolute; inset: 0; pointer-events: none;
+          background:
+            linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 64px 64px,
+            linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 64px 64px;
+        "></div>
+
+        <div data-ref="frame" style="
+          position: absolute;
+          inset: var(--safe-y) var(--safe-x);
+          border: 1px solid var(--color-border);
+          opacity: 0;
+        ">
+          ${cornerTicks()}
+
+          <div data-ref="header" style="position: absolute; left: 80px; top: 100px; opacity: 0;">
+            <div style="
+              font-family: var(--font-mono);
+              font-size: 14px;
+              letter-spacing: 0.25em;
+              color: var(--color-accent);
+              margin-bottom: 18px;
+            ">&#9698; 4.1 KNOWN FAILURE MODES (n=5)</div>
+            <div style="
+              font-family: var(--font-display);
+              font-weight: 500;
+              font-size: 84px;
+              line-height: 1.0;
+            ">Where agents break.</div>
+          </div>
+
+          <div style="position: absolute; left: 80px; right: 80px; top: 360px;">
+            ${rowHtml}
+          </div>
+        </div>
+
+        <div data-ref="coord" style="
+          position: absolute; left: var(--safe-x); right: var(--safe-x); bottom: 28px;
+          display: flex; gap: 32px;
+          font-family: var(--font-mono);
+          font-size: 12px;
+          color: var(--color-muted);
+          letter-spacing: 0.1em;
+          opacity: 0;
+        ">
+          <span>X 1240.00</span><span>Y 360.00</span><span>T 0.00s</span>
+          <span style="margin-left: auto;">UNIT: PX &middot; SCALE 1:1</span>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const frame = host?.querySelector('[data-ref="frame"]') as HTMLElement;
+		const header = host?.querySelector('[data-ref="header"]') as HTMLElement;
+		const coord = host?.querySelector('[data-ref="coord"]') as HTMLElement;
+
+		const ease = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		frame.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 360,
+		});
+
+		coord.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 300,
+			delay: 100,
+		});
+
+		header.animate(
+			[
+				{ opacity: 0, transform: "translateY(8px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 360, delay: 200 },
+		);
+
+		for (let i = 0; i < 5; i++) {
+			const row = host?.querySelector(`[data-ref="row${i}"]`) as HTMLElement;
+			row.animate(
+				[
+					{ opacity: 0, transform: "translateY(10px)" },
+					{ opacity: 1, transform: "translateY(0)" },
+				],
+				{ ...opts, duration: 300, delay: 600 + i * 180 },
+			);
+		}
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/motion-engineering/sample/content.ts

@@ -0,0 +1,228 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+function cornerTicks() {
+	return `
+    <div style="position: absolute; left: -1px; top: -1px; width: 24px; height: 24px;">
+      <div style="position: absolute; left: 0; top: 0; width: 24px; height: 1.5px; background: var(--color-accent);"></div>
+      <div style="position: absolute; left: 0; top: 0; width: 1.5px; height: 24px; background: var(--color-accent);"></div>
+    </div>
+    <div style="position: absolute; right: -1px; top: -1px; width: 24px; height: 24px;">
+      <div style="position: absolute; right: 0; top: 0; width: 24px; height: 1.5px; background: var(--color-accent);"></div>
+      <div style="position: absolute; right: 0; top: 0; width: 1.5px; height: 24px; background: var(--color-accent);"></div>
+    </div>
+    <div style="position: absolute; left: -1px; bottom: -1px; width: 24px; height: 24px;">
+      <div style="position: absolute; left: 0; bottom: 0; width: 24px; height: 1.5px; background: var(--color-accent);"></div>
+      <div style="position: absolute; left: 0; bottom: 0; width: 1.5px; height: 24px; background: var(--color-accent);"></div>
+    </div>
+    <div style="position: absolute; right: -1px; bottom: -1px; width: 24px; height: 24px;">
+      <div style="position: absolute; right: 0; bottom: 0; width: 24px; height: 1.5px; background: var(--color-accent);"></div>
+      <div style="position: absolute; right: 0; bottom: 0; width: 1.5px; height: 24px; background: var(--color-accent);"></div>
+    </div>`;
+}
+
+export default defineSegment({
+	id: "motion-engineering-sample-content",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Content cards in Motion Engineering. A title with a crosshair marker, body in two columns, and an inline annotation with a leader line.",
+
+	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:
+            linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 64px 64px,
+            linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 64px 64px;
+        "></div>
+
+        <div data-ref="frame" style="
+          position: absolute;
+          inset: var(--safe-y) var(--safe-x);
+          border: 1px solid var(--color-border);
+          opacity: 0;
+        ">
+          ${cornerTicks()}
+
+          <div data-ref="tag" style="
+            position: absolute; left: 80px; top: 100px;
+            font-family: var(--font-mono);
+            font-size: 13px;
+            letter-spacing: 0.25em;
+            color: var(--color-accent);
+            opacity: 0;
+          ">&#9698; MEMO &middot; 2026.05 &middot; BEACON.TEAM</div>
+
+          <div data-ref="heading" style="
+            position: absolute; left: 80px; top: 160px;
+            font-family: var(--font-display);
+            font-weight: 500;
+            font-size: 84px;
+            margin-bottom: 56px;
+            opacity: 0;
+          ">What we believe.</div>
+
+          <svg data-ref="chMark" style="position: absolute; left: 52px; top: 180px; overflow: visible;" width="20" height="20">
+            <line x1="0" y1="10" x2="20" y2="10" stroke="var(--color-accent)" stroke-width="1.5" style="transform-origin: 10px 10px; transform: scaleX(0);" />
+            <line x1="10" y1="0" x2="10" y2="20" stroke="var(--color-accent)" stroke-width="1.5" style="transform-origin: 10px 10px; transform: scaleY(0);" />
+          </svg>
+
+          <div style="
+            position: absolute; left: 80px; right: 80px; top: 380px;
+            display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
+          ">
+            <div data-ref="colA" style="opacity: 0;">
+              <div style="font-size: 30px; line-height: 1.45; margin-bottom: 24px;">
+                The next decade of AI infrastructure will be built around <span style="color: var(--color-accent);">long runs</span> &mdash; agents that work for hours, not seconds.
+              </div>
+              <div style="
+                font-family: var(--font-mono);
+                font-size: 12px;
+                letter-spacing: 0.25em;
+                padding-top: 16px;
+                border-top: 1px solid var(--color-border);
+                color: var(--color-muted);
+              ">&mdash;&mdash; THESIS A &mdash;&mdash;</div>
+            </div>
+            <div data-ref="colB" style="opacity: 0; position: relative;">
+              <div style="font-size: 26px; line-height: 1.5; color: var(--color-muted); margin-bottom: 24px;">
+                The bottleneck won't be the model. It will be everything around the model &mdash; memory, recovery, observability. The unglamorous parts. The parts we are building.
+              </div>
+              <div style="
+                font-family: var(--font-mono);
+                font-size: 12px;
+                letter-spacing: 0.25em;
+                padding-top: 16px;
+                border-top: 1px solid var(--color-border);
+                color: var(--color-muted);
+              ">&mdash;&mdash; THESIS B &mdash;&mdash;</div>
+            </div>
+          </div>
+        </div>
+
+        <svg data-ref="leaderLine" style="
+          position: absolute; left: 0; top: 0; width: 100%; height: 100%;
+          pointer-events: none; overflow: visible;
+        ">
+          <line x1="960" y1="580" x2="1100" y2="520" stroke="var(--color-accent)" stroke-width="1" style="opacity: 0;" data-ref="ll" />
+          <text x="1105" y="516" fill="var(--color-accent)" font-family="var(--font-mono)" font-size="11" letter-spacing="0.15em" style="opacity: 0;" data-ref="llLabel">&#9698; KEY INSIGHT</text>
+        </svg>
+
+        <div data-ref="coord" style="
+          position: absolute; left: var(--safe-x); right: var(--safe-x); bottom: 28px;
+          display: flex; gap: 32px;
+          font-family: var(--font-mono);
+          font-size: 12px;
+          color: var(--color-muted);
+          letter-spacing: 0.1em;
+          opacity: 0;
+        ">
+          <span>X 1240.00</span><span>Y 360.00</span><span>T 0.00s</span>
+          <span style="margin-left: auto;">UNIT: PX &middot; SCALE 1:1</span>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const frame = host?.querySelector('[data-ref="frame"]') as HTMLElement;
+		const tag = host?.querySelector('[data-ref="tag"]') as HTMLElement;
+		const heading = host?.querySelector('[data-ref="heading"]') as HTMLElement;
+		const colA = host?.querySelector('[data-ref="colA"]') as HTMLElement;
+		const colB = host?.querySelector('[data-ref="colB"]') as HTMLElement;
+		const coord = host?.querySelector('[data-ref="coord"]') as HTMLElement;
+
+		const chMarkSvg = host?.querySelector('[data-ref="chMark"]') as SVGElement;
+		const chH = chMarkSvg?.querySelector("line:nth-child(1)") as SVGLineElement;
+		const chV = chMarkSvg?.querySelector("line:nth-child(2)") as SVGLineElement;
+
+		const ll = host?.querySelector('[data-ref="ll"]') as SVGLineElement;
+		const llLabel = host?.querySelector('[data-ref="llLabel"]') as SVGTextElement;
+
+		const ease = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		frame.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 360,
+		});
+
+		coord.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 300,
+			delay: 100,
+		});
+
+		tag.animate(
+			[
+				{ opacity: 0, transform: "translateY(8px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 300, delay: 200 },
+		);
+
+		heading.animate(
+			[
+				{ opacity: 0, transform: "translateY(12px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 400, delay: 400 },
+		);
+
+		chH.animate([{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }], {
+			...opts,
+			duration: 300,
+			delay: 500,
+		});
+
+		chV.animate([{ transform: "scaleY(0)" }, { transform: "scaleY(1)" }], {
+			...opts,
+			duration: 300,
+			delay: 550,
+		});
+
+		colA.animate(
+			[
+				{ opacity: 0, transform: "translateY(12px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 360, delay: 700 },
+		);
+
+		colB.animate(
+			[
+				{ opacity: 0, transform: "translateY(12px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 360, delay: 1000 },
+		);
+
+		ll.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 300,
+			delay: 1300,
+		});
+
+		llLabel.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 200,
+			delay: 1500,
+		});
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/motion-engineering/sample/cta.ts

@@ -0,0 +1,209 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+function cornerTicks() {
+	return `
+    <div style="position: absolute; left: -1px; top: -1px; width: 24px; height: 24px;">
+      <div style="position: absolute; left: 0; top: 0; width: 24px; height: 1.5px; background: var(--color-accent);"></div>
+      <div style="position: absolute; left: 0; top: 0; width: 1.5px; height: 24px; background: var(--color-accent);"></div>
+    </div>
+    <div style="position: absolute; right: -1px; top: -1px; width: 24px; height: 24px;">
+      <div style="position: absolute; right: 0; top: 0; width: 24px; height: 1.5px; background: var(--color-accent);"></div>
+      <div style="position: absolute; right: 0; top: 0; width: 1.5px; height: 24px; background: var(--color-accent);"></div>
+    </div>
+    <div style="position: absolute; left: -1px; bottom: -1px; width: 24px; height: 24px;">
+      <div style="position: absolute; left: 0; bottom: 0; width: 24px; height: 1.5px; background: var(--color-accent);"></div>
+      <div style="position: absolute; left: 0; bottom: 0; width: 1.5px; height: 24px; background: var(--color-accent);"></div>
+    </div>
+    <div style="position: absolute; right: -1px; bottom: -1px; width: 24px; height: 24px;">
+      <div style="position: absolute; right: 0; bottom: 0; width: 24px; height: 1.5px; background: var(--color-accent);"></div>
+      <div style="position: absolute; right: 0; bottom: 0; width: 1.5px; height: 24px; background: var(--color-accent);"></div>
+    </div>`;
+}
+
+export default defineSegment({
+	id: "motion-engineering-sample-cta",
+	advances: [2.0, 4.5],
+	voiceover:
+		"CTA cards in Motion Engineering. A target reticle centers on the call to action, corner ticks frame the scene, and a coordinate readout shows the URL.",
+
+	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:
+            linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 64px 64px,
+            linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 64px 64px;
+        "></div>
+
+        <div data-ref="frame" style="
+          position: absolute;
+          inset: var(--safe-y) var(--safe-x);
+          border: 1px solid var(--color-border);
+          opacity: 0;
+        ">
+          ${cornerTicks()}
+
+          <svg data-ref="reticle" style="
+            position: absolute; left: 50%; top: 46%;
+            width: 600px; height: 600px;
+            transform: translate(-50%, -50%);
+            overflow: visible;
+          ">
+            <circle data-ref="outerRing" cx="300" cy="300" r="220" fill="none" stroke="var(--color-accent)" stroke-width="1.5" style="opacity: 0;" />
+            <circle data-ref="innerRing" cx="300" cy="300" r="160" fill="none" stroke="var(--color-muted)" stroke-width="1" stroke-dasharray="3 4" style="opacity: 0;" />
+            <line data-ref="rTop" x1="300" y1="20" x2="300" y2="120" stroke="var(--color-accent)" stroke-width="1.5" style="transform-origin: 300px 70px; transform: scaleY(0);" />
+            <line data-ref="rBot" x1="300" y1="580" x2="300" y2="480" stroke="var(--color-accent)" stroke-width="1.5" style="transform-origin: 300px 530px; transform: scaleY(0);" />
+            <line data-ref="rLeft" x1="20" y1="300" x2="120" y2="300" stroke="var(--color-accent)" stroke-width="1.5" style="transform-origin: 70px 300px; transform: scaleX(0);" />
+            <line data-ref="rRight" x1="580" y1="300" x2="480" y2="300" stroke="var(--color-accent)" stroke-width="1.5" style="transform-origin: 530px 300px; transform: scaleX(0);" />
+          </svg>
+
+          <div data-ref="headline" style="
+            position: absolute; left: 0; right: 0; top: 42%;
+            text-align: center;
+            font-family: var(--font-display);
+            font-weight: 500;
+            font-size: 160px;
+            line-height: 1.0;
+            opacity: 0;
+          ">Start the agent.</div>
+
+          <div data-ref="url" style="
+            position: absolute; left: 0; right: 0; top: 64%;
+            text-align: center;
+            font-family: var(--font-mono);
+            font-size: 28px;
+            letter-spacing: 0.15em;
+            color: var(--color-accent);
+            opacity: 0;
+          ">BEACON.RUN/START</div>
+
+          <div data-ref="footer" style="
+            position: absolute; left: 0; right: 0; bottom: 60px;
+            text-align: center;
+            font-family: var(--font-mono);
+            font-size: 13px;
+            letter-spacing: 0.3em;
+            color: var(--color-muted);
+            opacity: 0;
+          ">&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;  BEACON &middot; MAY 2026 &middot; v0.4.0  &mdash;&mdash;&mdash;&mdash;&mdash;&mdash;</div>
+        </div>
+
+        <div data-ref="coord" style="
+          position: absolute; left: var(--safe-x); right: var(--safe-x); bottom: 28px;
+          display: flex; gap: 32px;
+          font-family: var(--font-mono);
+          font-size: 12px;
+          color: var(--color-muted);
+          letter-spacing: 0.1em;
+          opacity: 0;
+        ">
+          <span>X BEACON.RUN/START</span><span>Y 360.00</span><span>T 0.00s</span>
+          <span style="margin-left: auto;">UNIT: PX &middot; SCALE 1:1</span>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const frame = host?.querySelector('[data-ref="frame"]') as HTMLElement;
+		const outerRing = host?.querySelector('[data-ref="outerRing"]') as SVGCircleElement;
+		const innerRing = host?.querySelector('[data-ref="innerRing"]') as SVGCircleElement;
+		const rTop = host?.querySelector('[data-ref="rTop"]') as SVGLineElement;
+		const rBot = host?.querySelector('[data-ref="rBot"]') as SVGLineElement;
+		const rLeft = host?.querySelector('[data-ref="rLeft"]') as SVGLineElement;
+		const rRight = host?.querySelector('[data-ref="rRight"]') as SVGLineElement;
+		const headline = host?.querySelector('[data-ref="headline"]') as HTMLElement;
+		const url = host?.querySelector('[data-ref="url"]') as HTMLElement;
+		const footer = host?.querySelector('[data-ref="footer"]') as HTMLElement;
+		const coord = host?.querySelector('[data-ref="coord"]') as HTMLElement;
+
+		const ease = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		frame.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 360,
+		});
+
+		coord.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 300,
+			delay: 100,
+		});
+
+		outerRing.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 400,
+			delay: 300,
+		});
+
+		innerRing.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 400,
+			delay: 350,
+		});
+
+		rTop.animate([{ transform: "scaleY(0)" }, { transform: "scaleY(1)" }], {
+			...opts,
+			duration: 400,
+			delay: 600,
+		});
+
+		rBot.animate([{ transform: "scaleY(0)" }, { transform: "scaleY(1)" }], {
+			...opts,
+			duration: 400,
+			delay: 650,
+		});
+
+		rLeft.animate([{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }], {
+			...opts,
+			duration: 400,
+			delay: 600,
+		});
+
+		rRight.animate([{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }], {
+			...opts,
+			duration: 400,
+			delay: 650,
+		});
+
+		headline.animate(
+			[
+				{ opacity: 0, transform: "translateY(12px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 400, delay: 900 },
+		);
+
+		url.animate(
+			[
+				{ opacity: 0, transform: "translateY(8px)" },
+				{ opacity: 1, transform: "translateY(0)" },
+			],
+			{ ...opts, duration: 360, delay: 1200 },
+		);
+
+		footer.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 360,
+			delay: 1500,
+		});
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});