🗂️ Visão geral — quando usar templates de imagem
Templates de imagem e mídia resolvem um problema muito frequente: você tem fotos ou assets estáticos e precisa dar vida a eles dentro de um vídeo. A escolha do template certo depende de quantos itens você tem, se quer foco em um elemento ou narrativa de conjunto, e se o conteúdo é comparativo ou sequencial.
🎯 Mapa de decisão rápida
- •Muitas fotos de mesmo peso →
gallery-gridoumasonry-gallery - •Uma foto em destaque por vez →
image-carouselouimage-zoom-reveal - •Antes e depois →
image-comparison-slider - •Estética nostálgica / moldura →
polaroid-frameouphoto-stack - •Dois assuntos simultâneos →
split-screen - •Conteúdo principal + contexto →
picture-in-picture
💡 Dica de arquivo
Todos os templates usam staticFile() do Remotion para referenciar assets locais. Coloque suas imagens em public/ na raiz do projeto e use staticFile("foto.jpg") — o Remotion resolve o caminho tanto no Studio quanto no render final.
📐 gallery-grid — grade 2×3 com stagger
O gallery-grid organiza até seis imagens numa grade 2×3 onde cada card entra com um atraso progressivo (stagger). O resultado é aquele efeito de "revelação em cascata" que dá ritmo sem exigir nenhum keyframe manual.
⚙️ Como funciona o stagger
Cada item recebe um delay proporcional ao seu índice. O spring começa mais cedo para o primeiro e mais tarde para o último, criando a onda de aparecimento.
- •Item 0 começa no frame 0; item 5 começa no frame 25 (delay = index × 5).
- •
spring({ frame: Math.max(frame - delay, 0), fps })— o truque doMath.maximpede frames negativos. - •O spring responde com 0→1; multiplique por escala ou opacidade livremente.
import { spring, useCurrentFrame, useVideoConfig } from "remotion"; // dentro do .map((item, i) => ...) const delay = i * 5; const s = spring({ frame: Math.max(frame - delay, 0), fps, config: { damping: 12, stiffness: 100 }, }); const scale = 0.8 + s * 0.2;
✓ O que FAZER
- ✓Usar imagens de mesma proporção para a grade ficar uniforme.
- ✓Ajustar o delay por item para controlar a velocidade da onda.
- ✓Combinar com legendas que entram junto com cada card.
✗ O que NÃO fazer
- ✗Colocar delay muito alto (>10/item) — o último card pode nunca aparecer no vídeo.
- ✗Misturar proporções de imagem sem
objectFit: "cover". - ✗Usar mais de 9 itens sem ajustar o layout da grade.
🎠 image-carousel — slide horizontal foco central
O image-carousel apresenta slides em fila horizontal onde apenas o item central fica em escala 1.0 — os adjacentes encolhem progressivamente. O frame determina em qual ponto do ciclo estamos, criando uma transição contínua e suave.
💡 O segredo do foco central
A posição de cada slide é calculada como offset = índice - progress. Quando offset = 0, o item está exatamente no centro e recebe escala máxima. A função interpolate(|offset|, [0,1,2], [1,0.75,0.55]) aplica a redução gradual para os vizinhos.
const cycleLength = fps * 2; const progress = (frame % (cycleLength * slides.length)) / cycleLength; slides.map((slide, i) => { const offset = i - progress; const translateX = offset * 280; const scale = interpolate( Math.abs(offset), [0, 1, 2], [1, 0.75, 0.55], { extrapolateRight: "clamp" } ); });
Ajuste a velocidade do ciclo
Mude fps * 2 para fps * 3 para slides mais lentos, ou fps * 1 para uma rolagem mais rápida. Cada ciclo corresponde ao tempo que um slide fica no centro.
Controle o espaçamento entre slides
O valor 280 em translateX = offset * 280 define a distância entre centros. Reduza para slides mais sobrepostos, aumente para mais espaçados.
Adicione z-index pelo offset
O slide central deve ficar por cima dos laterais. Use zIndex: Math.round(10 - Math.abs(offset) * 3) para empilhamento automático.
↔️ image-comparison-slider — antes e depois
O image-comparison-slider divide a tela verticalmente com um divisor que se move ao longo do tempo, revelando a imagem "depois" de baixo para cima enquanto a imagem "antes" fica visível à esquerda. É o template ideal para mostrar edições, transformações de produto ou comparações de design.
🔀 Técnica do clip-path
A imagem "depois" fica sobreposta com position: absolute e um clipPath que limita a área visível a uma fração da largura total. O frame controla essa fração via interpolate:
const clipWidth = interpolate(frame, [0, durationInFrames], [0, 100], { extrapolateRight: "clamp" }); // style da imagem "depois": clipPath: `inset(0 ${100 - clipWidth}% 0 0)`
✓ O que FAZER
- ✓Usar imagens exatamente do mesmo tamanho para o alinhamento perfeito.
- ✓Adicionar uma linha divisória vertical como indicador visual.
- ✓Combinar com texto "Antes" / "Depois" que some ao longo do reveal.
✗ O que NÃO fazer
- ✗Imagens com proporções diferentes — o clip fica descentralizado.
- ✗Revelar muito rápido — perde o impacto da comparação.
- ✗Aplicar a comparações subjetivas sem contexto textual.
🔍 image-zoom-reveal — zoom-out com foco
O image-zoom-reveal começa com a imagem muito aumentada e recua progressivamente para a escala normal, criando um efeito de "pull back" cinematográfico. A sensação é de revelar o contexto em torno do detalhe inicial.
💡 Por que começar ampliado
Iniciar no detalhe prende a atenção imediatamente — o espectador não sabe o que está vendo. O recuo gradual constrói tensão e o momento de revelar o objeto completo gera impacto. Use tempos longos (fps × 3 ou mais) para maximizar o efeito dramático.
const { fps, durationInFrames } = useVideoConfig(); const s = spring({ frame, fps, config: { damping: 20, stiffness: 30 } }); // começa em 2.5×, chega a 1.0× const scale = interpolate(s, [0, 1], [2.5, 1.0]); const opacity = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });
🃏 masonry-gallery — estilo Pinterest com spring
O masonry-gallery distribui blocos de alturas variadas em três colunas, imitando o layout estilo Pinterest. Cada bloco tem seu próprio delay de spring, criando uma sequência de pop-ins que dá sensação de profundidade e organicidade.
🏗️ Arquitetura de três colunas
Os blocos são agrupados por coluna antes do render. Cada coluna é um flex-direction: column com gap. Os blocos têm alturas percentuais diferentes para criar o visual irregular característico do masonry.
// Blocos com delay e altura variável por coluna const blocks = [ { col: 0, height: "45%", delay: 0 }, { col: 1, height: "55%", delay: 3 }, { col: 2, height: "40%", delay: 5 }, ];
✓ O que FAZER
- ✓Distribuir blocos de alturas bem diferentes por coluna para o efeito orgânico.
- ✓Escalonar os delays de forma que cada coluna pareça independente.
- ✓Usar gradientes em vez de imagens para protótipos rápidos.
✗ O que NÃO fazer
- ✗Usar alturas iguais em todos os blocos — perde o efeito masonry.
- ✗Colocar todos os delays iguais — parece uma grade comum.
- ✗Exceder 3 colunas sem ajustar o container pai.
📚 Biblioteca completa — todos os 9 templates
Referência rápida para todos os templates desta categoria. Cada linha traz o nome, o arquivo em templates/, uma linha descritiva e o hook principal utilizado.
📌 Resumo do módulo
Math.max(frame - delay, 0) cria onda de revelação sem keyframes manuais.offset = índice - progress posiciona cada slide relativamente ao centro.clipPath: inset() revela a imagem "depois" progressivamente.Próximo módulo:
2.5 — Fundos / Background: nove templates de background animado para contextualizar qualquer cena.