motion

Was macht motion?

Motion Graphics als Code geschrieben: Jede Farbe, Zeit und jeder Rand stammt aus einer Marken-Datei, und nichts wird gerendert, bevor die Person 2–3 Keyframes gesehen hat. Die folgenden Regeln basieren auf echten Korrekturen; jede erklärt, warum sie existiert.

Wofür es gedacht ist

Element	Beschreibung
Animierter Broll	Überdeckt einen Sprachabschnitt mit einer Szene oder Grafik, Vollbild
Alpha	Grafik mit Transparenz, die über dem Video liegt oder hinter der Person
Pop-up	Ein Datenpunkt, der erscheint, ca. 1 s lesbar ist und wieder verschwindet
Untertitel	Ohne Box und mit einem hervorgehobenen Wort, oder kinetisch (nur Schlüsselwörter)
Chat-Simulation	Eine glaubwürdige und lesbare Konversation in einer Messenger-App
Bildschirm	Eine Website oder Desktop-App in einer 4:3-Karte mit Titel
Cover	Frame 0 des Reels

Entscheide vor dem Layout, welcher der beiden Typen vorliegt:

1. Zeigt Daten oder ein Produkt von innen (Dashboard, Metriken, Posteingang): flaches, dichtes Interface, alles gleichzeitig lesbar, echte Fotos und Videos in den Karten, Kamera fast statisch (Skala 1,00 → 1,02). Zustände ändern sich an Ort und Stelle: Die Zeile war schon da, ihr Label ändert sich. Das Bild ist voll.
2. Erzählt eine Szene: Das Filmmaterial dominiert. Große Einstellung, echte Kamerabewegung, wenig Dekoration und ein einziger Satz.

Ein Diagramm ist kein eigenes Element: Wenn die Idee als Pfeilkarte gezeichnet werden kann, zeige das Produkt, das genau das tut.

Vorbereitung

• Ein Remotion-Projekt (npx create-video@latest), Node und ffmpeg.
• Die Marke in Code in src/marke/: tokens.ts (Farben, Typen, Radien, Ränder), bewegung.ts (Zeiten und Kurve) und einen useMarke(), der alles skaliert ausliefert. Wie das aufgebaut wird, mit einem Beispiel: referenzen/tokens.md.
• Ein Einstieg pro Element (src/elemente/<element>.tsx, mit eigenem registerRoot und Composition): Das Bundle bleibt klein und ein Element zerbricht kein anderes.
• Leinwand 1080×1920 bei 30 fps, sofern die Sequenz nichts anderes sagt: Lies die Größe und fps der Sequenz, bevor du beginnst.

Der Ablauf

1. Brief. Genauer Abschnitt in der Sequenz (Ein → Aus), was die Stimme in diesem Abschnitt sagt, erlaubte Daten und deren Quelle, verwendbares Material und was nicht gewünscht ist. Falls etwas fehlt, frage nach.
2. Stimme. Transkribiere die Stimme Wort für Wort so, wie sie auf der Timeline liegt, nicht die Rohdatei (referenzen/untertitel.md). Die tatsächliche Stimme eines Drehs weicht oft vom Skript ab.
3. Dauer. Die des Abschnitts, in einer Konstante mit dem Timecode im Kommentar, plus 1 Frame Puffer: export const DAUER = 157; // 00:00:51:22 → 00:00:56:29.
4. Design. Was zu sehen ist, sagt die Stimme, Satz für Satz. Die Momente, die Animation und Sound teilen (jede eingehende Nachricht, jeder Schlag), kommen in eine Konstante, die sowohl die Komposition als auch das Effektskript liest.
5. Skizze. 2–3 Keyframes mit remotion still, mit eingezeichneten Sicherheitszonen-Gittern. Zeige sie und warte auf das Okay.
6. Render mit Hintergrund oder mit Alpha (siehe unten).
7. Sound. Jede Animation wird mit ihrem Soundeffekt ausgeliefert: Übergib die Momente an das Skill sonido.
8. Kontrolle und Auslieferung (am Ende dieser Seite).

Was nicht kaputtgeht

• Keine Farbe oder Maßangabe von Hand in einer Komposition: Alles kommt aus den Tokens. Warum: Einen Farbton zu ändern bedeutet, eine Datei anzufassen, und niemand erfindet in jedem Element ein neues Grau.
• Eine einzige hervorgehobene Sache pro Frame, in der Akzentfarbe deiner Marke: ein Wort der Überschrift oder ein Button, niemals beide. Warum: Wenn zwei Dinge schreien, liest man keines. (Eigene Farben einer simulierten Oberfläche zählen nicht.)
• Nichts springt. Ein- und Ausgänge mit den Zeiten und der Kurve der Tokens; kein spring(). Warum: spring() überschießt und kommt zurück, das wirkt wie Spielzeug.
• Zeiten in Sekunden, niemals in Frames. Warum: Bei Verzögerungen in Frames verdoppelt eine Umstellung von 30 auf 60 fps die Geschwindigkeit.
• Sicherheitszonen mit Luft (Zahlentabelle). Was gelesen wird, ist ~100 px von den Seiten und ~290 von der Oberkante entfernt; 54 und 224 sind die Linie, die nicht überschritten wird, nicht die Aufstellfläche. Warum: Die App-Oberfläche verdeckt die Ränder, und nah am Limit „wirkt alles sehr extrem.“
• Die Mitte der Komposition bei x 540. Das Design wird nicht verschoben, um App-Buttons auszuweichen: Was auf dieser Höhe liegt, wird symmetrisch schmaler. Warum: Eine verschobene Komposition fällt mehr auf als ein Icon darüber.
• Jedes Objekt vollständig im Bild. Nichts am Rand abgeschnitten; was nicht im Fokus steht, wird mit einem Fade ausgeblendet. Warum: Ein abgeschnittenes Telefon oder eine abgeschnittene Karte wirkt wie ein Fehler.
• In einem Broll passiert etwas: Die Kamera bewegt sich und es findet eine konkrete Aktion statt, die der Satz der Stimme ist, nicht das Thema. Warum: „Nichts passiert“ ist die häufigste Ablehnung. Ausnahme ist das echte Produkt eines Kunden: Es wird abgespielt, nicht nachgebaut oder mit Bewegungen versehen.
• Spätestens alle 4 s etwas Neues, und niemals zwei gleiche Bewegungen hintereinander. Warum: Zwei hintereinanderfolgende Zooms verwischen den Schnitt.
• Nichts steht am Ende still: Ein extrem langsamer Schub im letzten Abschnitt. Warum: Ein eingefrorenes Bild wirkt wie ein Renderfehler.
• Eine Zahl, die steigt, ist ein Diagramm; eine, die erscheint, ist ein Beschriftung. In einem Alpha trägt jede Ziffer ihr eigenes animiertes Objekt (Zähler, Messgerät, Balken, agierendes Icon) und der Text begleitet es. Warum: Ein flacher Text über dem Video wirkt wie ein Untertitel.
• Plansequenz, Tiefe und Detail. Eine Kamera, die die Szene abfährt anstatt einzelner Einblendungen, Objekte in unterschiedlicher Tiefe, Namen, Uhrzeiten und Zustände an jedem Element. Warum: Elemente, die Diagramme mit viel Weißraum waren, wurden als „zu simpel“ abgelehnt.
• Untertitel ohne Box, ein hervorgehobenes Wort pro Satz; niemals über einem Broll oder wo eine Grafik bereits dasselbe sagt (referenzen/untertitel.md).
• Simulierter Chat lesbar: Telefon zentriert, die gesamte App gleichmäßig vergrößert, eine Nachricht nach der anderen mit Lesezeit; zur Hervorhebung wird der Rest unscharf, niemals ein dunkler Schleier (referenzen/alfas-und-chats.md).
• Ein echter Bildschirm im Bild dominiert: Nichts über seinem Text oder seinem Header; das Pop-up geht in seinen leeren Bereich.
• Keine schwarzen Ränder oder harten Kanten: Wenn die Kamera sich über Filmmaterial bewegt, Mindestskalierung 1,04 (1,18 bei seitlicher Verschiebung); weiche Farbverläufe und abgerundete Ecken. Warum: Ein Zoom Out, das Schwarz zeigt, oder ein abrupter Farbverlauf wirkt wie ein Rahmen.
• Keine erfundenen Daten und keine wiederholten Elemente. Zahlen, Namen und Screenshots stammen von der Person; eine Simulation zeigt niemals echte Kundendaten. Jedes Element bringt seine eigene Grafik: Eine andere zu wiederholen fällt auf.
• Animationen passen sich der Stimme an, niemals umgekehrt: Es werden keine Pausen in die Stimme eingefügt, um eine Grafik auszurichten.
• Eine Korrektur wird nicht komplett neu gerendert: Nur die geänderten Abschnitte, zusammengeschnitten und mit neuem Namen (referenzen/3d-und-fallen.md). Warum: Die bereits platzierte Version wird nicht überschrieben, und es gehen keine Stunde Renderzeit wegen drei Sekunden verloren.

Zahlen

Was	Wert (Leinwand 1080×1920)
Seiten	54 px auf jeder Seite (was gelesen wird, bei ~100)
Oberkante	nichts lesbar oberhalb von y 224 (was gelesen wird, ab ~290)
Lesebereich	von y 420 bis y 1495
Buttonspalte	ab x 897, von y 1228 abwärts; auf dieser Höhe liegt lesbarer Inhalt innerhalb x 183–897
Große, breite Zahl	vollständig oberhalb von y 1228
Telefon in Nahaufnahme	maximal 0,8 der Bildbreite
Anordnung in Totale	maximal 1080 − 2 × 54 breit
Pop-up	etwas mehr als 1 s auf dem Bildschirm, dann verschwindet es (bleiben sie, sind es nach 8 s sechs und keines ist lesbar)
Rhythmus	alle 4 s oder weniger etwas Neues
Mindestskalierung bei Kamera über Filmmaterial	1,04 (1,18 mit seitlicher Verschiebung)
Füllgrad eines Datenelements	nahe 75 % der Nutzbox; unter 50 % wirkt es wie eine Skizze
Füllgrad eines Szenenelements	40–60 %
Cover-Beschnitte	4:5 im Feed: y 285–1635 · 3:4 im Profil: y 240–1680

Der Füllgrad ist der Teil der Nutzbox, der von etwas anderem als dem Hintergrund belegt ist; gemessen an den Stills, nicht nach Augenmaß.

Render

# Skizze: Ein einzelnes Frame
npx remotion still src/elemente/mein-element.tsx MeinElement out/skizze_f45.png --frame=45

# Mit Hintergrund (opak: überdeckt das Bild)
npx remotion render src/elemente/mein-element.tsx MeinElement out/mein-element_HINTERGRUND.mov \
  --codec=prores --prores-profile=4444 --pixel-format=yuv444p10le

# Mit Alpha (transparent: das darunterliegende Video wird sichtbar)
npx remotion render src/elemente/mein-element.tsx MeinElement-Alpha out/mein-element_ALPHA.mov \
  --codec=prores --prores-profile=4444 --pixel-format=yuva444p10le --image-format=png

# Jedes Element mit 3D (CSS oder three.js), bei Still und Render: --gl=angle

• Hintergrund und Alpha sind dieselbe Komposition mit einer Property transparent; die Alpha-Version malt keine Leinwand und ihre ID endet auf -Alpha.
• --prores-profile=4444 allein ergibt kein Alpha. Prüfe es: ffprobe -v error -select_streams v:0 -show_entries stream=pix_fmt -of csv=p=0 out/mein-element_ALPHA.mov muss mit yuva beginnen.
• Bei Alpha gibt es keine Leinwand: Jeder Text braucht seine eigene Oberfläche, sonst verschwindet er auf dunklem Filmmaterial.
• Wenn der Speicherplatz knapp ist: ProRes 4444 mit Alpha belegt ~1,35 GB pro Minute bei 1080. Die Konvertierung zu PNG in MOV (ffmpeg -i x.mov -c:v png -pix_fmt rgba y.mov) ist verlustfrei, behält das Alpha und wiegt etwa 7,5 Mal weniger.
• Interfaces mit Perspektive, bei denen der Text weich wird: Rendere mit --scale=2 und downsampele auf 1080 mit Lanczos.
• Für mehrere Stills ein Skript, das ein einziges Bundle erstellt und nach Abschluss löscht (referenzen/3d-und-fallen.md).

Cover in Frame 0

• Das Cover ist der erste Frame des exportierten Reels: <Sequence durationInFrames={1}> mit dem Cover und das gesamte Reel in <Sequence from={1}>. Die Plattformen wählen das Cover aus den Frames des Videos; so bleibt es nicht als separate Datei. Falls der Selektor nicht Frame 0 erwischt, gib ihm zwei Frames.
• Person zentriert: Achse bei x 540, ihr Zentrum nahe y 900–960, und vollständig innerhalb von 4:5 und 3:4, mit der Überschrift ebenfalls drin. Warum: Das Profil- und Feed-Raster beschneidet das Cover, und im Thumbnail entscheidet sich der Klick.
• Keine große Dekoration in den Ecken. Erstelle vor der Auslieferung eine Version mit simulierten Beschnitten (Schleier außerhalb des 4:5, Linien des 3:4 und Mittelachse) und sieh sie dir an.
• Wenn das Cover per ffmpeg aus einem JPG angehängt wird, achte auf den Farbbereich (referenzen/3d-und-fallen.md).

Stil „Liquid Glass“ (optional)

iOS-artiges Glas für Karten und Buttons auf hellem Hintergrund. Funktioniert, wenn es etwas zu brechen gibt, ein einziges Licht für die gesamte Szene und lebendige Dinge darin; sonst „sieht es aus wie ein Flyer.“ Regeln und Zahlen in referenzen/glas.md, das auch erklärt, wie man ausgebrannten Text im Filmmaterial überdeckt. Kein Stil ist für immer: Jedes Element bringt etwas mit, das die vorherigen nicht hatten.

Fallstricke, die am meisten kosten

• Eingefrorenes Video: Ein <OffthreadVideo>, das nach Frame 0 eintritt, muss innerhalb von <Sequence from={eintritt} layout="none"> stehen. Ansonsten fragt es die Zeit ab Frame 0 der Komposition und bleibt auf seinem letzten Frame stehen, ohne einen Fehler zu melden. Überprüfe, ob startFrom + sichtbare Dauer ≤ Dauer des Clips.
• Schwarzer erster Frame bei three.js mit Postprocessing: Der Komponist muss delayRender anfordern und zeichnen, bevor er es freigibt. Ein einzelnes remotion still ist der Test.
• 3D gerade abgeschnitten (halbes Telefon in Weiß): Fehlendes --gl=angle.
• Geisterkopien des Textes bei Bewegungsunschärfe mit 29,97 fps: Die Unschärfe nur in den Fenstern, in denen die Kamera schwenkt.
• Speicherplatz voll: Jedes Bundle kopiert public/ in den temporären Ordner des Systems; wenn es nicht gelöscht wird, stapelt es sich (in einem realen Fall hunderte GB). Prüfe df -h vor langen Renderläufen.
• defaultProps vermischen sich mit den Props jedes Renders: In den Defaults nur das Nötige.

Der Rest (3D-Rigg in CSS, three.js, Zusammenschnitte, ffmpeg, zsh): referenzen/3d-und-fallen.md.

Was ausgeliefert und was geprüft wird

Ausgeliefert wird: die .mov (HINTERGRUND oder ALPHA) mit der genauen Dauer des Abschnitts und seinem Soundeffekt darin oder daneben, die genehmigten Skizzen-Stills und eine Zeile in element.md mit dem Erledigten und Ausstehenden.

Geprüft wird, mit Messung:

• Dauer und fps identisch mit der Sequenz. Zähle Pakete (ffprobe -v error -count_packets -show_entries stream=nb_read_packets -of csv=p=0 x.mov): Bei ProRes lügt nb_frames.
• Echtes Alpha: pix_fmt beginnt mit yuva.
• Nichts außerhalb der Sicherheitszonen: Gezeichnete Guides auf den Stills der Schlüsselmomente und die Tinte im Textband gemessen (x min ≥ 54, x max ≤ 1026).
• Nur eine Hervorhebung pro Frame.
• Kein eingefrorenes Video und kein schwarzer Frame: Spiele es ab, verlasse dich nicht auf die Stills.
• Frame für Frame dort, wo eine Nachricht eintritt oder die Kamera schwenkt: Keine Sprünge oder Geister.
• Der letzte Frame vollständig und mit etwas in Bewegung.
• npm run lint (eslint + tsc) läuft durch, und es gibt kein loses #hex außerhalb der Tokens.