wizz-method 2.16.0 → 2.17.0

package/src/skills-lib/wizz-video-styles/assets/remotion/editorial/README.md

@@ -0,0 +1,77 @@
+# remotion-editorial
+
+Molde do estilo "motion editorial" (referência: shorts do Greg Isenberg): um objeto por vez no centro de um fundo claro com grade, cards escuros com sombra funda, serifa itálica bicolor, texto digitado em pílulas, conectores tracejados, música baixa e legenda pequena. Tudo guiado por palavras-âncora da fala (ctc-align).
+
+Testado com Remotion 4.0.527, React 18, `@remotion/google-fonts` 4.0.527. Canvas 1080x1920, 30 fps. Sem outras dependências.
+
+## Arquivos
+
+| arquivo | papel |
+|---|---|
+| `theme.ts` | `EditorialTheme`, `defaultTheme`, `mergeTheme`, `ThemeContext`, fontes (Playfair Display itálico, Inter, JetBrains Mono), `W/H/FPS` |
+| `primitives.tsx` | `Stage`, `Backdrop`, `Headline`, `Rays`, `Ring`, `Pill`, `Chip`, `Dash`, `PhoneCard`, `Counter`, `DocCard` |
+| `captions.tsx` | `Captions` (blocos de até 4 palavras, palavra falada em destaque) e `buildChunks` |
+| `timeline.ts` | `at(words, texto, after)`, `resolveMarks`, `buildScenes` (âncoras + sobreposição), `totalSeconds` |
+| `scenes.tsx` | tipo `SceneDef` (cenas como dados) e `SceneView` (7 tipos: hook, prompt, phone, numbers, steps, doc, cta) |
+| `EditorialReel.tsx` | composição genérica + `exampleScenes`, `exampleProps`, `exampleSeconds` |
+| `example-words.json` | palavras de exemplo no formato do ctc-align |
+
+## Como usar
+
+1. Copie a pasta inteira para `src/` do projeto Remotion (ex.: `src/editorial/`).
+2. Registre no `Root.tsx`:
+
+```tsx
+import { EditorialReel, exampleProps, exampleSeconds } from "./editorial/EditorialReel";
+import { FPS, H, W } from "./editorial/theme";
+
+<Composition
+  id="editorial-example"
+  component={EditorialReel}
+  defaultProps={exampleProps}
+  durationInFrames={Math.ceil(exampleSeconds * FPS)}
+  fps={FPS}
+  width={W}
+  height={H}
+/>
+```
+
+3. Troque as três entradas, nesta ordem:
+   - **palavras**: `words` = saída do ctc-align `{ words: [{ text, start, end }], total }`. Trocou a voz, realinhe o JSON; as cenas acompanham.
+   - **cenas**: array de `SceneDef`. Cada cena tem `at` (palavra onde ela começa) e `marks` opcional (nome -> palavra interna, ex.: quando o contador sobe). Palavra repetida: a busca é monotônica, então basta manter as cenas na ordem da fala. Palavra inexistente lança erro claro.
+   - **tema**: `theme={{ bg, accent, ... }}` parcial. Campos: `bg grid glow vignette ink card cardHi line onAccent accent accentWarm accentLight accentShadow dash shadow serif sans mono`.
+4. Duração: `totalSeconds(words, tail)` = fim da fala + 1,4 s.
+5. Áudio (opcional, arquivos em `public/`): `audio={{ voice: "x/voz.wav", music: "x/cama.mp3", musicVolume: 0.2, sfx: [{ atWord: "Here", offset: -0.15, src: "x/swoosh.mp3", volume: 0.16 }] }}`. Nomes passam por `staticFile`.
+6. Screenshot: `{ kind: "phone", src: "x/tela.png", ratio: altura/largura }` (iPhone 1206x2622 = `2622/1206`, é o padrão). Sem `src`, desenha uma tela de exemplo. `src` também aceita URL `https:` ou `data:`.
+7. Fontes: Playfair Display itálico (600/700) via `@remotion/google-fonts/PlayfairDisplay`, carregada em `theme.ts`.
+
+## Tipos de cena
+
+- `hook`: `a`, `b` (título bicolor) + anel girando.
+- `prompt`: título + pílula digitada + raios; `typedMark` define até quando digita.
+- `phone`: screenshot em card de celular.
+- `numbers`: chip + até 2 contadores (`mark` = palavra em que cada um começa a subir).
+- `steps`: pílula + raios + 3 chips ligados por tracejado.
+- `doc`: card de documento com páginas (texto, depois código mono) e até 4 chips de revisão.
+- `cta`: título + palavra-chave digitada + frase; `hideCaptions: true` some com a legenda dali em diante.
+
+Para criar um tipo novo: componha as primitivas num componente em `scenes.tsx`, acrescente o ramo na união `SceneDef` e no `switch` de `SceneView`.
+
+## Regras do estilo
+
+- Um objeto por vez no centro. Faixa útil y 180 a 1300; o terço de baixo é da legenda.
+- Troca por transformação, nunca corte seco: a cena sai subindo e sumindo enquanto a próxima entra por mola (`overlap` 0,12 s).
+- Música baixa e contínua, volume ~0,2, com fade de entrada e de saída.
+- SFX raro: no máximo ~1 a cada 10 s, volume baixo (~0,16), só em viradas grandes.
+- Legenda pequena, sem contorno, palavra falada em destaque; some quando a cena já carrega texto grande.
+- Serifa itálica só nos momentos-chave (títulos, pílulas, chips); sans na legenda e no corpo do documento; mono só em código.
+- Cor de destaque única; sobre a cor de destaque use `onAccent` (claro).
+- Timing sempre por âncora de palavra, nunca por segundo fixo.
+
+## Verificar
+
+```bash
+npx tsc --noEmit
+npx remotion still src/index.ts editorial-example out/f.png --frame=330
+```
+

package/src/skills-lib/wizz-video-styles/assets/remotion/editorial/captions.tsx

@@ -0,0 +1,56 @@
+import React, { useMemo } from "react";
+import { interpolate } from "remotion";
+import { clamp, useSeconds } from "./primitives";
+import { useTheme } from "./theme";
+import type { Word } from "./timeline";
+
+// Legenda discreta: blocos curtos de até 4 palavras, sem contorno, palavra falada em destaque.
+
+export type Chunk = { words: Word[]; start: number; end: number };
+
+const BREAK = /[,.:!?]$/;
+
+// Agrupa palavras em blocos: corta em 4 palavras, pontuação ou pausa > 0.35 s.
+export const buildChunks = (all: readonly Word[], maxWords = 4): Chunk[] => {
+  const ws = all.filter((w) => w.text.trim());
+  const raw = ws.reduce<{ done: Chunk[]; cur: Word[] }>(
+    (acc, w, i) => {
+      const cur = [...acc.cur, w];
+      const next = ws[i + 1];
+      const cut = cur.length === maxWords || BREAK.test(w.text) || !next || next.start - w.end > 0.35;
+      return cut
+        ? { done: [...acc.done, { words: cur, start: cur[0].start, end: w.end }], cur: [] }
+        : { ...acc, cur };
+    },
+    { done: [], cur: [] },
+  ).done;
+  // Cola o fim do bloco no começo do próximo quando a pausa é curta; senão segura 0,15 s.
+  return raw.map((c, i) => {
+    const next = raw[i + 1];
+    return { ...c, end: next && next.start - c.end < 0.5 ? next.start : c.end + 0.15 };
+  });
+};
+
+export const Captions: React.FC<{
+  words: readonly Word[];
+  hideFrom?: number; // s: some a partir daqui (ex.: cena final com texto próprio)
+  top?: number;
+  size?: number;
+}> = ({ words, hideFrom, top = 1560, size = 50 }) => {
+  const c = useTheme();
+  const t = useSeconds();
+  const chunks = useMemo(() => buildChunks(words), [words]);
+  if (hideFrom !== undefined && t >= hideFrom) return null;
+  const chunk = chunks.find((x) => t >= x.start && t < x.end);
+  if (!chunk) return null;
+  const opacity = interpolate(t, [chunk.start, chunk.start + 0.1], [0, 1], clamp);
+  return (
+    <div style={{ position: "absolute", top, left: 90, right: 90, textAlign: "center", opacity, fontFamily: c.sans, fontWeight: 700, fontSize: size, lineHeight: 1.25, color: c.ink }}>
+      {chunk.words.map((w) => (
+        <span key={w.start} style={{ color: t >= w.start && t < w.end + 0.05 ? c.accent : c.ink }}>
+          {w.text.replace(BREAK, "")}{" "}
+        </span>
+      ))}
+    </div>
+  );
+};

package/src/skills-lib/wizz-video-styles/assets/remotion/editorial/example-words.json

@@ -0,0 +1,285 @@
+{
+ "words": [
+  {
+   "text": "I",
+   "start": 0.04,
+   "end": 0.23
+  },
+  {
+   "text": "shipped",
+   "start": 0.26,
+   "end": 0.63
+  },
+  {
+   "text": "a",
+   "start": 0.66,
+   "end": 0.85
+  },
+  {
+   "text": "whole",
+   "start": 0.88,
+   "end": 1.19
+  },
+  {
+   "text": "app",
+   "start": 1.22,
+   "end": 1.47
+  },
+  {
+   "text": "in",
+   "start": 1.5,
+   "end": 1.72
+  },
+  {
+   "text": "one",
+   "start": 1.75,
+   "end": 2.0
+  },
+  {
+   "text": "weekend.",
+   "start": 2.03,
+   "end": 2.4
+  },
+  {
+   "text": "Here",
+   "start": 2.78,
+   "end": 3.06
+  },
+  {
+   "text": "is",
+   "start": 3.09,
+   "end": 3.31
+  },
+  {
+   "text": "how.",
+   "start": 3.34,
+   "end": 3.59
+  },
+  {
+   "text": "I",
+   "start": 3.97,
+   "end": 4.16
+  },
+  {
+   "text": "only",
+   "start": 4.19,
+   "end": 4.47
+  },
+  {
+   "text": "tell",
+   "start": 4.5,
+   "end": 4.78
+  },
+  {
+   "text": "the",
+   "start": 4.81,
+   "end": 5.06
+  },
+  {
+   "text": "agent",
+   "start": 5.09,
+   "end": 5.4
+  },
+  {
+   "text": "what",
+   "start": 5.43,
+   "end": 5.71
+  },
+  {
+   "text": "I",
+   "start": 5.74,
+   "end": 5.93
+  },
+  {
+   "text": "want.",
+   "start": 5.96,
+   "end": 6.24
+  },
+  {
+   "text": "Look",
+   "start": 6.62,
+   "end": 6.9
+  },
+  {
+   "text": "at",
+   "start": 6.93,
+   "end": 7.15
+  },
+  {
+   "text": "the",
+   "start": 7.18,
+   "end": 7.43
+  },
+  {
+   "text": "result.",
+   "start": 7.46,
+   "end": 7.8
+  },
+  {
+   "text": "A",
+   "start": 8.18,
+   "end": 8.37
+  },
+  {
+   "text": "real",
+   "start": 8.4,
+   "end": 8.68
+  },
+  {
+   "text": "screen.",
+   "start": 8.71,
+   "end": 9.05
+  },
+  {
+   "text": "In",
+   "start": 9.43,
+   "end": 9.65
+  },
+  {
+   "text": "forty",
+   "start": 9.68,
+   "end": 9.99
+  },
+  {
+   "text": "eight",
+   "start": 10.02,
+   "end": 10.33
+  },
+  {
+   "text": "hours,",
+   "start": 10.36,
+   "end": 10.67
+  },
+  {
+   "text": "31",
+   "start": 10.85,
+   "end": 11.07
+  },
+  {
+   "text": "commits",
+   "start": 11.1,
+   "end": 11.47
+  },
+  {
+   "text": "and",
+   "start": 11.5,
+   "end": 11.75
+  },
+  {
+   "text": "12",
+   "start": 11.78,
+   "end": 12.0
+  },
+  {
+   "text": "tests.",
+   "start": 12.03,
+   "end": 12.34
+  },
+  {
+   "text": "Three",
+   "start": 12.72,
+   "end": 13.03
+  },
+  {
+   "text": "agents",
+   "start": 13.06,
+   "end": 13.4
+  },
+  {
+   "text": "write,",
+   "start": 13.43,
+   "end": 13.74
+  },
+  {
+   "text": "test",
+   "start": 13.92,
+   "end": 14.2
+  },
+  {
+   "text": "and",
+   "start": 14.23,
+   "end": 14.48
+  },
+  {
+   "text": "review.",
+   "start": 14.51,
+   "end": 14.85
+  },
+  {
+   "text": "First",
+   "start": 15.23,
+   "end": 15.54
+  },
+  {
+   "text": "a",
+   "start": 15.57,
+   "end": 15.76
+  },
+  {
+   "text": "spec,",
+   "start": 15.79,
+   "end": 16.07
+  },
+  {
+   "text": "then",
+   "start": 16.25,
+   "end": 16.53
+  },
+  {
+   "text": "the",
+   "start": 16.56,
+   "end": 16.81
+  },
+  {
+   "text": "code.",
+   "start": 16.84,
+   "end": 17.12
+  },
+  {
+   "text": "Comment",
+   "start": 17.5,
+   "end": 17.87
+  },
+  {
+   "text": "SHIP",
+   "start": 17.9,
+   "end": 18.18
+  },
+  {
+   "text": "and",
+   "start": 18.21,
+   "end": 18.46
+  },
+  {
+   "text": "I",
+   "start": 18.49,
+   "end": 18.68
+  },
+  {
+   "text": "will",
+   "start": 18.71,
+   "end": 18.99
+  },
+  {
+   "text": "send",
+   "start": 19.02,
+   "end": 19.3
+  },
+  {
+   "text": "you",
+   "start": 19.33,
+   "end": 19.58
+  },
+  {
+   "text": "the",
+   "start": 19.61,
+   "end": 19.86
+  },
+  {
+   "text": "prompt.",
+   "start": 19.89,
+   "end": 20.23
+  }
+ ],
+ "total": 20.33
+}

package/src/skills-lib/wizz-video-styles/assets/remotion/editorial/primitives.tsx

@@ -0,0 +1,241 @@
+import React, { useId } from "react";
+import { AbsoluteFill, Easing, Img, interpolate, spring, staticFile, useCurrentFrame } from "remotion";
+import { FPS, H, W, useTheme } from "./theme";
+
+// Vocabulário do estilo: fundo claro com grade, cards escuros com sombra funda,
+// serifa itálica bicolor, pílula digitada, conector tracejado, raios, contador.
+
+export const clamp = { extrapolateLeft: "clamp", extrapolateRight: "clamp" } as const;
+export const ease = Easing.bezier(0.22, 1, 0.36, 1);
+export const useSeconds = (): number => useCurrentFrame() / FPS;
+export const pop = (frame: number, delay = 0): number =>
+  spring({ frame: frame - Math.round(delay * FPS), fps: FPS, config: { damping: 15, mass: 0.7 } });
+
+const CX = W / 2;
+
+// Envelope de cena: entra subindo com mola, sai subindo e sumindo (sem corte seco).
+export const Stage: React.FC<{ dur: number; children: React.ReactNode }> = ({ dur, children }) => {
+  const frame = useCurrentFrame();
+  const t = frame / FPS;
+  const s = pop(frame);
+  const out = interpolate(t, [dur - 0.3, dur], [0, 1], { ...clamp, easing: Easing.in(Easing.cubic) });
+  const cam = interpolate(t, [0, dur], [1, 1.035], clamp);
+  return (
+    <AbsoluteFill
+      style={{
+        opacity: Math.min(1, s * 1.4) * (1 - out),
+        transform: `translateY(${(1 - s) * 70 - out * 60}px) scale(${(0.94 + 0.06 * s) * cam})`,
+      }}
+    >
+      {children}
+    </AbsoluteFill>
+  );
+};
+
+export const Backdrop: React.FC = () => {
+  const c = useTheme();
+  return (
+    <AbsoluteFill
+      style={{
+        background: c.bg,
+        backgroundImage: `linear-gradient(${c.grid} 2px, transparent 2px), linear-gradient(90deg, ${c.grid} 2px, transparent 2px)`,
+        backgroundSize: "72px 72px",
+      }}
+    >
+      <AbsoluteFill style={{ background: `radial-gradient(ellipse at 50% 45%, ${c.glow}, rgba(0,0,0,0) 60%, ${c.vignette})` }} />
+    </AbsoluteFill>
+  );
+};
+
+// Título serifado em duas linhas: a primeira na cor do texto, a segunda no destaque.
+export const Headline: React.FC<{ a: string; b: string; top?: number; delay?: number; size?: number }> = ({
+  a, b, top = 300, delay = 0, size = 104,
+}) => {
+  const c = useTheme();
+  const frame = useCurrentFrame();
+  const s1 = pop(frame, delay);
+  const s2 = pop(frame, delay + 0.18);
+  const base = { fontFamily: c.serif, fontWeight: 700, fontSize: size, lineHeight: 1.0, letterSpacing: -2 } as const;
+  return (
+    <div style={{ position: "absolute", top, left: 0, right: 0, textAlign: "center" }}>
+      <div style={{ ...base, color: c.ink, opacity: s1, transform: `translateY(${(1 - s1) * 30}px)` }}>{a}</div>
+      <div style={{ ...base, color: c.accent, opacity: s2, transform: `translateY(${(1 - s2) * 30}px)` }}>{b}</div>
+    </div>
+  );
+};
+
+// Raios que "acendem" abaixo de uma pílula (o agente trabalhando). grow: 0..1.
+export const Rays: React.FC<{ grow: number; y: number; size?: number }> = ({ grow, y, size = 300 }) => {
+  const c = useTheme();
+  const frame = useCurrentFrame();
+  const n = 11;
+  return (
+    <div style={{ position: "absolute", left: CX - size, top: y, width: size * 2, height: size, overflow: "hidden" }}>
+      {Array.from({ length: n }, (_, i) => {
+        const angle = -80 + (160 / (n - 1)) * i;
+        const wobble = Math.sin(frame / 9 + i) * 0.06;
+        const len = size * (0.62 + (0.3 * ((i * 7) % 5)) / 4) * grow * (1 + wobble);
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute", left: size - 17, top: 0, width: 34, height: len, borderRadius: 17,
+              background: `linear-gradient(${c.accentWarm}, ${c.accentLight})`,
+              transformOrigin: "50% 0%", transform: `rotate(${angle}deg)`,
+              boxShadow: `0 10px 18px ${c.accentShadow}`,
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+// Anel girando: objeto-símbolo de abertura.
+export const Ring: React.FC<{ y?: number; size?: number }> = ({ y = 760, size = 420 }) => {
+  const c = useTheme();
+  const frame = useCurrentFrame();
+  const s = pop(frame, 0.1);
+  return (
+    <div style={{ position: "absolute", left: CX - size / 2, top: y, width: size, height: size, transform: `scale(${s}) rotate(${frame * 0.8}deg)` }}>
+      <div style={{ position: "absolute", inset: 0, borderRadius: "50%", border: `${size * 0.186}px solid ${c.accent}`, borderRightColor: "transparent", boxShadow: `0 50px 80px ${c.accentShadow}` }} />
+    </div>
+  );
+};
+
+// Pílula escura com texto digitado (input de prompt). Tempos em segundos da cena.
+export const Pill: React.FC<{
+  text: string; typeFrom: number; typeDur: number; y: number; w?: number; icon?: string; serif?: boolean;
+}> = ({ text, typeFrom, typeDur, y, w = 820, icon = "✦", serif = true }) => {
+  const c = useTheme();
+  const t = useSeconds();
+  const n = Math.round(interpolate(t, [typeFrom, typeFrom + typeDur], [0, text.length], clamp));
+  const caret = n < text.length && Math.floor(t * 3) % 2 === 0;
+  return (
+    <div style={{ position: "absolute", left: CX - w / 2, top: y, width: w, height: 150, borderRadius: 40, background: `linear-gradient(${c.cardHi}, ${c.card})`, boxShadow: c.shadow, display: "flex", alignItems: "center", padding: "0 44px", gap: 28 }}>
+      <div style={{ width: 62, height: 62, borderRadius: 18, background: c.accent, color: c.onAccent, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 34 }}>{icon}</div>
+      <div style={{ fontFamily: serif ? c.serif : c.sans, fontWeight: 600, fontSize: 56, color: c.line, whiteSpace: "nowrap" }}>
+        {text.slice(0, n)}
+        <span style={{ color: c.accentLight, opacity: caret ? 1 : 0 }}>|</span>
+      </div>
+    </div>
+  );
+};
+
+// Chip pequeno, centrado em (x, y). Entra com mola em `delay` (s).
+export const Chip: React.FC<{
+  label: string; x: number; y: number; delay: number; accent?: boolean; big?: boolean; icon?: string;
+}> = ({ label, x, y, delay, accent, big, icon = "▤" }) => {
+  const c = useTheme();
+  const s = pop(useCurrentFrame(), delay);
+  return (
+    <div style={{ position: "absolute", left: x, top: y, transform: `translate(-50%,-50%) scale(${s})`, opacity: s > 0.02 ? 1 : 0, background: accent ? c.accent : `linear-gradient(${c.cardHi}, ${c.card})`, color: accent ? c.onAccent : c.line, borderRadius: 26, padding: big ? "26px 40px" : "20px 32px", boxShadow: c.shadow, display: "flex", alignItems: "center", gap: 18, fontFamily: c.serif, fontWeight: 600, fontSize: big ? 52 : 44, whiteSpace: "nowrap" }}>
+      {icon ? <span style={{ fontFamily: c.sans, fontSize: big ? 34 : 28, opacity: 0.8 }}>{icon}</span> : null}
+      {label}
+    </div>
+  );
+};
+
+// Conector tracejado que se desenha de (x1,y1) a (x2,y2) a partir de `from` (s).
+export const Dash: React.FC<{ x1: number; y1: number; x2: number; y2: number; from: number; dur?: number }> = ({
+  x1, y1, x2, y2, from, dur = 0.45,
+}) => {
+  const c = useTheme();
+  const t = useSeconds();
+  const id = `dash${useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+  const p = interpolate(t, [from, from + dur], [0, 1], { ...clamp, easing: ease });
+  const len = Math.hypot(x2 - x1, y2 - y1);
+  const d = `M ${x1} ${y1} C ${x1} ${(y1 + y2) / 2}, ${(x1 + x2) / 2} ${y2}, ${x2} ${y2}`;
+  return (
+    <svg style={{ position: "absolute", inset: 0 }} width={W} height={H}>
+      <defs>
+        <mask id={id}>
+          <path d={d} stroke="#fff" strokeWidth={10} fill="none" strokeDasharray={len * 1.5} strokeDashoffset={len * 1.5 * (1 - p)} />
+        </mask>
+      </defs>
+      <path d={d} stroke={c.dash} strokeWidth={4} fill="none" strokeDasharray="10 12" mask={`url(#${id})`} />
+    </svg>
+  );
+};
+
+const resolveSrc = (src: string): string => (/^(https?:|data:)/.test(src) ? src : staticFile(src));
+
+// Celular-card com screenshot em proporção real. `ratio` = altura/largura da imagem
+// (iPhone 1206x2622 = 2.174). Sem `src`, desenha uma tela de exemplo (o molde roda sem assets).
+export const PhoneCard: React.FC<{
+  src?: string; y?: number; scale?: number; focusY?: number; maxH?: number; ratio?: number;
+}> = ({ src, y = 250, scale = 1, focusY = 0, maxH = 1180, ratio = 2622 / 1206 }) => {
+  const c = useTheme();
+  const w = 600 * scale;
+  const h = w * ratio;
+  const viewH = Math.min(h, maxH);
+  return (
+    <div style={{ position: "absolute", left: CX - w / 2 - 16, top: y, width: w + 32, height: viewH + 32, borderRadius: 74 * scale, background: c.card, padding: 16, boxShadow: c.shadow }}>
+      <div style={{ width: w, height: viewH, borderRadius: 60 * scale, overflow: "hidden", background: c.bg }}>
+        {src ? (
+          <Img src={resolveSrc(src)} style={{ width: w, height: h, transform: `translateY(${-focusY * scale}px)` }} />
+        ) : (
+          <div style={{ padding: `${60 * scale}px ${40 * scale}px`, display: "flex", flexDirection: "column", gap: 28 * scale }}>
+            <div style={{ height: 70 * scale, borderRadius: 20 * scale, background: c.accent }} />
+            {Array.from({ length: 6 }, (_, i) => (
+              <div key={i} style={{ height: 120 * scale, borderRadius: 24 * scale, background: c.line, opacity: 1 - i * 0.1 }} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// Card com número que sobe até `to` a partir de `delay` (s).
+export const Counter: React.FC<{ to: number; label: string; y: number; delay: number }> = ({ to, label, y, delay }) => {
+  const c = useTheme();
+  const frame = useCurrentFrame();
+  const s = pop(frame, delay);
+  const v = Math.round(interpolate(frame / FPS, [delay, delay + 1.0], [0, to], { ...clamp, easing: Easing.out(Easing.cubic) }));
+  return (
+    <div style={{ position: "absolute", left: 140, right: 140, top: y, height: 330, borderRadius: 44, background: `linear-gradient(${c.cardHi}, ${c.card})`, boxShadow: c.shadow, transform: `scale(${s})`, opacity: s > 0.02 ? 1 : 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
+      <div style={{ fontFamily: c.serif, fontWeight: 700, fontSize: 180, color: c.accentLight, lineHeight: 1 }}>{v}</div>
+      <div style={{ fontFamily: c.serif, fontWeight: 600, fontSize: 52, color: c.line, marginTop: 6 }}>{label}</div>
+    </div>
+  );
+};
+
+export type DocPage = { lines: string[]; at: number; mono?: boolean }; // `at` em s da cena
+const REVIEW_SPOTS = [
+  { x: 175, y: 560 }, { x: 905, y: 700 }, { x: 175, y: 1020 }, { x: 905, y: 1160 },
+] as const;
+
+// Card alto escuro (documento). Cada página troca o conteúdo e digita as linhas;
+// `reviewers` pendura até 4 chips conectados por tracejado ao redor do card.
+export const DocCard: React.FC<{
+  pages: DocPage[]; title: string; altTitle?: string; reviewers?: { labels: string[]; at: number };
+}> = ({ pages, title, altTitle, reviewers }) => {
+  const c = useTheme();
+  const t = useSeconds();
+  const page = [...pages].reverse().find((p) => t >= p.at) ?? pages[0];
+  const isAlt = page !== pages[0];
+  const shown = page.lines.slice(0, Math.round(interpolate(t, [page.at + 0.2, page.at + 1.2], [0, page.lines.length], clamp)));
+  return (
+    <>
+      <div style={{ position: "absolute", left: 220, top: 380, width: 640, height: 980, borderRadius: 48, background: `linear-gradient(${c.cardHi}, ${c.card})`, boxShadow: c.shadow, padding: "130px 48px 0", overflow: "hidden" }}>
+        {shown.map((l, i) => (
+          <div key={`${page.at}-${i}`} style={{ fontFamily: page.mono ? c.mono : c.sans, fontSize: 25, lineHeight: page.mono ? "46px" : "42px", color: i === 0 && !page.mono ? c.accentLight : c.line, whiteSpace: "nowrap", overflow: "hidden", opacity: 0.92 }}>
+            {l}
+          </div>
+        ))}
+      </div>
+      <Chip label={isAlt && altTitle ? altTitle : title} x={CX} y={380} delay={0.05} accent={isAlt} />
+      {(reviewers?.labels ?? []).slice(0, 4).map((label, i) => {
+        const spot = REVIEW_SPOTS[i];
+        const from = (reviewers?.at ?? 0) + i * 0.22;
+        return (
+          <React.Fragment key={label}>
+            <Dash x1={spot.x < CX ? 230 : 850} y1={spot.y} x2={spot.x} y2={spot.y} from={from} dur={0.2} />
+            <Chip label={label} x={spot.x} y={spot.y} delay={from} accent />
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
+};