thatrebeccarae/claude-marketing

Remotion-Videoproduktion

Best Practices für die Erstellung programmatischer Videos mit Remotion – Animationen, Übergänge, Diagramme und Rendering.

Installation

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

Kernfähigkeiten

• Spring-Animationsvoreinstellungen (bouncy, smooth, crisp, staggered)
• Interpolationsmuster (Kamera-Zoom, Parallax, Scroll-Simulation)
• SVG-Zeichne-Animationen (Pfadverfolgung, Strich-Enthüllung)
• Szenenübergänge mit TransitionSeries
• AbsoluteFill-Schichtung für Compositing
• Diagrammanimationen (Balkenwachstum, Linienzeichnen, Tortendiagramm-Enthüllung, Count-up-Zahlen)
• Audio-Integration und Synchronisation
• Rendering-Konfiguration

Spring-Voreinstellungen

Verwenden Sie spring() von Remotion für physikbasierte Animationen:

Voreinstellung	Konfiguration	Anwendungsfall
Bouncy	mass: 0.5, damping: 8, stiffness: 120	Verspielte Einblendungen, Logo-Bounces
Smooth	mass: 1, damping: 15, stiffness: 80	UI-Übergänge, Slide-Ins
Crisp	mass: 0.8, damping: 20, stiffness: 200	Knackige Interaktionen, Toggles
Staggered	Beliebiges Preset mit Frame-Versatz pro Element	Listeneinblendungen, Rasteranimationen

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

Interpolationsmuster

Kamera-Zoom

import { interpolate } from "remotion";

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

Parallax-Ebenen

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

Scroll-Simulation

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

SVG-Zeichne-Animation

Animieren Sie strokeDashoffset, um SVG-Pfade zu enthüllen:

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

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

Diagrammanimationsmuster

Muster	Technik
Balkenwachstum	Höhe von 0 auf Zielwert animieren, jeden Balken um 3–5 Frames versetzen
Linienzeichnen	SVG-Pfad mit strokeDashoffset-Animation
Torten-/Donut-Enthüllung	conic-gradient-Stopp oder SVG-Bogenpfad animieren
Count-up-Zahlen	Von 0 auf Zielwert interpolieren, Math.round() für die Anzeige

Szenenübergänge

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>

Leistungsregeln

1. Kein useEffect für Animationen. Verwenden Sie useCurrentFrame() + interpolate().
2. Statische Komponenten memoisieren. React.memo für alles, was nicht vom Frame abhängt.
3. Assets vorladen. staticFile() für lokale, prefetch() für entfernte URLs.
4. Kompositionen unter 30s halten für schnelle Render-Iterationen während der Entwicklung.
5. In Zielauflösung testen (1920x1080 oder 1080x1080) vor dem finalen Render.

Anti-Patterns

• Kein CSS transition oder animation – verwenden Sie Remotions interpolate() und spring()
• Kein setTimeout oder setInterval – nur frame-basiertes Timing
• Keine absoluten Pixelpositionen für responsive Layouts – verwenden Sie AbsoluteFill + Flex
• Keine Inline-style-Objekte, die in jedem Frame neu erstellt werden – in Konstanten oder useMemo auslagern
• Kein unkontrolliertes Audio – immer explizite volume und startFrom setzen

Vollständige Codebeispiele und Kompositionsvorlagen finden Sie in REFERENCE.md.