🎥 Exemplos em vídeo
Três casos reais do kit que servem de referência para os módulos desta trilha. Assista antes, use como alvo durante sua produção.
clickup-demo
60sSaaS demo, registry-heavy
linear-promo-30s
30sEstilo Infinite Payments
hyperframes-sizzle
75sCampanha integrada referência
🧭 Navegação rápida
Conteúdo Detalhado
Expanda cada tópico para ver o que será aprendido
🎬 Promo SaaS 30-60s
Promo de produto SaaS no estilo Infinite Payments, com uso pesado do registry e MOTION_PHILOSOPHY aplicado integralmente.
Arquitetura narrativa de 5 beats que vende produto SaaS em 30-60s: abre com hook forte, mostra problema, revela solução em ação, valida com prova social, chama para ação.
É a estrutura que vende. Quebrá-la sem entender o porquê é desperdiçar produção.
Hook 2s, problem 5s, solution 15s, proof 5s, CTA 3s (em 30s total). Dobre tudo para 60s.
38 blocos pré-construídos no catálogo Hyperframes para social proof (x-post, tiktok-follow, reddit-post), showcase de UI (app-showcase, ui-3d-reveal) e mais.
Reinventar tela fake de Twitter do zero é trabalho de 4h. Usar x-post do registry é comando de 10s + customização.
npx hyperframes add, catalog --type block, props documentados, composability.
Transições entre cenas calculadas em GPU. Incluem glitch, whip-pan, cinematic-zoom, sdf-iris, swirl-vortex, domain-warp-dissolve e muitas outras.
Diferença entre vídeo amador (corte duro) e profissional (transição motivada). Cada shader tem "feeling" diferente.
GPU shaders, transition motivation, whip-pan como signature, cinematic-zoom em hero, glitch para pattern break.
Texto com gradiente cromado e glow ao redor — signature estética do MOTION_PHILOSOPHY. Confere tipografia cinemática por padrão.
Texto flat preto-sobre-branco é default cansado. Chrome gradient dá 80% do caminho para "parece profissional".
background-clip: text, linear-gradient, text-shadow para halo, animação do gradiente.
Seção final estática (4-6s) com logo e URL, sem movimento. Respiro narrativo antes do fade.
Vídeo sem outro parece cortado. Com hold suficiente, espectador tem tempo de absorver CTA e logo grava memória.
Logo reveal com motion blur, URL em tipografia limpa, hold estático, fade out suave.
Render em container Docker isolado, garantindo que cada render produza o mesmo byte-output — ideal para arquivamento de clientes.
Para projetos premium, cliente quer garantia de que daqui 2 anos o mesmo comando reproduz o mesmo arquivo. Docker dá isso.
--docker flag, --quality high, CRF 15, determinismo, reprodutibilidade, hash check.
🎯 Projeto Final Integrado
Campanha completa: landing page + pitch deck + vídeo promo para produto/serviço real. Rubrica de avaliação ao final.
Definir produto/serviço (seu ou ficcional), público-alvo, problema e diferencial. Base de tudo que vem depois.
Briefing fraco produz peças fracas. Investir 20min em definição clara economiza horas de retrabalho.
ICP (ideal customer profile), problem statement, value prop, competitive diff, tone of voice.
Landing page full-length no Claude Design aplicando seu sistema de marca, com 4 variações safe-to-wild e tweaks configurados.
É a âncora visual das outras peças. Deck e vídeo herdarão hex codes, tipografia e motif daqui.
/design-designer, 4 variações, Tweaks, handoff para Claude Code ou Canva.
Pitch deck também no Claude Design, 7-10 slides, herdando motif da landing (cor accent, tipografia, shape signature).
Duas peças com motif compartilhado = percepção de marca consistente, não peças soltas.
Deck structure, 16:9, 1920x1080, visual motif cross-piece, import de contexto da landing.
Vídeo final em Hyperframes com motif compartilhado, pre-flight MOTION_PHILOSOPHY rodado, render em quality standard.
É o clímax do curso. Aplica todas as 11 regras do Render Contract, todas as 10 Leis e entrega MP4 shipável.
Estrutura 30-60s, MOTION_PHILOSOPHY pre-flight, quality standard, visual verification.
Comparação lado a lado das 3 peças: as cores batem? Tipografia é a mesma? Motif aparece? Mesma voz?
Inconsistência entre peças destrói percepção de profissionalismo. Auditar antes de entregar evita entregar "amador".
Cross-piece audit, brand system check, motif consistency, tone of voice alignment.
Landing em Vercel, deck em PDF compartilhável, vídeo em YouTube/Drive. Rubrica de autoavaliação em 6 critérios.
Produzir sem publicar é incompleto. Publicar sem autoavaliação perde aprendizado estruturado.
Vercel deploy, PDF export, YouTube unlisted, rubrica 100 pontos, critério system-narrative-motion-técnico-hook-callback.