remotion-product-demos

Vídeos de Demonstração de Produtos com Remotion

Crie vídeos de demonstração de produtos de qualidade profissional no estilo das apresentações da Apple usando Remotion.

Início Rápido

Projeto: ~/Projects/tails-video/ Template: src/templates/GlassPhoneDemo.tsx

cd ~/Projects/tails-video
npx remotion render src/index.ts GlassPhoneDemo out/demo.mp4 \
  --codec=h264 --crf=18

Conteúdo personalizado via --props:

npx remotion render src/index.ts GlassPhoneDemo out/custom.mp4 \
  --props='{"scenes":[{"type":"hero","durationInSeconds":3}],"brand":{"name":"YourBrand"}}'

Template: GlassPhoneDemo

Schema (Zod)

{
  scenes: Array<{
    type: 'hero' | 'voice' | 'typing' | 'cards' | 'detail' | 'dropdown' | 'endCard',
    title?: string,
    subtitle?: string,
    text?: string,           // cenas de digitação
    cards?: Array<{ name, category, detail?, emoji? }>,  // cena de cards
    items?: Array<{ name, price? }>,                      // cena de detalhes
    options?: Array<{ label, sublabel?, icon? }>,          // cena de dropdown
    durationInSeconds: number  // padrão 3
  }>,
  accentColor: string,       // padrão '#3B82F6'
  bgStyle: 'light' | 'warm' | 'cool',
  deviceAngle: number,       // padrão 8 (graus de rotação Y)
  brand?: { name: string, tagline?: string }
}

Tipos de Cena

Tipo	Visual	Props Chave
hero	Telefone com "Toque para digitar" + botões de ação	—
voice	Ícone de microfone + anéis de ondulação contínua	—
typing	Texto caractere por caractere com cursor	text
cards	Lista escalonada de cards (estilo restaurante)	cards[], title
detail	Pílulas de filtro + grade de itens com preços	items[], title, subtitle
dropdown	Seletor de opções com efeito vidro fosco	options[], text
endCard	Telefone desaparece, marca aparece centralizada	— (usa brand do nível superior)

Fluxo de Cenas Recomendado

Uma demonstração típica segue: hero → voice → typing → results → detail → typing → dropdown → endCard

Guia de duração: hero 3s, voice 2s, typing 3s por comando, cards/detail 4s, dropdown 3s, endCard 2s.

Regras de Estilo Visual

Leia references/apple-aesthetic.md para o guia de estilo completo.

Regras principais:

• Fundo: Esferas 3D suaves com gradientes radiais, realces especulares e sombras projetadas
• Telefone: Estilo iPhone com gradiente de moldura metálica, Dynamic Island, botões laterais, indicador de início, sobreposição de reflexo de vidro, sombra de aterramento
• Cores: Brancos/cinzas monocromáticos + única cor de destaque configurável
• Movimento: Tudo via useCurrentFrame() + spring({damping: 200}). Zero animações CSS.

Padrões de Animação

Leia references/animation-patterns.md para configurações de spring, fórmulas de temporização e padrões de easing.

Padrões principais:

• Entrada: spring({ frame: sceneFrame, fps, config: { damping: 200 } }) → opacidade + translateY
• Escalonamento: atrasar cada item por i * 6 quadros
• Flutuação: Math.sin(globalFrame / 45) * 12 para movimento suave
• Digitação: Math.floor((sceneFrame - delay) * 0.55) caracteres revelados
• Ondulação: Contínua via módulo: (frame + ring * offset) % cycleDuration
• Transição suave: Sobrepor cenas com -transitionFrames a 0 para fade-in, dur - transitionFrames a dur para fade-out

Backlog de Melhorias

Status atual: bom, mas não perfeito. Lacunas conhecidas:

1. Esferas de fundo Three.js — Esferas com gradiente radial CSS chegam no máximo a 7/10. Um @remotion/three real com iluminação adequada = 9/10
2. Imagens reais — Blocos coloridos de placeholder → fotos de alimentos do Unsplash/Pexels via componente <Img>
3. Velocidade de digitação variável — mais rápida em palavras comuns, pausas sutis em espaços
4. Brilho da tela — luz ambiente sutil vazando das bordas da tela do telefone
5. Padrão de constantes primeiro — extrair todos os números mágicos para constantes nomeadas no topo do arquivo (recomendação oficial do Remotion)

Criando Novos Templates

Ao construir um novo template de demonstração de produto:

1. Analise o vídeo de referência quadro a quadro (extraia em intervalos de 1s)
2. Identifique componentes visuais: fundo, dispositivo, conteúdo, transições
3. Defina o schema Zod com tipos de cena e props configuráveis
4. Construa componentes de baixo para cima: fundo → moldura do dispositivo → cenas → transições
5. Teste a cada passo — renderize quadros individuais antes do vídeo completo
6. QA com modelo de visão — extraia quadros, avalie a qualidade, itere

Siga as regras do Remotion rigorosamente: leia os arquivos de regra skills/remotion-best-practices/.