Animierte Infografik
Erstelle eine gestaltete Infografik – Icons, ein paar Schlüsselzahlen, kurzer Text und einfache Formen, angeordnet mit echter visueller Hierarchie – und animiere sie dann sequenziell, sodass jedes Element seinen eigenen Moment erhält. Die Kunst ist zuerst die Komposition, dann die Choreografie: ein statisches Layout, das für sich allein lesbar ist, enthüllt in einer gestaffelten Kaskade, die den Blick genau dorthin lenkt, wo Sie ihn haben möchten.
Wann verwenden
- Erklärungen mit gemischtem Layout: "X in 3 Schritten", "So funktioniert's", "Auf einen Blick", ein Statistik-Karten-Raster.
- Sequenzielle Enthüllung von Icon + Statistik + Beschriftung + Verbinder als eine einzige gestaltete Szene.
- Piktogramm-/Icon-Animation, hochzählende Schlüsselzahlen, Flussverbinder zwischen Schritten.
Diese Fähigkeit beherrscht die komponierte Infografik. Für ein Diagramm, das den Inhalt ausmacht (Balken-Wettrennen, animierte Linien/Flächen, ein von einer CSV gesteuertes Diagramm), verwenden Sie chart-animation – und komponieren Sie sein Diagramm als einen Block innerhalb einer Infografik hier, anstatt es neu zu bauen.
Die eine Regel: zuerst das statische Design entwerfen
Eine großartige animierte Infografik ist eine großartige statische Infografik, die sich zufällig bewegt. Entwerfen und balancieren Sie die vollständige Komposition – jedes Icon, jede Zahl und jede Beschriftung an ihrer endgültigen Position – bevor Sie einen einzigen Keyframe hinzufügen. Die Animation steuert dann nur noch wann jedes bereits platzierte Element erscheint; sie entscheidet nie über das Layout. Dies verhindert den häufigsten Fehler: Elemente, die an Positionen fliegen, die nie entworfen wurden, sodass der finale gehaltene Frame wie ein Unfall aussieht.
Begrenzen Sie den Umfang strikt: eine zentrale Erkenntnis, 3–5 unterstützende Datenpunkte, in 30–90 Sekunden. Mehr als fünf konkurrierende Elemente und die Kaskade wirkt chaotisch.
Visuelle Hierarchie → Enthüllungsreihenfolge
Die Enthüllungsreihenfolge ist die Hierarchie. Das Auge folgt dem Erscheinen, also animieren Sie Elemente in der Reihenfolge ihrer Wichtigkeit, nicht in der Layout-Reihenfolge. Ordnen Sie jedes Element einer Stufe zu und enthüllen Sie dann Stufe für Stufe.
| Stufe | Element | Enthüllung | Bewegung |
|---|---|---|---|
| 1 | Abschnittstitel / zentrale Erkenntnis | zuerst, allein | Einblenden + leichter Aufstieg |
| 2 | Icon (verankert jedes Element) | pro Element, führt seine Gruppe an | Pop / Überdehnung beim Skalieren |
| 3 | Schlüsselzahl (Zähler) | direkt nach seinem Icon | Hochzählen, Auslaufen |
| 4 | Beschriftung / Unterschrift | setzt sich unter der Zahl | Einblenden, keine dramatische Bewegung |
| 5 | Verbinder / Flusslinie | verbindet Elemente, während sie vervollständigt werden | Einzeichnen (Pfadlänge) |
Verwenden Sie Größe, Gewicht und Farbe für die statische Hierarchie; verwenden Sie Timing und Bewegung für die animierte Ebene. Immer nur eine Sache laut – zählen Sie niemals zwei Zahlen gleichzeitig.
Staffelung: die Kaskade
Enthüllen Sie Geschwisterelemente mit einer festen Verzögerung zwischen ihnen (einer Staffelung), sodass die Gruppe als Sequenz und nicht als Blitz gelesen wird. Treiben Sie jedes Element vom aktuellen Frame als reine Funktion an – niemals mit der Wanduhrzeit oder einer Animationsschleife einer Bibliothek – sodass Renderings deterministisch sind.
import { useCurrentFrame, spring, useVideoConfig } from "remotion";
const STAGGER = 8; // Frames zwischen Geschwistern (~0,27s bei 30fps)
function Item({ index, children }) {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const local = frame - index * STAGGER; // eigene Uhr dieses Elements
const enter = spring({ frame: local, fps, config: { damping: 14, mass: 0.6 } });
return (
<div style={{ opacity: enter, transform: `translateY(${(1 - enter) * 24}px)` }}>
{children}
</div>
);
}
Eine Staffelung von 6–10 Frames wirkt knackig; über ~15 zieht sie sich. Behalten Sie eine Eintrittskurve für alle Geschwister bei, damit die Kaskade als selbstbewusst und nicht als chaotisch gelesen wird.
Icons animieren: der Pop
Icons verankern jedes Element, geben Sie ihnen daher den stärksten Auftritt – eine skalierende Überdehnung ("Pop"), die sich setzt. Verwenden Sie eine Feder mit geringer Dämpfung für den Sprung; niemals lineare Skalierung (wirkt mechanisch).
const pop = spring({ frame: local, fps, config: { damping: 10, stiffness: 180, mass: 0.5 } });
// pop überschwingt über 1 hinaus und setzt sich dann → lebendig
<g transform={`scale(${pop})`} style={{ transformOrigin: "center" }}>{icon}</g>
Für Piktogramm-Flächen (z. B. "7 von 10 Personen") enthüllen Sie die Einheiten mit derselben Staffelung und schneiden die partielle Einheit mit einer Maske aus, anstatt sie zu skalieren.
Schlüsselzahlen: Zähler, die sich setzen
Interpolieren Sie die zugrunde liegende Zahl, lassen Sie sie auslaufen und formatieren Sie sie dann beim Rendern. Zwei Muss-Regeln: vor dem Formatieren runden und tabular-nums verwenden, damit das Layout beim Ändern der Ziffern nicht zuckt. (Gemeinsame Handwerkskunst mit chart-animation – siehe deren Abschnitt zu Zählern für Währungs-/Prozentvarianten.)
import { interpolate, Easing } from "remotion";
const raw = interpolate(frame - delay, [0, 30], [0, 1287], {
extrapolateLeft: "clamp", extrapolateRight: "clamp",
easing: Easing.out(Easing.cubic), // "sich auf einer Zahl niederlassend"
});
const label = new Intl.NumberFormat("de-DE").format(Math.round(raw)); // "1.287"
// CSS: font-variant-numeric: tabular-nums; line-height: 1;
Ein Auslaufen bei einer Überschrift-Zahl wirkt wie ein Ankommen; linear wirkt wie ein roboterhafter Kilometerzähler. Halten Sie jede Zahl etwa 0,5s, bevor das nächste Element beginnt.
Verbinder & Fluss
Verbinder verwandeln ein Raster von Karten in einen Prozess. Animieren Sie eine Linie/einen Pfeil, indem Sie ihren/seinen Pfad einzeichnen, synchronisiert, sodass sie/er genau dann landet, wenn das Element, auf das sie/er zeigt, fertig ist – eine Bewegung, die sagt: "schau jetzt hier als nächstes hin."
const pathRef = useRef();
const len = pathRef.current?.getTotalLength?.() ?? 0;
const draw = interpolate(frame - delay, [0, 18], [0, 1], { extrapolateRight: "clamp" });
<path ref={pathRef} d="M40,0 C40,30 40,30 40,60" fill="none" stroke="#444" strokeWidth={3}
strokeDasharray={len} strokeDashoffset={len * (1 - draw)} />
Zeichnen Sie den Verbinder zwischen den beiden Elementen, die er verbindet, in der Lücke nach dem Erscheinen der Quelle und vor dem Ziel – die Linie führt das Auge zur nächsten Enthüllung.
Abschnitts-Timing
Planen Sie Zeit pro Element ein, nicht pro Sekunde der Verfeinerung. Ein Betrachter kann nur ein sich bewegendes Objekt auf einmal verfolgen.
| Takt | Budget |
|---|---|
| Titel halten (ihn setzen lassen) | 0,8–1,2s |
| Pro Element (Icon-Pop → Zähler → Beschriftung) | 1,2–2,0s |
| Verbinder zeichnen | 0,4–0,6s, überlappt mit nächstem Element |
| Finale zusammengesetzte Halteposition (screenshotfähig) | 2–3s |
Beenden Sie mit der vollständigen statischen Infografik, die 2–3s still gehalten wird – die Erkenntnis ist der zusammengesetzte Frame, lassen Sie ihn sich also ohne konkurrierende Bewegung setzen.
Ausgabe-Checkliste
- Statisches Layout entworfen und ausbalanciert bevor irgendwelche Keyframes; gehaltener finaler Frame wirkt beabsichtigt.
- Eine zentrale Erkenntnis, 3–5 Datenpunkte, 30–90s.
- Enthüllungsreihenfolge folgt der Hierarchie (Titel → Icon → Zahl → Beschriftung → Verbinder), nicht der Layout-Reihenfolge.
- Geschwister kaskadieren mit einer konsistenten Staffelung von 6–10 Frames mit einer Eintrittskurve.
- Icons poppen mit einer Feder-Überschwingung; Zahlen zählen hoch mit Auslaufen +
tabular-nums; immer nur eine Zahl animiert sich gleichzeitig. - Verbinder zeichnen sich ein, um das Auge zur nächsten Enthüllung zu führen.
- Jeder Wert ist eine reine Funktion von
useCurrentFrame(); keine Bibliotheks-Timer. - Finaler zusammengesetzter Frame hält ≥2s.
Ausliefern & verifizieren (gerenderte Standbilder → MP4)
Verpacktes Hilfsprogramm (
scripts/): Kacheln Sie Ihre Standbilder mitscripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, überprüfen Sie dann die Kodierung mitscripts/probe-mp4.sh out.mp4 [BxH] [fps]. Siehescripts/README.md.
Remotion ist frame-deterministisch – jeder Icon-Pop, jeder Zählerwert und jeder Verbinderzug ist eine reine Funktion von useCurrentFrame(), sodass Sie jeden genauen Frame ohne Suchhilfe headless rendern können. Die Infografik enthält Schlüsselzahlen, sodass die Überprüfung von Standbildern eine falsche Statistik oder eine Staffelung, die außerhalb der Leinwand landet, erfasst, bevor Sie eine Kodierung verschwenden.
Ausgabe-Vertrag:
- Ein Remotion-Projekt mit registrierter Szene (
<Composition>+ zodschema+defaultProps), alle Bewegungen frame-gesteuert (keine Timer /Date.now()/Math.random()). - Liefergegenstand = das gerenderte
out/*.mp4(plus das Projekt, damit der Benutzer mit neuen Statistiken/Icons neu rendern kann). - Dauer datenabhängig (N Elemente × Budget pro Element)? Berechnen Sie es in
calculateMetadata, nicht von Hand.
Verifizierungsschleife – Standbilder rendern → überprüfen → kodieren. Rendern Sie zuerst einzelne Frames (günstig, keine Videokodierung), dann kodieren Sie erst, sobald Layout und Zahlen stimmen.
# 1. Frame-genaue Standbilder – mit den AUSGELIEFERTEN Props. Wählen Sie Frames, die jede Stufe erfassen:
npx remotion still Infographic out/f-title.png --frame=20 --props='{"items":[...]}' # Titel + erster Pop
npx remotion still Infographic out/f-mid.png --frame=90 --props='{"items":[...]}' # mittlere Kaskade
npx remotion still Infographic out/f-end.png --frame=149 --props='{"items":[...]}' # finale zusammengesetzte Halteposition (= durationInFrames - 1)
# 2. Überprüfen Sie jedes PNG – GENAUIGKEIT (jede Schlüsselzahl exakt, Beschriftungen/Unterschriften korrekt, Icons das richtige Symbol)
# UND Artefakte (Textüberlauf, Icon außerhalb der Leinwand, abgeschnittener Sicherheitsbereich, fehlende Schriftart, Verbinder zeigt
# auf das falsche Element, halb enthülltes Element, wo eine Stufe bereits gesetzt sein sollte).
# 3. Erst nachdem die Standbilder in Ordnung sind, kodieren:
npx remotion render Infographic out/infographic.mp4 --props='{"items":[...]}'
- Verwenden Sie
npx remotion compositions, umdurationInFrames/fpsauszulesen; die finale zusammengesetzte Halteposition ist der Geld-Frame – überprüfen Sie, dass sie beabsichtigt aussieht und nicht in der Mitte der Kaskade. - Datengesteuert / Batch: Überprüfen Sie EINEN repräsentativen Props-Satz (Statistiken + Beschriftungen) über Standbilder, bevor Sie alle Varianten als Batch rendern – fangen Sie einen Zähler- oder Layout-Fehler einmal, nicht N-mal.
- README-Demo-GIF kostenlos:
npx remotion render Infographic out/demo.gif --codec=gif.
Bevor Sie fertig sind:
npx remotion stillrendert sauber bei Titel, mittlerer Kaskade und finaler Halteposition – keine Fehler, keine fehlenden Schriftarten/Icons.- Jede Schlüsselzahl ist exakt (gerundet,
tabular-nums) und jedes Element befindet sich zu jedem Frame innerhalb des Sicherheitsbereichs. - Nur frame-gesteuert – keine
Date.now()/Math.random()/ Bibliotheks-Timer (Determinismus gilt in CI). - Die ausgelieferten Props rendern korrekt (nicht nur
defaultProps) – richtige Statistiken, richtige Icons, richtige Beschriftungen. - Vollständiges MP4 kodiert und abspielbar; (optional) GIF für die README gerendert.
Referenzdateien
references/sequenced-infographic.md– eine vollständige, ausführbare Remotion-Szene: eine 3-Schritte "So funktioniert's"-Infografik mit gestaffelten Icon-Pops, auslaufenden Hochzähl-Statistiken, eingezeichneten Verbindern, einer Master-Timing-Tabelle und dem "make-it-data-driven"-Prop-Muster (Template × Daten). Enthält eine abhängigkeitsfreie Inline-SVG-Variante für die Nicht-Remotion-Nutzung.