Módulo 3.1 - Promo SaaS 30-60s | Design + Vídeo com IA

🎥 Casos de estudo em vídeo

Dois promos já entregues do kit. Assista primeiro, depois volte e leia cada seção abaixo com os exemplos na cabeça.

clickup-demo (60s)

Demo SaaS com uso pesado de blocos do registry e shader transitions.

linear-promo-30s (30s)

Promo estilo Linear/Infinite Payments — tight cuts, chrome typography, signature transitions.

Código-fonte: ambos os projetos estão em video-projects/clickup-demo/ e video-projects/linear-promo-30s/. Abra o index.html para ver como foi construído.

📖 Walkthrough passo a passo

Para aprender e modificar, leia o guia completo com estrutura de arquivos, explicação da timeline mestre, anatomia de uma sub-composição e 8 passos para adaptar à sua marca:

docs/COMO-MODIFICAR-linear-promo.md →

🏗️ Estrutura do SaaS promo

A arquitetura de 5 beats vende produto em 30-60s: hook → problema → solução → prova → CTA. Quebrar sem motivo forte é desperdício de produção.

⏱️ Distribuição em 30s

0-2s

Hook: padrão interrompido, visual forte, pergunta.

2-7s

Problema: concreto, específico. Dor que o público sente.

7-22s

Solução: produto em ação. 2-3 features principais mostradas.

22-27s

Prova: logos, números, depoimento, review.

27-30s

CTA: URL, action verbal, outro hold.

🔍 Estudo de frames — clickup-demo (60s, beats dobrados)

Hook aos 2s — **2s · Hook**
Pattern interrupt inicial

Problema aos 10s — **10s · Problema**
Dor do público

Solução aos 25s — **25s · Solução**
Produto em ação

Prova aos 40s — **40s · Prova**
Social proof, depoimentos

CTA aos 55s — **55s · CTA**
URL + outro hold

Frames extraídos com ffmpeg -ss [tempo] -frames:v 1.

🔍 Estudo de frames — linear-promo-30s (tight 30s)

📦 Blocos do registry

38 blocos prontos no catálogo Hyperframes. Para SaaS promo, os essenciais são os de social proof (x-post, spotify-card, yt-lower-third) e UI showcase (app-showcase, ui-3d-reveal).

📦 Instalar um bloco

# Browse catalog
npx hyperframes catalog --type block

# Install
npx hyperframes add x-post
npx hyperframes add ui-3d-reveal
npx hyperframes add app-showcase

# O bloco vai para compositions/ com props documentados

📱 Social proof

x-post, tiktok-follow, reddit-post, spotify-card, instagram-follow

🖥️ UI showcase

app-showcase, ui-3d-reveal, macos-notification, yt-lower-third

💫 Shader transitions

Transições GPU dão sensação cinemática. Cada shader tem feeling diferente e motivação narrativa distinta.

whip-pan

Transição fast-paced com motion blur. Ideal entre scenes de ritmo acelerado.

cinematic-zoom

Zoom dramático em elemento central. Ideal para revelação de produto hero.

glitch

Ruído digital. Pattern break, usado com moderação — 1-2 vezes no vídeo máximo.

sdf-iris

Abertura/fechamento tipo lente de câmera. Elegante para intro ou CTA.

💡 Signature transition

Escolha UMA transição como signature da sua marca e use consistentemente. Vídeo com 6 transições diferentes vira confuso.

✒️ Kinetic typography

Chrome gradient + halo glow é a signature estética do MOTION_PHILOSOPHY. Texto flat preto-sobre-branco é default cansado; chrome dá 80% do caminho para "parece profissional".

💎 CSS para chrome gradient

.chrome-text {
  background: linear-gradient(180deg,
    #f8fafc 0%,
    #cbd5e1 45%,
    #64748b 55%,
    #94a3b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(168, 202, 255, 0.4);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

💡 Anime o gradiente

Para efeito shimmer, anime background-position de -100% a 100% em 1.5s ease-in-out. Simula reflexo de luz.

💤 Outro breathing

Hold de 4-6s no final com logo + URL, sem movimento. Vídeo sem outro parece cortado. Com hold suficiente, CTA fica na memória.

🎬 Outro do Infinite Payments (referência)

Segundo 28: última transição whip para tela preta

Segundo 28.5: logo aparece via scale-in de 0.95 a 1 com motion blur

Segundo 29-34: hold estático com logo central e URL em baseline

Segundo 34: fade sutil para preto

⚠️ Erros comuns

✗Hold de 1-2s — não dá tempo de absorver CTA
✗Outro animado demais — distrai do CTA
✗Sem URL — espectador sem ação a tomar

🐳 Render archival com docker

Para projetos premium onde cliente quer garantia de reprodutibilidade, use render em container Docker. Mesmo comando = mesmo byte-output, mesmo em 2 anos.

🎬 Comando de render archival

npx hyperframes render \
  --quality high \
  --docker \
  --fps 30 \
  --output renders/final-archival.mp4

Quality high = CRF 15 (ultra-limpo). Docker garante ambiente consistente entre máquinas.

📊 Quando usar

•Entregas para clientes que arquivam assets
•Projetos legais/regulatórios
•Campaigns que podem ser reativadas/atualizadas
•Seu portfolio (você vai querer replicar depois)

📋 Resumo do Módulo

✓

Estrutura 5-beats aplicada — hook → problema → solução → prova → CTA

✓

Blocos do registry instalados — x-post, ui-3d-reveal, app-showcase

✓

Signature transition escolhida — uma shader transition consistente

✓

Chrome typography aplicada — gradient + halo em títulos

✓

Outro de 4-6s montado — logo + URL + fade

✓

Render archival feito — quality high com --docker

Próximo Módulo:

3.2 - Projeto Final Integrado (landing + deck + vídeo)

← Voltar para Trilha Projeto Final →