videowright 0.1.0

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

@@ -0,0 +1,135 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "risograph-sample-content",
+	advances: [2.0, 4.0],
+	voiceover:
+		"Content cards in Risograph. A paragraph in body text with one key phrase highlighted by a pink rectangle behind it.",
+
+	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: 140px;
+          font-family: var(--font-display);
+          font-size: 160px;
+          line-height: 0.9;
+          letter-spacing: -0.025em;
+          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-accent); pointer-events: none;" aria-hidden="true">what we believe.</span>
+            <span style="position: relative;">what we believe.</span>
+          </span>
+        </div>
+
+        <div style="position: absolute; left: 140px; right: 140px; top: 460px;">
+          <div data-ref="para1" style="
+            font-size: 44px;
+            line-height: 1.4;
+            font-weight: 600;
+            max-width: 1500px;
+            transform: rotate(-1deg);
+            opacity: 0;
+          ">the next decade of AI is not about <span style="background: var(--color-accent); padding: 0 8px; box-decoration-break: clone;">bigger models</span>.</div>
+
+          <div data-ref="para2" style="
+            font-size: 36px;
+            line-height: 1.4;
+            max-width: 1500px;
+            font-weight: 500;
+            margin-top: 36px;
+            transform: rotate(1deg);
+            opacity: 0;
+          ">it's about agents that can <span style="color: var(--color-accent); font-weight: 700;">run long enough to matter</span> &#8212; and the unglamorous infrastructure that lets them.</div>
+
+          <div data-ref="mark" style="margin-top: 60px; transform: rotate(-2deg); opacity: 0;">
+            <div style="font-family: var(--font-display); font-size: 40px; color: var(--color-accent);">&#9733; &#9733; &#9733;</div>
+            <div style="font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: 0.15em; margin-top: 10px;">BEACON TEAM &#183; 2026.05</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; 09/10 &#9733;</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const headline = host?.querySelector('[data-ref="headline"]') as HTMLElement;
+		const para1 = host?.querySelector('[data-ref="para1"]') as HTMLElement;
+		const para2 = host?.querySelector('[data-ref="para2"]') as HTMLElement;
+		const mark = host?.querySelector('[data-ref="mark"]') 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(-3deg) scale(0.9)" },
+				{ opacity: 1, transform: "rotate(-3deg) scale(1)" },
+			],
+			{ ...opts, duration: 300, delay: 200 },
+		);
+
+		para1.animate(
+			[
+				{ opacity: 0, transform: "rotate(-1deg)" },
+				{ opacity: 1, transform: "rotate(-1deg)" },
+			],
+			{ ...opts, duration: 280, delay: 700 },
+		);
+
+		para2.animate(
+			[
+				{ opacity: 0, transform: "rotate(1deg)" },
+				{ opacity: 1, transform: "rotate(1deg)" },
+			],
+			{ ...opts, duration: 280, delay: 1300 },
+		);
+
+		mark.animate(
+			[
+				{ opacity: 0, transform: "rotate(-2deg) scale(0.9)" },
+				{ opacity: 1, transform: "rotate(-2deg) scale(1)" },
+			],
+			{ ...opts, duration: 280, delay: 1800 },
+		);
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

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

@@ -0,0 +1,149 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "risograph-sample-cta",
+	advances: [2.0, 4.0],
+	voiceover:
+		"CTA cards in Risograph. A massive misregistered call-to-action stamps in with pink star accents and the URL in mono beneath.",
+
+	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="starTL" style="position: absolute; left: var(--safe-x); top: 140px; opacity: 0;" width="180" height="180">
+          <polygon points="90,0 110,70 180,70 122,112 145,180 90,140 35,180 58,112 0,70 70,70" fill="var(--color-second)" />
+        </svg>
+
+        <!-- Pink-dominant variant: blue ghost / pink top — CTA is the accent focal point -->
+        <div data-ref="cta" style="
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 320px;
+          text-align: center;
+          font-family: var(--font-display);
+          font-size: 320px;
+          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-fg); pointer-events: none;" aria-hidden="true">start it.</span>
+            <span style="position: relative; color: var(--color-accent);">start it.</span>
+          </span>
+        </div>
+
+        <div data-ref="url" style="
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 680px;
+          text-align: center;
+          opacity: 0;
+        ">
+          <span style="
+            display: inline-block;
+            font-family: var(--font-display);
+            font-size: 120px;
+            background: var(--color-accent);
+            color: var(--color-fg);
+            padding: 12px 36px;
+            transform: rotate(2deg);
+          ">beacon.run</span>
+        </div>
+
+        <svg data-ref="starBR" style="position: absolute; right: 200px; bottom: 200px; opacity: 0;" width="140" height="140">
+          <polygon points="70,0 86,54 140,54 96,86 112,140 70,108 28,140 44,86 0,54 54,54" fill="var(--color-accent)" />
+        </svg>
+
+        <div data-ref="footer" style="
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 80px;
+          text-align: center;
+          font-family: var(--font-mono);
+          font-size: 18px;
+          font-weight: 700;
+          letter-spacing: 0.25em;
+          opacity: 0;
+        ">&#9733; BEACON &#183; MAY 2026 &#9733;</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; 10/10 &#9733;</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const starTL = host?.querySelector('[data-ref="starTL"]') as SVGElement;
+		const cta = host?.querySelector('[data-ref="cta"]') as HTMLElement;
+		const url = host?.querySelector('[data-ref="url"]') as HTMLElement;
+		const starBR = host?.querySelector('[data-ref="starBR"]') as SVGElement;
+		const footer = host?.querySelector('[data-ref="footer"]') 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 });
+
+		starTL.animate(
+			[
+				{ opacity: 0, transform: "rotate(-15deg) scale(0.85)" },
+				{ opacity: 1, transform: "rotate(-15deg) scale(1)" },
+			],
+			{ ...opts, duration: 280, delay: 200 },
+		);
+
+		cta.animate(
+			[
+				{ opacity: 0, transform: "rotate(-2deg) scale(0.85)" },
+				{ opacity: 1, transform: "rotate(-2deg) scale(1)" },
+			],
+			{ ...opts, duration: 320, delay: 500 },
+		);
+
+		url.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 280, delay: 1100 });
+
+		starBR.animate(
+			[
+				{ opacity: 0, transform: "rotate(12deg) scale(0.85)" },
+				{ opacity: 1, transform: "rotate(12deg) scale(1)" },
+			],
+			{ ...opts, duration: 280, delay: 1500 },
+		);
+
+		footer.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 280, delay: 1800 });
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

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

@@ -0,0 +1,152 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "risograph-sample-feature",
+	advances: [2.0, 4.0],
+	voiceover:
+		"Feature cards in Risograph. A cut-paper blob shape on the left with stacked memory slots, heavy display name and body 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: 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="shape" style="position: absolute; left: 100px; top: 200px; overflow: visible; opacity: 0;" width="720" height="720">
+          <path d="M 80 100 Q 360 -20 640 120 Q 720 380 580 600 Q 280 720 100 540 Q 20 320 80 100 Z" fill="var(--color-accent)" />
+        </svg>
+
+        <svg data-ref="slots" style="position: absolute; left: 160px; top: 260px; overflow: visible; opacity: 0;" width="700" height="700">
+          <rect x="60" y="80" width="520" height="92" fill="var(--color-fg)" />
+          <text x="90" y="140" font-family="var(--font-mono)" font-weight="700" font-size="32" fill="var(--color-bg)">snap_000</text>
+          <text x="520" y="140" font-family="var(--font-mono)" font-weight="700" font-size="32" fill="var(--color-bg)">&#10003;</text>
+
+          <rect x="60" y="200" width="520" height="92" fill="var(--color-fg)" />
+          <text x="90" y="260" font-family="var(--font-mono)" font-weight="700" font-size="32" fill="var(--color-bg)">snap_001</text>
+          <text x="520" y="260" font-family="var(--font-mono)" font-weight="700" font-size="32" fill="var(--color-bg)">&#10003;</text>
+
+          <rect x="60" y="320" width="520" height="92" fill="var(--color-fg)" />
+          <text x="90" y="380" font-family="var(--font-mono)" font-weight="700" font-size="32" fill="var(--color-bg)">snap_002</text>
+          <text x="520" y="380" font-family="var(--font-mono)" font-weight="700" font-size="32" fill="var(--color-second)">&#8630;</text>
+
+          <rect x="60" y="440" width="520" height="92" fill="var(--color-fg)" />
+          <text x="90" y="500" font-family="var(--font-mono)" font-weight="700" font-size="32" fill="var(--color-bg)">snap_003</text>
+          <text x="520" y="500" font-family="var(--font-mono)" font-weight="700" font-size="32" fill="var(--color-bg)">&#10003;</text>
+        </svg>
+
+        <div data-ref="tag" style="
+          position: absolute;
+          right: var(--safe-x);
+          top: 180px;
+          font-family: var(--font-mono);
+          font-size: 22px;
+          letter-spacing: 0.15em;
+          font-weight: 700;
+          color: var(--color-accent);
+          opacity: 0;
+        ">&#9733; FEATURE 01 / 03</div>
+
+        <div data-ref="name" style="
+          position: absolute;
+          right: var(--safe-x);
+          top: 240px;
+          width: 720px;
+          font-family: var(--font-display);
+          font-size: 130px;
+          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">checkpoint memory.</span>
+            <span style="position: relative;">checkpoint memory.</span>
+          </span>
+        </div>
+
+        <div data-ref="body" style="
+          position: absolute;
+          right: var(--safe-x);
+          top: 560px;
+          width: 720px;
+          font-size: 30px;
+          line-height: 1.45;
+          font-weight: 500;
+          opacity: 0;
+        ">we snapshot the agent's reasoning at every tool boundary. when a plan goes stale, the agent <span style="color: var(--color-accent); font-weight: 700;">rewinds</span> to the last correct point.</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; 06/10 &#9733;</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const shape = host?.querySelector('[data-ref="shape"]') as SVGElement;
+		const slots = host?.querySelector('[data-ref="slots"]') as SVGElement;
+		const tag = host?.querySelector('[data-ref="tag"]') as HTMLElement;
+		const name = host?.querySelector('[data-ref="name"]') as HTMLElement;
+		const body = host?.querySelector('[data-ref="body"]') 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 });
+
+		shape.animate(
+			[
+				{ opacity: 0, transform: "rotate(-3deg) scale(0.85)" },
+				{ opacity: 1, transform: "rotate(-3deg) scale(1)" },
+			],
+			{ ...opts, duration: 300, delay: 300 },
+		);
+
+		slots.animate(
+			[
+				{ opacity: 0, transform: "rotate(2deg) scale(0.9)" },
+				{ opacity: 1, transform: "rotate(2deg) scale(1)" },
+			],
+			{ ...opts, duration: 300, delay: 500 },
+		);
+
+		tag.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 280, delay: 400 });
+
+		name.animate(
+			[
+				{ opacity: 0, transform: "rotate(-2deg) scale(0.9)" },
+				{ opacity: 1, transform: "rotate(-2deg) scale(1)" },
+			],
+			{ ...opts, duration: 300, delay: 700 },
+		);
+
+		body.animate([{ opacity: 0 }, { opacity: 1 }], { ...opts, duration: 280, delay: 1200 });
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});

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

@@ -0,0 +1,123 @@
+import { defineSegment } from "videowright";
+
+let host: HTMLElement | null = null;
+
+export default defineSegment({
+	id: "risograph-sample-grid",
+	advances: [2.0, 4.0],
+	voiceover:
+		"Card grids in Risograph. Three duotone cards stamp in, each with a different shape and a display name beneath.",
+
+	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: 120px;
+          font-family: var(--font-display);
+          font-size: 140px;
+          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">three primitives.</span>
+            <span style="position: relative;">three primitives.</span>
+          </span>
+        </div>
+
+        <div style="position: absolute; left: 140px; right: 140px; top: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px;">
+          <div data-ref="card0" style="background: var(--color-accent); padding: 36px; min-height: 560px; color: var(--color-fg); opacity: 0; transform: rotate(-2deg);">
+            <div style="font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.2em; font-weight: 700;">01 / 03</div>
+            <svg width="100%" height="260" style="margin-top: 32px;">
+              <circle cx="50%" cy="130" r="100" fill="var(--color-bg)" />
+            </svg>
+            <div style="font-family: var(--font-display); font-size: 90px; margin-top: 32px;">memory</div>
+            <div style="font-size: 26px; font-weight: 600; margin-top: 4px; opacity: 0.85;">~ remembers ~</div>
+          </div>
+
+          <div data-ref="card1" style="background: var(--color-fg); padding: 36px; min-height: 560px; color: var(--color-bg); opacity: 0; transform: rotate(2deg);">
+            <div style="font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.2em; font-weight: 700;">02 / 03</div>
+            <svg width="100%" height="260" style="margin-top: 32px;">
+              <polygon points="200,30 380,230 20,230" fill="var(--color-accent)" />
+            </svg>
+            <div style="font-family: var(--font-display); font-size: 90px; margin-top: 32px;">reasoning</div>
+            <div style="font-size: 26px; font-weight: 600; margin-top: 4px; opacity: 0.85;">~ revises ~</div>
+          </div>
+
+          <div data-ref="card2" style="background: var(--color-accent); padding: 36px; min-height: 560px; color: var(--color-fg); opacity: 0; transform: rotate(-2deg);">
+            <div style="font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.2em; font-weight: 700;">03 / 03</div>
+            <svg width="100%" height="260" style="margin-top: 32px;">
+              <rect x="80" y="30" width="240" height="200" fill="var(--color-bg)" transform="rotate(-4 200 130)" />
+            </svg>
+            <div style="font-family: var(--font-display); font-size: 90px; margin-top: 32px;">recovery</div>
+            <div style="font-size: 26px; font-weight: 600; margin-top: 4px; opacity: 0.85;">~ rewinds ~</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; 07/10 &#9733;</div>
+      </div>
+    `;
+	},
+
+	async play(ctx) {
+		const headline = host?.querySelector('[data-ref="headline"]') 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 },
+		);
+
+		const rotations = [-2, 2, -2];
+		for (let i = 0; i < 3; i++) {
+			const card = host?.querySelector(`[data-ref="card${i}"]`) as HTMLElement;
+			card.animate(
+				[
+					{ opacity: 0, transform: `rotate(${rotations[i]}deg) scale(0.85)` },
+					{ opacity: 1, transform: `rotate(${rotations[i]}deg) scale(1)` },
+				],
+				{ ...opts, duration: 300, delay: 700 + i * 180 },
+			);
+		}
+
+		await ctx.waitForNext();
+	},
+
+	unmount() {
+		host = null;
+	},
+});