🌱 Fundamentos

Conjunto mínimo de ferramentas que o pipeline Hyperframes exige: Node para rodar a CLI, FFmpeg para mexer em áudio/vídeo, Chrome para o render headless.

Sem o ambiente correto nenhum comando funciona. Resolver isso uma vez no início evita 80% dos bugs "não rodou aqui".

Node 20+, FFmpeg no PATH, Chrome atualizado, ~5 GB de disco, 16 GB RAM para preview fluido.

Processo de baixar o repositório e instalar as dependências Node uma única vez na raiz do workspace.

O kit é multi-projeto: node_modules fica na raiz e é compartilhado por todos os video-projects/. Instalar uma vez serve para todos.

git clone, npm install, monorepo de projetos, workspace compartilhado, .env.example para chaves opcionais.

Comando da CLI que verifica se Node, FFmpeg, Chrome e Docker estão presentes e com versões corretas.

Em vez de tentar renderizar e ver o que quebra, o doctor te diz exatamente o que falta e como resolver.

npx hyperframes doctor, relatório de dependências, pré-voo de pipeline.

Ambiente de autoria ao vivo — abre no navegador e recarrega automaticamente ao salvar qualquer arquivo.

Render demora minutos. Studio dá feedback em segundos. É onde 90% do trabalho de autoria acontece.

npx hyperframes preview, porta 3002, hot reload, scrubbing da timeline, URLs de sub-composição.

Duas ferramentas complementares: Claude Design gera designs estáticos ship-ready; Hyperframes renderiza vídeo determinístico em HTML + GSAP.

Saber quando usar cada uma economiza horas. Design primeiro, movimento depois — o vídeo herda a decisão visual do estático.

claude.ai/design, landing pages, pitch decks, protótipos, vídeo determinístico, timeline GSAP, pipeline programático.

Vocabulário básico: kinetic typography (tipografia em movimento), shaders (efeitos de transição em GPU), GSAP (biblioteca de animação), easing (curvas de aceleração).

Sem os termos certos você não consegue pedir o que quer nem entender a documentação. Este é o vocabulário mínimo.

Motion graphics, kinetic type, shader transitions, GSAP timeline, easing, data-attributes, render contract.

Slash command do Claude Code que estrutura um briefing em 10 perguntas e gera um prompt otimizado para colar em claude.ai/design.

Claude Design faz 10+ perguntas se você não front-loada elas. A skill antecipa tudo — você cola um prompt e já sai design real, não placeholder.

/design-designer, briefing estruturado, front-load de contexto, prompt copy-paste-ready.

Lista do que Claude Design prioriza: feeling, audience, fidelity, option count, design system, UI kit, brand context.

Saber o que a ferramenta quer nos bastidores faz você escrever briefings que geram resultados melhores na primeira tentativa.

Feeling dominante, fidelity lo-fi vs hi-fi, context imports, design system explícito, brand hex codes.

Arquivos de referência visual que você anexa ao prompt — Figma, repo GitHub, prints de UI existente, outros projetos do Claude Design.

"Bons designs hi-fi não nascem do zero — são enraizados em contexto existente." Sem imports, cai no default newspaper-minimalist.

Figma import, GitHub repo, screenshot upload, ground truth visual, DNA da marca extraído.

Padrão de pedido de múltiplas variações indo de "by-the-book" à mais ousada, para ter range de escolha.

Uma variação só te trava na primeira ideia. 4 variações te dão comparação real para escolher com critério.

Variation count, progressão safe-to-wild, axis de variação (cor, tipo, motion, layout), real range.

Recurso do Claude Design que expõe dimensões (cor acento, headline, motion) como controles toggleáveis no canvas — sem re-prompt.

Iteração visual em tempo real, sem queimar tokens. Tweaks persistem em disco, então sua versão fica salva.

Tweaks feature, toggleable controls, persist to disk, iteração sem re-prompt, 3-5 dimensões que importam.

Lista de itens a explicitamente banir no prompt: lorem ipsum, ícones genéricos de startup IA, blobs degradê flutuantes, referências a concorrentes, section labels preguiçosos.

Claude Design tem biases fortes. Sem banir explicitamente, sua landing sai com cara de "AI startup" genérica.

No lorem ipsum, no gradient blobs, no competitor refs, no generic section labels, descritivo humano.

Variáveis nomeadas que encapsulam decisões visuais (cor primária, raio de borda, espaçamento base). Um valor, um nome, usado em todo o sistema.

Muda o token, muda o sistema inteiro. Sem tokens, cada componente tem seu próprio hex hardcoded e a marca vira colcha de retalhos.

Cor, tipografia, espaçamento, raio, sombra, z-index. Um ponto único de verdade para cada decisão visual.

Sua paleta reduzida a 4–6 hex codes: primária (marca), accent (destaque), neutro escuro (fundo), neutro claro (texto), warn/hot (alerta).

Claude Design precisa de hex reais, não "azul bonito". Uma paleta enxuta e clara também é um princípio do MOTION_PHILOSOPHY (≤5 cores simbólicas).

Primary, accent, neutral, warn, contraste mínimo 4.5:1, paleta enxuta <5 cores.

Duas famílias tipográficas — uma para headlines (pode ser display/serif) e uma para body (sans-serif legível). Nunca mais que duas.

Três fontes viram ruído. Duas criam hierarquia limpa e reconhecível em estático e vídeo.

Headline typeface, body typeface, Google Fonts, font-display: swap, pairing serif+sans, geometric vs humanist.

Conjunto de diretivas sobre como elementos da sua marca se animam: duração padrão, easing, quais transições usar, quais evitar.

Marca não é só cor e fonte — é ritmo também. Infinite usa motion blur em whip transitions; outras marcas usam fade limpo. É decisão de identidade.

Duration (ms), easing (expo, power, back), signature transition, what to avoid, "hand drawn" vs "precisely mechanical".

Arquivo CSS com todas as custom properties da marca (--brand-primary, --brand-accent, --brand-font-headline) importado por cada composição.

Um ponto de mudança. Trocar --brand-primary propaga para todos os projetos que importam o arquivo. É o antídoto contra hardcoding.

CSS custom properties, :root, var(), cascata, import por composição, prefixo consistente.

Comando grep/ripgrep para varrer o repo e achar hex codes, strings de marca e handles sociais deixados hardcoded em composições.

Mesmo com tokens, composições herdadas vêm com valores hardcoded. Sem varredura, você entrega o vídeo com handle do antigo dono.

grep -rEn, regex de hex, busca de strings de marca, substituição batch, auditoria pré-deploy.

Os 10 princípios da seção 0 do MOTION_PHILOSOPHY.md — valem como guardrails para toda composição de motion no workspace.

São as regras que diferenciam vídeo amador de vídeo profissional. Sem elas, seu vídeo vira genérico mesmo com render caprichado.

Uma ideia por beat, 1.5s média de cena, fundo texturizado, motion-blur em transições, ≤5 cores simbólicas.

Tendência a compor em trios — três beats, três cortes, três variações, três cores simbólicas. O cérebro lê trios como intencionais.

Dois parece coincidência, quatro parece excessivo, três parece design. É um atalho ritmico que funciona em qualquer mídia.

Rule of thirds, trio de beats, três variações, três cortes, ritmo ternário.

Técnica em que o último beat espelha o primeiro (mesma palavra, mesma cor, mesma posição) fechando o arco narrativo.

Dá sensação de conclusão e design intencional. Espectador lê "isso tá terminado" subconscientemente.

Narrative arc, opening motif, closing beat, visual rhyme, intenção de design.

Hold no final do vídeo com logo + URL, por 4 a 6 segundos, sem movimento. Respiro antes do fade.

Vídeo sem outro breathing parece cortado. Com respiro, o espectador tem tempo de absorver o CTA e o logo graba na memória.

Outro hold, logo reveal, CTA, URL on screen, cognitive dwell time, fade out suave.

Checklist de ~15 itens para rodar antes de declarar qualquer vídeo finalizado. Chrome type? Motion blur? 1.5s médio?

Você se engana sozinho. O checklist força auto-crítica honesta em itens que você esquece no calor da autoria.

Pre-flight, self-review, itens binários (sim/não), auditoria estética.

Gut check final da seção 5 do MOTION_PHILOSOPHY: 10 perguntas que simulam "o que o time do Infinite faria aqui?"

Força comparação com o gold standard. Se sua resposta a qualquer pergunta é "eu fiz diferente", defenda a razão ou corrija.

Gold standard, 10-question test, design heuristic, defender decisões, Infinite Payments 30s.

CLI clássica que corta, mixa, converte e encoda áudio/vídeo. Não sabe nada de HTML — só recebe frames + trilhas e monta o container final.

Todos os frameworks de render (Hyperframes, Remotion) usam FFmpeg no fim. Erros de codec/container vêm dele.

libx264, CRF, AAC, container MP4/MOV/WebM, faststart, filter_complex, re-encode, extração de frame.

Duas bibliotecas pra controlar Chromium via código. Playwright é da Microsoft, focada em testes. Puppeteer é do Google, é o que os frameworks de render usam por baixo.

Playwright é útil pra screenshotar uma cena do Studio rodando sem pagar render inteiro. Puppeteer você nunca chama direto — o Hyperframes cuida.

Chromium headless, seletores, auto-waiting, screenshot, virtual time, diferença entre "gravar vídeo" e "render determinístico".

Framework vídeo-como-código em React/TSX. Usa hooks como useCurrentFrame() e renderiza frame a frame via Chromium + FFmpeg.

Mesmo paradigma do Hyperframes, mas em React. Se seu time vive em Next.js, faz mais sentido do que aprender HTML + GSAP.

useCurrentFrame, interpolate, Composition, Sequence, Lambda, paywall comercial, ecossistema React maduro.

Vídeo-como-código em HTML puro com atributos data-* e uma timeline GSAP por composição. Traz TTS (Kokoro) e transcrição (Whisper) embutidos no CLI.

É o menor atrito entre "tenho uma ideia" e "estou renderizando frames". Sem build step, sem paywall, Studio com hot reload.

data-start, data-duration, data-track-index, window.__timelines, sub-compositions via template, blocks do registry, MOTION_PHILOSOPHY.

Markdown + frontmatter que ensinam o Claude a usar as ferramentas com convenções do framework, armadilhas conhecidas e receitas copy-pasteáveis.

Uma skill bem invocada economiza horas. Sem a ferramenta por baixo a skill é só texto — por isso o doctor vem antes.

/hyperframes, /gsap, /short-form-video, /website-to-hyperframes, /frontend-design, /theme-factory, /brand-guidelines, /remotion.

Tabela de decisão rápida: pra cada tipo de entregável (landing, promo 30s, corte de MP4, screenshot de cena, etc.) qual ferramenta usar.

Evita reinventar a roda. Se é estático, Claude Design. Se é vídeo declarativo, Hyperframes. Se é só cortar um MP4, FFmpeg. Saber disso economiza dias.

Regra geral, entregável estático vs temporal, camada correta para o problema, quando skill é suficiente vs quando precisa da ferramenta direta.