Módulo 3.3 — remotion | Skill Design

🧩

Qué es / qué hace

TEMA 1

Concepto principal

Remotion es un framework que trata cada frame de video como un componente React.

En lugar de editar en la línea de tiempo de un editor de video, escribes TypeScript/JSX. El framework controla qué "frame" se está renderizando mediante useCurrentFrame(), y asignas ese número a cualquier propiedad visual: opacidad, escala, posición, color. El resultado se exporta frame por frame a un MP4 real, sin nube ni costo por render.

Lo que entrega Remotion

▸ Composiciones definidas en src/Root.tsx con <Composition>
▸ Animaciones deterministas mediante useCurrentFrame() + interpolate()
▸ Física del movimiento con spring()
▸ Secuenciación con <Sequence> e <Series>
▸ Render mediante CLI: npx remotion render

Stack real del skill

▸ React + TypeScript — el componente es el frame
▸ remotion — paquete principal + hooks
▸ @remotion/renderer — CLI de renderizado sin interfaz gráfica
▸ @remotion/captions — subtítulos sincronizados
▸ @remotion/three — integración con React Three Fiber

useCurrentFrame

hook central — devuelve el nº del frame

interpolate()

mapea frames → valores CSS

spring()

física de resorte, rebote natural

define fps, dimensiones, duración

🎣

Cuándo se activa

TEMA 2

💡 Disparador del skill

El skill remotion se activa siempre que el código importa remotion o le pides a Claude Code que cree o edite videos programáticos en React. El trigger de la descripción: "Usa esta skill siempre que trabajes con código Remotion para obtener conocimientos específicos del dominio."

Línea de tiempo de activación

El código importa remotion

Cualquier archivo .tsx/.ts con import ... from 'remotion'

Solicitud de video programático en React

"Crea un video de presentación", "Anima este gráfico para un video", "Genera un reel con texto animado"

Ajuste de una animación existente

Corregir el rebote de spring, ajustar los fps, cambiar durationInFrames, crear una Sequence con delay

Render / exportación

Comandos CLI, bundling, salida MP4/WebM, parámetros de calidad

✓ Usa la skill remotion cuando...

✓ Exportar video MP4/WebM real desde React
✓ Animar datos, gráficos y textos frame a frame
✓ Crear motion graphics controlados por código
✓ Integrar Three.js 3D directamente en el video
✓ Sincronizar subtítulos (.srt) con audio

✗ No lo confundas con...

✗ animation-designer — anima la página HTML en el navegador, no exporta video
✗ HyperFrames — convierte HTML estático en MP4 mediante Puppeteer+FFmpeg, sin React
✗ 3d-animation-creator — anima objetos 3D en un canvas, no exporta MP4 directamente

import 'remotion'

disparador automático

vídeo React

solicitud explícita

spring/timing

ajuste de animación

CLI de renderizado

exportación MP4

🚀

Cómo mejora tus videos

TEMA 3

📊 Por qué Remotion cambia las reglas del juego

Determinismo total

El mismo frame siempre produce el mismo píxel. Sin fallas en la línea de tiempo ni renders inconsistentes.

Control de versiones con Git

Los videos son código: diff, branch, merge, CI/CD. Imposible en los editores tradicionales.

Componentización

Reutiliza Intro, Lower Third, Outro como componentes React en varios proyectos.

💡 Buenas prácticas reales (del SKILL.md)

• Escribe animaciones en segundos × fps, nunca en fotogramas fijos: 2 * fps en lugar de 60
• CSS transitions / Tailwind animation classes son prohibidos — no se renderizan correctamente
• Usa siempre extrapolateRight: 'clamp' para que no se filtren valores fuera del intervalo
• Usa premountFor en toda <Sequence> para evitar la aparición repentina de elementos visuales

✓ Con la skill activa

✓ spring() con damping correcto → sin rebote excesivo
✓ interpolate() con clamp → sin artefactos en los extremos
✓ Sequences con premount → transiciones suaves
✓ Animaciones escritas en segundos → portables entre fps

✗ Sin el skill

✗ CSS transition en JSX → el frame se renderiza estático
✗ interpolate sin clamp → valores negativos de opacidad
✗ Sequence sin premount → los elementos parpadean al entrar
✗ spring sin el delay correcto → animaciones superpuestas

determinismo

mismo frame = mismo píxel

Compatible con Git

vídeo como código

extrapolate clamp

los valores nunca se filtran

fps × segundos

portabilidad del timing

⚙️

Cómo funciona por dentro

TEMA 4

Anatomía de una composición de Remotion

// src/Root.tsx — define la composición

import { Composition } from 'remotion';

import { MyVideo } from './MyVideo';

export const RemotionRoot = () => (

<Composition

id="MyVideo"

component={'{'}MyVideo{'}'}

durationInFrames={'{'}150{'}'}

fps={'{'}30{'}'}

width={'{'}1920{'}'}

height={'{'}1080{'}'}

);

interpolate() — lineal con easing

// FadeIn determinista

import {'{'} useCurrentFrame, interpolate, Easing {'}'} from 'remotion';

const FadeIn = () => {'{'}

const frame = useCurrentFrame();

const { fps } = useVideoConfig();

const opacity = interpolate(

frame, [0, 2 * fps], [0, 1],

{ extrapolateRight: 'clamp' {'}'}

);

return <div style={'{'}{'{'}opacity{'}'}{'}'}}>¡Hola!</div>;

{'}'}

spring() — física de resorte

// Configuraciones recomendadas

import {'{'} spring, useVideoConfig {'}'} from 'remotion';

// suave, sin bounce

const smooth = {'{'} damping: 200 {'}'};

// ágil con un ligero bounce

const snappy = {'{'} damping: 20, stiffness: 200 {'}'};

// pesado, lento

const heavy = {'{'} damping: 15, stiffness: 80, mass: 2 {'}'};

const scale = spring({'{'} frame, fps, config: smooth {'}'});

Sequence + Series — secuenciación

// ¡Usa siempre premountFor en Sequence!

import {'{'} Sequence, Series {'}'} from 'remotion';

// Sequence manual con delay

</Sequence>

// Series — uno tras otro, sin overlap

<Series.Sequence durationInFrames={'{'}45{'}'}><Introducción /></Series.Sequence>

<Series.Sequence durationInFrames={'{'}60{'}'}><Main /></Series.Sequence>

<Series.Sequence offset={'{'}-15} durationInFrames={30{'}'}><Otro /></Series.Sequence>

</Series>

💡 Renderizar mediante CLI

# Renderizar a MP4

npx remotion render MyVideo out/video.mp4

# Renderizar solo frames específicos (vista previa)

npx remotion render MyVideo out/video.mp4 --frames=0-30

# Studio (vista previa interactiva en el navegador)

npx remotion studio

src/Root.tsx

punto de entrada de las composiciones

AbsoluteFill

capa de fondo predeterminada

premountFor

carga antes de mostrar

desplazamiento negativo

superposición entre escenas

💬

Ejemplo práctico + PROMPT listo

TEMA 5

Escenario: video de presentación de producto (30s, 30fps = 900 frames)

Un video 1920×1080 con tres escenas encadenadas mediante Series: Introducción con el logo apareciendo con fade in + spring scale, Features listando 3 elementos con stagger, CTA con texto pulsante. Exportado a MP4 mediante CLI.

MyVideo.tsx — composición completa

// src/MyVideo.tsx

import {'{'} AbsoluteFill, Series, useCurrentFrame, useVideoConfig, interpolate, spring {'}'} from 'remotion';

const Introducción: React.FC = () => {'{'}

const frame = useCurrentFrame();

const { fps } = useVideoConfig();

const opacity = interpolate(frame, [0, 1 * fps], [0, 1], {'{'} extrapolateRight: 'clamp' {'}'});

const scale = spring({'{'} frame, fps, config: {'{'} damping: 200 {'}'} {'}'});

return (

<h1 style={'{'}{'{'}opacity, transform:`scale(${'{'} scale {'}'})`, color:'#a855f7', fontSize:80}>MiProducto</h1>

</AbsoluteFill>

);

{'}'}

export const MyVideo: React.FC = () => (

<Series.Sequence durationInFrames={'{'}3 * fps{'}'}><Introducción /></Series.Sequence>

<Series.Sequence durationInFrames={'{'}5 * fps{'}'}><Features /></Series.Sequence>

<Series.Sequence durationInFrames={'{'}2 * fps{'}'}><CTA /></Series.Sequence>

</Series>

);

📋 PROMPT listo — pégalo en Claude Code

Crea un proyecto Remotion completo en TypeScript con las siguientes especificaciones: - Composición "PromoVideo": 1920×1080, 30fps, 300 frames (10s) - Escena 1 (frames 0-90): logo con fade-in y spring scale (damping: 200), sin rebote - Escena 2 (frames 90-240): 3 características en una lista, cada una con un stagger de 20 frames; interpolate opacity+translateY - Escena 3 (frames 240-300): CTA con texto pulsante mediante spring in-out - NUNCA usar CSS transitions: solo useCurrentFrame + interpolate/spring - SIEMPRE usar extrapolateRight/Left: 'clamp' en todos los interpolate() - SIEMPRE usar premountFor={fps} en cada Sequence - Comando de exportación: npx remotion render PromoVideo out/promo.mp4

escenas en Series

encadenamiento limpio

stagger manual

frame offset por item

in-out spring

transiciones suaves de entrada y salida

CLI render

npx remotion render

🧬

Combina con / límites

TEMA 6

⚠️ Diferencia crítica: tres herramientas distintas

⚛️ remotion (este módulo)

React → frames → MP4. Exporta video real. Requiere Node.js, TypeScript. Animaciones mediante useCurrentFrame, determinísticas.

🎬 HyperFrames (3.4)

HTML+CSS → Puppeteer → FFmpeg → MP4. Sin React. Anima HTML estático. Más simple, menos control por frame.

🎬 animation-designer (3.1)

Framer Motion / CSS / GSAP en la página HTML. No exporta video — anima solo en el navegador.

🔗 Combina bien con

▸
3d-animation-creator (3.2)
Usa @remotion/three para integrar escenas React Three Fiber directamente en la composición Remotion —3D renderizado cuadro por cuadro, exportado como MP4.
▸
HyperFrames / seedance (3.4)
Usa Remotion para generar clips complejos e HyperFrames/FFmpeg para montar la edición final: concatenar, agregar música y overlays sencillos sin reconstruir React.
▸
canvas-design (2.3)
Exporta assets de canvas-design como imágenes estáticas e impórtalas en Remotion con <Img> o staticFile().

🚫 Cuándo NO usar Remotion

✗ Solo quieres animar la landing page — usa animation-designer
✗ Ya tienes el HTML listo y quieres un MP4 rápido sin React — usa HyperFrames
✗ Solo quieres visualizar 3D en un canvas: usa 3d-animation-creator
✗ Necesitas renderizado en la nube sin Node.js local: considera Remotion Lambda
✗ Proyecto que no es de React (Vue, Angular, HTML puro): usa HyperFrames/FFmpeg

Comparativa rápida — Medios T3

Skill	¿Exporta MP4?	Stack	¿Control por fotograma?
⚛️ remotion	✓ Sí	React + TypeScript	✓ Total
🔁 HyperFrames	✓ Sí	HTML + Puppeteer + FFmpeg	~ Parcial (CSS)
🎬 animation-designer	✗ No	Framer Motion / CSS	✗ Solo navegador
🖱️ 3d-animation-creator	✗ No directamente	Three.js / p5.js / Canvas	~ Vía @remotion/three

@remotion/three

3D directamente en el video

staticFile()

assets del proyecto

Remotion Lambda

renderizado en la nube de AWS

calculateMetadata

duración dinámica según los datos

📋 Resumen del Módulo 3.3

Qué aprendiste

✓ Remotion = video programático en React, frame = componente
✓ useCurrentFrame() + interpolate() controlan toda la animación
✓ spring() entrega física de resorte con configuraciones precisas
✓ CSS transitions están prohibidas — rompen el render
✓ <Sequence> / <Series> secuencian escenas con premount
✓ Render mediante npx remotion render → MP4 local
✓ Diferencia clara frente a HyperFrames y animation-designer
✓ @remotion/three se conecta con 3d-animation-creator

Próximo módulo

3.4 🔁 seedance + HyperFrames/FFmpeg

Ciclo de video con seedance, edición no lineal con HyperFrames y montaje final mediante FFmpeg: el flujo completo de producción sin React.

Ir a 3.4 →

← Volver a la ruta 3 Próximo módulo → 3.4 🔁 seedance