@waits/cadence 0.2.0

package/src/components/ChangelogScene.tsx

@@ -0,0 +1,117 @@
+import { AbsoluteFill, interpolate, Sequence, useCurrentFrame } from "remotion";
+import { COLORS, EASE } from "../brand/tokens";
+import { FONTS } from "../brand/fonts";
+import { isLightBackdrop } from "../brand/tone";
+import type { Beat, Format } from "../schema/beats";
+import { Background } from "./Background";
+import { Headline } from "./Headline";
+import { CodeWindow, codeTypingDoneFrame } from "./CodeWindow";
+import { Panel } from "./panels";
+
+/** Beat after the code finishes typing before the output panel "runs". */
+const OUTPUT_GAP = 10;
+
+const LAYOUT = {
+  "16x9": { top: "30%", dir: "row" as const, gap: 56, pad: "0 110px", codeFont: 24, codeMax: 820, panelW: 620, itemMax: 800 },
+  "1x1": { top: "29%", dir: "column" as const, gap: 22, pad: "0 6%", codeFont: 17, codeMax: 940, panelW: "100%", itemMax: 940 },
+  "9x16": { top: "23%", dir: "column" as const, gap: 30, pad: "0 6%", codeFont: 21, codeMax: 940, panelW: "100%", itemMax: 940 },
+};
+
+/**
+ * One beat: painting backdrop + Field Notebook UI layer. Reflows by format —
+ * 16:9 lays code + panel side-by-side; square/vertical stack them in a column.
+ */
+export const ChangelogScene: React.FC<{ beat: Beat; format: Format }> = ({ beat, format }) => {
+  const frame = useCurrentFrame();
+  const isWide = format === "16x9";
+  const stack = !isWide || beat.layout === "center";
+  const L = LAYOUT[format];
+  const light = isLightBackdrop(beat.background);
+  const captionIn = interpolate(frame, [40, 58], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+
+  // Sequential: the output panel waits for the code to finish "running".
+  const panelStart = beat.code ? codeTypingDoneFrame(beat.code.tokens ?? [], beat.code.motion) + OUTPUT_GAP : 0;
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: COLORS.ink }}>
+      <Background bg={beat.background} />
+      <Headline eyebrow={beat.eyebrow} headline={beat.headline} motion={beat.headlineMotion} format={format} light={light} />
+
+      <div
+        style={{
+          position: "absolute",
+          top: L.top,
+          left: 0,
+          right: 0,
+          bottom: "6%",
+          display: "flex",
+          flexDirection: stack ? "column" : L.dir,
+          alignItems: stack ? "center" : "flex-start",
+          justifyContent: "center",
+          gap: L.gap,
+          padding: L.pad,
+        }}
+      >
+        {beat.code && (
+          <div style={{ flex: stack ? "0 0 auto" : "1 1 0", width: stack ? "100%" : undefined, maxWidth: stack ? L.itemMax : L.codeMax }}>
+            <CodeWindow filename={beat.code.filename} tokens={beat.code.tokens ?? []} motion={beat.code.motion} fontSize={L.codeFont} />
+          </div>
+        )}
+        {beat.panel && (
+          <div style={{ flex: "0 0 auto", width: stack ? "100%" : L.panelW, maxWidth: stack ? L.itemMax : 620 }}>
+            <Sequence from={panelStart} layout="none">
+              <Panel spec={beat.panel} />
+            </Sequence>
+          </div>
+        )}
+      </div>
+
+      {(beat.caption || beat.badge) && (
+        <div
+          style={{
+            position: "absolute",
+            bottom: "7%",
+            left: 0,
+            right: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 14,
+            opacity: captionIn,
+          }}
+        >
+          {beat.badge && (
+            <span
+              style={{
+                fontFamily: FONTS.mono,
+                fontSize: isWide ? 14 : 12,
+                fontWeight: 600,
+                letterSpacing: "0.08em",
+                textTransform: "uppercase",
+                color: COLORS.gold,
+                background: COLORS.goldSoft,
+                padding: "4px 10px",
+                borderRadius: 999,
+              }}
+            >
+              {beat.badge}
+            </span>
+          )}
+          {beat.caption && (
+            <span
+              style={{
+                fontFamily: FONTS.body,
+                fontSize: isWide ? 21 : 18,
+                color: light ? COLORS.textMuted : COLORS.titleWhite,
+                opacity: light ? 1 : 0.86,
+                textShadow: light ? "none" : "0 1px 14px rgba(30,41,59,0.5)",
+              }}
+            >
+              {beat.caption}
+            </span>
+          )}
+        </div>
+      )}
+    </AbsoluteFill>
+  );
+};

package/src/components/CodeWindow.tsx

@@ -0,0 +1,106 @@
+import { useCurrentFrame } from "remotion";
+import { CARET_BG, COLORS, FLOAT_SHADOW } from "../brand/tokens";
+import { FONTS } from "../brand/fonts";
+import { useMotion, type MotionSpec } from "../motion/useMotion";
+import { CODE_BG, type CodeLine } from "../code/highlight";
+
+type Props = {
+  filename: string;
+  tokens: CodeLine[];
+  motion?: MotionSpec;
+  fontSize?: number;
+};
+
+const CHARS_PER_FRAME = 2.6;
+const typeStartFor = (motion?: MotionSpec) => (motion?.delay ?? 12) + 6;
+const totalChars = (tokens: CodeLine[]) =>
+  tokens.reduce((n, line) => n + line.reduce((m, t) => m + t.content.length, 0) + 1, 0);
+
+/** Frame at which the typewriter finishes — the output panel waits for this. */
+export const codeTypingDoneFrame = (tokens: CodeLine[], motion?: MotionSpec) =>
+  typeStartFor(motion) + Math.ceil(totalChars(tokens) / CHARS_PER_FRAME);
+
+/** Floating code window with a single-caret typewriter over pre-tokenized code. */
+export const CodeWindow: React.FC<Props> = ({ filename, tokens, motion = { enter: "settle", delay: 12 }, fontSize = 22 }) => {
+  const frame = useCurrentFrame();
+  const style = useMotion(motion);
+
+  const typeStart = typeStartFor(motion);
+  const total = totalChars(tokens);
+  const revealed = Math.min(total, Math.max(0, Math.round((frame - typeStart) * CHARS_PER_FRAME)));
+  const typing = revealed < total; // caret only while typing; gone once "run"
+  const caretOn = Math.floor(frame / 8) % 2 === 0;
+
+  let budget = revealed;
+  let caretPlaced = false; // exactly one caret, at the typing head
+  const lineHeight = Math.round(fontSize * 1.7);
+
+  const placeCaret = () => {
+    if (typing && !caretPlaced) {
+      caretPlaced = true;
+      return true;
+    }
+    return false;
+  };
+
+  const lines = tokens.map((line, li) => {
+    const out: React.ReactNode[] = [];
+    let caretHere = false;
+    for (let ti = 0; ti < line.length; ti++) {
+      const tok = line[ti];
+      if (budget <= 0) { caretHere = placeCaret(); break; }
+      const take = Math.min(tok.content.length, budget);
+      out.push(<span key={ti} style={{ color: tok.color }}>{tok.content.slice(0, take)}</span>);
+      budget -= take;
+      if (take < tok.content.length) { caretHere = placeCaret(); break; }
+    }
+    if (budget > 0) budget -= 1; // newline cost
+    else if (line.length === 0) caretHere = caretHere || placeCaret();
+    return (
+      <div key={li} style={{ minHeight: lineHeight, whiteSpace: "pre" }}>
+        {out}
+        {caretHere && (
+          <span
+            style={{
+              display: "inline-block",
+              width: fontSize * 0.5,
+              height: fontSize,
+              transform: "translateY(3px)",
+              background: CARET_BG,
+              boxShadow: "0 0 0 1.5px rgba(110,92,60,0.45)",
+              borderRadius: 2,
+              opacity: caretOn ? 1 : 0,
+            }}
+          />
+        )}
+      </div>
+    );
+  });
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        borderRadius: 20,
+        background: `${CODE_BG}f7`,
+        boxShadow: FLOAT_SHADOW,
+        backdropFilter: "blur(6px)",
+        overflow: "hidden",
+        border: "1px solid rgba(255,255,255,0.55)",
+        ...style,
+      }}
+    >
+      <div style={{ height: 54, display: "flex", alignItems: "center", padding: "0 22px", gap: 9 }}>
+        <Dot color="#f6645f" /><Dot color="#f7bd45" /><Dot color="#2fc94e" />
+        <span style={{ flex: 1, textAlign: "center", color: "rgba(0,0,0,0.34)", fontSize: 15, fontFamily: FONTS.mono, marginRight: 60 }}>{filename}</span>
+      </div>
+      <div style={{ padding: "26px 40px 42px", fontFamily: FONTS.mono, fontSize, lineHeight: `${lineHeight}px`, color: COLORS.ink }}>
+        {lines}
+      </div>
+    </div>
+  );
+};
+
+const Dot: React.FC<{ color: string }> = ({ color }) => (
+  <span style={{ width: 13, height: 13, borderRadius: "50%", background: color, display: "inline-block" }} />
+);

package/src/components/ContactSheet.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { AbsoluteFill, Img, continueRender, delayRender, staticFile } from "remotion";
+import { COLORS, RADIUS } from "../brand/tokens";
+import { FONTS } from "../brand/fonts";
+
+type Entry = { file: string; landmark: string; level: string; format: string; name: string };
+
+/**
+ * Review board for generated paintings. Reads the candidates manifest written by
+ * `bun run art` and lays them out in a labeled grid. Render with
+ * `remotion still ContactSheet out/contact.png` to pick winners, then move the
+ * chosen files from _candidates/ to committed public/backgrounds/.
+ */
+export const ContactSheet: React.FC = () => {
+  const [handle] = useState(() => delayRender("manifest"));
+  const [items, setItems] = useState<Entry[]>([]);
+
+  useEffect(() => {
+    fetch(staticFile("backgrounds/_candidates/manifest.json"))
+      .then((r) => (r.ok ? r.json() : []))
+      .then((d: Entry[]) => { setItems(d); continueRender(handle); })
+      .catch(() => continueRender(handle));
+  }, [handle]);
+
+  return (
+    <AbsoluteFill style={{ background: COLORS.paper, padding: 64, fontFamily: FONTS.body }}>
+      <div style={{ fontFamily: FONTS.display, fontSize: 44, fontWeight: 600, letterSpacing: "-0.02em", color: COLORS.ink }}>Hill Country Sublime</div>
+      <div style={{ fontFamily: FONTS.note, fontSize: 26, color: COLORS.signalBlue, marginBottom: 32 }}>
+        {items.length ? `${items.length} candidates — pick winners → public/backgrounds/` : "no candidates yet — run `bun run art --all`"}
+      </div>
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
+        {items.map((it) => (
+          <div key={it.name} style={{ borderRadius: RADIUS.lg, overflow: "hidden", border: `1px solid ${COLORS.hairline}`, background: COLORS.paperElevated }}>
+            <Img src={staticFile(it.file)} style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", display: "block" }} />
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "12px 16px" }}>
+              <span style={{ fontSize: 18, fontWeight: 600, color: COLORS.ink }}>{it.landmark}</span>
+              <span style={{ fontFamily: FONTS.mono, fontSize: 12, textTransform: "uppercase", letterSpacing: "0.06em", color: COLORS.textMuted }}>{it.level} · {it.format}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/src/components/Headline.tsx

@@ -0,0 +1,73 @@
+import { interpolate, useCurrentFrame } from "remotion";
+import { COLORS, EASE } from "../brand/tokens";
+import { FONTS } from "../brand/fonts";
+import { useMotion, type MotionSpec } from "../motion/useMotion";
+import type { Format } from "../schema/beats";
+
+// Per-format type scale. Eyebrow is a small tracked uppercase gold label (our
+// signature mono label = the reference's "NEW IN 1.7"); headline is a heavy,
+// tight Sora grotesk in warm near-white with a crisp-plus-soft shadow.
+const H = {
+  "16x9": { top: "13%", size: 72, eyebrow: 15, track: 0.18, max: "70%" },
+  "1x1": { top: "6%", size: 44, eyebrow: 13, track: 0.16, max: "86%" },
+  "9x16": { top: "8%", size: 52, eyebrow: 14, track: 0.16, max: "86%" },
+} as const;
+
+const HEADLINE_SHADOW = "0 1px 2px rgba(30,41,59,0.24), 0 6px 34px rgba(30,41,59,0.42)";
+// On a light backdrop, a soft white halo lifts the dark headline off the field.
+const HEADLINE_SHADOW_LIGHT = "0 1px 2px rgba(255,255,255,0.6)";
+
+export const Headline: React.FC<{ eyebrow?: string; headline: string; motion?: MotionSpec; format?: Format; light?: boolean }> = ({
+  eyebrow,
+  headline,
+  motion = { enter: "rise", delay: 8 },
+  format = "16x9",
+  light = false,
+}) => {
+  const frame = useCurrentFrame();
+  const style = useMotion(motion);
+  const m = H[format];
+
+  const eyebrowIn = interpolate(frame, [14, 28], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: EASE.smooth,
+  });
+
+  return (
+    <div style={{ position: "absolute", top: m.top, left: 0, right: 0, display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", ...style }}>
+      {eyebrow && (
+        <div
+          style={{
+            fontFamily: FONTS.mono,
+            fontSize: m.eyebrow,
+            fontWeight: 600,
+            letterSpacing: `${m.track}em`,
+            textTransform: "uppercase",
+            color: COLORS.gold,
+            opacity: eyebrowIn,
+            marginBottom: 16,
+            textShadow: light ? "none" : "0 1px 10px rgba(20,24,33,0.35)",
+          }}
+        >
+          {eyebrow}
+        </div>
+      )}
+      <div
+        style={{
+          fontFamily: FONTS.display,
+          fontSize: m.size,
+          fontWeight: 700,
+          letterSpacing: "-0.025em",
+          lineHeight: 1.0,
+          color: light ? COLORS.ink : COLORS.titleWhite,
+          textShadow: light ? HEADLINE_SHADOW_LIGHT : HEADLINE_SHADOW,
+          maxWidth: m.max,
+          textWrap: "balance",
+        }}
+      >
+        {headline}
+      </div>
+    </div>
+  );
+};

package/src/components/MotionReel.tsx

@@ -0,0 +1,108 @@
+import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";
+import { COLORS, EASE, FLOAT_SHADOW, RADIUS } from "../brand/tokens";
+import { FONTS } from "../brand/fonts";
+import { ENTER_PRESETS, type EnterPreset } from "../motion/names";
+import { countValue, drawDashoffset, enterStyle, staggerDelay, typewriterChars } from "../motion/presets";
+
+const LOOP = 90; // each preset replays every 3s
+const DUR = 22; // entrance length in frames
+
+const NOTES: Record<EnterPreset, string> = {
+  rise: "headlines",
+  settle: "windows + panels",
+  bloom: "backgrounds",
+  type: "code + terminal",
+  stagger: "list rows",
+  draw: "diagrams + badge",
+  count: "metrics",
+};
+
+/** Pure eased 0→1 progress within the current loop (no hooks). */
+const reveal = (frame: number, delay = 0, dur = DUR) =>
+  interpolate(frame % LOOP, [delay, delay + dur], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: EASE.smooth,
+  });
+
+const Tile: React.FC<{ name: EnterPreset; children: React.ReactNode }> = ({ name, children }) => (
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: 16,
+      padding: 28,
+      borderRadius: RADIUS.lg,
+      background: COLORS.paperElevated,
+      border: `1px solid ${COLORS.hairline}`,
+    }}
+  >
+    <div style={{ height: 120, display: "flex", alignItems: "center", justifyContent: "center" }}>{children}</div>
+    <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
+      <span style={{ fontFamily: FONTS.mono, fontSize: 18, fontWeight: 600, letterSpacing: "0.05em", textTransform: "uppercase", color: COLORS.ink }}>{name}</span>
+      <span style={{ fontFamily: FONTS.note, fontSize: 22, color: COLORS.textMuted }}>{NOTES[name]}</span>
+    </div>
+  </div>
+);
+
+/** A small mock "window" used by the transform presets. */
+const MockCard: React.FC<{ style: React.CSSProperties }> = ({ style }) => (
+  <div style={{ width: 180, height: 96, borderRadius: RADIUS.md, background: COLORS.paper, border: `1px solid ${COLORS.hairline}`, boxShadow: FLOAT_SHADOW, ...style }}>
+    <div style={{ height: 22, borderBottom: `1px solid ${COLORS.hairline}`, display: "flex", gap: 5, alignItems: "center", paddingLeft: 9 }}>
+      {["#f87171", "#fbbf24", "#34d399"].map((c) => (<span key={c} style={{ width: 7, height: 7, borderRadius: "50%", background: c }} />))}
+    </div>
+  </div>
+);
+
+const Demo: React.FC<{ name: EnterPreset }> = ({ name }) => {
+  const frame = useCurrentFrame();
+  const p = reveal(frame);
+  switch (name) {
+    case "rise":
+    case "settle":
+    case "bloom":
+      return <MockCard style={enterStyle(name, p)} />;
+    case "stagger":
+      return (
+        <div style={{ display: "flex", flexDirection: "column", gap: 8, width: 200 }}>
+          {[0, 1, 2].map((i) => (
+            <div key={i} style={{ height: 24, borderRadius: RADIUS.sm, background: COLORS.signalBlueSoft, border: `1px solid ${COLORS.signalBlueBorder}`, ...enterStyle("stagger", reveal(frame, staggerDelay(i, 6))) }} />
+          ))}
+        </div>
+      );
+    case "type": {
+      const src = "sl.index.events()";
+      return <span style={{ fontFamily: FONTS.mono, fontSize: 22, color: COLORS.ink, whiteSpace: "pre" }}>{src.slice(0, typewriterChars(p, src.length))}<Caret /></span>;
+    }
+    case "draw": {
+      const C = 2 * Math.PI * 34;
+      return (
+        <svg width={120} height={120} viewBox="0 0 120 120">
+          <circle cx={60} cy={60} r={34} fill="none" stroke={COLORS.markerPink} strokeWidth={4} strokeLinecap="round" strokeDasharray={C} strokeDashoffset={drawDashoffset(p, C)} transform="rotate(-90 60 60)" />
+          <text x={60} y={68} textAnchor="middle" fontFamily={FONTS.note} fontSize={28} fill={COLORS.markerPink} opacity={p}>NEW</text>
+        </svg>
+      );
+    }
+    case "count":
+      return <span style={{ fontFamily: FONTS.mono, fontSize: 46, fontWeight: 600, color: COLORS.ink, fontVariantNumeric: "tabular-nums" }}>{Math.round(countValue(p, 9000)).toLocaleString()}</span>;
+  }
+};
+
+const Caret: React.FC = () => {
+  const frame = useCurrentFrame();
+  return <span style={{ display: "inline-block", width: 10, height: 22, transform: "translateY(4px)", background: COLORS.ink, opacity: Math.floor(frame / 8) % 2 === 0 ? 1 : 0 }} />;
+};
+
+export const MotionReel: React.FC = () => {
+  return (
+    <AbsoluteFill style={{ background: COLORS.paper, backgroundImage: `radial-gradient(${COLORS.hairline} 1px, transparent 1px)`, backgroundSize: "30px 30px", padding: 72 }}>
+      <div style={{ fontFamily: FONTS.display, fontSize: 46, fontWeight: 600, letterSpacing: "-0.02em", color: COLORS.ink, marginBottom: 8 }}>Motion vocabulary</div>
+      <div style={{ fontFamily: FONTS.note, fontSize: 26, color: COLORS.signalBlue, marginBottom: 36 }}>ease-out only — smooth enters, snappy pops</div>
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
+        {ENTER_PRESETS.map((name) => (
+          <Tile key={name} name={name}><Demo name={name} /></Tile>
+        ))}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/src/components/panels/DataTable.tsx

@@ -0,0 +1,34 @@
+import { interpolate, useCurrentFrame } from "remotion";
+import { COLORS, EASE } from "../../brand/tokens";
+import { FONTS } from "../../brand/fonts";
+import { enterStyle, staggerDelay } from "../../motion/presets";
+import type { PanelSpec } from "../../schema/beats";
+import { PanelCard } from "./PanelCard";
+
+type Spec = Extract<PanelSpec, { kind: "data-table" }>;
+
+const ROW_START = 24;
+
+export const DataTablePanel: React.FC<{ spec: Spec }> = ({ spec }) => {
+  const frame = useCurrentFrame();
+  return (
+    <PanelCard motion={spec.motion}>
+      <div style={{ padding: "22px 26px" }}>
+        {spec.title && <div style={{ fontSize: 18, fontWeight: 600, color: COLORS.ink, marginBottom: 16 }}>{spec.title}</div>}
+        <div style={{ display: "grid", gridTemplateColumns: `repeat(${spec.columns.length}, 1fr)`, columnGap: 18 }}>
+          {spec.columns.map((c) => (
+            <div key={c} style={{ fontFamily: FONTS.mono, fontSize: 13, textTransform: "uppercase", letterSpacing: "0.06em", color: COLORS.textMuted, paddingBottom: 12, borderBottom: `1px solid ${COLORS.hairline}` }}>{c}</div>
+          ))}
+          {spec.rows.map((row, ri) => {
+            const start = ROW_START + staggerDelay(ri, 8);
+            const p = interpolate(frame, [start, start + 14], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+            const st = enterStyle("stagger", p);
+            return row.map((cell, ci) => (
+              <div key={`${ri}-${ci}`} style={{ fontFamily: FONTS.mono, fontSize: 18, color: ci === 0 ? COLORS.ink : "rgba(0,0,0,0.7)", padding: "14px 0", borderBottom: `1px solid ${COLORS.hairline}`, fontVariantNumeric: "tabular-nums", ...st }}>{cell}</div>
+            ));
+          })}
+        </div>
+      </div>
+    </PanelCard>
+  );
+};

package/src/components/panels/Diagram.tsx

@@ -0,0 +1,67 @@
+import { interpolate, useCurrentFrame } from "remotion";
+import { COLORS, EASE } from "../../brand/tokens";
+import { FONTS } from "../../brand/fonts";
+import { drawDashoffset } from "../../motion/presets";
+import type { PanelSpec } from "../../schema/beats";
+import { PanelCard } from "./PanelCard";
+
+type Spec = Extract<PanelSpec, { kind: "diagram" }>;
+
+const W = 620;
+const H = 240;
+const NW = 132;
+const NH = 62;
+
+const NODE_FILL = { default: COLORS.chrome, data: COLORS.signalBlueSoft, api: COLORS.signalBlue } as const;
+const NODE_STROKE = { default: COLORS.hairline, data: COLORS.signalBlueBorder, api: COLORS.signalBlue } as const;
+const NODE_TEXT = { default: COLORS.ink, data: COLORS.signalBlue, api: COLORS.paper } as const;
+
+export const DiagramPanel: React.FC<{ spec: Spec }> = ({ spec }) => {
+  const frame = useCurrentFrame();
+  const n = spec.nodes.length;
+  const gap = (W - NW * n) / (n + 1);
+  const cy = H / 2;
+  const pos = new Map(spec.nodes.map((node, i) => [node.id, { x: gap + i * (NW + gap), y: cy - NH / 2 }]));
+
+  return (
+    <PanelCard motion={spec.motion} style={{ background: "rgba(252,251,247,0.95)" }}>
+      <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ display: "block", padding: "8px" }}>
+        <defs>
+          <marker id="arrow" markerWidth="9" markerHeight="9" refX="7" refY="3" orient="auto">
+            <path d="M0,0 L7,3 L0,6 Z" fill={COLORS.textMuted} />
+          </marker>
+        </defs>
+        {spec.edges.map((e, i) => {
+          const a = pos.get(e.from)!;
+          const b = pos.get(e.to)!;
+          const x1 = a.x + NW, y1 = a.y + NH / 2, x2 = b.x - 4, y2 = b.y + NH / 2;
+          const len = Math.hypot(x2 - x1, y2 - y1);
+          const start = 16 + i * 8;
+          const p = interpolate(frame, [start, start + 18], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+          return (
+            <g key={i}>
+              <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={COLORS.textMuted} strokeWidth={1.5} markerEnd="url(#arrow)" strokeDasharray={len} strokeDashoffset={drawDashoffset(p, len)} />
+              {e.label && p > 0.6 && (
+                <text x={(x1 + x2) / 2} y={(y1 + y2) / 2 - 8} textAnchor="middle" fontFamily={FONTS.mono} fontSize={11} fill={COLORS.textMuted} opacity={(p - 0.6) / 0.4}>{e.label}</text>
+              )}
+            </g>
+          );
+        })}
+        {spec.nodes.map((node, i) => {
+          const pp = pos.get(node.id)!;
+          const start = 10 + i * 7;
+          const p = interpolate(frame, [start, start + 14], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+          return (
+            <g key={node.id} opacity={p} transform={`translate(0 ${(1 - p) * 8})`}>
+              <rect x={pp.x} y={pp.y} width={NW} height={NH} rx={8} fill={NODE_FILL[node.type]} stroke={NODE_STROKE[node.type]} strokeWidth={1.5} />
+              <text x={pp.x + NW / 2} y={pp.y + NH / 2 + 5} textAnchor="middle" fontFamily={FONTS.display} fontSize={15} fontWeight={600} fill={NODE_TEXT[node.type]}>{node.label}</text>
+            </g>
+          );
+        })}
+      </svg>
+      {spec.note && (
+        <div style={{ textAlign: "right", padding: "0 22px 16px", fontFamily: FONTS.note, fontSize: 22, color: COLORS.signalBlue }}>{spec.note}</div>
+      )}
+    </PanelCard>
+  );
+};

package/src/components/panels/Feed.tsx

@@ -0,0 +1,46 @@
+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: "feed" }>;
+
+const ROW_START = 26;
+const ROW_STAGGER = 11;
+const ROW_DUR = 16;
+
+export const FeedPanel: React.FC<{ spec: Spec }> = ({ spec }) => {
+  const frame = useCurrentFrame();
+  const pulse = 0.5 + 0.5 * Math.sin(frame / 6);
+  return (
+    <PanelCard motion={spec.motion}>
+      <PanelHeader>
+        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+          <span style={{ color: COLORS.ink, fontSize: 19, fontWeight: 600 }}>{spec.title}</span>
+          {spec.subtitle && <span style={{ color: COLORS.textMuted, fontSize: 17 }}>{spec.subtitle}</span>}
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
+          <span style={{ width: 10, height: 10, borderRadius: "50%", background: COLORS.successGreen, opacity: 0.4 + 0.6 * pulse }} />
+          <span style={{ color: "#16a34a", fontSize: 18, fontFamily: FONTS.note }}>{spec.status}</span>
+        </div>
+      </PanelHeader>
+      <div style={{ padding: "10px 12px 16px" }}>
+        {spec.rows.map((row, i) => {
+          const start = ROW_START + staggerDelay(i, ROW_STAGGER);
+          const p = interpolate(frame, [start, start + ROW_DUR], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE.smooth });
+          return (
+            <div key={i} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "15px 18px", margin: "4px 0", borderRadius: RADIUS.md, background: i % 2 === 0 ? "rgba(0,0,0,0.035)" : "transparent", ...enterStyle("stagger", p) }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
+                <span style={{ fontSize: 13, fontWeight: 700, color: COLORS.signalBlue, background: COLORS.signalBlueSoft, padding: "4px 9px", borderRadius: RADIUS.sm + 4, letterSpacing: 0.3 }}>{row.badge}</span>
+                <span style={{ color: "rgba(0,0,0,0.7)", fontSize: 19 }}>→ {row.label}</span>
+              </div>
+              <span style={{ color: COLORS.ink, fontSize: 19, fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{row.value}</span>
+            </div>
+          );
+        })}
+      </div>
+    </PanelCard>
+  );
+};