broomva/skills

Lançamento em Vídeo — Showcase de Produto com Liquid Glass

Produza vídeos de lançamento de produto cinematográficos usando a estética Liquid Glass: vazio escuro, painéis 3D flutuantes, efeitos de partículas, animações spring e ritmo confiante.

Habilidades Compostas

Habilidade	Função
/remotion-best-practices	Estrutura de composição, spring(), <Sequence>, pipeline de renderização
/content-creation	Geração de assets por IA (Imagen 4.0, Veo 3.1)
/arcan-glass	Tokens da marca BroomVA (AI Blue, paleta escura)
/google-veo	Prompts de geração de B-roll cinematográfico
/blog-post	Pipeline de distribuição (publicar no X, LinkedIn, Instagram)

A Estética Liquid Glass

Princípios Visuais Centrais

1. Fundo escuro — Preto puro (#000000) ou quase preto (#0A0A0A). Sem gradientes na base. O conteúdo flutua na escuridão.
2. Painéis com perspectiva 3D — Capturas de tela e renders de UI inclinados de 8 a 15° com perspective(1200px). Nunca planos. Sempre flutuantes.
3. Material de vidro — Painéis com bordas fosca, reflexo sutil, cantos arredondados com brilho, bordas semitransparentes.
4. Campo de partículas — Pequenas partículas flutuantes (2-4px, baixa opacidade, deriva lenta) preenchem o vazio. Criam profundidade e vida.
5. Movimento spring — Todas as entradas/saídas usam spring() do Remotion. Nunca transições CSS. Nunca lineares. Orgânicos, confiantes.
6. Ritmo confiante — Mínimo de 3 a 5 segundos por cena. Sem cortes rápidos. Deixe cada visual respirar.
7. Tipografia mínima — Sem serifa (Inter, SF Pro ou sistema), branco sobre preto, centralizado. Máximo de 8 palavras por cartão de título.

Paleta de Cores

Token	Valor	Uso
void	#000000	Fundo
panel-bg	rgba(20, 20, 25, 0.85)	Preenchimento do painel de vidro
panel-border	rgba(255, 255, 255, 0.08)	Borda do vidro
panel-glow	rgba(59, 130, 246, 0.15)	Brilho da borda (AI Blue)
text-primary	#FFFFFF	Texto do título
text-secondary	rgba(255, 255, 255, 0.6)	Subtítulo, URL
accent	#3B82F6	Destaques AI Blue
success	#22C55E	Checkmarks, estados positivos
particle	rgba(255, 255, 255, 0.15)	Partículas de fundo

CSS do Painel 3D (Remotion)

const panelStyle: React.CSSProperties = {
  perspective: '1200px',
  transform: `rotateY(-8deg) rotateX(5deg)`,
  borderRadius: 16,
  border: '1px solid rgba(255, 255, 255, 0.08)',
  boxShadow: `
    0 25px 50px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(59, 130, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05)
  `,
  background: 'rgba(20, 20, 25, 0.85)',
  backdropFilter: 'blur(20px)',
  overflow: 'hidden',
};

Configuração Spring

import { spring, useCurrentFrame, useVideoConfig } from 'remotion';

// Entrada padrão
const entrance = spring({
  frame,
  fps,
  config: { damping: 15, stiffness: 80, mass: 0.8 },
});

// Deriva sutil (para painéis flutuantes)
const drift = spring({
  frame: frame - delay,
  fps,
  config: { damping: 200, stiffness: 10, mass: 2 },
  durationInFrames: 120,
});

Tipos de Cena

1. Cartão de Título

Duração: 3-4 segundos Conteúdo: Nome do produto ou tagline, centralizado, branco sobre preto Animação: Desvanecimento com escala spring sutil (0,95 → 1,0) Exemplo: "Construa suas ideias com Gemini"

2. Cena de Prompt / Entrada

Duração: 4-6 segundos Conteúdo: Entrada de chat ou prompt de terminal, painel 3D angulado Animação: Painel surge de baixo com spring, texto com efeito de máquina de escrever Técnica: <Img> da captura de tela com transformação CSS 3D, efeito de máquina de escrever via fatia de string baseada em frames

3. Cena de Painel Dividido

Duração: 4-5 segundos Conteúdo: Dois painéis de UI lado a lado (ex.: prompt + saída de código) Animação: Painéis entram com spring de lados opostos, partículas entre eles Técnica: Dois componentes <Img> com transformações rotateY opostas

4. Cena de Demonstração do Produto

Duração: 5-8 segundos Conteúdo: UI completa do produto como painel de vidro flutuante Animação: Rotação de deriva lenta (oscilação sutil em rotateY), zoom cinematográfico Técnica: <Img> ou <OffthreadVideo> com scale e rotateY animados

5. Cena de Zoom em Detalhe

Duração: 3-4 segundos Conteúdo: Zoom em um elemento ou recurso específico da UI Animação: Escala spring da visão completa para o detalhe recortado Técnica: scale + translate animados na imagem do painel

6. Cena de CTA / Marca

Duração: 3-4 segundos Conteúdo: Logotipo + URL ou comando de instalação Animação: Desvanecimento, pausa, desvanecimento Técnica: Texto centralizado, ícone da marca, brilho sutil

7. Quadro Cinematográfico com IA (Imagen 4.0)

Duração: 3-5 segundos Conteúdo: Render herói gerado por IA ou arte conceitual dentro de um GlassPanel Animação: Entrada com spring, rotação de deriva lenta, zoom sutil Técnica: Gere via Imagen 4.0, coloque em public/, use <Img src={staticFile('render.png')} /> dentro do GlassPanel com transformação 3D Quando usar: Conceitos abstratos, diagramas arquitetônicos, visuais de clima — qualquer coisa que se beneficie de imagens geradas por IA em vez de capturas de tela

<GlassPanel rotateY={-10} rotateX={6} delay={5}>
  <Img src={staticFile('imagen-hero-render.png')} style={{ width: '100%' }} />
</GlassPanel>

8. B-Roll em Vídeo com IA (Veo 3.1)

Duração: 4-8 segundos Conteúdo: Clipe de vídeo gerado por IA cinematográfico como transição ou atmosfera Animação: Reproduz atrás ou dentro de um GlassPanel, com texto sobreposto opcional Técnica: Gere via Veo 3.1, pré-processe com ffmpeg -movflags +faststart, use <OffthreadVideo> no Remotion

// B-roll cinematográfico em tela cheia (entre cenas)
<OffthreadVideo
  src={staticFile('veo-broll-corridor.mp4')}
  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>

// B-roll dentro de um painel de vidro
<GlassPanel rotateY={-5} rotateX={3}>
  <OffthreadVideo
    src={staticFile('veo-product-demo.mp4')}
    style={{ width: '100%', borderRadius: 12 }}
  />
</GlassPanel>

Padrão de prompt Veo 3.1 para B-roll:

[Movimento de câmera], [Assunto/Ambiente], [Ação/Movimento], [Iluminação + clima].
Fundo escuro, brilho [cor de destaque]. Cinematográfico, profissional. [Proporção de aspecto].

Quando usar: Transições entre grupos de cena, intros/outros atmosféricos, demonstrações cinematográficas de produto onde movimento agrega valor sobre uma captura de tela estática.

Pré-processamento (obrigatório para <OffthreadVideo> + parseMedia()):

ffmpeg -i veo-clip.mp4 -c:v libx264 -crf 18 -movflags +faststart -r 30 processed.mp4

Padrão de Composição Híbrida

Os vídeos mais refinados combinam todos os três tipos de ativos:

Cartão de Título (texto)
  → Quadro Imagen no GlassPanel (arte conceitual)
    → Transição Veo B-roll (cinematográfica 4s)
      → Captura de tela no GlassPanel (demonstração do produto)
        → Dados animados com Remotion (nós de pipeline, árvores de arquivos)
          → Veo B-roll final (atmosfera)
            → Cartão de CTA (texto)

Regra: O Remotion controla o tempo, as transições e o texto. Os ativos de IA fornecem riqueza visual. Nunca deixe a IA controlar o ritmo — essa é a função do Remotion.

Pipeline de Produção

1. STORYBOARD → Defina as cenas com tipos (1-8), durações e conteúdo
2. ATIVOS → Gere/capture todos os ativos visuais
   a. Capturas de tela — UI do produto via agent-browser ou captura manual
   b. Imagen 4.0 — renders heróis, arte conceitual, visuais abstratos
      → ai.models.generateImages({ model: 'imagen-4.0-fast-generate-001', prompt: '...' })
      → Salve no diretório public/
   c. Veo 3.1 — clipes cinematográficos B-roll (4-8s cada)
      → ai.models.generateVideos({ model: 'veo-3.1-fast-generate-preview', prompt: '...' })
      → Pré-processe: ffmpeg -i clip.mp4 -c:v libx264 -movflags +faststart -r 30 processed.mp4
      → Salve no diretório public/
3. COMPOR → Construa a composição Remotion
   - <Sequence> com premountFor para pré-carregamento
   - <Img> + staticFile() para imagens (nunca <img>)
   - <OffthreadVideo> + staticFile() para clipes Veo (nunca <video>)
   - GlassPanel + spring() para transformações 3D e entradas
   - ParticleField como camada de fundo
   - Componente de subtítulo para sobreposições de texto
4. RENDERIZAR → npx remotion render src/Root.tsx CompositionId out/video.mp4
5. PÓS-PROCESSAMENTO → Adicione áudio se separado
   - ffmpeg -i video.mp4 -i audio.mp3 -c:v copy -c:a aac final.mp4
6. REVISÃO → /creative-review avalia a saída em relação ao guia de estilo (alvo: ≥75)
7. DISTRIBUIR → Publique nas plataformas via pipeline de publicação /blog-post

Estrutura do Projeto Remotion

launch-video/
├── src/
│   ├── Root.tsx                 # registerRoot
│   ├── Composition.tsx          # Composição principal com cenas <Sequence>
│   ├── scenes/
│   │   ├── TitleCard.tsx        # Tipo de cena 1
│   │   ├── PromptScene.tsx      # Tipo de cena 2
│   │   ├── SplitPanel.tsx       # Tipo de cena 3
│   │   ├── ProductDemo.tsx      # Tipo de cena 4
│   │   ├── DetailZoom.tsx       # Tipo de cena 5
│   │   └── CTACard.tsx          # Tipo de cena 6
│   ├── components/
│   │   ├── GlassPanel.tsx       # Painel com perspectiva 3D e material de vidro
│   │   ├── ParticleField.tsx    # Sistema de partículas de fundo
│   │   ├── TypewriterText.tsx   # Animação de máquina de escrever baseada em frames
│   │   └── SpringFade.tsx       # Invólucro de desvanecimento spring reutilizável
│   └── styles/
│       └── tokens.ts            # Tokens de cor/espaçamento Liquid Glass
├── public/                      # staticFile() assets (capturas de tela, renders)
├── package.json
└── remotion.config.ts

Componente de Campo de Partículas (Referência)

const ParticleField: React.FC<{ count?: number }> = ({ count = 40 }) => {
  const frame = useCurrentFrame();
  const particles = useMemo(() =>
    Array.from({ length: count }, (_, i) => ({
      x: (i * 37 + 13) % 100,
      y: (i * 53 + 7) % 100,
      size: 2 + (i % 3),
      speed: 0.1 + (i % 5) * 0.05,
      opacity: 0.05 + (i % 4) * 0.04,
    })), [count]);

  return (
    <AbsoluteFill>
      {particles.map((p, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: `${p.x}%`,
          top: `${(p.y + frame * p.speed) % 110}%`,
          width: p.size,
          height: p.size,
          borderRadius: '50%',
          background: `rgba(255, 255, 255, ${p.opacity})`,
        }} />
      ))}
    </AbsoluteFill>
  );
};

Componente GlassPanel (Referência)

const GlassPanel: React.FC<{
  children: React.ReactNode;
  rotateY?: number;
  rotateX?: number;
  scale?: number;
}> = ({ children, rotateY = -8, rotateX = 5, scale = 1 }) => (
  <div style={{
    transform: `perspective(1200px) rotateY(${rotateY}deg) rotateX(${rotateX}deg) scale(${scale})`,
    borderRadius: 16,
    border: '1px solid rgba(255, 255, 255, 0.08)',
    boxShadow: '0 25px 50px rgba(0,0,0,0.6), 0 0 30px rgba(59,130,246,0.1), inset 0 1px 0 rgba(255,255,255,0.05)',
    background: 'rgba(20, 20, 25, 0.85)',
    overflow: 'hidden',
    transition: 'none',
  }}>
    {children}
  </div>
);

Checklist de Qualidade

• Fundo preto puro ou quase preto (sem gradientes)
• Todos os painéis usam transformação de perspectiva 3D (nunca capturas de tela planas)
• Animações spring em todas as entradas (sem transições CSS)
• Campo de partículas presente no fundo
• Cada cena tem no mínimo 3 a 5 segundos (sem cortes rápidos)
• Tipografia: sem serifa, branco, centralizado, ≤8 palavras por cartão de título
• Material de vidro: brilho na borda, sombra, cantos arredondados, semitransparente
• Áudio presente (eletrônica ambiente ou narração)
• Duração total de 20 a 45 segundos
• -movflags +faststart na renderização final