@waits/cadence 0.2.0

package/src/components/panels/Fork.tsx

@@ -0,0 +1,86 @@
+import { interpolate, useCurrentFrame } from "remotion";
+import { COLORS, EASE, RADIUS } from "../../brand/tokens";
+import { FONTS } from "../../brand/fonts";
+import { enterStyle, staggerDelay } from "../../motion/presets";
+import type { PanelSpec } from "../../schema/beats";
+import { PanelCard, PanelHeader } from "./PanelCard";
+
+type Spec = Extract<PanelSpec, { kind: "fork" }>;
+type Block = Spec["blocks"][number];
+
+const Chip: React.FC<{ block: Block; style?: React.CSSProperties }> = ({ block, style }) => {
+  const orphaned = block.state === "orphaned";
+  const isNew = block.state === "new";
+  return (
+    <span
+      style={{
+        fontFamily: FONTS.mono,
+        fontSize: 16,
+        fontVariantNumeric: "tabular-nums",
+        padding: "7px 12px",
+        borderRadius: RADIUS.md,
+        whiteSpace: "nowrap",
+        background: isNew ? COLORS.signalBlueSoft : COLORS.chrome,
+        border: `1px solid ${isNew ? COLORS.signalBlueBorder : COLORS.hairline}`,
+        color: isNew ? COLORS.signalBlue : orphaned ? COLORS.textMuted : COLORS.ink,
+        textDecoration: orphaned ? "line-through" : "none",
+        opacity: orphaned ? 0.6 : 1,
+        ...style,
+      }}
+    >
+      {block.height} · {block.hash}
+    </span>
+  );
+};
+
+/** An honest fork: the canonical chain forks, the orphan is archived, the new tip lights up. */
+export const ForkPanel: React.FC<{ spec: Spec }> = ({ spec }) => {
+  const frame = useCurrentFrame();
+  const canonical = spec.blocks.filter((b) => b.state === "canonical");
+  const orphan = spec.blocks.find((b) => b.state === "orphaned");
+  const newTip = spec.blocks.find((b) => b.state === "new");
+
+  const forkIn = interpolate(frame, [54, 70], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+  const noteIn = interpolate(frame, [76, 92], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+
+  return (
+    <PanelCard motion={spec.motion}>
+      <PanelHeader>
+        <span style={{ color: COLORS.ink, fontSize: 18, fontWeight: 600 }}>onReorg</span>
+        <span style={{ fontSize: 14, color: COLORS.textMuted }}>archive-on-reorg</span>
+      </PanelHeader>
+
+      <div style={{ padding: "24px 26px" }}>
+        {/* canonical chain */}
+        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
+          {canonical.map((b, i) => {
+            const start = staggerDelay(i, 9);
+            const p = interpolate(frame, [start, start + 14], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+            return (
+              <span key={b.height} style={{ display: "inline-flex", alignItems: "center", gap: 10, ...enterStyle("stagger", p) }}>
+                {i > 0 && <span style={{ color: COLORS.textMuted }}>→</span>}
+                <Chip block={b} />
+              </span>
+            );
+          })}
+        </div>
+
+        {/* the fork: orphan archived, new canonical lit */}
+        <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 16, opacity: forkIn, transform: `translateY(${(1 - forkIn) * 8}px)` }}>
+          {orphan && (
+            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
+              <Chip block={orphan} />
+              <span style={{ fontFamily: FONTS.mono, fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.06em", color: COLORS.gold, background: COLORS.goldSoft, padding: "3px 8px", borderRadius: RADIUS.sm }}>archived</span>
+            </span>
+          )}
+          {orphan && newTip && <span style={{ color: COLORS.textMuted }}>↳</span>}
+          {newTip && <Chip block={newTip} />}
+        </div>
+
+        <div style={{ marginTop: 18, fontFamily: FONTS.note, fontSize: 22, color: COLORS.signalBlue, opacity: noteIn }}>
+          rewound to {spec.rewindTo} — archived, never lost
+        </div>
+      </div>
+    </PanelCard>
+  );
+};

package/src/components/panels/PanelCard.tsx

@@ -0,0 +1,44 @@
+import type { CSSProperties, ReactNode } from "react";
+import { COLORS, FLOAT_SHADOW, RADIUS } from "../../brand/tokens";
+import { FONTS } from "../../brand/fonts";
+import { useMotion, type MotionSpec } from "../../motion/useMotion";
+
+/** Floating Field Notebook panel shell (translucent paper, hairline, float shadow). */
+export const PanelCard: React.FC<{ motion?: MotionSpec; style?: CSSProperties; children: ReactNode }> = ({
+  motion = { enter: "settle", delay: 30 },
+  style,
+  children,
+}) => {
+  const m = useMotion(motion);
+  return (
+    <div
+      style={{
+        width: "100%",
+        borderRadius: RADIUS.xl + 8,
+        background: "rgba(252,251,247,0.95)",
+        boxShadow: FLOAT_SHADOW,
+        border: "1px solid rgba(255,255,255,0.6)",
+        overflow: "hidden",
+        fontFamily: FONTS.mono,
+        ...m,
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const PanelHeader: React.FC<{ children: ReactNode }> = ({ children }) => (
+  <div
+    style={{
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "20px 26px",
+      borderBottom: `1px solid ${COLORS.hairline}`,
+    }}
+  >
+    {children}
+  </div>
+);

package/src/components/panels/Proof.tsx

@@ -0,0 +1,64 @@
+import { interpolate, useCurrentFrame } from "remotion";
+import { COLORS, EASE, RADIUS } from "../../brand/tokens";
+import { FONTS } from "../../brand/fonts";
+import { drawDashoffset, typewriterChars } from "../../motion/presets";
+import type { PanelSpec } from "../../schema/beats";
+import { PanelCard, PanelHeader } from "./PanelCard";
+
+type Spec = Extract<PanelSpec, { kind: "proof" }>;
+
+/** Group a hex signature into 4-char blocks; truncate the middle to a receipt line. */
+const formatSig = (hex: string) => {
+  const clean = hex.replace(/[^0-9a-f]/gi, "");
+  const head = clean.slice(0, 24).match(/.{1,4}/g)?.join(" ") ?? clean;
+  const tail = clean.slice(-8).match(/.{1,4}/g)?.join(" ") ?? "";
+  return `${head} … ${tail}`;
+};
+
+/** ed25519 signature as the hero — an honest cryptographic receipt, not a sticker. */
+export const ProofPanel: React.FC<{ spec: Spec }> = ({ spec }) => {
+  const frame = useCurrentFrame();
+  const sig = formatSig(spec.signature);
+
+  const eventIn = interpolate(frame, [22, 38], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+  const sigReveal = interpolate(frame, [40, 78], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+  const checkP = interpolate(frame, [82, 98], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+  const verifiedIn = interpolate(frame, [92, 104], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+
+  const CHECK_LEN = 26;
+
+  return (
+    <PanelCard motion={spec.motion}>
+      <PanelHeader>
+        <span style={{ color: COLORS.ink, fontSize: 18, fontWeight: 600 }}>streams.consume</span>
+        <span style={{ fontSize: 13, fontWeight: 600, color: COLORS.signalBlue, background: COLORS.signalBlueSoft, padding: "4px 10px", borderRadius: RADIUS.full, letterSpacing: "0.02em" }}>verify: true</span>
+      </PanelHeader>
+
+      <div style={{ padding: "22px 26px" }}>
+        {/* event line + its cursor */}
+        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", opacity: eventIn, transform: `translateY(${(1 - eventIn) * 8}px)` }}>
+          <span style={{ fontSize: 19, color: COLORS.ink }}>{spec.eventLine}</span>
+          <span style={{ fontSize: 16, color: COLORS.textMuted, fontVariantNumeric: "tabular-nums" }}>{spec.cursor}</span>
+        </div>
+
+        <div style={{ height: 1, background: COLORS.hairline, margin: "18px 0" }} />
+
+        {/* the signature is the hero */}
+        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: COLORS.textMuted }}>signature · ed25519</div>
+        <div style={{ minHeight: 56, marginTop: 8, fontSize: 18, lineHeight: "28px", color: COLORS.ink, fontVariantNumeric: "tabular-nums", letterSpacing: "0.04em", whiteSpace: "pre-wrap" }}>
+          {sig.slice(0, typewriterChars(sigReveal, sig.length))}
+        </div>
+        <div style={{ marginTop: 6, fontSize: 15, color: COLORS.textMuted }}>key {spec.keyId}</div>
+
+        {/* verification resolves with a drawn check (reserved height, no shift) */}
+        <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 18, height: 26 }}>
+          <svg width={26} height={26} viewBox="0 0 26 26">
+            <circle cx={13} cy={13} r={11} fill="none" stroke={COLORS.signalBlue} strokeWidth={1.5} opacity={0.35} />
+            <path d="M8 13.5 L11.5 17 L18 9.5" fill="none" stroke={COLORS.signalBlue} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" strokeDasharray={CHECK_LEN} strokeDashoffset={drawDashoffset(checkP, CHECK_LEN)} />
+          </svg>
+          <span style={{ fontSize: 17, fontWeight: 600, color: COLORS.signalBlue, opacity: verifiedIn }}>verified</span>
+        </div>
+      </div>
+    </PanelCard>
+  );
+};

package/src/components/panels/Stat.tsx

@@ -0,0 +1,28 @@
+import { interpolate, useCurrentFrame } from "remotion";
+import { COLORS, EASE } from "../../brand/tokens";
+import { FONTS } from "../../brand/fonts";
+import { countValue } from "../../motion/presets";
+import type { PanelSpec } from "../../schema/beats";
+import { PanelCard } from "./PanelCard";
+
+type Spec = Extract<PanelSpec, { kind: "stat" }>;
+
+/** A big headline number — the core announcement primitive. Counts up when the
+ * value is purely numeric ("10,000,000"); otherwise reveals as-is ("live"). */
+export const StatPanel: React.FC<{ spec: Spec }> = ({ spec }) => {
+  const frame = useCurrentFrame();
+  const clean = spec.value.replace(/[, ]/g, "");
+  const isNumeric = /^\d+(\.\d+)?$/.test(clean);
+  const p = interpolate(frame, [18, 52], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+  const display = isNumeric ? Math.round(countValue(p, Number(clean))).toLocaleString() : spec.value;
+
+  return (
+    <PanelCard motion={spec.motion}>
+      <div style={{ padding: "52px 56px", textAlign: "center" }}>
+        <div style={{ fontFamily: FONTS.display, fontSize: 100, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1, color: COLORS.ink, fontVariantNumeric: "tabular-nums" }}>{display}</div>
+        <div style={{ fontFamily: FONTS.body, fontSize: 24, color: COLORS.textMuted, marginTop: 14 }}>{spec.label}</div>
+        {spec.sub && <div style={{ fontFamily: FONTS.note, fontSize: 28, color: COLORS.signalBlue, marginTop: 10 }}>{spec.sub}</div>}
+      </div>
+    </PanelCard>
+  );
+};

package/src/components/panels/Status.tsx

@@ -0,0 +1,41 @@
+import { interpolate, useCurrentFrame } from "remotion";
+import { COLORS, EASE, RADIUS } from "../../brand/tokens";
+import { FONTS } from "../../brand/fonts";
+import { enterStyle, staggerDelay } from "../../motion/presets";
+import type { PanelSpec } from "../../schema/beats";
+import { PanelCard, PanelHeader } from "./PanelCard";
+
+type Spec = Extract<PanelSpec, { kind: "status" }>;
+
+const STATE_COLOR: Record<Spec["services"][number]["state"], string> = {
+  ok: COLORS.successGreen,
+  syncing: COLORS.infoBlue,
+  error: COLORS.dangerRed,
+  idle: COLORS.textMuted as string,
+};
+
+export const StatusPanel: React.FC<{ spec: Spec }> = ({ spec }) => {
+  const frame = useCurrentFrame();
+  return (
+    <PanelCard motion={spec.motion}>
+      <PanelHeader>
+        <span style={{ color: COLORS.ink, fontSize: 19, fontWeight: 600 }}>{spec.title}</span>
+      </PanelHeader>
+      <div style={{ padding: "12px 26px 22px" }}>
+        {spec.services.map((s, i) => {
+          const start = staggerDelay(i, 9);
+          const p = interpolate(frame, [start, start + 14], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+          return (
+            <div key={s.name} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 0", borderBottom: i < spec.services.length - 1 ? `1px solid ${COLORS.hairline}` : "none", ...enterStyle("stagger", p) }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                <span style={{ width: 9, height: 9, borderRadius: "50%", background: STATE_COLOR[s.state] }} />
+                <span style={{ fontSize: 18, color: COLORS.ink }}>{s.name}</span>
+              </div>
+              <span style={{ fontFamily: FONTS.mono, fontSize: 13, textTransform: "uppercase", letterSpacing: "0.05em", color: STATE_COLOR[s.state], background: `${STATE_COLOR[s.state]}1f`, padding: "3px 8px", borderRadius: RADIUS.sm }}>{s.detail ?? s.state}</span>
+            </div>
+          );
+        })}
+      </div>
+    </PanelCard>
+  );
+};

package/src/components/panels/StreamResume.tsx

@@ -0,0 +1,48 @@
+import { interpolate, useCurrentFrame } from "remotion";
+import { COLORS, EASE, RADIUS } from "../../brand/tokens";
+import { FONTS } from "../../brand/fonts";
+import { enterStyle, staggerDelay } from "../../motion/presets";
+import type { PanelSpec } from "../../schema/beats";
+import { PanelCard, PanelHeader } from "./PanelCard";
+
+type Spec = Extract<PanelSpec, { kind: "stream-resume" }>;
+
+const ROW_START = 40;
+const ROW_STAGGER = 12;
+
+/** The cursor is the hero: a precise resume point, items flowing past it. */
+export const StreamResumePanel: React.FC<{ spec: Spec }> = ({ spec }) => {
+  const frame = useCurrentFrame();
+  const chipIn = interpolate(frame, [18, 34], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+
+  return (
+    <PanelCard motion={spec.motion}>
+      <PanelHeader>
+        <span style={{ color: COLORS.ink, fontSize: 18, fontWeight: 600 }}>streams.consume</span>
+        <span style={{ fontSize: 14, color: COLORS.textMuted }}>exactly-once</span>
+      </PanelHeader>
+
+      <div style={{ padding: "20px 26px 22px" }}>
+        {/* resume marker */}
+        <div style={{ display: "flex", alignItems: "center", gap: 12, opacity: chipIn, transform: `translateY(${(1 - chipIn) * 8}px)` }}>
+          <span style={{ fontSize: 14, color: COLORS.textMuted }}>▸ resuming from</span>
+          <span style={{ fontSize: 19, fontWeight: 700, color: COLORS.signalBlue, background: COLORS.signalBlueSoft, padding: "5px 12px", borderRadius: RADIUS.md, fontVariantNumeric: "tabular-nums", letterSpacing: "0.02em" }}>{spec.fromCursor}</span>
+        </div>
+
+        <div style={{ height: 1, borderTop: `1px dashed ${COLORS.hairline}`, margin: "16px 0 6px" }} />
+
+        {/* events flow in past the cursor, each tagged with its own cursor */}
+        {spec.rows.map((row, i) => {
+          const start = ROW_START + staggerDelay(i, ROW_STAGGER);
+          const p = interpolate(frame, [start, start + 16], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+          return (
+            <div key={i} style={{ display: "flex", alignItems: "center", gap: 16, padding: "12px 4px", borderBottom: i < spec.rows.length - 1 ? `1px solid ${COLORS.hairline}` : "none", ...enterStyle("stagger", p) }}>
+              <span style={{ fontSize: 15, color: COLORS.textMuted, fontVariantNumeric: "tabular-nums", minWidth: 96 }}>{row.cursor}</span>
+              <span style={{ fontSize: 18, color: COLORS.ink }}>{row.label}</span>
+            </div>
+          );
+        })}
+      </div>
+    </PanelCard>
+  );
+};

package/src/components/panels/UploadProgress.tsx

@@ -0,0 +1,42 @@
+import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { COLORS, EASE, RADIUS } from "../../brand/tokens";
+import { FONTS } from "../../brand/fonts";
+import type { PanelSpec } from "../../schema/beats";
+import { PanelCard, PanelHeader } from "./PanelCard";
+
+type Spec = Extract<PanelSpec, { kind: "upload-progress" }>;
+
+export const UploadProgressPanel: React.FC<{ spec: Spec }> = ({ spec }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  // upload climbs from ~frame 40 to ~frame 130
+  const pct = interpolate(frame, [40, 40 + fps * 3], [0, 100], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+  const part = Math.round((pct / 100) * spec.parts);
+  const sent = ((pct / 100) * spec.sizeMB).toFixed(0);
+
+  return (
+    <PanelCard motion={spec.motion}>
+      <PanelHeader>
+        <span style={{ color: COLORS.ink, fontSize: 19, fontWeight: 600 }}>↑ {spec.file}</span>
+        <span style={{ fontSize: 14, fontWeight: 600, color: "#c2410c", background: "rgba(194,65,12,0.10)", padding: "5px 11px", borderRadius: RADIUS.full }}>● Uploading…</span>
+      </PanelHeader>
+      <div style={{ padding: "26px" }}>
+        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 16 }}>
+          <span style={{ fontSize: 40, fontWeight: 700, color: COLORS.ink, fontVariantNumeric: "tabular-nums" }}>{Math.round(pct)}%</span>
+          <span style={{ fontSize: 17, color: COLORS.textMuted }}>{sent} / {spec.sizeMB} MB · part {part}/{spec.parts}</span>
+        </div>
+        <div style={{ height: 10, borderRadius: RADIUS.full, background: "rgba(0,0,0,0.08)", overflow: "hidden" }}>
+          <div style={{ height: "100%", width: `${pct}%`, background: COLORS.signalBlue, borderRadius: RADIUS.full }} />
+        </div>
+        <div style={{ display: "flex", gap: 14, marginTop: 22 }}>
+          <Btn label="control.pause()" />
+          <Btn label="control.resume()" ghost />
+        </div>
+      </div>
+    </PanelCard>
+  );
+};
+
+const Btn: React.FC<{ label: string; ghost?: boolean }> = ({ label, ghost }) => (
+  <span style={{ flex: 1, textAlign: "center", padding: "12px", borderRadius: RADIUS.md, fontSize: 17, fontWeight: 600, color: ghost ? COLORS.textMuted : "#c2410c", background: ghost ? "transparent" : "rgba(194,65,12,0.10)", border: `1px solid ${ghost ? COLORS.hairline : "rgba(194,65,12,0.25)"}` }}>{label}</span>
+);

package/src/components/panels/index.tsx

@@ -0,0 +1,34 @@
+import type { PanelSpec } from "../../schema/beats";
+import { FeedPanel } from "./Feed";
+import { UploadProgressPanel } from "./UploadProgress";
+import { DataTablePanel } from "./DataTable";
+import { StatusPanel } from "./Status";
+import { StatPanel } from "./Stat";
+import { ProofPanel } from "./Proof";
+import { StreamResumePanel } from "./StreamResume";
+import { ForkPanel } from "./Fork";
+import { DiagramPanel } from "./Diagram";
+
+/** Resolve a PanelSpec (by its `kind`) to the right panel component. */
+export const Panel: React.FC<{ spec: PanelSpec }> = ({ spec }) => {
+  switch (spec.kind) {
+    case "feed":
+      return <FeedPanel spec={spec} />;
+    case "upload-progress":
+      return <UploadProgressPanel spec={spec} />;
+    case "data-table":
+      return <DataTablePanel spec={spec} />;
+    case "status":
+      return <StatusPanel spec={spec} />;
+    case "stat":
+      return <StatPanel spec={spec} />;
+    case "proof":
+      return <ProofPanel spec={spec} />;
+    case "stream-resume":
+      return <StreamResumePanel spec={spec} />;
+    case "fork":
+      return <ForkPanel spec={spec} />;
+    case "diagram":
+      return <DiagramPanel spec={spec} />;
+  }
+};

package/src/content/clarinet-3.18.beats.ts

@@ -0,0 +1,58 @@
+import type { ChangelogInput } from "../schema/beats";
+
+/**
+ * T0.1b — generalization proof on a TRUE external repo (stx-labs/clarinet, a Rust
+ * CLI, not a TS SDK). Sourced generically:
+ *   - latest substantive release: GitHub release v3.18.0 → "Clarity 6 preview" + linter
+ *   - honest commands: README (clarinet check --show-lints, brew install clarinet)
+ * No Secondlayer anything — different project, different shape (CLI/bash + checks).
+ */
+const BG = "backgrounds/pennybacker.png";
+
+const video: ChangelogInput = {
+  format: "16x9",
+  beats: [
+    {
+      id: "opener",
+      durationInFrames: 150,
+      background: { src: BG },
+      eyebrow: "new in clarinet 3.18",
+      headline: "Clarity 6, in preview.",
+    },
+    {
+      id: "lint",
+      durationInFrames: 220,
+      background: { src: BG },
+      eyebrow: "clarinet check",
+      headline: "Lint as you check.",
+      code: {
+        filename: "terminal",
+        lang: "bash",
+        source: `clarinet contract new counter
+clarinet check --show-lints`,
+      },
+      panel: {
+        kind: "status",
+        title: "clarinet check",
+        services: [
+          { name: "counter.clar", state: "ok", detail: "checked" },
+          { name: "type analysis", state: "ok" },
+          { name: "unnecessary_tuple", state: "idle", detail: "style lint" },
+          { name: "clarity 6", state: "ok", detail: "preview" },
+        ],
+      },
+    },
+    {
+      id: "cta",
+      durationInFrames: 160,
+      background: { src: BG },
+      headline: "Start building.",
+      layout: "center",
+      code: { filename: "terminal", lang: "bash", source: `brew install clarinet` },
+      badge: "v3.18",
+      caption: "write · test · deploy on Stacks",
+    },
+  ],
+};
+
+export default video;

package/src/content/gradient-demo.beats.ts

@@ -0,0 +1,29 @@
+import type { ChangelogInput } from "../schema/beats";
+
+/**
+ * Proves the AI-free style packs: a gradient background — no painting, no OpenAI,
+ * no committed art. A brand-new user can render a video out of the box.
+ */
+const GRADIENT: [string, string] = ["#312e81", "#0b1120"]; // indigo → slate
+
+const video: ChangelogInput = {
+  format: "16x9",
+  beats: [
+    {
+      id: "opener",
+      durationInFrames: 150,
+      background: { gradient: GRADIENT, angle: 155 },
+      eyebrow: "milestone",
+      headline: "A million installs.",
+    },
+    {
+      id: "stat",
+      durationInFrames: 170,
+      background: { gradient: GRADIENT, angle: 155 },
+      headline: "Thank you.",
+      panel: { kind: "stat", value: "1,000,000", label: "downloads", sub: "and counting" },
+    },
+  ],
+};
+
+export default video;

package/src/content/index-decoded.beats.ts

@@ -0,0 +1,93 @@
+import type { ChangelogInput } from "../schema/beats";
+
+/**
+ * Real changelog: the Index full decoded layer (sdk@5.5). Three beats over one
+ * "Hill Country Sublime" painting (continuity, like the reference video) — art +
+ * motion vocabulary + engine, end to end.
+ */
+const BG = "backgrounds/mount-bonnell.png";
+
+const video: ChangelogInput = {
+  format: "16x9",
+  beats: [
+    {
+      id: "events",
+      durationInFrames: 235,
+      background: { src: BG },
+      eyebrow: "new in sdk 5.5",
+      headline: "Every event, decoded.",
+      code: {
+        filename: "events.ts",
+        lang: "ts",
+        source: `import { Secondlayer } from "@secondlayer/sdk";
+
+const sl = new Secondlayer();
+
+const { events } = await sl.index.events({
+  eventType: "ft_transfer",
+  limit: 50,
+});`,
+      },
+      panel: {
+        kind: "feed",
+        title: "index.events",
+        subtitle: "ft_transfer",
+        rows: [
+          { badge: "sBTC", label: "SP2J6…WVEF", value: "1,200.00" },
+          { badge: "USDA", label: "SP3K9…X1A0", value: "48.50" },
+          { badge: "ALEX", label: "SPF8M…7QQC", value: "9,000.00" },
+          { badge: "sBTC", label: "SP1Y4…NZ2D", value: "150.00" },
+          { badge: "WELSH", label: "SPGR2…0KME", value: "73.25" },
+        ],
+      },
+    },
+    {
+      id: "contract-calls",
+      durationInFrames: 235,
+      background: { src: BG },
+      eyebrow: "new in sdk 5.5",
+      headline: "Contract calls, typed.",
+      code: {
+        filename: "calls.ts",
+        lang: "ts",
+        source: `const { calls } = await sl.index.contractCalls({
+  contract: "SP….amm-pool-v2",
+  function: "swap-x-for-y",
+  limit: 4,
+});`,
+      },
+      panel: {
+        kind: "data-table",
+        title: "index.contractCalls",
+        columns: ["block", "function", "result"],
+        rows: [
+          ["951475", "swap-x-for-y", "(ok u1200)"],
+          ["951474", "swap-x-for-y", "(ok u48)"],
+          ["951472", "add-liquidity", "(ok u9000)"],
+          ["951470", "swap-x-for-y", "(ok u150)"],
+        ],
+      },
+    },
+    {
+      id: "pipeline",
+      durationInFrames: 180,
+      background: { src: BG },
+      headline: "Decoded once. Query forever.",
+      panel: {
+        kind: "diagram",
+        nodes: [
+          { id: "node", label: "Stacks node", type: "default" },
+          { id: "idx", label: "Indexer", type: "data" },
+          { id: "api", label: "Index API", type: "api" },
+        ],
+        edges: [
+          { from: "node", to: "idx", label: "raw events" },
+          { from: "idx", to: "api", label: "decoded" },
+        ],
+        note: "decoded once — query forever",
+      },
+    },
+  ],
+};
+
+export default video;

package/src/content/mainnet-launch.beats.ts

@@ -0,0 +1,70 @@
+import type { ChangelogInput } from "../schema/beats";
+
+/**
+ * A product *announcement* (not a changelog) — same engine, different shape:
+ * opener title card → big stat → feature → install closer. Mirrors the arc of a
+ * classic launch video.
+ */
+const PENNYBACKER = "backgrounds/pennybacker.png";
+const BONNELL = "backgrounds/mount-bonnell.png";
+
+const video: ChangelogInput = {
+  format: "16x9",
+  beats: [
+    // 1 · Opener — headline only over the painting
+    {
+      id: "opener",
+      durationInFrames: 150,
+      background: { src: PENNYBACKER },
+      eyebrow: "announcing",
+      headline: "Secondlayer is live on mainnet.",
+    },
+    // 2 · Big stat — the announcement primitive (counts up)
+    {
+      id: "scale",
+      durationInFrames: 170,
+      background: { src: BONNELL },
+      headline: "Indexed from genesis.",
+      panel: { kind: "stat", value: "10,000,000", label: "events decoded", sub: "block 0 → chain tip" },
+    },
+    // 3 · Feature — code + live panel
+    {
+      id: "query",
+      durationInFrames: 235,
+      background: { src: PENNYBACKER },
+      headline: "Query it in three lines.",
+      code: {
+        filename: "events.ts",
+        lang: "ts",
+        source: `const { events } = await sl.index.events({
+  eventType: "ft_transfer",
+  limit: 50,
+});`,
+      },
+      panel: {
+        kind: "feed",
+        title: "index.events",
+        subtitle: "ft_transfer",
+        rows: [
+          { badge: "sBTC", label: "SP2J6…WVEF", value: "1,200.00" },
+          { badge: "USDA", label: "SP3K9…X1A0", value: "48.50" },
+          { badge: "ALEX", label: "SPF8M…7QQC", value: "9,000.00" },
+          { badge: "sBTC", label: "SP1Y4…NZ2D", value: "150.00" },
+        ],
+      },
+    },
+    // 4 · Install closer — centered terminal + tagline caption
+    {
+      id: "cta",
+      durationInFrames: 160,
+      background: { src: BONNELL },
+      headline: "Start building.",
+      layout: "center",
+      code: { filename: "terminal", lang: "bash", source: `bun add @secondlayer/sdk` },
+      badge: "v6.3",
+      caption: "index · streams · datasets · subgraphs · subscriptions",
+    },
+  ],
+};
+
+export default video;