nxrskyaa/motionite

Motionite: Bewegungsdesign für Agenten

Motionite verwandelt ein Briefing in einen fertigen, deterministischen Remotion-Film, der designed aussieht, nicht generiert. Es besteht aus drei Teilen:

Teil	Wo	Verwenden Sie es, um…
15 NxrStyles	styles/ · Vergleich + Auswähler	Ein vollständiges visuelles System pro Film auszuwählen
70 Techniken	techniques/	Jede Bewegung mit bewährten Zahlen zu bauen (IDs T, N, X, C, U, H, R)
Arbeitscode	examples/	lib/anim.ts-Tokens, die Demo-Comps und die Style-Comps zu kopieren

Der Prompt ist nicht das Unterscheidungsmerkmal. Derselbe einzeilige Showreel-Prompt kann völlig unterschiedliche Filme ergeben. Was den Unterschied ausmacht, ist die Iteration an Stills und der Geschmack in der Kritikschleife. Diese Fertigkeit ist diese Schleife.

Arbeitsablauf (in Reihenfolge befolgen)

1 · Briefing → Fakten vs. Entscheidungen

Notieren Sie:

• Fakten: Echte Assets, die Sie haben (Logodateien, Screenshots, Footage, Marken-Hex, Schriftarten, VO, Musik + BPM), die Behauptungen, das Seitenverhältnis, die Dauer und die Plattform.
• Entscheidungen: Alles andere. Wenn die Benutzeroberfläche oder das Logo eines echten Produkts fehlt, fragen Sie nach oder hinterlassen Sie einen gekennzeichneten Platzhalter. Erfinden Sie niemals etwas.
• Ein Satz, den der Betrachter sich merken muss. Ein Film hat eine Idee pro Beat und eine Botschaft insgesamt.

2 · Moodboard

Sammeln Sie 2–3 Moodboard-Filme und notieren Sie, was Sie von jedem übernehmen, in Zahlen: Schnittrhythmus (Sekunden pro Einstellung), Palette-Hex, Schriftfamilie, Signature-Move. Die IDs finden Sie in techniques/README.md. Erstellen Sie wenn möglich einen Kontaktbogen von jedem (ffmpeg -vf fps=2,scale=480:-1,tile=6x5) und lesen Sie ihn.

3 · EINEN NxrStyle AUSWÄHLEN

Verwenden Sie die Entscheidungstabelle in styles/COMPARISON.md, öffnen Sie dann die Datei dieses Stils und befolgen Sie seine visuelle DNA (Palette, Typografie, Layout, Bewegung, Übergänge, Timing, Audio) sowie seine Do-/Don't-Regeln.

• Ein bereitgestellter Markenrichtlinie überschreibt die Palette und Schriftart des Stils sowie etwaige Verbote.
• Sie dürfen eine Technik aus einem anderen Stil entleihen. Leihen Sie niemals eine gesamte Palette oder ein Schriftsystem aus.

#	Stil	Gefühl	#	Stil	Gefühl
01	Beat Reel	laut, bar-cut Farbfelder	09	Live Bento Grid	1:1 looping poster of live tiles
02	Night Caption Explainer	9:16 VO-Captions, große Zahl	10	Pixel Bar-Grid Trailer	Pixelspiel-Trailer, Dither-Schnitte
03	Floating Product UI	3D-Telefon, riesige Zahl, Chips	11	One-Take Portal Zoom	Ein Log-Zoom durch Welten
04	Editorial Ink	Papier, Serife, Textmarker	12	Console-as-Film	Das Objekt ist die Welt
05	One-Pan Flat World	Ein Kamera-Truck, Himmel nach x	13	Clean Launch Film	zurückhaltend, ein Akzent
06	PRESS START Menu	Retro-8-Bit-Menü	14	Paper Stop-Motion	Geschnittenes Papier auf 12s, Riso
07	Frost Collectible	eisig, Orbit, Minzzähler	15	Hand-Drawn Ink	Selbstzeichnendes Kochen, Tintenklecks
08	Duotone Storybook	graviertes Navy + ein Warmton

4 · Einstellungsliste in Frames

Erstellen Sie eine Tabelle, bevor Sie codieren:

Einstellung	Frames	Auf dem Bildschirm beim ersten Frame	Was sich bewegt (Frame-genau)	Text	Technik-IDs	Audio-Cue

Regeln:

• Wählen Sie die fps (30 für die meisten Arbeiten, 60 für UI-glatte Filme), dann legen Sie ein Beat-Raster fest: BEAT = fps·60/BPM. Einstellungen dauern ganze Takte, und Schnitte landen 2 f vor dem Beat.
• Frame 0 ist das Poster, also muss es bereits komponiert sein.
• Eine Idee pro Einstellung, mit ≥ 0,8 s lesbarem Halten für jede Zeile.
• Setzen Sie niemals zwei Übergangsgeräte hintereinander. Ein Blickwechsel landet auf einem harten Schnitt und dauert ≥ 1 s.

5 · In Remotion bauen

Beginnen Sie mit examples/. Kopieren Sie src/lib/anim.ts (Easings E, Federn SPR, prog, spr, lmix, track, hitPulse, blurIn/blurOut, rand, onTwos), sowie src/styles/kit.tsx und die Comp Ihres gewählten Stils.

Bauregeln:

• render(frame) ist rein: kein Math.random, Date.now, Timer, CSS-Übergänge/Animationen oder Zustand über Frames hinweg. Nur gesäter rand(key). Simulieren Sie jede Physik ab Frame 0 mit einem festen Schritt neu.
• Eintreten mit E.out und Austreten mit E.in. Die sekundäre Bewegung beginnt bei 55–75 % der primären.
• Skalieren Sie Bewegungen im Log-Raum (lmix). Ein Wert, der neu ausgerichtet wird, ist eine Summe von Federn (track).
• Geschwindigkeitsbegrenzung: ≤ 25 px/Frame @60, es sei denn, es wird verwischt oder verschmiert.
• Überschwingen ≤ 2 pro Film und niemals bei Typografie. Blitze ≤ 2 pro Film, begrenzt auf 65–85 % (niemals ein leerer Vollbild-Frame).
• Text blurrt ein (12–20 px → 0, scharf bei 60 % der Bewegung). Verwenden Sie keine einfachen Deckkraft-Übergänge.
• fontVariantNumeric: 'tabular-nums' bei jedem Zähler. Setzen Sie Schriftartnamen, die Ziffern enthalten, in Anführungszeichen: '"Press Start 2P"'.
• Setzen Sie niemals Deckkraft oder Filter auf ein preserve-3d-Element, niemals will-change auf kameraskalierten Text und niemals backdrop-filter in Headless-Renderings.
• Schichtkadenz: UI auf Einsern, gezeichnete Charaktere auf Zweiern, Papierpuppen auf 12ern. Texturen kochen nie.
• Schleifen: Der letzte Frame entspricht dem ersten.

6 · Stills zur Freigabe (vor einer vollständigen Renderung)

Rendern Sie einen Still pro Beat plus 3 Frames um jeden Übergang:

npx remotion still src/index.ts <CompId> out/s_<f>.png --frame=<f> --scale=0.5

Erstellen Sie daraus einen Kontaktbogen und schauen Sie sie sich an. Beheben Sie Komposition, Lesbarkeit und Palette in dieser Phase, denn ein Still kostet Sekunden und ein Rendervorgang Minuten. Wenn ein Mensch im Kreislauf ist, holen Sie die Freigabe für die Stills ein.

7 · Rendern

npx remotion render src/index.ts <CompId> out/raw.mp4 --codec=h264 --crf=18 --pixel-format=yuv420p
ffmpeg -i out/raw.mp4 -c:v copy -af loudnorm=I=-14:TP=-1:LRA=11 -c:a aac -b:a 192k -movflags +faststart out/film.mp4

8 · QA (vollständige Befehle)

1. ffprobe: Codec, Größe, fps und Videodauer = Audiodauer (±1 f).
2. Lautstärke: −14 LUFS integriert (±1), ≤ −1 dBTP.
3. Kontaktbogen aus dem finalen MP4 (nicht aus Stills): 2 fps, 6×5 Kacheln.
4. Determinismus: Rendern Sie einen Frame zweimal und pixel-diffen Sie ihn (er muss identisch sein).
5. Frame-Diff-Kurve: keine Einzelframe-Spitzen mehr als 3× ihre Nachbarn.
6. Marken-Hex aus einem Still entnommen, und Audio-Onsets innerhalb ±1 f ihrer visuellen Treffer.

9 · Selbstkritik (3 Runden)

Bewerten Sie den Kontaktbogen anhand der sechs Tests in qa.md: Poster, Lesbarkeit, Beat, Budget, Stil und Marke. Beheben Sie die drei schlimmsten Probleme, rendern Sie neu und wiederholen Sie dies bis zu dreimal. Berichten Sie, was Sie in jeder Runde geändert haben.

Universelle Geschmacksregeln (Kurzform)

1. Frame 0 ist ein Poster, und jeder angehaltene Frame ist komponiert.
2. Blur-in-Text. Keine einfachen Übergänge. Ausgänge beschleunigen.
3. Eine Akzentfarbe, und sie bedeutet etwas.
4. Zoom und Skalierung im Log-Raum, und halten Sie Kamerabewegungen kontinuierlich statt schrittweise (außer bei Pixel-Stilen).
5. Schnitt auf dem Takt, eine Idee pro Takt, mit lesbaren Halten.
6. Blitz-Cap 65–85 %, höchstens zweimal. Überschwingen höchstens zweimal, niemals bei Typografie.
7. Übergänge sind entworfene Geräte (Iris, Schmiere, Klecks, Skalierung, Polaritätswechsel), nie ein Crossfade.
8. Echte Assets vor gezeichneten. Fälschen Sie niemals die Benutzeroberfläche eines echten Produkts.
9. Determinismus ist eine Funktion: Derselbe Frame rendert immer dieselben Pixel.
10. Die ästhetischen Verbote (Serife, Creme, Glühen, Glas, Emoji, Partikel) sind Standardwerte für generische Produktfilme. Eine Marke oder ihr Moodboard kann sie überschreiben. Die Physikgesetze sind nicht optional.

Vollständige Gesetze: techniques/laws.md. Briefing-Vorlage: techniques/prompt-skeleton.md.

Ausgabe-Vereinbarung

Wenn Sie einen Film ausliefern, berichten Sie:

• den verwendeten Stil
• die Einstellungsliste (Frames + Technik-IDs)
• den Pfad zur MP4 und zum Kontaktbogen
• die ffprobe-Zeile, den LUFS-Wert und das Determinismus-Ergebnis
• was sich in jeder Kritikrunde geändert hat
• jeden Platzhalter oder erfundenen Asset