triptu/flowbar

Vídeo de Lançamento do Flowbar

Projeto Remotion em flowbar-launch-video/ que produz um vídeo de lançamento do produto de ~28s para redes sociais e incorporação em sites.

Comandos Rápidos

cd flowbar-launch-video

# Visualizar no navegador
npm run studio            # abre http://localhost:3000

# Renderizar em alta qualidade (social)
npx remotion render FlowbarLaunchVideo out/flowbar-launch-hq.mp4 --codec h264 --crf 18

# Comprimir para web (faststart para streaming)
ffmpeg -i out/flowbar-launch-hq.mp4 -c:v libx264 -crf 28 -preset slow -c:a aac -b:a 128k -movflags +faststart out/flowbar-launch-web.mp4 -y

Arquitetura

flowbar-launch-video/
├── public/                     # Assets estáticos (vídeos, áudio)
│   ├── nature-loop.mp4         # Fundo ambiente (loops globalmente)
│   ├── the-reveal.mp4          # Tomada herói: desktop → Fn → Flowbar aparece (5,9s)
│   ├── product-tour.mp4        # Gravação de tela contínua única (15,6s)
│   └── audio.mp3               # Música de fundo
├── src/
│   ├── Root.tsx                # Definição da composição (fps, duração, dimensões)
│   ├── FlowbarLaunchVideo.tsx  # Composição principal — camadas bg, áudio, cenas, grão
│   ├── theme.ts                # Cores (combina com o site), presets de spring
│   ├── fonts.ts                # Instrument Serif + DM Sans (Google Fonts)
│   ├── scenes/
│   │   ├── ProblemScene.tsx    # ATO 1: Dois cartões de texto sem imagem
│   │   ├── RevealScene.tsx     # ATO 2: Tomada herói com sobreposição "Conheça o Flowbar"
│   │   ├── FeatureTourScene.tsx# ATO 3: Demonstração contínua do produto + rótulos alternados
│   │   └── ClosingScene.tsx    # ATO 4: Logo, tagline, URL
│   ├── components/
│   │   ├── AmbientBackground.tsx  # Loop da natureza + sobreposição gradiente + FilmGrain
│   │   └── AnimatedText.tsx       # WordReveal, MaskReveal, ScaleReveal
│   └── transitions/
│       └── scaleBlur.tsx       # Transição personalizada: escala+desfoque (não fade!)
└── out/                        # Saídas renderizadas

Estrutura do Vídeo e Temporização

A duração é calculada em Root.tsx: (5 + 6 + 16 + 5) * 30fps - 45 (transições) - 60 (corte) = 855 quadros ≈ 28,5s

Ato	Cena	Duração	Conteúdo
1	ProblemScene	5s	Dois cartões de texto sobre fundo da natureza. Revelações palavra por palavra.
2	RevealScene	6s	the-reveal.mp4 + "Conheça o Flowbar." na parte inferior + tagline
3	FeatureTourScene	16s	product-tour.mp4 contínuo + 5 rótulos no topo
4	ClosingScene	5s	Logo + marca + descrição + URL

Transições entre atos usam scaleBlur() com springTiming({ damping: 18, stiffness: 120 }).

Sistema de Design

Cores (de theme.ts, combina com flowbar.tushar.ai)

• Fundo: #0c0f0d
• Texto: #ede9df
• Suave: #9a9488
• Destaque: #c99b6d / #ddb88a

Presets Spring (de theme.ts)

• SPRINGS.smooth — { damping: 200 } — revelações de texto, entradas sutis
• SPRINGS.snappy — { damping: 20, stiffness: 200 } — elementos de UI
• SPRINGS.heavy — { damping: 15, stiffness: 80, mass: 2 } — momentos herói, logo
• SPRINGS.bouncy — { damping: 12 } — destaques divertidos

Componentes de Texto (de AnimatedText.tsx)

• WordReveal — escalonamento palavra por palavra com máscara clip-path. Use para frases impactantes.
• MaskReveal — revelação de linha única com clip-path. Use para rótulos, descrições.
• ScaleReveal — escala + desfoque para nítido. Use para texto herói ("Conheça o Flowbar.").

Camadas (de baixo para cima)

1. Cor sólida THEME.bg
2. AmbientBackground — nature-loop.mp4 + sobreposição gradiente (propriedade darken: 0-1)
3. Conteúdo da cena (TransitionSeries)
4. FilmGrain — 0,035 de opacidade, muda por quadro

Principais Aprendizados e Armadilhas

Motion Design

• Sem fades. Use transição scaleBlur ou entradas baseadas em spring. Fades parecem PowerPoint.
• Springs precisam de física real. { damping: 200 } é criticamente superamortecido (sem spring visível). Use os presets.
• Texto: revelação com máscara > fade+slide. clipPath: inset() com translateY parece 10x melhor que opacidade+translate.
• Saídas devem ser rápidas. Entre com física spring (12-18 quadros), saia com linear rápido (5-8 quadros).
• Último rótulo de uma série: pule o fade de saída. Passe a flag isLast para segurar o rótulo final até o fim da cena.

Manipulação de Vídeo

• Use objectFit: "contain" (não "cover") para mostrar a gravação completa, incluindo a barra de menu. Preencha o fundo com THEME.bg.
• pauseWhenBuffering não está disponível nesta versão do Remotion — não use.
• A duração da cena deve ser >= duração do vídeo, senão o vídeo é cortado. Verifique com ffprobe -v error -show_entries format=duration -of csv=p=0 file.mp4.
• Quando o vídeo é mais curto que a cena, o último quadro congela — este é o comportamento desejado.

Fundo

• O loop da natureza roda GLOBALMENTE atrás de todas as cenas (em FlowbarLaunchVideo.tsx, não por cena).
• As cenas são transparentes — elas sobrepõem o fundo.
• A cena de encerramento adiciona sua própria camada de escurecimento rgba(12,15,13,0.7) para empurrar o fundo para trás e garantir legibilidade do texto.
• A cena de problema adiciona rgba(12,15,13,0.35) de escurecimento.

Áudio

• Arquivo: public/audio.mp3. Referenciado via staticFile("audio.mp3").
• Volume: fade in em 1s (0→0,5), fade out nos últimos 2s (0,5→0).
• Gere com Gemini ou Suno. Prompt: minimalista eletrônico quente, pads analógicos suaves, 88bpm, ~35-40s, sem vocais.

Renderização

• HQ: --crf 18 → ~14MB (redes sociais)
• Web: recodifique com ffmpeg -crf 28 -preset slow -movflags +faststart → ~3MB (incorporação em site, streaming instantâneo)
• Sempre renderize HQ primeiro, depois comprima — não renderize duas vezes.

Como Adicionar uma Nova Cena

1. Crie src/scenes/NewScene.tsx — exporte um componente React usando AbsoluteFill
2. Mantenha o fundo transparente (o fundo global da natureza aparece através)
3. Adicione uma camada de escurecimento se o texto precisar de legibilidade: <AbsoluteFill style={{ backgroundColor: "rgba(12,15,13,0.X)" }} />
4. Use WordReveal/MaskReveal/ScaleReveal para texto, SPRINGS.* para animações
5. Adicione em FlowbarLaunchVideo.tsx como uma TransitionSeries.Sequence com transição scaleBlur()
6. Atualize o cálculo de duração tanto em FlowbarLaunchVideo.tsx quanto em Root.tsx

Como Regravar um Clipe

1. Use Screen Studio com: padding mínimo, auto-zoom 120%, cursor suave, modo escuro, 1920x1080 30fps
2. Grave apenas a janela do Flowbar (não o fundo da área de trabalho — temos o loop da natureza)
3. Exporte como MP4 de alta qualidade, coloque em public/
4. Verifique a duração: ffprobe -v error -show_entries format=duration -of csv=p=0 public/clip.mp4
5. Atualize o durationInFrames da cena correspondente para coincidir (arredonde para o segundo mais próximo × fps)
6. Atualize o cálculo de duração em Root.tsx

Como Alterar os Rótulos do Tour de Funcionalidades

Edite o array LABELS em FeatureTourScene.tsx:

const LABELS = [
  { text: "Escreva em markdown. Seus arquivos continuam seus.", startSec: 0 },
  { text: "Tarefas de cada nota. Um lugar para marcá-las como concluídas.", startSec: 3.5 },
  // ...
];

startSec é relativo ao início da cena do tour de funcionalidades (não do vídeo inteiro). Temporize para coincidir com o que está acontecendo em product-tour.mp4.