thatrebeccarae/claude-marketing

Production Vidéo Remotion

Bonnes pratiques pour créer des vidéos programmatiques avec Remotion — animations, transitions, graphiques et rendu.

Installation

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

Capacités principales

• Préréglages d'animations ressort (rebondissant, lisse, net, décalé)
• Motifs d'interpolation (zoom caméra, parallaxe, simulation de défilement)
• Animations de dessin SVG (tracé de chemin, révélation de trait)
• Transitions de scène via TransitionSeries
• Superposition AbsoluteFill pour le compositing
• Animations de graphiques (barres croissantes, lignes tracées, révélation circulaire, compteurs de nombres)
• Intégration et synchronisation audio
• Configuration du rendu

Préréglages ressort

Utilisez spring() de Remotion pour des animations basées sur la physique :

Préréglage	Configuration	Cas d'utilisation
Rebondissant	mass: 0.5, damping: 8, stiffness: 120	Révélations ludiques, rebonds de logo
Lisse	mass: 1, damping: 15, stiffness: 80	Transitions UI, glissements
Net	mass: 0.8, damping: 20, stiffness: 200	Interactions rapides, bascules
Décalé	Tout préréglage avec décalage d'image par élément	Révélations de liste, animations de grille

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 },
});

Motifs d'interpolation

Zoom caméra

import { interpolate } from "remotion";

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

Couches parallaxe

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

Simulation de défilement

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

Dessin SVG

Animez strokeDashoffset pour révéler des chemins SVG :

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

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

Motifs d'animations de graphiques

Motif	Technique
Barres croissantes	Animer la hauteur de 0 à la cible, décaler chaque barre de 3 à 5 images
Lignes tracées	Chemin SVG avec animation strokeDashoffset
Révélation circulaire/donut	Animer l'arrêt du dégradé conique ou le chemin d'arc SVG
Compteurs de nombres	Interpoler de 0 à la cible, Math.round() pour l'affichage

Transitions de scène

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>

Règles de performance

1. Pas de useEffect pour les animations. Utilisez useCurrentFrame() + interpolate().
2. Mémorisez les composants statiques. React.memo pour tout ce qui ne dépend pas de l'image.
3. Préchargez les ressources. staticFile() pour les fichiers locaux, prefetch() pour les URL distantes.
4. Gardez les compositions sous 30s pour des itérations de rendu rapides pendant le développement.
5. Testez à la résolution cible (1920x1080 ou 1080x1080) avant le rendu final.

Anti-patrons

• Pas de transition ou animation CSS — utilisez interpolate() et spring() de Remotion
• Pas de setTimeout ou setInterval — synchronisation basée sur les images uniquement
• Pas de positionnement en pixels absolus pour les mises en page réactives — utilisez AbsoluteFill + flex
• Pas d'objets style en ligne recréés à chaque image — extrayez-les dans des constantes ou useMemo
• Pas d'audio non contrôlé — définissez toujours explicitement volume et startFrom

Pour des exemples de code complets et des modèles de composition, consultez REFERENCE.md.