wizz-method 2.16.0 → 2.17.1

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

@@ -0,0 +1,111 @@
+import React, { useMemo } from "react";
+import { AbsoluteFill, Audio, Sequence, interpolate, staticFile } from "remotion";
+import { Captions } from "./captions";
+import { Backdrop, Stage, clamp } from "./primitives";
+import { SceneView, type SceneDef } from "./scenes";
+import { ThemeContext, mergeTheme, type EditorialTheme } from "./theme";
+import { at, buildScenes, toFrames, totalSeconds, type WordsData } from "./timeline";
+import exampleWords from "./example-words.json";
+
+// Composição genérica do estilo "motion editorial": um objeto por vez no centro,
+// troca por transformação (cena sobe enquanto a próxima entra), música baixa contínua,
+// SFX raro, legenda pequena. Tudo que muda de vídeo para vídeo entra por props.
+
+export type SfxDef = { atWord: string; offset?: number; src: string; volume?: number; durationSec?: number };
+
+export type AudioProps = {
+  voice?: string; // staticFile, ex.: "editorial/voice.wav"
+  music?: string; // cama contínua
+  musicVolume?: number; // padrão 0.2
+  sfx?: SfxDef[]; // em ordem de aparição na fala; no máximo ~1 a cada 10 s
+};
+
+export type EditorialReelProps = {
+  words: WordsData;
+  scenes: SceneDef[];
+  theme?: Partial<EditorialTheme>;
+  audio?: AudioProps;
+  overlap?: number; // s de sobreposição entre cenas
+  tailSeconds?: number; // respiro depois da última palavra
+};
+
+export const exampleScenes: SceneDef[] = [
+  { kind: "hook", at: "I", a: "I shipped an app", b: "in one weekend." },
+  { kind: "prompt", at: "Here", a: "I only tell", b: "the agent what I want.", prompt: "build the signup page", marks: { typed: "want" }, typedMark: "typed" },
+  { kind: "phone", at: "Look", scale: 1 },
+  {
+    kind: "numbers", at: "In", chip: "48 hours",
+    marks: { c1: "31", c2: "12" },
+    counters: [{ to: 31, label: "commits", mark: "c1" }, { to: 12, label: "tests", mark: "c2" }],
+  },
+  { kind: "steps", at: "Three", prompt: "three agents", items: ["writes", "tests", "reviews"], marks: { typed: "agents" }, typedMark: "typed" },
+  {
+    kind: "doc", at: "First", title: "spec.md", altTitle: "agent coding",
+    marks: { code: "then", review: "code" },
+    pages: [
+      { lines: ["# Signup page", "", "- email and password", "- validate on submit", "- show errors inline", "- redirect to dashboard"] },
+      { mono: true, mark: "code", lines: ["export async function signUp(", "  input: SignUpInput", ") {", "  const data = schema.parse(input)", "  return createUser(data)", "}"] },
+    ],
+    reviewers: { labels: ["correctness", "security", "regression", "scope"], mark: "review" },
+  },
+  { kind: "cta", at: "Comment", a: "Comment", b: "SHIP", keyword: "SHIP", footer: "and I send you the prompt", hideCaptions: true },
+];
+
+export const exampleProps: EditorialReelProps = {
+  words: exampleWords as WordsData,
+  scenes: exampleScenes,
+  // Áudio entra por staticFile (arquivos em public/): descomente e troque os nomes.
+  // audio: { voice: "editorial/voice.wav", music: "editorial/music.mp3", sfx: [{ atWord: "Here", offset: -0.15, src: "editorial/swoosh.mp3", volume: 0.16 }] },
+};
+
+export const exampleSeconds = totalSeconds(exampleProps.words);
+
+export const EditorialReel: React.FC<EditorialReelProps> = ({
+  words, scenes, theme, audio, overlap = 0.12, tailSeconds = 1.4,
+}) => {
+  const merged = useMemo(() => mergeTheme(theme), [theme]);
+  const end = totalSeconds(words, tailSeconds);
+  const timed = useMemo(() => buildScenes(words.words, scenes, { end, overlap }), [words, scenes, end, overlap]);
+  const ctaStart = timed.find((s) => s.def.kind === "cta" && s.def.hideCaptions)?.from;
+  const sfx = useMemo(
+    () =>
+      (audio?.sfx ?? []).reduce<{ cursor: number; items: { from: number; def: SfxDef }[] }>(
+        (acc, def) => {
+          const t = at(words.words, def.atWord, acc.cursor);
+          return { cursor: t, items: [...acc.items, { from: Math.max(0, t + (def.offset ?? 0)), def }] };
+        },
+        { cursor: 0, items: [] },
+      ).items,
+    [audio, words],
+  );
+  const endFrame = toFrames(end);
+  const fadeOutFrame = toFrames(end - 2);
+  const musicVolume = audio?.musicVolume ?? 0.2;
+  return (
+    <ThemeContext.Provider value={merged}>
+      <AbsoluteFill>
+        <Backdrop />
+        {audio?.music ? (
+          <Audio
+            src={staticFile(audio.music)}
+            volume={(f) => interpolate(f, [0, 15, fadeOutFrame, endFrame], [0, musicVolume, musicVolume, 0], clamp)}
+          />
+        ) : null}
+        {audio?.voice ? <Audio src={staticFile(audio.voice)} /> : null}
+        {timed.map((s, i) => (
+          <Sequence key={i} from={toFrames(s.from)} durationInFrames={Math.max(1, toFrames(s.dur))}>
+            <Stage dur={s.dur}>
+              <SceneView scene={s.def} ctx={{ dur: s.dur, mark: (name, fb = 0) => (name ? s.marks[name] ?? fb : fb) }} />
+            </Stage>
+          </Sequence>
+        ))}
+        {sfx.map((s, i) => (
+          <Sequence key={`sfx${i}`} from={toFrames(s.from)} durationInFrames={toFrames(s.def.durationSec ?? 1)}>
+            <Audio src={staticFile(s.def.src)} volume={s.def.volume ?? 0.16} />
+          </Sequence>
+        ))}
+        <Captions words={words.words} hideFrom={ctaStart === undefined ? undefined : ctaStart} />
+      </AbsoluteFill>
+    </ThemeContext.Provider>
+  );
+};

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
+}