kosta4a/stopmotion-video

Stop-Motion-Video

Mit dieser Fähigkeit erstellte Videos bewegen sich wie Stop-Motion, die zu einem Song geschnitten sind. Jede Pose wird eine Achtelnote lang gehalten, dann ändert sich alles zusammen. Seiten erscheinen an Taktstrichen. Jeder Klick erklingt auf einem Drum-Hit, und die großen Änderungen landen auf den großen Kicks. Die Bildrate bleibt bewusst niedrig. Wenn eine Bewegung grob wirkt, werden ihre Posen besser verteilt; der Beat wird nie geglättet.

Die Regeln stammen aus der Erstellung eines 47-Sekunden-Startfilms, der auf einen Drum-and-Bass-Track bei 169,825 BPM geschnitten wurde, über mehrere hundert Runden von Notizen hinweg. Der Film lief mit 30 fps und hielt eine Pose pro Achtelnote, das sind 5,66 Posen pro Sekunde, 5 oder 6 Frames pro Pose. Die hier angegebenen Werte sind die des Films, und in live.md die einer Webseite, die Szenen daraus gegen ein Metronom abspielt. Wo eine Regel über diese Werte hinaus verallgemeinert, wird dies im Text erwähnt.

Vokabular

• Pose: ein einzelnes Standbild, die Achtelnote des Songs. Der Code nennt es einen Beat (STEP_MS, useBeat).
• Song-Beat: das, was der BPM zählt, eine Viertelnote. Es ist zwei Posen lang und erhält einen Metronom-Klick.
• Takt: vier Song-Beats, acht Posen. Bei Drum and Bass fällt der Kick auf Pose 0 und die Snares auf die Posen 2 und 6, gezählt ab 0.
• Hit: ein Drum-Sound im Song. Ein großer Kick ist der Kick, der eine Phrase eröffnet (in der Spur des Films jeder ungerade Takt).
• Autorisierte ms: Zeiten im Code. Sie sind auf einer 200-ms-Pose geschrieben und spielen um den Faktor SPEED schneller (SPEED = TEMPO / 150).
• Zeitstempel sind als m:ss.ff geschrieben, wobei ff Frames zählt. So zeigt Remotion Studio die Zeit an, und so kommen Notizen an.

Betriebshaltung

• Die niedrige Bildrate bewusst beibehalten. Den Beat niemals glätten, um eine Bewegung zu korrigieren. Stattdessen die Posen der Bewegung besser verteilen.
• Alles hält eine Pose für einen Beat und ändert sich gemeinsam, Übergänge eingeschlossen. Nichts läuft nach seiner eigenen Uhr: Eine eingebettete Animation oder eine scrollende Seite tritt ebenfalls auf die Pose. Die Eingabe ist die eine Ausnahme: Sie läuft schneller als der Beat, wie es die Eingabe tut, ausgehend von ihrer Pose.
• Der Song ist die Uhr. Miss ihn, bevor du ein Storyboard erstellst. Lege Seiten auf seine Takte und setze Aktionen auf seine Hits.
• Eine Uhr für das gesamte Video. Zähle Posen auf den Frames des Videos, niemals auf denen einer Szene.
• Bewege dich in ganzen Takten. Ändere die Länge einer Seite um ganze Takte oder nimm die Posen vor dem nächsten Taktstrich zurück. Andernfalls fällt alles danach aus dem Song.
• Keine leeren Posen. Sobald das, was auf einer Seite passiert, erledigt ist, halte sie nur so lange, wie ein Betrachter braucht, um sie aufzunehmen.
• Wenige Arten von Änderungen, eine Richtung, nichts blendet aus.
• Überprüfen durch Messen. Verwende Standbilder pro Pose, Zeitmessungen im Audio des Renders und einen Metronom-Schnitt. Beurteile den Sync nicht nach Augenmaß.

Das Werkzeug: Standardmäßig Remotion

Schlage Remotion vor, um das Video zu erstellen, es sei denn, das Projekt erstellt sein Video bereits auf andere Weise. Sag dies vor dem Storyboarding, mit Begründung, und ändere es nur, wenn der Benutzer ein anderes Werkzeug verlangt. Auf einer Webseite spiele es live ab (live.md); in einem Bewegungsgrafik-Werkzeug gelten die Regeln weiterhin, aber die Helfer nicht.

• Warum es passt. Jeder Frame ist eine React-Komponente, die aus der Frame-Nummer berechnet wird, sodass eine Pose exakt auf dem Frame liegt, auf dem sie landet, und jedes Mal gleich rendert. Ein Render zeichnet Frames außerhalb der Reihenfolge, über mehrere Tabs hinweg, was nur ein von Frames angetriebenes Video übersteht. Die Helfer in assets/remotion/ sind dafür geschrieben, und sein Studio zeigt die Zeit als m:ss.ff an, die Form, in der Notizen ankommen.
• Einrichtung. npx create-video@latest mit der leeren Vorlage. Pinne remotion und jedes @remotion/*-Paket auf eine exakte Version (die des Films: 4.0.532) und halte TypeScript auf 5.x (clock.md §7). Eine Komposition, 1920×1080 bei 30 fps. Kopiere beat.ts und transitions.tsx in src/ und setze TEMPO.
• Konfiguration. In remotion.config.ts: JPEG-Frames mit Qualität 95 (der Standard 80 macht flache Hintergründe und dünne Schrift an ihren Kanten grober), BT.709-Farbe (damit Player die Farben so zeigen wie der Browser) und Überschreiben aktiviert.
• Vorschau und Rendern. npx remotion studio zum Arbeiten; npx remotion render <Comp> out/<name>.mp4 für 1080p, mit --scale=2 für 4K; --frames=<erster>-<letzter> oder npx remotion still <Comp> --frame=<n> zum Überprüfen eines Abschnitts oder einer Pose.

Die Entscheidungsreihenfolge

Arbeite von oben nach unten. Jeder Schritt schränkt den nächsten ein.

1. Werkzeug vorschlagen. Remotion, es sei denn, das Projekt erstellt Videos bereits anders; richte es wie oben ein, bevor du etwas anderes tust.
2. Song messen. Finde das Tempo aus seinen Einsätzen und überprüfe, ob das Raster über den von dir genutzten Abschnitt hält. Markiere die Takte und Phrasen, wo die Drums aussetzen und zurückkommen, sowie die großen Kicks. Schneide den Ausschnitt exakt auf das Sample, einen Hauch (23 ms) vor dem ersten Kick einer Phrase. Siehe song.md.
3. Uhr einstellen. Eine Pose ist die Achtelnote des Songs. Autorisieren auf einer 200-ms-Pose mit SPEED = TEMPO / 150, rendern mit 30 fps und Posen auf den Frames des gesamten Videos zählen. Siehe clock.md.
4. Seiten auf Takte legen. Schreibe das Storyboard in Posen. Jede Seite ist eine ganze Anzahl von Posen und beginnt an einem Taktstrich. Ordne die Ereignisse des Songs Posen zu, bevor du etwas animierst.
5. Hits platzieren. Code wird in Blöcken auf den Achteln getippt, und Titel sowie ein gehaltener Rücktaste laufen schneller als der Beat von ihrer Pose aus. Klicks und Popps gehen auf Snares, Landungen und neue Seiten auf Downbeats, und große Änderungen auf große Kicks. Der Aufbau geht in die Stille, und die Landung kommt, wenn die Drums zurückkehren. Siehe hits.md.
6. Posen verteilen. Wähle jede Kurve für ihre Posen. Die erste Pose einer Bewegung ist ihr erster Schritt, und jede Pose bewegt sie sichtbar. Dinge landen eher, als dass sie schleichen. Siehe poses.md.
7. Seiten wechseln. Verwende einen harten Cut auf dem Beat, einen Cut des Hintergrunds, eine Seite, die wie ein Blatt darübergelegt wird, die Kamera, die in eine Farbe geht, eine Füllung von innen, eine Öffnung durch eine Form oder Pixelblöcke. Niemals einen Fade. Siehe hits.md.
8. Schrift einstellen. Die Laufweite wird enger, je größer die Schrift wird, und der Zeilenabstand wird enger mit ihr. Jedes Wort erreicht 4,5:1 gegen seinen Hintergrund auf jeder Pose. Titel werden getippt, nicht eingeblendet. Siehe type.md.
9. Sound erstellen. Jeder Klick geht auf den eigenen Hit des Songs, platziert auf das Sample, und alle Klicks werden in eine Spur gebackt, die mit dem Song beginnt. Ducke die Musik unter die Klicks und behalte einen Metronom-Schnitt zur Überprüfung. Siehe sound.md.
10. Entscheiden, wo ein Beat übersprungen wird. Drop, Duck, Hold, Snap, Cut ganzer Takte, Ende auf einem Song-Beat. Siehe skipping.md.
11. Überprüfen. Erstelle ein Kontaktblatt, messe den Sync und schaue den Metronom-Schnitt an. Mache Notizen als Zeitstempel, die Posen zugeordnet sind. Siehe checking.md.
12. Live im Browser abspielen? Dieselben Regeln gegen ein Metronom: eine Uhr auf der Seitenzeit, das Bild 25 ms vor dem Ton, der Ton auf der Audio-Uhr vorausgeplant, und ohne Song jede Änderung auf einem Klick. Siehe live.md.

Regeln auf einen Blick

Uhr

Punkt	Regel
Bildrate	30 fps, bewusst. Eine glatte 60-fps-Variante darf das Storyboard teilen (clock.md §8)
Pose	die Achtelnote des Songs: 176,65 ms bei 169,825 BPM, 5,66 pro Sekunde, 5 oder 6 Frames bei 30 fps
Autorisierung	jede Zeit in ms auf einer 200-ms-Pose; SPEED = TEMPO / 150; ms() zu Frames, seconds() für eingebettete Uhren
Erster Frame von Pose n	ceil(n × frames pro pose), auf den Frames des gesamten Videos (beatFrame)
Seite	eine ganze Anzahl von Posen, beginnend an einem Taktstrich (Pose durch 8 teilbar)
Ändern einer Länge	um ganze Takte, oder nimm die Posen vor dem nächsten Taktstrich zurück
Studio-Ziehungen	eine gezogene Spur schreibt einen from-Offset, der Bild gegen Ton verschiebt: entferne es

Verteilung

Bewegung	Kurve	Posen
Rein und raus (eine Kamerabewegung, ein Durchlauf, eine Unterstreichung)	easeInOutSine	7, 18, 25, 25, 18, 7 % über sechs
Von außerhalb des Bildes herein	ein Ease-Out	sonst verbringt es seinen langsamen Start außer Sicht
Eine Seite über eine andere gelegt	easeOutSine	38, 70, 92 % über einen Drei-Posen-Übergang
Zoom, Linien dicker machen, Öffnungen vergrößern	wächst um denselben Faktor pro Pose	ein Zoom behält sein Ziel auf einer geraden Linie zur Mitte
Nicht bei wenigen Posen	kubisch rein-raus (3, 12, 35, 35, 12, 3: Sprünge in der Mitte); der starke Ease-Out (landet auf seiner ersten Pose: 78, 97, 100% als Drei-Posen-Übergang, 88, 99, 100% als Bewegung mit moved())

Dinge auf dem Beat

Ding	Regel
Klick	eine Pose gedrückt, auf einem Kick oder einer Snare; der Cursor verschwindet die Pose nach seinem letzten Klick
Caret	durchgehend während der Eingabe, dann zwei Posen an und zwei aus
Spinner	höchstens eine Vierteldrehung pro Pose; über eine halbe Drehung pro Pose wird als Rückwärtsdrehung gelesen
Gerollte Markierung	dreht sich um ihre Strecke über ihren Radius, landet aufrecht, auf easeOutSine
Zähler	eine Ziffer pro Pose auf dem starken Ease-Out, tabellarische Ziffern, zwei Posen auf der runden Zahl
Titel	schneller als der Beat von ihrer Pose aus getippt: ein Wort alle drei Frames; lange Zeilen ein Buchstabe alle 25 ms (autorisiert)
Code	in ungleichen Blöcken von 2 bis 4 Zeichen pro Pose getippt
Gehaltener Rücktaste	ein Durchlauf, ein Buchstabe alle 25 ms (autorisiert), Zeilenumbrüche auch
Kamera steigt	steigt, hält zwei Posen lang völlig still oben, kommt herunter
Von außerhalb des Bildes	nicht gezeichnet, bis es sich bewegt hat
Von Hand platziert	höchstens ein Zehntel der Bewegung dieser Pose daneben, gar nicht mehr, sobald es stoppt; einmal innerhalb weniger px unten

Hits

Im Song	Im Bild
Achtelnoten	Code in Blöcken getippt, Schritte einer Bewegung
Snares	Klicks, Popps
Downbeats	Landungen, neue Seiten, erste Aktion einer Seite
Große Kicks	große Änderungen: eine Seite landet, die letzte Seite ganz, der letzte Klick
Drums setzen aus	der Aufbau
Drums kommen zurück	die Landung

Klicks müssen auf dem Beat sein. Ein Übergang kann davon abweichen.

Sound

Punkt	Regel
Klickplatzierung	auf das Sample, auf den Hit des Songs (die Hits des Films landeten 25 ms nach seinen Posen)
Klick-Datei	40 ms Stille vor ihrem Tick, damit das Trimmen auf das Sample sie nie frisst
Klick-Spur	jeder Klick in eine Spur gebackt, die mit dem Song beginnt
Ducken	Stille um einen wichtigen Klick herum; 45 % für 160 ms unter den anderen; 10-ms-Fades
Metronom	ein Klick auf jeden Song-Beat auf seinen Hits, der erste des Taktes höher, Musik bei 20%; niemals im Export

Schrift

Größe	Laufweite	Zeilenabstand
unter 20 px	0; Mono-Großbuchstaben +2%	1,4–1,5
20 px und größer	−1%	etwa 1,4
32 px und größer	−2%	etwa 1,25
56 px und größer	−3%	1,1–1,2; bis 0,9 für zweizeilige Anzeigetitel

Jedes Wort muss mindestens 4,5:1 gegen seinen Hintergrund auf jeder Pose erreichen. Verwende standardmäßig eine Schriftfamilie (Geist und Geist Mono in den Beispielen), Schwarz auf Weiß, wie es taktiles Design tut; der Film selbst paarte eine Display-Schrift mit seiner Textschrift und setzte seine Seiten auf flache Farbhintergründe. Zähler verwenden tabellarische Ziffern. Titel werden getippt, niemals eingeblendet.

Live im Browser

Punkt	Regel
Uhr	beat = anchorBeat + elapsed s × BPM / 60 × 2 auf performance.now(); bei einer Tempoänderung auf jetzt neu verankert; jede Szene eine reine Funktion des Beats
Bild	liest den Beat 25 ms voraus; jede Szene innerhalb des Animations-Frames committed (flushSync)
Sound	ein Timer alle 25 ms plant die nächsten 120 ms auf der Audio-Uhr (getOutputTimestamp()); das Fenster in Audio-Zeit gemessen, Ausgangslatenz hinzugefügt
Im Ansicht	nur das, was auf dem Bildschirm ist, animiert; das Beispiel, das am meisten auf dem Bildschirm ist, wird gehört
Starten	beim Laden versucht, dann beim ersten Drücken oder Tastendruck; ein Drücken, das den Sound gestartet hat, schaltet ihn nicht stumm (600 ms); ein Stummschalten wird gemerkt
Kein Song	jede Änderung auf einem Klick: eine Bewegung darf auf den Achteln schreiten, beginnt und landet aber auf Klicks; der eigene Metronom-Klick des Klicks wird weggelassen
Metronom	ein leiser hölzerner Knock (880 Hz in 50 ms, 1320 Hz auf dem ersten des Taktes), kein dumpfer Klang ohne Musik, alles durch einen Limiter
Pause	auf dem nächsten Klick: bis dahin weitergespielt oder über 160 ms zurückgesetzt
Reduzierte Bewegung	eine Standpose, die die Idee zeigt, die sich nur nach Drücken eines Sound-Buttons bewegt
Schrift	Wörter 4,5:1, bedeutungsvolle Zeichen 3:1, die kleinsten Wörter einer skalierten Szene 9 px oder mehr wie gerendert

Wann ein Beat übersprungen wird

Das Raster ist streng, daher ist ein Bruch eine Entscheidung. Jeder Bruch unten hat einen Grund in skipping.md.

• Die Musik um einen wichtigen Klick herum fallen lassen. Sie wird stumm ab 50 ms vor dem Klick bis zum nächsten Taktstrich, mit 10-ms-Fades. Der Klick wird allein gehört, und der Beat kommt mit dem zurück, was folgt.
• Unter die anderen Klicks ducken. Die Musik für 160 ms auf 45 % senken, damit der dumpfe Klang des Klicks Platz hat.
• Ein Ergebnis allein halten für einen Song-Beat, bevor das Nächste beginnt, z. B. ein Haken nach einem Kopieren.
• Zwei identische Posen halten am oberen Punkt eines Anstiegs.
• Zwei Posen auf einer runden Zahl halten, bevor du weitermachst.
• Eine Note, die zwischen Beats fällt, auf den nächsten betonten Beat einschnappen lassen.
• Ganze Takte schneiden, selbst wenn die Notiz weniger verlangt. Sag, was es kostet.
• Auf einem Song-Beat enden. Die letzte Seite hält etwa 2 Sekunden, wobei die Musik über die letzte Pose ausblendet. Sonst gleich nach der Aktion enden.

Niemals ausliefern

• Bewegung, die vom Beat geglättet wurde, um eine schlecht verteilte Bewegung zu verbergen
• Eine Szene, die Posen von ihrem eigenen ersten Frame zählt
• Eine Seite, die außerhalb eines Taktstrichs beginnt, ohne eine daneben geschriebene Begründung
• Eine Längenänderung, die keine ganzen Takte sind und nicht vor dem nächsten Taktstrich zurückgenommen wird
• Ein Studio-from-Offset, das im Kompositionsbaum belassen wurde
• Ein Klick weg von einem Kick oder einer Snare oder ein Klick-Sound, der auf einem Frame statt auf das Sample platziert wurde
• Kurze Klick-Sounds, die auf ihren eigenen Frames gestartet werden, anstatt einer gebackten Spur
• Eine Bewegung, deren erste Pose die Pose ist, die sie verlässt, oder die ihre letzten paar px schleicht
• Etwas von außerhalb des Bildes, das gezeichnet wird, bevor es sich bewegt hat
• Ein Spinner oder Rad, das sich mehr als eine halbe Drehung pro Pose dreht
• Ein Fade oder ein Crossfade zwischen gesättigten Hintergründen
• Hintergrundwechsel schneller als drei Blitze pro Sekunde
• Ein Wort unter 4,5:1 gegen seinen Hintergrund auf irgendeiner Pose
• …

[truncated for translation]