thatrebeccarae/claude-marketing

Producción de Videos con Remotion

Mejores prácticas para construir videos programáticos con Remotion: animaciones, transiciones, gráficos y renderizado.

Instalación

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/remotion-video ~/.claude/skills/

Capacidades Principales

• Presets de animación spring (elástica, suave, nítida, escalonada)
• Patrones de interpolación (zoom de cámara, paralaje, simulación de desplazamiento)
• Animaciones de dibujo SVG (trazado de rutas, revelado de trazos)
• Transiciones de escena mediante TransitionSeries
• Capas con AbsoluteFill para composición
• Animaciones de gráficos (crecimiento de barras, dibujo de líneas, revelado circular, números contadores)
• Integración y sincronización de audio
• Configuración de renderizado

Presets Spring

Usa spring() de Remotion para animaciones basadas en física:

Preset	Configuración	Caso de Uso
Elástica	mass: 0.5, damping: 8, stiffness: 120	Revelaciones divertidas, rebotes de logotipos
Suave	mass: 1, damping: 15, stiffness: 80	Transiciones de UI, deslizamientos
Nítida	mass: 0.8, damping: 20, stiffness: 200	Interacciones rápidas, interruptores
Escalonada	Cualquier preset con desplazamiento de fotogramas por elemento	Revelaciones de listas, animaciones de cuadrícula

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

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

const scale = spring({
  frame,
  fps,
  config: { mass: 0.5, damping: 8, stiffness: 120 },
});

Patrones de Interpolación

Zoom de Cámara

import { interpolate } from "remotion";

const zoom = interpolate(frame, [0, 30], [1, 1.5], {
  extrapolateRight: "clamp",
});

Capas con Efecto Paralaje

const bgX = interpolate(frame, [0, 100], [0, -50]);
const fgX = interpolate(frame, [0, 100], [0, -150]);

Simulación de Desplazamiento

const scrollY = interpolate(frame, [0, 90], [0, -800], {
  extrapolateRight: "clamp",
});

Dibujo SVG

Anima strokeDashoffset para revelar rutas SVG:

const pathLength = 500;
const draw = interpolate(frame, [0, 60], [pathLength, 0], {
  extrapolateRight: "clamp",
});

<path
  d="..."
  strokeDasharray={pathLength}
  strokeDashoffset={draw}
/>

Patrones de Animación de Gráficos

Patrón	Técnica
Crecimiento de barras	Animar altura de 0 al valor objetivo, escalonar cada barra 3-5 fotogramas
Dibujo de líneas	Ruta SVG con animación de strokeDashoffset
Revelado circular/tipo dona	Animar detención de conic-gradient o arco SVG
Números contadores	Interpolar de 0 al valor objetivo, Math.round() para mostrar

Transiciones de Escena

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}>
    <SceneOne />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    timing={linearTiming({ durationInFrames: 15 })}
    presentation={fade()}
  />
  <TransitionSeries.Sequence durationInFrames={90}>
    <SceneTwo />
  </TransitionSeries.Sequence>
</TransitionSeries>

Reglas de Rendimiento

1. No uses useEffect para animaciones. Usa useCurrentFrame() + interpolate().
2. Memoiza componentes estáticos. React.memo para cualquier cosa que no dependa del fotograma.
3. Precarga los recursos. staticFile() para locales, prefetch() para URLs remotas.
4. Mantén las composiciones por debajo de 30s para iteraciones rápidas de renderizado durante el desarrollo.
5. Prueba en la resolución objetivo (1920x1080 o 1080x1080) antes del renderizado final.

Anti-patrones

• No uses CSS transition o animation — usa Remotion interpolate() y spring()
• No uses setTimeout o setInterval — solo temporización basada en fotogramas
• No uses posicionamiento absoluto en píxeles para diseños responsivos — usa AbsoluteFill + flex
• No recrees objetos style en línea en cada fotograma — extráelos a constantes o useMemo
• No uses audio no controlado — siempre establece volume y startFrom explícitos

Para ejemplos de código completos y plantillas de composición, consulta REFERENCE.md.