videowright 0.1.0

package/skill/assets/styles/neon-terminal/sample/cta.ts

@@ -0,0 +1,131 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "neon-terminal-sample-cta",
+	advances: [2.0, 4.5],
+	voiceover:
+		"CTA cards in Neon Terminal. An install command types in, then the glowing headline and URL appear stepped.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <style>
+        @keyframes nt-blink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
+      </style>
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        font-family: var(--font-mono);
+        overflow: hidden;
+      ">
+        <div style="
+          position: absolute; inset: 0; pointer-events: none;
+          background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(74, 222, 128, 0.04) 3px 4px);
+        "></div>
+
+        <div style="
+          position: absolute;
+          inset: var(--safe-y) var(--safe-x);
+          border: 1px solid var(--color-border);
+          background: rgba(10,14,11,0.6);
+        ">
+          <div style="
+            display: flex; align-items: center;
+            padding: 14px 20px;
+            border-bottom: 1px solid var(--color-border);
+            gap: 12px; font-size: 14px; color: var(--color-muted);
+          ">
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="margin-left: 16px;">beacon@console:~$ install</span>
+            <span style="margin-left: auto; color: var(--color-accent); text-shadow: var(--glow);">[ ready ]</span>
+          </div>
+
+          <div style="padding: 48px 56px; overflow: hidden;">
+            <div data-ref="prompt" style="font-size: 22px; color: var(--color-muted); opacity: 0;">
+              $ curl -sSL beacon.run/install | sh
+            </div>
+
+            <div data-ref="headline" style="
+              font-size: 140px; font-weight: 500; line-height: 1.0;
+              margin-top: 56px;
+              color: var(--color-accent); text-shadow: var(--glow);
+              opacity: 0;
+            ">$ install beacon</div>
+
+            <div data-ref="links" style="font-size: 24px; color: var(--color-muted); margin-top: 36px; opacity: 0;">
+              → beacon.run · docs · github.com/beacon-ai
+            </div>
+
+            <div data-ref="mark" style="
+              margin-top: 60px; display: flex; align-items: center; gap: 12px; opacity: 0;
+            ">
+              <div style="
+                width: 22px; height: 22px; border: 1.5px solid var(--color-fg); position: relative;
+              ">
+                <div style="
+                  position: absolute; inset: 5px;
+                  background: var(--color-accent);
+                  box-shadow: 0 0 12px rgba(74,222,128,0.7);
+                "></div>
+              </div>
+              <span style="font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-muted);">BEACON · 2026</span>
+              <span style="
+                display: inline-block; width: 0.6em; height: 1em;
+                background: var(--color-accent);
+                box-shadow: 0 0 12px rgba(74,222,128,0.7);
+                vertical-align: text-bottom;
+                animation: nt-blink 1s steps(2, end) infinite;
+                margin-left: 4px;
+              "></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const prompt = host?.querySelector('[data-ref="prompt"]') as HTMLElement;
+		const headline = host?.querySelector('[data-ref="headline"]') as HTMLElement;
+		const links = host?.querySelector('[data-ref="links"]') as HTMLElement;
+		const mark = host?.querySelector('[data-ref="mark"]') as HTMLElement;
+
+		const ease = "steps(8, end)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		prompt.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+		});
+
+		headline.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+			delay: 500,
+		});
+
+		links.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+			delay: 800,
+		});
+
+		mark.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+			delay: 1100,
+		});
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/neon-terminal/sample/feature.ts

@@ -0,0 +1,112 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "neon-terminal-sample-feature",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Feature cards in Neon Terminal. A CLI prompt types in, then the feature name and description appear below with a params box.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        font-family: var(--font-mono);
+        overflow: hidden;
+      ">
+        <div style="
+          position: absolute; inset: 0; pointer-events: none;
+          background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(74, 222, 128, 0.04) 3px 4px);
+        "></div>
+
+        <div style="
+          position: absolute;
+          inset: var(--safe-y) var(--safe-x);
+          border: 1px solid var(--color-border);
+          background: rgba(10,14,11,0.6);
+        ">
+          <div style="
+            display: flex; align-items: center;
+            padding: 14px 20px;
+            border-bottom: 1px solid var(--color-border);
+            gap: 12px; font-size: 14px; color: var(--color-muted);
+          ">
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="margin-left: 16px;">beacon@console:~$ feature describe</span>
+            <span style="margin-left: auto; color: var(--color-accent); text-shadow: var(--glow);">[ 01 of 03 ]</span>
+          </div>
+
+          <div style="padding: 48px 56px; overflow: hidden;">
+            <div data-ref="prompt" style="font-size: 22px; color: var(--color-muted); opacity: 0;">
+              $ feature describe --name=checkpoint-memory
+            </div>
+
+            <div data-ref="name" style="
+              font-size: 96px; font-weight: 500; margin-top: 48px; margin-bottom: 28px; opacity: 0;
+            "><span style="color: var(--color-accent); text-shadow: var(--glow);">▸</span> checkpoint memory</div>
+
+            <div data-ref="desc" style="
+              font-size: 22px; color: var(--color-muted); max-width: 1400px;
+              line-height: 1.5; margin-bottom: 36px; opacity: 0;
+            ">Snapshots an agent's reasoning state at each tool boundary. When a plan goes stale, the agent rewinds — not to the start, but to the last point its model of the world was correct.</div>
+
+            <pre data-ref="params" style="
+              font-size: 18px; line-height: 1.6; color: var(--color-muted);
+              margin: 0; opacity: 0;
+            ">&#x256D;&#x2500; params &#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x256E;
+&#x2502;  snapshots/min  :  120                   &#x2502;
+&#x2502;  avg restore    :  9 ms                  &#x2502;
+&#x2502;  retention      :  14 d                  &#x2502;
+&#x2570;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x256F;</pre>
+          </div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const prompt = host?.querySelector('[data-ref="prompt"]') as HTMLElement;
+		const name = host?.querySelector('[data-ref="name"]') as HTMLElement;
+		const desc = host?.querySelector('[data-ref="desc"]') as HTMLElement;
+		const params = host?.querySelector('[data-ref="params"]') as HTMLElement;
+
+		const ease = "steps(8, end)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		prompt.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+		});
+
+		name.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+			delay: 500,
+		});
+
+		desc.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+			delay: 800,
+		});
+
+		params.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+			delay: 1100,
+		});
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/neon-terminal/sample/grid.ts

@@ -0,0 +1,128 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "neon-terminal-sample-grid",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Card grids in Neon Terminal. Three terminal panes side by side, each its own mini-terminal with a prompt and content.",
+
+	mount(el) {
+		host = el;
+
+		const cards = [
+			{
+				n: "01",
+				name: "memory",
+				cmd: "memory.snap()",
+				desc: "Persistent state across long sessions.",
+			},
+			{
+				n: "02",
+				name: "reasoning",
+				cmd: "plan.revise()",
+				desc: "Plans that adapt to fresh evidence.",
+			},
+			{
+				n: "03",
+				name: "recovery",
+				cmd: "rewind.to(t)",
+				desc: "Rewind to a last-known-good moment.",
+			},
+		];
+
+		const panes = cards
+			.map(
+				(c, i) => `
+          <div data-ref="pane${i}" style="
+            border: 1px solid var(--color-border);
+            padding: 24px;
+            min-height: 340px;
+            background: rgba(74,222,128,0.03);
+            opacity: 0;
+          ">
+            <div style="color: var(--color-accent); text-shadow: var(--glow); font-size: 14px; margin-bottom: 20px;">[${c.n}/03]</div>
+            <div style="font-size: 48px; font-weight: 500; margin-bottom: 18px;">${c.name}</div>
+            <div style="font-size: 17px; color: var(--color-muted); line-height: 1.5; margin-bottom: 28px;">${c.desc}</div>
+            <div style="border-top: 1px solid var(--color-border); padding-top: 18px;">
+              <span style="color: var(--color-accent); text-shadow: var(--glow);">$</span> <span style="font-size: 17px;">${c.cmd}</span>
+            </div>
+          </div>`,
+			)
+			.join("");
+
+		el.innerHTML = `
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        font-family: var(--font-mono);
+        overflow: hidden;
+      ">
+        <div style="
+          position: absolute; inset: 0; pointer-events: none;
+          background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(74, 222, 128, 0.04) 3px 4px);
+        "></div>
+
+        <div style="
+          position: absolute;
+          inset: var(--safe-y) var(--safe-x);
+          border: 1px solid var(--color-border);
+          background: rgba(10,14,11,0.6);
+        ">
+          <div style="
+            display: flex; align-items: center;
+            padding: 14px 20px;
+            border-bottom: 1px solid var(--color-border);
+            gap: 12px; font-size: 14px; color: var(--color-muted);
+          ">
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="margin-left: 16px;">beacon@console:~$ architecture --primitives</span>
+            <span style="margin-left: auto; color: var(--color-accent); text-shadow: var(--glow);">[ 3 panes ]</span>
+          </div>
+
+          <div style="padding: 48px 56px; overflow: hidden;">
+            <div data-ref="prompt" style="font-size: 18px; color: var(--color-muted); opacity: 0;">
+              $ arch.primitives()
+            </div>
+
+            <div style="margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;">
+              ${panes}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const prompt = host?.querySelector('[data-ref="prompt"]') as HTMLElement;
+
+		const ease = "steps(8, end)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		prompt.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+		});
+
+		for (let i = 0; i < 3; i++) {
+			const pane = host?.querySelector(`[data-ref="pane${i}"]`) as HTMLElement;
+			pane.animate([{ opacity: 0 }, { opacity: 1 }], {
+				...opts,
+				duration: 250,
+				delay: 400 + i * 200,
+			});
+		}
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/neon-terminal/sample/kinetic.ts

@@ -0,0 +1,105 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "neon-terminal-sample-kinetic",
+	advances: [2.5, 5.0],
+	voiceover:
+		"Kinetic statements in Neon Terminal. Words appear one at a time with stepped easing, the last word glows phosphor green.",
+
+	mount(el) {
+		host = el;
+		el.innerHTML = `
+      <style>
+        @keyframes nt-blink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
+      </style>
+      <div style="
+        position: relative;
+        height: 100%;
+        background: var(--color-bg);
+        color: var(--color-fg);
+        font-family: var(--font-mono);
+        overflow: hidden;
+      ">
+        <div style="
+          position: absolute; inset: 0; pointer-events: none;
+          background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(74, 222, 128, 0.04) 3px 4px);
+        "></div>
+
+        <div style="
+          position: absolute;
+          inset: var(--safe-y) var(--safe-x);
+          border: 1px solid var(--color-border);
+          background: rgba(10,14,11,0.6);
+        ">
+          <div style="
+            display: flex; align-items: center;
+            padding: 14px 20px;
+            border-bottom: 1px solid var(--color-border);
+            gap: 12px; font-size: 14px; color: var(--color-muted);
+          ">
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="margin-left: 16px;">beacon@console:~$ statement --id=03</span>
+            <span style="margin-left: auto; color: var(--color-accent); text-shadow: var(--glow);">[ premise ]</span>
+          </div>
+
+          <div style="padding: 48px 56px; overflow: hidden;">
+            <div data-ref="prompt" style="font-size: 22px; color: var(--color-muted); opacity: 0;">
+              $ echo statement.03
+            </div>
+
+            <div style="
+              font-size: 100px; font-weight: 500; line-height: 1.1;
+              margin-top: 60px; max-width: 1500px;
+            ">
+              <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>
+              <br />
+              <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); text-shadow: var(--glow);">forget.<span style="
+                display: inline-block; width: 0.6em; height: 1em;
+                background: var(--color-accent);
+                box-shadow: 0 0 12px rgba(74,222,128,0.7);
+                vertical-align: text-bottom;
+                animation: nt-blink 1s steps(2, end) infinite;
+                margin-left: 4px;
+              "></span></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const prompt = host?.querySelector('[data-ref="prompt"]') as HTMLElement;
+
+		const ease = "steps(8, end)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		prompt.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+		});
+
+		for (let i = 0; i < 6; i++) {
+			const word = host?.querySelector(`[data-ref="w${i}"]`) as HTMLElement;
+			word.animate([{ opacity: 0 }, { opacity: 1 }], {
+				...opts,
+				duration: 200,
+				delay: 400 + i * 160,
+			});
+		}
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

package/skill/assets/styles/neon-terminal/sample/section.ts

@@ -0,0 +1,96 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "neon-terminal-sample-section",
+	advances: [2.0, 4.5],
+	voiceover:
+		"Section headers in Neon Terminal. An ASCII rule types across, then the chapter name appears in large mono 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-mono);
+        overflow: hidden;
+      ">
+        <div style="
+          position: absolute; inset: 0; pointer-events: none;
+          background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(74, 222, 128, 0.04) 3px 4px);
+        "></div>
+
+        <div style="
+          position: absolute;
+          inset: var(--safe-y) var(--safe-x);
+          border: 1px solid var(--color-border);
+          background: rgba(10,14,11,0.6);
+        ">
+          <div style="
+            display: flex; align-items: center;
+            padding: 14px 20px;
+            border-bottom: 1px solid var(--color-border);
+            gap: 12px; font-size: 14px; color: var(--color-muted);
+          ">
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
+            <span style="margin-left: 16px;">beacon@console:~$ section --part=02</span>
+            <span style="margin-left: auto; color: var(--color-accent); text-shadow: var(--glow);">[ chapter ]</span>
+          </div>
+
+          <div style="padding: 48px 56px; overflow: hidden;">
+            <div data-ref="rule" style="font-size: 22px; color: var(--color-muted); opacity: 0;">
+              ── chapter 02 ────────────────────────────────────────────
+            </div>
+
+            <div data-ref="heading" style="
+              font-size: 160px; font-weight: 500; line-height: 1.0;
+              margin-top: 60px; opacity: 0;
+            "><span style="color: var(--color-accent); text-shadow: var(--glow);">$</span> the architecture</div>
+
+            <div data-ref="sub" style="font-size: 22px; color: var(--color-muted); margin-top: 60px; opacity: 0;">
+              ── 3 primitives · memory · reasoning · recovery ──────────
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const rule = host?.querySelector('[data-ref="rule"]') as HTMLElement;
+		const heading = host?.querySelector('[data-ref="heading"]') as HTMLElement;
+		const sub = host?.querySelector('[data-ref="sub"]') as HTMLElement;
+
+		const ease = "steps(8, end)";
+		const opts = { fill: "forwards" as const, easing: ease };
+
+		rule.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+		});
+
+		heading.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+			delay: 400,
+		});
+
+		sub.animate([{ opacity: 0 }, { opacity: 1 }], {
+			...opts,
+			duration: 250,
+			delay: 800,
+		});
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});