Módulo 4.1 · Abertura de Canal

🎯 O projeto e sua estrutura de cenas

Uma abertura de canal é um vídeo de identidade: apresenta a marca antes do conteúdo. No Remotion modelamos isso como uma sequência de cenas em Series — cada cena é um componente independente com seu próprio timing, empilhados pelo Series sem aritmética de offset manual.

🎬 As 4 cenas da abertura

1.Fundo — starfield ou gradient-shift rodando do frame 0 até o fim, sempre na camada de baixo.
2.Logo — entra com spring no centro, fica por ~2 s e então recua levemente.
3.Título — nome do canal e tagline entram em stagger logo após o logo estabilizar.
4.Saída — iris ou fade-through-black fecha a abertura antes do conteúdo principal.

Esqueleto do componente raiz ChannelOpening.tsx

import { Series, AbsoluteFill } from "remotion";
import { Starfield }       from "./templates/starfield";
import { LogoSpinReveal }  from "./templates/logo-spin-reveal";
import { CinematicTitle }  from "./templates/cinematic-title-intro";
import { IrisTransition }  from "./templates/iris-transition";

export const ChannelOpening = () => (
  <AbsoluteFill>
    <Starfield />          {/* sempre ativo — z=0 */}
    <Series>
      <Series.Sequence durationInFrames={60}>
        <LogoSpinReveal logo="./logo.svg" />
      </Series.Sequence>
      <Series.Sequence durationInFrames={75}>
        <CinematicTitle title="Meu Canal" tagline="Design em Movimento" />
      </Series.Sequence>
      <Series.Sequence durationInFrames={30}>
        <IrisTransition />
      </Series.Sequence>
    </Series>
  </AbsoluteFill>
);

Total

~165 frames = 5,5 s

Fundo

Paralelo ao Series

Series

Sem offset manual

Props

logo, title, tagline

✨ Cena de fundo — starfield e gradient-shift

O fundo não entra no Series — ele vive em um AbsoluteFill separado que existe por todo o vídeo. O starfield gera estrelas com random() semeado e as desloca levemente por frame, criando profundidade sem custo de câmera.

🌌 Como o starfield funciona

random("star-x-N") — gera posição X determinística para a estrela N
random("star-y-N") — posição Y também semeada — sempre igual por frame
translateY via interpolate — estrela desce 20px ao longo do vídeo inteiro
opacity pulsante — Math.sin(frame * 0.05 + seed) cria cintilação suave

✓ O que FAZER

✓Usar random() do Remotion com seed — nunca Math.random().
✓Deixar o fundo em AbsoluteFill independente do Series.
✓Manter opacity das estrelas entre 0.3–0.9 para não competir com o logo.

✗ O que NÃO fazer

✗Usar Math.random() — estrelas "piscam" entre frames no render.
✗Colocar o fundo dentro do Series — ele vai desaparecer quando a cena terminar.
✗Usar cor de estrela igual ao logo — perde contraste no frame crítico.

random()

Semeado, determinístico

AbsoluteFill

z=0, sempre ativo

Paralaxe

translateY lento

Cintilação

Math.sin + seed

🔵 Cena do logo — spin-reveal e stroke-draw

O logo é a cena mais impactante: ele aparece com um spring calibrado para dar aquele "pop" sem exagero. Você pode usar logo-spin-reveal.tsx (gira e escala) ou logo-stroke-draw.tsx (traça o contorno SVG progressivamente).

Logo com spring calibrado logo-spin-reveal.tsx

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// spring: pop rápido, sem bounce excessivo
const progress = spring({ frame, fps,
  config: { damping: 14, stiffness: 180, mass: 1 }
});

const scale   = interpolate(progress, [0,1], [0.3,1]);
const rotate  = interpolate(progress, [0,1], [-180,0]);
const opacity = interpolate(progress, [0,0.3], [0,1],
  { extrapolateRight: "clamp" });

return <AbsoluteFill style={{ display:"flex", alignItems:"center", justifyContent:"center" }}>
  <img src={logo} style={{ transform: `scale(${scale}) rotate(${rotate}deg)`, opacity }} />
</AbsoluteFill>;

💡 Spring vs interpolate para o logo

Use spring para a escala e rotação — o overshoot natural do spring dá personalidade. Use interpolate com clamp para a opacidade — você precisa de controle exato de quando o logo aparece. A combinação dos dois é o que faz a animação parecer viva.

damping 14

Leve overshoot

stiffness 180

Animação rápida

-180° → 0°

Meia volta de entrada

Timing

~0–30 frames

🔤 Cena de título — cinematic-title e title-split

O título entra logo após o logo estabilizar. cinematic-title-intro.tsx usa letter-spacing animado (expand das letras) enquanto title-split.tsx divide o texto em duas metades que convergem do centro. O stagger por letra/palavra é o que torna o título visualmente rico.

Frame 0–10: fade-in do contêiner

O fundo atrás do título (um box escuro semi-transparente) faz opacity 0→1. Isso prepara o contraste antes das letras aparecerem.

Frame 5–35: stagger das letras

Cada letra tem um Sequence from={i * 2} — letra 0 começa no frame 5, letra 1 no frame 7, e assim por diante. O efeito cascata é automático.

Frame 35–75: título estático

O título fica completamente visível por ~1,3 s — tempo suficiente para o espectador ler e absorver o nome do canal.

Frame 75–90: saída suave

Opacidade 1→0 nos últimos 15 frames da cena. A transição de saída (iris) começa enquanto o título ainda está saindo — se sobrepõem graciosamente.

Stagger

from={i * 2}

Platô

~1,3 s visível

Saída

15 frames fade-out

Overlap

Com transição iris

🌀 Cena de saída — iris-transition e fade-through-black

A transição de saída é o elemento que torna a abertura profissional. iris-transition.tsx usa um clip-path circular que se abre ou fecha — saindo do centro ou de um canto. fade-through-black.tsx é mais simples: fade para preto antes de chegar ao conteúdo.

Iris via clip-path animado iris-transition.tsx

const frame = useCurrentFrame();
const { width, height } = useVideoConfig();

// raio máximo = diagonal da tela
const maxR = Math.sqrt(width**2 + height**2) / 2;
const radius = interpolate(frame, [0,30], [maxR, 0],
  { extrapolateRight: "clamp" });

return <AbsoluteFill style={{
  clipPath: `circle(${radius}px at center)`,
  background: "black"
}} />;

💡 Escolha a transição pelo tom do canal

Iris fechando = estilo clássico/cinematográfico. Fade-through-black = limpo e moderno. Para canais de tecnologia, prefira o fade. Para canais de estilo de vida ou cultura, o iris dá mais personalidade.

clip-path

circle(r px at cx cy)

Diagonal

Raio máximo do frame

30 frames

Duração da transição

Origem

center ou logo pos.

🎛️ Montagem final — timing e ritmo

Com todas as cenas prontas, o trabalho final é calibrar o ritmo. Uma abertura de canal deve parecer rápida mas não ansiosa — logo suficiente para reconhecer, título suficiente para ler. A regra prática: nunca menos de 5 s, nunca mais de 15 s.

✓ Timing recomendado (30fps)

✓Logo: 60 frames (2 s) — tempo de reconhecer a marca.
✓Título: 75 frames (2,5 s) — tempo de ler nome + tagline.
✓Transição: 30 frames (1 s) — rápida o suficiente para não cansar.

✗ Erros de ritmo comuns

✗Logo por mais de 3 s antes do título aparecer — parece que travou.
✗Título saindo antes de estar completamente legível — corte brusco.
✗Transição muito longa — a abertura compete com o próprio conteúdo.

Total ideal

5–10 s

Logo

2 s = 60 frames

Título

2,5 s = 75 frames

Saída

1 s = 30 frames

🏁 Resumo do Módulo

✓

Series orquestra as cenas — sem calcular offsets, cada cena declara sua duração.

✓

Fundo em AbsoluteFill paralelo — starfield/gradient-shift não entram no Series.

✓

Spring para o logo — damping 14, stiffness 180 dão o pop perfeito.

✓

Stagger de letras — Sequence from={i*2} dentro do componente de título.

✓

Iris via clip-path — circle(r px at center) com r interpolado de maxR até 0.

✓

Timing: 5–10 s total — logo 2 s + título 2,5 s + transição 1 s.

Próximo Módulo:

4.2 — Vídeo de Produto: ken-burns + lower-third + stat-counter + end-card.

← Voltar para Trilha 4 Próximo Módulo →