Módulo 1.5 - Ecossistema: Remotion, Playwright, FFmpeg, Hyperframes e Skills

🗺️ A stack em uma frase

Hyperframes → Chromium → FFmpeg, com as Skills do Claude Code guiando as decisões estéticas e de pipeline.

Se você viesse do React, trocaria só a camada do meio por Remotion. Se só quisesse screenshot de página pra testar, usaria Playwright e pararia aí.

🎞️ FFmpeg — o encodador universal

FFmpeg é uma CLI clássica pra cortar, mixar, converter e encodar áudio e vídeo. Ele não sabe nada de HTML nem de animação — só pega frames brutos + trilhas de áudio e monta um MP4/WebM/MOV. É a engrenagem que todos os outros frameworks usam no fim.

📦 Exemplos práticos

Re-encodar um raw .mov pra MP4 leve (como a gente faz antes de referenciar um vídeo numa composição):

ffmpeg -i raw.mov -c:v libx264 -preset medium -crf 20 \
  -c:a aac -b:a 192k -movflags +faststart assets/clip.mp4

Extrair 1 frame em t=4.5s pra auditar um render (parte obrigatória da verificação visual):

ffmpeg -ss 4.5 -i renders/draft.mp4 -frames:v 1 -q:v 2 frame.png

Misturar narração + trilha com ducking (o que o Hyperframes faz automaticamente pra você):

ffmpeg -i narration.wav -i music.mp3 -filter_complex \
  "[1:a]volume=0.2[bg];[0:a][bg]amix=inputs=2:duration=longest" out.mp3

💡 Por que te importa

Quando um render do Hyperframes falha na última etapa com um erro críptico sobre "codec" ou "container", é o FFmpeg reclamando. Saber que existe esse processo por baixo economiza horas de debug.

🌐 Playwright vs Puppeteer — automação de browser

Ambos abrem um Chromium sem janela e deixam você controlar por código: clicar, digitar, scrollar, tirar screenshot. A diferença é o uso principal:

🎭

Playwright

Feito pra testes end-to-end e scraping. Suporta Chromium, Firefox e WebKit. API robusta de auto-waiting e seletores.

Mantido pela Microsoft. É o que você usa pra testar seu site ou extrair dados.

🤖

Puppeteer

Irmão mais antigo, do Google, só Chromium. Foi primeiro e ainda é a base de muita automação.

Quem usa: Hyperframes, Remotion e a maioria dos frameworks de render HTML-to-video.

🧭

Skill `/agent-browser` — captura sem escrever código

Quando você só quer "abre essa página, clica naquele botão e me devolve um screenshot", não precisa abrir um arquivo Playwright nem decorar API. A skill /agent-browser do Claude Code automatiza navegação, preenchimento de formulário, screenshot e extração de dados em linguagem natural — Claude orquestra Playwright/Puppeteer por baixo.

Exemplo de invocação no Claude Code:

/agent-browser

Abre http://localhost:3002/?comp=cena-3, dá seek pra
t=4.5s no timeline, tira screenshot da viewport e salva
em renders/audit/cena-3-t45.png. Confere se o texto
"INEMA.CLUB" tá visível no centro da tela.

Quando usar: auditar uma cena rodando no Studio, capturar prints pra HANDOFF, validar visual de uma landing antes de render. Quando NÃO usar: render de vídeo final (use Hyperframes) ou suíte de testes versionada (escreva Playwright direto).

📦 Exemplo prático de Playwright

Tirar screenshot do Studio rodando ao vivo, num timestamp específico — útil pra testar uma cena sem pagar render inteiro:

// test-scene.spec.js
const { test } = require('@playwright/test');

test('screenshot cena-3 at t=4.5s', async ({ page }) => {
  await page.goto('http://localhost:3002/?comp=cena-3');
  await page.evaluate(() => window.__timelines['cena-3'].seek(4.5));
  await page.screenshot({ path: 'cena-3-t45.png', fullPage: false });
});

⚠️ Armadilha comum

Playwright pode gravar vídeo da sessão (page.video()), mas não é render determinístico:

• Frame-rate varia com CPU
• Sem controle de sync de áudio
• Sem rendering em tempo virtual

Para motion graphics exporta, use Hyperframes ou Remotion — ambos controlam o virtual time e paralelizam frames entre workers.

⚛️ Remotion — vídeo em React

Remotion é um framework vídeo-como-código escrito em React. Você declara componentes TSX, usa hooks como useCurrentFrame(), e o CLI npx remotion render abre Chromium, captura frame a frame e manda pro FFmpeg.

📦 Cena Remotion de exemplo

import { useCurrentFrame, interpolate } from 'remotion';

export const FadeInTitle = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp' });

  return (
    <div style={{ opacity, fontSize: 90, color: '#fff' }}>
      INEMA.CLUB
    </div>
  );
};

✓ Pontos fortes

• Ecossistema React maduro (hooks, context, suspense)
• Tooling pesado: lambdas, server-side render, Players
• Ótimo se seu time já é React-native

✗ Pontos fracos

• Paywall comercial acima de certa escala de uso
• Precisa entender webpack + TSX + hooks pra editar
• Sem TTS/transcrição embutidos — tudo é plugin

💡 Onde este curso usa

Este workspace não é Remotion — é Hyperframes. Mas se você já conhece React ou quiser explorar, a skill /remotion (disponível no Claude Code) cobre o equivalente deste curso no ecossistema React.

✨ Hyperframes — vídeo em HTML + GSAP (o que a gente usa)

Hyperframes é o framework deste workspace. Mesma ideia do Remotion — Chromium captura frames, FFmpeg encoda — mas a superfície de autoria é HTML puro com atributos data-* e um timeline GSAP por composição.

📦 Mesma cena do tópico anterior, em Hyperframes

<div class="clip" data-start="0" data-duration="3" data-track-index="0">
  <h1 id="titulo" style="font-size:90px;color:#fff;opacity:0">INEMA.CLUB</h1>
</div>

<script>
  const tl = gsap.timeline({ paused: true });
  tl.to('#titulo', { opacity: 1, duration: 1 }, 0);
  window.__timelines['cena-1'] = tl;
</script>

✓ Pontos fortes

• HTML/CSS/JS puros — sem build step
• TTS (Kokoro) + transcrição (Whisper) no CLI
• 38 blocos de registry prontos (shaders, overlays, logos)
• Studio com hot reload em localhost:3002
• Sem paywall — mantido pela HeyGen

✗ Pontos fracos

• Ecossistema menor que Remotion
• Render contract é estrito (11 regras, veja Trilha 2)
• Sem composições imperativas (tudo declarado em HTML)

🎯 Por que este curso escolheu Hyperframes

Uma composição Hyperframes é um arquivo HTML que abre no navegador. Dá pra ler, editar e entender sem setup de React/TSX/webpack. É o menor atrito possível entre "tenho uma ideia" e "estou renderizando frames".

🧠 Skills (Claude Code) — prompts empacotados

Skills não renderizam nada. São markdown + frontmatter que ensinam o Claude a usar as ferramentas acima com bom gosto — convenções do framework, armadilhas conhecidas, receitas copy-pasteáveis.

🎒 Skills mais usadas neste curso

/hyperframes

Autoria de composições, legendas, TTS, audio-reactive

/hyperframes-cli

Comandos: init, add, lint, preview, render, transcribe, tts

/gsap

Easings, timelines, stagger, ScrollTrigger

/hyperframes-registry

Instalar blocos/componentes do catálogo

/make-a-video

Playbook ponta-a-ponta pra iniciantes

/short-form-video

9:16 talking-head + motion graphics

/website-to-hyperframes

Captura URL → composição em 7 passos

/agent-browser

Navegar, screenshotar e extrair dados de páginas em linguagem natural

/frontend-design

Landing pages, artifacts estáticos

/theme-factory

10 temas pré-prontos ou gerar um novo

/brand-guidelines

Sistema de design e tokens de marca

💡 Skill sem ferramenta é só texto

Uma skill bem usada economiza horas. Mas sem o framework por baixo (Hyperframes, FFmpeg, Chromium), a skill não tem o que executar — ela é só prompt. Por isso o npm install e o doctor do módulo 1.1 vêm antes.

🎯 Matriz de decisão — quando usar cada um

O mesmo problema pode caber em ferramentas diferentes. Este guia rápido te economiza tempo.

Preciso de...	Ferramenta	Por quê
Landing page estática, poster, artifact	`/frontend-design` ou `/canvas-design`	Sem vídeo, sem timeline — só um HTML/PDF final
Vídeo promocional 30s, TikTok, Reels	Hyperframes + `/hyperframes`	É o que este workspace faz melhor
Cortar/re-encodar um MP4 que já tenho	FFmpeg direto no terminal	Uma linha resolve, não precisa framework
Screenshot de uma cena pra auditar	Playwright + preview rodando	Mais rápido que render draft só pra ver 1 frame
Meu time é React e quer vídeo programático	Remotion + `/remotion`	Hooks e componentes familiares
Transformar um site em vídeo	`/website-to-hyperframes`	Playbook em 7 passos, já otimizado
Gerar narração pro vídeo sem estúdio	`hyperframes tts`	Kokoro-82M on-device, sem API key
Legenda sincronizada palavra-por-palavra	`hyperframes transcribe`	Whisper embutido, word-level timestamps

🧭 Regra geral

É estático e não muda com o tempo? → Claude Design / frontend skills
Tem timeline e sai como MP4/WebM? → Hyperframes (ou Remotion se React)
Só preciso mexer no arquivo final de vídeo? → FFmpeg
Preciso inspecionar uma página rodando? → Playwright
Qualquer uma das de cima + bom gosto? → Skill correspondente

📋 Resumo do Módulo

✓

FFmpeg — encodador universal, roda por baixo de tudo

✓

Playwright / Puppeteer — automação de browser; Playwright pra testes, Puppeteer dentro dos frameworks

✓

Remotion — vídeo-como-código em React; alternativa se seu time já vive no ecossistema

✓

Hyperframes — vídeo-como-código em HTML + GSAP; framework deste curso

✓

Skills — prompts empacotados que elevam qualidade; não funcionam sem ferramenta por baixo

✓

Matriz de decisão — sabe em qual camada está trabalhando quando algo quebra

Próxima Trilha:

Trilha 2 - Produção (Primeiro Vídeo, Deck+Sizzle, Short Vertical)

← Módulo Anterior Próxima Trilha →

🗺️ A stack em uma frase

🎞️ FFmpeg — o encodador universal

📦 Exemplos práticos

💡 Por que te importa

🌐 Playwright vs Puppeteer — automação de browser

Playwright

Puppeteer

Skill /agent-browser — captura sem escrever código

📦 Exemplo prático de Playwright

⚠️ Armadilha comum

⚛️ Remotion — vídeo em React

📦 Cena Remotion de exemplo

✓ Pontos fortes

✗ Pontos fracos

💡 Onde este curso usa

✨ Hyperframes — vídeo em HTML + GSAP (o que a gente usa)

📦 Mesma cena do tópico anterior, em Hyperframes

✓ Pontos fortes

✗ Pontos fracos

🎯 Por que este curso escolheu Hyperframes

🧠 Skills (Claude Code) — prompts empacotados

🎒 Skills mais usadas neste curso

💡 Skill sem ferramenta é só texto

🎯 Matriz de decisão — quando usar cada um

🧭 Regra geral

📋 Resumo do Módulo

Próxima Trilha:

Skill `/agent-browser` — captura sem escrever código