🗂️ Descripción general — cuándo usar plantillas de imagen
Las plantillas de imagen y medios resuelven un problema muy frecuente: tienes fotos o assets estáticos y necesitas darles vida dentro de un video. La elección de la plantilla adecuada depende de cuántos elementos tienes, si quieres enfócate en un elemento o narrativa de conjunto, y si el contenido es comparativo o secuencial.
🎯 Mapa de decisión rápida
- •Muchas fotos con el mismo peso →
gallery-gridomasonry-gallery - •Una foto destacada a la vez →
image-carouseloimage-zoom-reveal - •Antes y después →
image-comparison-slider - •Estética nostálgica / marco →
polaroid-frameophoto-stack - •Dos temas simultáneos →
split-screen - •Contenido principal + contexto →
picture-in-picture
💡 Consejo sobre archivos
Todas las plantillas usan staticFile() de Remotion para referenciar assets locales. Coloca tus imágenes en public/ en la raíz del proyecto y usa staticFile("foto.jpg") — Remotion resuelve la ruta tanto en Studio como en el render final.
📐 gallery-grid — cuadrícula 2×3 con stagger
O gallery-grid organiza hasta seis imágenes en una cuadrícula 2×3 donde cada tarjeta entra con un retraso progresivo (stagger). El resultado es ese efecto de "revelación en cascada" que marca el ritmo sin requerir ningún keyframe manual.
⚙️ Cómo funciona el stagger
Cada elemento recibe un delay proporcional a su índice. El spring comienza antes para el primero y después para el último, creando la onda de aparición.
- •El elemento 0 empieza en el frame 0; el elemento 5 empieza en el frame 25 (delay = index × 5).
- •
spring({ frame: Math.max(frame - delay, 0), fps })— el truco deMath.maximpide fotogramas negativos. - •El spring responde con 0→1; multiplica por escala u opacidad libremente.
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;
✓ Qué HACER
- ✓Usar imágenes con la misma proporción para que la cuadrícula sea uniforme.
- ✓Ajusta el delay por elemento para controlar la velocidad de la onda.
- ✓Combinar con subtítulos que aparecen junto con cada tarjeta.
✗ Qué NO hacer
- ✗Usar un delay muy alto (>10/item) — es posible que la última tarjeta nunca aparezca en el video.
- ✗Mezclar proporciones de imagen sin
objectFit: "cover". - ✗Usar más de 9 elementos sin ajustar el diseño de la cuadrícula.
🎠 image-carousel — deslizamiento horizontal con foco central
O image-carousel presenta diapositivas en una fila horizontal donde solo el elemento central queda en escala 1.0 — los adyacentes se encogen progresivamente. El frame determina en qué punto del ciclo estamos, creando una transición continua y fluida.
💡 El secreto del foco central
La posición de cada diapositiva se calcula como offset = índice - progress. Cuando offset = 0, el elemento está exactamente en el centro y recibe la escala máxima. La función interpolate(|offset|, [0,1,2], [1,0.75,0.55]) aplica la reducción gradual a los elementos vecinos.
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" } ); });
Ajusta la velocidad del ciclo
Cambia fps * 2 para fps * 3 para diapositivas más lentas, o fps * 1 para un desplazamiento más rápido. Cada ciclo corresponde al tiempo que una diapositiva permanece en el centro.
Controla el espaciado entre diapositivas
El valor 280 en translateX = offset * 280 define la distancia entre centros. Redúcela para que las diapositivas queden más superpuestas y auméntala para que queden más espaciadas.
Agrega z-index según el offset
La diapositiva central debe quedar por encima de las laterales. Usa zIndex: Math.round(10 - Math.abs(offset) * 3) para superponer automáticamente.
↔️ image-comparison-slider — antes y después
O image-comparison-slider divide la pantalla verticalmente con un divisor que se mueve con el tiempo, revelando la imagen «después» de abajo hacia arriba mientras la imagen «antes» sigue visible a la izquierda. Es la plantilla ideal para mostrar ediciones, transformaciones de producto o comparaciones de diseño.
🔀 Técnica del clip-path
La imagen "después" queda superpuesta con position: absolute y un clipPath que limita el área visible a una fracción del ancho total. El frame controla esa fracción mediante interpolate:
const clipWidth = interpolate(frame, [0, durationInFrames], [0, 100], { extrapolateRight: "clamp" }); // style da imagem "depois": clipPath: `inset(0 ${100 - clipWidth}% 0 0)`
✓ Qué HACER
- ✓Usar imágenes exactamente del mismo tamaño para una alineación perfecta.
- ✓Agrega una línea divisoria vertical como indicador visual.
- ✓Combinar con texto "Antes" / "Después" que desaparece durante el reveal.
✗ Qué NO hacer
- ✗Imágenes con proporciones diferentes: el clip queda descentrado.
- ✗Revelar demasiado rápido: se pierde el impacto de la comparación.
- ✗Aplicar a comparaciones subjetivas sin contexto textual.
🔍 image-zoom-reveal — zoom-out con enfoque
O image-zoom-reveal comienza con la imagen muy ampliada y retrocede progresivamente hasta la escala normal, creando un efecto cinematográfico de «pull back». La sensación es la de revelar el contexto que rodea el detalle inicial.
💡 Por qué empezar ampliado
Empezar por el detalle capta la atención de inmediato: el espectador no sabe qué está viendo. El alejamiento gradual genera tensión y revelar el objeto completo produce impacto. Usa tiempos largos (fps × 3 o más) para maximizar el efecto 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 con spring
O masonry-gallery distribuye bloques de distintas alturas en tres columnas, imitando el diseño estilo Pinterest. Cada bloque tiene su propio delay de spring, creando una secuencia de pop-ins que da sensación de profundidad y naturalidad.
🏗️ Arquitectura de tres columnas
Los bloques se agrupan por columna antes del render. Cada columna es un flex-direction: column con gap. Los bloques tienen alturas porcentuales diferentes para crear el aspecto irregular característico del 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 }, ];
✓ Qué HACER
- ✓Distribuir bloques de alturas muy distintas por columna para lograr un efecto orgánico.
- ✓Escalonar los delays para que cada columna parezca independiente.
- ✓Usar gradientes en lugar de imágenes para prototipos rápidos.
✗ Qué NO hacer
- ✗Usar la misma altura en todos los bloques: se pierde el efecto masonry.
- ✗Usar todos los delays iguales — parece una cuadrícula común.
- ✗Exceder las 3 columnas sin ajustar el contenedor principal.
📚 Biblioteca completa — las 9 plantillas
Referencia rápida de todas las plantillas de esta categoría. Cada fila incluye el nombre y el archivo en templates/, una línea descriptiva y el hook principal utilizado.
📌 Resumen del módulo
Math.max(frame - delay, 0) crea una onda de revelado sin keyframes manuales.offset = índice - progress posiciona cada diapositiva relativamente al centro.clipPath: inset() revela la imagen "después" progresivamente.Próximo módulo:
2.5 — Fondos / Background: nueve plantillas de fondos animados para dar contexto a cualquier escena.