Módulo 2.7 — Transições

Conteúdo detalhado

🗺️ Visão geral — quando usar transições

Uma transição não é apenas efeito visual — é linguagem narrativa. O corte seco diz "continuidade imediata"; o fade through black diz "pausa, salto no tempo". Escolher errado desinforma o espectador mesmo que tecnicamente funcione.

🎯 Regra de ouro

A transição mais invisível é geralmente a melhor. Use efeitos chamativos apenas quando quiser que o espectador sinta a mudança — salto no tempo, mudança de emoção, revelação de algo novo.

Corte seco

Ausência de transição também é escolha

Dissolve

Suaviza a passagem entre cenas

Wipe

Direcional — mantém ritmo alto

Morphing

Conecta elementos visualmente

🪟 blinds-transition — efeito de persianas

O template blinds-transition divide a tela em N fatias verticais (padrão 8) que giram como venezianas, revelando a cena seguinte. O efeito é datado mas funciona muito bem em contextos retro ou de apresentação corporativa.

Núcleo da animação blinds-transition.tsx

import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";

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

// cada persiana abre com delay sequencial
blinds.map((_, i) => {
  const delay = (i / blindCount) * (fps * 0.4);
  const rotation = interpolate(
    frame - delay, [0, fps * 0.6],
    [0, 90],
    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
  );
})

✓ Use quando

•Apresentações corporativas com estética clean
•Vídeos com tom nostálgico ou retrô
•Slideshow de produtos com corte a cada item

✗ Evite quando

•O conteúdo exige fluidez emocional (música, doc)
•Vídeos curtos: o efeito consome frames demais
•Mais de 2× no mesmo vídeo — enjoa rápido

blindCount

Quantidade de fatias (padrão 8)

delay sequencial

Cada faixa abre com offset de tempo

rotateY

Gira 0→90° revelando fundo

perspective

Necessário para efeito 3D convincente

🕐 clock-wipe — varredura radial

O clock-wipe usa um clip-path circular que varre de 0° a 360° como o ponteiro de um relógio, revelando a nova cena. A matemática por trás envolve cálculo de ângulo com Math.atan2 e SVG clipPath.

💡 Dica prática

Combine clock-wipe com um countdown-intro: o anel do countdown gira enquanto conta 3-2-1, e ao chegar em GO o clock-wipe revela a cena principal. Narrativa visual coerente sem linha de código extra.

Calcular ângulo do frame

Mapear frame / durationInFrames para graus (0–360) usando interpolate.

Construir path do clipPath SVG

Usando coordenadas polares → cartesianas para desenhar o setor circular que cobre a cena B.

Aplicar clipPath na div da cena B

A cena B fica "atrás" e só aparece onde o setor se expandiu — efeito limpo sem compositing extra.

clipPath SVG

Máscara circular progressiva

coords polares

sin/cos para x,y do setor

0° = topo

rotate(-90deg) no SVG

largeLargeArc

Flag do SVG arc >180°

🎭 cross-dissolve — o cross-fade clássico

O cross-dissolve é o mais simples e mais usado: a cena A vai de opacity: 1 a 0 enquanto a cena B faz o caminho inverso, ambas ao mesmo tempo. O segredo é a sobreposição simultânea — não serial.

Implementação completa cross-dissolve.tsx

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

const totalFrames = fps * 2.5;
const progress = Math.min(frame / totalFrames, 1);

// A sai enquanto B entra — simultâneo
const sceneAOpacity = 1 - progress;
const sceneBOpacity = progress;

✓ Ideal para

•Transição entre clipes de natureza similar
•Passagem de tempo suave em documentários
•Slideshow emocional ou narrativo

✗ Não use quando

•Cenas com fundo branco ou muito claro (ficará lavado)
•Cortes rápidos — dissolve lento quebra o ritmo
•Quando os elementos de A e B se sobrepõem de forma estranha

progress linear

Sem easing — intencionalmente linear

position absolute

Ambas as cenas ocupam o mesmo espaço

2.5 × fps

Duração padrão: 2,5 segundos

Math.min(..., 1)

Clamp para não ultrapassar 1

⬛ fade-through-black — dip to black

O fade-through-black (também chamado de "dip to black") interpõe um frame completamente preto entre duas cenas. Diferente do cross-dissolve, as cenas nunca se sobrepõem — a tela preta é o "separador" que sinaliza ao espectador: mudança maior aconteceu aqui.

💡 Dica prática

Use fade-through-black no início e fim de vídeos YouTube — fade in from black na abertura e fade out to black no encerramento. Dá uma sensação cinematográfica que o público associa à qualidade de produção.

Dois estágios independentes fade-through-black.tsx

// Estágio 1: cena A → preto
const fadeOutOpacity = interpolate(
  frame, [0, halfDuration], [1, 0],
  { extrapolateRight: "clamp" }
);

// Estágio 2: preto → cena B
const fadeInOpacity = interpolate(
  frame, [halfDuration, totalDuration], [0, 1],
  { extrapolateLeft: "clamp" }
);

halfDuration

Ponto de meia-transição

bg preto absoluto

Div #000 no z-index base

serial

Saída antes da entrada (≠ dissolve)

salto temporal

Sinal narrativo de mudança grande

🌀 zoom-through — zoom in/out reveal

O zoom-through é o template mais épico: a cena A faz zoom in até cobrir a tela toda (scale infinito), e a cena B aparece fazendo zoom out desde o infinito. Cria uma sensação de "entrar" em um portal. Muito usado em trailers e intros.

Zoom bidirecional com spring zoom-through.tsx

import { spring, interpolate, useCurrentFrame, useVideoConfig } from "remotion";

// Cena A cresce até sumir
const scaleA = interpolate(frame, [0, halfFrames], [1, 8],
  { extrapolateRight: "clamp" });

// Cena B começa grande e encolhe ao lugar
const scaleB = interpolate(frame, [halfFrames, totalFrames], [8, 1],
  { extrapolateLeft: "clamp" });

scale 1→8

Cena A explode para fora do quadro

scale 8→1

Cena B "pousa" do infinito

overflow hidden

Container deve cortar o excesso

trailers/intros

Melhor uso: uma vez por vídeo

📚 Biblioteca completa de transições

Todos os 9 templates desta categoria estão em templates/. Referência rápida:

blinds-transition

templates/blinds-transition.tsx

Fatias verticais giram como venezianas revelando a cena B

hook: interpolate + delay sequencial

clock-wipe

templates/clock-wipe.tsx

Varredura radial de 0° a 360° estilo ponteiro de relógio

hook: clipPath SVG + coords polares

cross-dissolve

templates/cross-dissolve.tsx

Cross-fade simultâneo clássico entre duas cenas

hook: opacity A + B invertidos

fade-through-black

templates/fade-through-black.tsx

Dip to black — cenas separadas por frame preto

hook: interpolate em dois estágios

iris-transition

templates/iris-transition.tsx

Círculo que expande do centro revelando a cena B

hook: circle r animado via clipPath

morph-transition

templates/morph-transition.tsx

Scale + fade simultâneos conectam as cenas visualmente

hook: spring scale + interpolate opacity

push-transition

templates/push-transition.tsx

Cena B empurra cena A para fora do quadro

hook: translateX spring empurra ambas

slide-wipe

templates/slide-wipe.tsx

Painel desliza com física de mola (spring)

hook: spring translateX com damping

zoom-through

templates/zoom-through.tsx

Zoom in/out bidirecional — efeito portal

hook: scale 1→8→1 interpolate

9 templates

Todos prontos para uso e customização

clipPath

Técnica dominante em iris e clock-wipe

spring

Push e slide usam física de mola

interpolate

Base de blinds, dissolve e zoom

📌 Resumo do módulo

✓

Transições são linguagem narrativa — cada efeito comunica algo ao espectador

✓

blinds-transition — fatias com delay sequencial, ideal para contexto retrô/corporativo

✓

cross-dissolve — o mais versátil: opacidades invertidas simultâneas

✓

fade-through-black — dip to black para mudanças temporais significativas

✓

zoom-through — scale 1→8→1 para o efeito portal mais épico

Próximo Módulo:

2.8 — Intro & Outro: templates de abertura e encerramento para seus vídeos

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