🧩 Biblioteca de recursos

Divide la cadena en un array de caracteres; cada carácter tiene un from escalado por índice. El resultado es un reveal de izquierda a derecha, letra por letra.

Patrón fundamental de stagger — la misma lógica se aplica a palabras, líneas y cualquier lista de elementos.

interpolate con clamp · stagger por índice · Sequence por elemento.

Usa spring() con stiffness alta para darle ese «rebote» orgánico a la entrada del texto.

Demuestra cómo spring reemplaza el easing manual para lograr entradas físicas convincentes.

spring({ fps, frame }) · stiffness / damping · multiplicar por scale o translateY.

Tres copias del texto con translateX aleatorio y canales de color red/green/blue separados, interpolados con pulsos irregulares.

Muestra cómo superponer elementos con position absolute y mix-blend-mode para efectos visuales sin biblioteca externa.

random("seed") para la posición · mix-blend-mode · pulso con interpolate multi-keyframe.

Cada carácter oscila con Math.sin(frame / 10 + i * 0.5), creando una onda orgánica que recorre el texto.

Enseña cómo usar trigonometría directamente en el frame para crear movimientos periódicos sin keyframes.

Math.sin(frame) · phase offset por índice · amplitud × seno.

Revela un carácter a la vez derivando el número de caracteres visibles de Math.floor(frame / charsPerFrame). El cursor parpadea con interpolate.

Patrón clásico de subtítulos animados, ideal para tutoriales y presentaciones de código.

slice dinámico · Math.floor · cursor con opacidad pulsante.

Cuatro variaciones: bubble-pop (scale 0→1.2→1 con spring), pulsing-text (respiración continua con seno), popping-text (cada palabra con scale-pop independiente), slide-text (translateX/Y con easing out).

Compara cómo la misma intención ("texto que llama la atención") da como resultado un código completamente diferente según el estilo deseado.

spring para un pop orgánico · seno para un loop continuo · interpolate+easing para un slide direccional.

Cada barra tiene una altura calculada con interpolate(frame, [i*3, 15+i*3], [0,1], {extrapolateRight:"clamp"}) — crecen en stagger y se detienen en el valor final.

Modelo canónico de stagger con SVG — patrón que se repite en line, area y donut chart.

stagger por índice · SVG rect height · extrapolateRight clamp.

Usa stroke-dashoffset animado para dar la ilusión de que se dibuja una línea de izquierda a derecha.

La técnica de dashoffset funciona con cualquier path SVG — curvas, flechas y formas complejas.

stroke-dasharray = longitud total · dashoffset de la longitud a 0 · getTotalLength().

Porciones calculadas mediante path d="M cx cy L x1 y1 A r r 0 flag 1 x2 y2 Z". El donut agrega un círculo blanco central con una métrica animada en el centro.

Enseña geometría SVG de arcos, el tipo de path más usado en charts complejos.

ángulo por porcentaje · arc flag · donut hole con circle + metric text.

Interpola de 0 al valor objetivo y formatea con toLocaleString() — muestra "1.234.567" contando frame a frame.

El contador numérico es uno de los componentes más solicitados en videos de marketing y de resultados.

interpolate → Math.floor → toLocaleString · easing ease-out · sufijo (K, M).

circular-progress usa dashoffset en un círculo SVG; progress-bars usa width% con interpolate — ambos muestran el porcentaje de progreso.

Dos paradigmas de progreso: SVG circular frente a HTML lineal; cubre el 99% de los casos de uso.

circumference = 2πr · dashoffset proporcional · width% con transition clamp.

comparison-chart anima dos grupos lado a lado con un delay entre ellos; area-chart rellena debajo de la línea con un path cerrado y un gradiente SVG.

Demuestra la composición de múltiples elementos SVG con timing independiente en el mismo video.

delay entre grupos · linearGradient SVG · path cerrado (Z) para el área.

Cada elemento de la lista entra con from={i * delay} — fade+slide en secuencia escalonada que da ritmo visual a las enumeraciones.

Stagger es el patrón de animación de listas más usado en cualquier video explicativo o de marketing.

Sequence from escalado · delay = índice × constante · fade+translateY combinados.

Interpolación de rotateY de 0° a 180° con perspective en el padre. Las dos caras de la tarjeta se posicionan con backfaceVisibility: "hidden".

Enseña el modelo de 3D CSS en Remotion —perspectiva, backface y flip—, reutilizable en flip-cards de productos y flashcards.

perspective: 800px · rotateY · backfaceVisibility: hidden · dos hijos posicionados.

Deriva el número actual con Math.ceil(durationInFrames / fps - frame / fps). Cada número aparece con scale-pop y sale con fade-out para dar paso al siguiente.

Patrón de «estado derivado del frame» — el valor mostrado siempre es una función directa del tiempo, sin useState.

Math.ceil(remaining) · frame local por Sequence · spring al entrar cada dígito.

Las notificaciones aparecen con spring (translateY + opacity) en horarios escalonados y se apilan verticalmente como notificaciones del sistema.

Muestra cómo simular UIs de sistemas operativos y apps reales en video — ideal para demos de producto.

Sequence anidada · spring con delay · stack visual con translateY acumulado.

Cada partícula tiene velocidad y ángulo con seed establecido mediante random() de Remotion: posición calculada frame a frame con una caída gravitacional simple.

Demuestra una simulación física determinística: gravedad, arrastre y rotación solo con aritmética de frames.

random(seed) para reproducibilidad · vx/vy por frame · opacidad fade-out al final.

sound-wave: barras con altura = amplitud × Math.sin(frame × freq + i × phase). rotating-carousel: tarjetas posicionadas con rotateY(i * 360/n) y carrusel girando continuamente.

Dos casos de loops perpetuos —onda continua y rotación infinita— que no tienen un comienzo ni un final definidos en la timeline.

seno con freq variable · 3D carousel con rotateY por slot · frame % período para loop.

Cuadrícula de imágenes donde cada celda aparece con scale + fade en stagger por índice, creando una galería que se arma progresivamente en pantalla.

Patrón de stagger aplicado a una cuadrícula — se transfiere directamente a cualquier colección de tarjetas o miniaturas.

interpolate con from escalado por índice · CSS grid · spring al entrar cada celda.

Las diapositivas cambian automáticamente con translateX derivado del índice actual calculado mediante Math.floor(frame / slideDuration). Transición suave con interpolate entre slides.

Demuestra cómo derivar el estado de selección directamente del frame sin useState — patrón puro y determinístico.

Math.floor(frame/dur) para la diapositiva activa · translateX por índice · overflow hidden en el contenedor.

Dos imágenes superpuestas; la segunda tiene clipPath: rect(0 X 100% 0) donde X se anima con interpolate — crea el efecto de «abrir la cortina» entre el antes y el después.

Enseña clip-path rectangular animado, una técnica usada en decenas de efectos de reveal y wipe.

clipPath CSS · interpolate 0→100% · divider line con absolutePosition.

La imagen comienza con scale 1.4 y hace un zoom out suave hasta scale 1.0 mientras opacity pasa de 0 a 1: crea una entrada cinemática con profundidad.

Combina dos interpolates independientes (scale y opacity) en la misma propiedad de estilo — patrón de reveal de impacto.

spring para scale · interpolate para opacity · overflow hidden + objectFit cover.

Cuadrícula masonry con columnas de altura variable; cada imagen aparece con translateY + fade y un delay proporcional a su columna, creando un mosaico que se llena de forma orgánica.

Muestra cómo manejar layouts de altura variable y stagger por columna vs. por índice lineal.

column-count CSS · delay por columna · absolutePosition para posicionamiento dinámico.

Una foto en un marco tipo Polaroid cae en la pantalla con spring (translateY + una ligera rotación aleatoria) y aterriza con un overshoot realista. Varias fotos Polaroid se acumulan con stagger.

Demuestra spring con rotation para simular objetos físicos que caen — patrón aplicable a cartas, notas adhesivas y stickers.

spring con damping bajo · random(seed) para el rotate inicial · box-shadow para dar profundidad.

Gradiente lineal cuyo ángulo y paradas de color se derivan de Math.sin(frame/30) — crea un fondo que respira y cambia de tonalidad continuamente.

Enseña cómo interpolar valores dentro de strings CSS (como angle y hsl) usando seno para crear loops suaves.

Math.sin para looping · hsl() con hue variable · backgroundImage interpolado.

Array de estrellas con posición y velocidad inicializadas con seed, usando random(); en cada frame las estrellas avanzan y crean un efecto de velocidad warp. Las estrellas que salen de la pantalla reaparecen al principio.

Demuestra un sistema de partículas con reutilización (pooling) y movimiento continuo sin useState.

random(seed+i) · posición = (basePos + frame×vel) % 1 · escala por profundidad.

Columnas de texto con caracteres aleatorios que caen; la posición vertical de cada columna se deriva del frame con un offset con seed. Caracteres verdes con la cabeza más brillante.

Caso clásico de generación procedural de texto: reutiliza random con seed para obtener resultados determinísticos, pero visualmente aleatorios.

random(col+row) para char · posY = (frame×speed + offset) % height · opacity por distancia del head.

Cuadrícula de celdas donde cada celda pulsa con una opacidad basada en Math.sin y una fase derivada de la distancia al centro; crea una onda radial de luz.

Muestra cómo crear animaciones espaciales derivando la fase de la posición — patrón de "onda que viaja por la cuadrícula".

distancia al centro como phase offset · Math.sin(frame/20 + dist) · opacidad 0.1–1.

Path SVG cuyos puntos de control se calculan con Math.sin en diferentes frecuencias: genera una forma de onda orgánica y fluida que evoluciona frame a frame.

El path dinámico de SVG es la base de los visualizadores de audio, las ondas y las formas orgánicas. Enseña a construir strings "d" en tiempo real.

construcción dinámica del path «M ... C ...» · suma de múltiples frecuencias · relleno con gradiente.

Array de formas SVG (triángulos, hexágonos, rombos) con posición, tamaño y rotación inicializados con seed. Cada forma gira lentamente con una velocidad angular individual derivada de random(i).

Combina random con seed con rotación continua — patrón de fondo decorativo reutilizable en cualquier estilo visual.

rotate = frame × random(i) × speed · SVG polygon dinámico · opacity baja para un fondo sutil.

El contenedor de la escena recibe translateX/Y y rotate con valores de random(frame+"x") e random(frame+"y") multiplicados por la intensidad: crean una vibración orgánica y no repetitiva.

Técnica de noise por frame usando random como sustituto de Perlin noise — reutilizable en cualquier efecto de cámara handheld.

random(frame+seed) · multiplicador de intensidad · wrapper div para aislar el shake.

Overlay naranja/amarillo con radialGradient pulsante y grano noise simulan la quema de película analógica. El centro «se quema» con una escala creciente hasta cubrirlo todo.

Demuestra cómo componer múltiples capas (noise, gradiente, color overlay) mediante position absolute para crear efectos de textura.

radialGradient animado · grano con random con seed · mix-blend-mode screen/multiply.

Imagen estática animada con zoom lento (scale 1→1.1) y desplazamiento diagonal (translateX/Y) usando interpolate con easing ease-in-out: el clásico efecto Ken Burns de los documentales.

Muestra cómo dar vida a fotos estáticas solo con transforms CSS — técnica estándar en la edición de video profesional.

scale 1→1.1 con easing suave · translateX/Y simultáneo · objectFit cover para evitar bordes.

Dos barras negras (arriba y abajo) que entran desde fuera y se detienen en el formato 2.35:1 de cinemascope; transforma cualquier escena en formato de cine con interpolate.

Técnica de enmascaramiento dinámico con dos divs absolutas — base para cualquier efecto de letterbox, widescreen o aspect ratio animado.

translateY de ±100% a 0 · dos elementos absolute arriba/abajo · spring para una entrada suave.

Varias capas (fondo, medio, frente) se mueven a distintas velocidades derivadas de frame × layer.speed — crea una ilusión de profundidad 3D con elementos 2D.

El parallax es la técnica de profundidad más usada en motion design — aprende a replicarla con simples multiplicadores de velocidad.

translateX = frame × speed · capas con z-index · overflow hidden en el stage.

Overlay negro con radialGradient circular transparente en el centro que se expande con spring — revela el contenido de abajo como si se encendiera un reflector.

Técnica de reveal con gradiente radial animado — combina CSS gradient con una variable derivada de spring para transiciones dramáticas.

radialGradient con radio animado · spring para la expansión · pointer-events none en el overlay.

La escena A pasa de opacity 1→0 mientras la escena B pasa de 0→1 con interpolate sincronizado: el crossfade más simple y versátil de todos.

La disolvencia es la transición básica del vocabulario cinematográfico: entender sus parámetros (duración, curva) es fundamental para cualquier edición.

dos AbsoluteFill · opacidad complementaria · easing ease-in-out para suavizar.

La escena B se divide en N franjas horizontales; cada franja se revela con scaleY de 0→1 en stagger: crea el efecto de una persiana veneciana que se abre.

Enseña cómo dividir una escena en franjas y animar cada una de forma independiente: un patrón aplicable para revelar cuadrículas, tablas y paneles.

N divs con height=100%/N · scaleY con stagger · overflow hidden por franja.

Clip-path circular (circle()) crece del 0% al 150% desde el centro y revela la siguiente escena — transición de iris usada en películas mudas y animaciones clásicas.

Introduce clip-path circle() animado: la forma más sencilla de máscara animada, transferible directamente a revelados de logos y botones.

clipPath: circle(R at 50% 50%) · R interpolado 0→150% · spring para una expansión orgánica.

La escena A sale hacia la izquierda mientras la escena B entra por la derecha con el mismo translateX animado: como cambiar de diapositiva en una presentación física.

La transición direccional es el patrón de navegación de apps y presentaciones; entender cómo sincronizar la entrada y la salida es esencial.

translateX: 100%→0 (B) y 0→-100% (A) · overflow hidden en el stage · spring con damping alto.

La escena A hace fade a negro durante la primera mitad y la escena B emerge de la oscuridad durante la segunda: crea una pausa dramática entre escenas, un patrón de cortes de las películas de acción.

Demuestra cómo descomponer una transición en dos fases con interpolate multi-keyframe — se aplica a cualquier transición por un color intermedio.

interpolate con 3 keyframes · AbsoluteFill negro en el medio · duración ajustable por fase.

La escena A hace un zoom extremo (scale 1→5) mientras la escena B emerge del centro con scale 0.2→1: crea una transición de «sumergirse en» con perspectiva dramática.

El zoom-through combina dos escalas sincronizadas — un patrón muy solicitado en videos de YouTube y marketing que requieren energía visual.

scale A 1→5 · scale B 0.2→1 · timing exacto para que parezcan conectados · overflow hidden.

El título aparece con letterbox, fade in lento y texto con tracking creciente (letterSpacing animado) sobre fondo oscuro — intro al estilo blockbuster con múltiples elementos sincronizados.

Composición de 4+ elementos temporales (barras, fondo, texto, subtítulo) con Sequence anidadas — modelo de intro profesional.

letterSpacing interpolado · Sequence anidada · múltiples elementos con timing independiente.

Cuenta regresiva de 5→1, con cada número en su propia Sequence, spring de entrada y salida rápida. La línea circular de progreso se completa al llegar a "GO!"

Combina Sequence con un SVG de circular-progress — muestra cómo sincronizar un elemento visual de progreso con contenido textual en paralelo.

Secuencia por dígito · dashoffset proporcional al frame · spring al entrar cada número.

Lista de créditos con translateY calculado linealmente por frame: sube desde la parte inferior hasta la superior a velocidad constante, como los créditos de una película.

Demuestra un desplazamiento determinístico sin useState — la posición siempre es -frame × pixelsPerFrame, haciendo que el resultado sea 100% reproducible.

translateY = -frame × speed · overflow hidden · fade in/out en los bordes con gradiente.

Barra de identificación en el tercio inferior de la pantalla: nombre y cargo aparecen con translateX y una barra de color que crece desde la izquierda. Entra con spring y sale con fade.

El lower third es el componente más usado en cualquier video de entrevista, noticiero o presentación — aprender a construirlo desde cero es esencial.

scaleX 0→1 en la barra · translateX en el texto · Sequence para entrada y salida automáticas.

End screen con CTA, enlaces a redes sociales y miniatura del próximo video: todos los elementos aparecen en stagger con spring, armando un cierre interactivo.

Composición de múltiples CTA con timing visual cuidadoso — modelo profesional de end card para YouTube y videos de producto.

Secuencia por elemento CTA · spring con stagger · useCurrentFrame para el loop de pulsación en el botón.

Card con comillas grandes, el texto de la cita revelado palabra por palabra en stagger y el autor aparece después con fade: crea un momento de pausa reflexiva en el video.

Stagger por palabra (split por " ") es diferente del stagger por carácter: muestra cómo adaptar el patrón a una granularidad diferente.

split(" ") · Sequence por palabra con from escalado · comillas decorativas con pseudoelemento CSS.

SVG del logo con stroke-dashoffset animado desde la longitud total hasta 0: crea la ilusión de que el trazo se dibuja progresivamente. El fill aparece después de que se completa el stroke.

La técnica de dashoffset en logos SVG es una de las más solicitadas por los clientes — funciona con cualquier path vectorial exportado de Illustrator o Figma.

getTotalLength() · dashoffset interpolado · fill con delay mediante Sequence.

El logo aparece mediante un glitch progresivo: las copias de colores (cyan, magenta) desplazadas con translateX random van desapareciendo hasta converger en el logo estable: un reveal de identidad tecnológica.

Aplica glitch RGB split específicamente a logos: combina random por frame con interpolate de intensidad para controlar la atenuación.

intensidad = interpolate(frame, [0, dur], [1, 0]) · random(frame) × intensidad · position absolute para capas.

El logo cae desde arriba con un spring de alta stiffness y bajo damping: rebota varias veces antes de asentarse, con una sombra que se expande al aterrizar.

Spring con overshoot pronunciado para simular la física de una caída: un patrón de revelación de logo enérgico para marcas jóvenes y tecnológicas.

spring({ stiffness: 200, damping: 10 }) · sombra inversamente proporcional al translateY · Sequence para la entrada.

El logo entra girando 360° con spring — la escala comienza en 0 y llega a 1 mientras la rotación completa el ciclo, creando una entrada rotacional enérgica.

Combina dos springs independientes (scale y rotate) con stiffness diferentes para lograr un timing asimétrico y orgánico.

rotate spring con overshoot · scale spring simultáneo · transform-origin center para girar en su lugar.

Logo cortado en dos mitades (arriba/abajo o izquierda/derecha) con clip-path; las mitades llegan desde direcciones opuestas y encajan con spring — efecto de «armar» el logo.

Demuestra clip-path rect para enmascarar mitades de una imagen — técnica reutilizable en divisiones de pantalla, reveals de fotos y transiciones split.

clipPath inset(0 0 50% 0) e inset(50% 0 0 0) · translateY con direcciones opuestas · spring para un ajuste preciso.

Nombre de la marca escrito carácter por carácter con Math.floor(frame / charsPerFrame); el ícono/símbolo aparece primero con spring y el cursor parpadea durante la escritura.

Versión de branding del typewriter: agrega un símbolo visual antes del texto y crea una narrativa de "construcción de marca" frame a frame.

slice(0, charsVisible) · cursor parpadeante con Math.floor(frame/10) % 2 · Sequence para el símbolo antes del texto.