MÓDULO 1.1

🔧 Setup e Fundamentos

Instalar ambiente, rodar primeiro preview no Studio e entender a diferença entre Claude Design (estático) e Hyperframes (vídeo). O módulo que coloca você em pé para tudo que vem depois.

6
Tópicos
30
Minutos
Básico
Nível
Prática
Tipo
1

🔧 Instalar o ambiente

O pipeline Hyperframes precisa de quatro peças básicas na sua máquina antes de qualquer coisa: Node para rodar a CLI, FFmpeg para manipular áudio e vídeo, Chrome para o render headless e disco suficiente para os outputs. Resolver isso uma vez aqui evita 80% dos problemas "não rodou aqui" depois.

📦 Dependências mínimas

  • •Node 20+ — rode node --version para verificar
  • •FFmpeg no PATH — ffmpeg -version deve responder
  • •Chrome atualizado — o render roda em Chromium headless
  • •~5 GB de disco livres e 16 GB de RAM para preview fluido

💡 Dica prática

Em Mac, brew install node ffmpeg resolve as duas de uma vez. No Linux, apt install nodejs ffmpeg ou equivalente. No Windows, use nodejs.org e ffmpeg.org — e garanta que estão no PATH.

2

📦 Clonar e instalar dependências

O kit é um workspace multi-projeto: node_modules fica na raiz e é compartilhado por todos os video-projects/. Isso significa uma única instalação serve para os 12 projetos do kit.

📋 Passo a passo

1. git clone https://github.com/inematds/cchyperframes
2. cd cchyperframes
3. npm install — demora 1–3 min
4. (opcional) cp .env.example .env e preencha chaves de ClickUp/OpenAI se for usar

✓ FAZER

  • ✓npm install UMA vez na raiz do repo
  • ✓Manter a árvore node_modules só na raiz
  • ✓Usar .env.example como template

✗ NÃO FAZER

  • ✗npm install dentro de cada video-project (duplica)
  • ✗Commitar .env no git
  • ✗Usar yarn/pnpm sem checar o package-lock
3

✅ Verificar com hyperframes doctor

Antes de tentar renderizar e ver o que quebra, rode o comando de diagnóstico que reporta o que está faltando e por quê.

🩺 O que o doctor verifica

  • •Versão do Node (≥20)
  • •FFmpeg disponível no PATH
  • •Chrome/Chromium acessível
  • •Docker (opcional — só para render determinístico)
  • •Espaço em disco

💻 Comando

cd cchyperframes
npx hyperframes doctor

Se aparecer algum ✗, o output te diz como resolver. Não continue sem todos os ✓.

4

🎬 Primeiro preview no Studio

Studio é o ambiente de autoria ao vivo — abre no navegador, recarrega automaticamente ao salvar qualquer arquivo, e deixa você varrer a timeline em tempo real. É onde 90% do trabalho de autoria acontece.

🚀 Abrir o Studio num projeto existente

cd video-projects/may-shorts-19
npx hyperframes preview

Vai abrir automaticamente em http://localhost:3002.

💡 Dica prática

Se o Studio ficar travado em 0s, hard-refresh o navegador (Ctrl+Shift+R). Se persistir, abra uma sub-composição específica adicionando ?comp=nome-da-sub-comp na URL — carrega mais rápido que a composição master.

⚠️ Atenção

Sempre rode os comandos da CLI de dentro da pasta do projeto, nunca da raiz do workspace. A CLI lê hyperframes.json e meta.json do diretório atual — rodar na raiz falha ou escaneia arquivos errados.

5

🎨 Claude Design vs Hyperframes

As duas ferramentas são complementares, não concorrentes. Entender quando usar cada uma economiza horas de trabalho e evita o erro clássico de tentar fazer vídeo direto sem pensar o design estático primeiro.

🖼️ Claude Design (claude.ai/design)

Gera designs estáticos ship-ready.

  • • Landing pages
  • • Pitch decks (7–10 slides)
  • • Scroll-driven sites
  • • Protótipos clicáveis de app
  • • Marketing websites

🎬 Hyperframes (CLI)

Renderiza vídeo determinístico em HTML+GSAP.

  • • Short-form vertical (TikTok/Reels)
  • • Promos de produto SaaS
  • • Sizzle reels
  • • Aulas educacionais
  • • Hype films de marca

🎯 Regra de ouro

Estático primeiro, movimento depois. O vídeo herda a decisão visual do design estático. Se a landing page já funciona parada (cor, tipo, hierarquia), o vídeo vai herdar esse mesmo sistema e ficar consistente com as outras peças da campanha.

6

📚 Glossário de motion graphics

Sem os termos certos, você não consegue pedir o que quer nem entender a documentação. Este é o vocabulário mínimo para sobreviver nos próximos módulos.

Motion graphics

Design em movimento. Tipicamente curto (15s–60s), com tipografia, formas e ícones animados sincronizados a narração ou música.

Kinetic typography

Tipografia em movimento — palavras que entram, saem, crescem, giram em sincronia com áudio. É o coração de muitos shorts.

Shader transitions

Transições entre cenas calculadas em GPU — distorções, wipes, lens flares. Em Hyperframes são blocos do registry (glitch, whip-pan, sdf-iris).

GSAP timeline

Objeto JavaScript que orquestra animações em sequência. Cada composição Hyperframes registra uma timeline pausada em window.__timelines.

Easing

Curva que define como uma animação acelera e desacelera. expo.out, power2.inOut, back.out(1.7) são os mais usados.

Data attributes

Atributos data-start, data-duration, data-track-index em tags HTML. Definem quando cada clip aparece e dura na timeline.

📋 Resumo do Módulo

✓
Ambiente instalado — Node 20+, FFmpeg, Chrome no PATH
✓
Repo clonado — npm install rodado na raiz uma única vez
✓
Doctor passando — todos os ✓ antes de continuar
✓
Studio aberto — preview num projeto existente, hot reload funcionando
✓
Diferença clara — Claude Design (estático) vs Hyperframes (vídeo), quando usar cada
✓
Vocabulário mínimo — motion graphics, kinetic type, shaders, GSAP, easing, data attributes

Próximo Módulo:

1.2 - Claude Design: do briefing ao render

← Voltar para Trilha Próximo Módulo →