ThomasHMD/motion-design

motion-design: die Werkstatt (Remotion, Theme, Sounds, Musik)

Alles ist lokal und deterministisch: gleicher Code = gleiche MP4. Kein Bild oder Video, das von KI generiert wurde.

Der Stack

Stück	Werkzeug	Wo
Animation	Remotion 4.0.529 (React / TSX), Versionen in package.json fixiert	src/; npx remotion add <package> für ein weiteres Modul
Theme	Farben, Schriftarten, Größen, Abstände	src/illustration/theme.ts (gelesen von den Konstanten C und F in src/illustration/scenes/kit.tsx), Schriftarten in public/fonts/
Remotion-Module	Übergänge, Effekte, gsap, three, noise, paths, shapes, motion-blur, light-leaks, starburst, rough-notation, captions, layout-utils, lottie	package.json
Grafik-Kompositionen	BrandedVideo (Vollbild-Szenen), LowerThirdTrack (Lower Thirds, Abschnittstitel), Screencast (Site-Demos), Scene (Szenenkatalog), ControleTexte (Textprüfung), FondAnime (animierter, sich wiederholender Hintergrund; sein Korn wird von scripts/make-grain.py erstellt)	src/illustration/, deklariert in Compositions.tsx, verdrahtet in src/Root.tsx
Geteilte Cues	Schlüsselzeiten in Sekunden, von der Animation UND dem Sound gelesen	src/<project>/cues.json
Musik	eine in Python geschriebene Partitur auf einem numpy-Synth (scripts/synth.py: FM-E-Piano, Pad, Bass, Percussion, Vinyl-Knistern, Hall)	music/<project>.py, Modell: music/example_pad.py
Soundeffekte	synthetisierte Palette: lesen Sie reference/sound-palette.md vor jedem Sound. Synth-Rezepte scripts/make-sfx.py -> public/sfx/*.wav + palette.json; Geste-Vokabular scripts/son.py (ein Plan benennt eine Geste, nie eine Datei; Listen sind standardmäßig eine platzierte Karte pro Element, son.LISTES; son.releve: eine nummerierte Liste der Sounds eines Videos, die überprüft werden soll); scripts/palette-import.py (eine Palette echter Aufnahmen, gleiche Dateinamen, fällt auf den Standard zurück); scripts/sfx.py (einige zusätzliche Sounds: Verschluss, Fokus-Klick, Whoosh)	scripts/
Mix	Musik + Soundeffekte + Stimme, Musik unter der Stimme geduckt, EBU R128 Ziellautstärke, True-Peak auf -1,5 dBTP begrenzt (überabgetasteter Limiter, nur wenn er überschwingt)	scripts/mix.py
Checks	tonale Balance pro Oktave, Lautstärke	scripts/ltas.py, mix.py

Lizenzen. Remotion ist kostenlos für Einzelpersonen und für Unternehmen mit bis zu 3 Mitarbeitern; darüber hinaus ist eine Unternehmenslizenz erforderlich (remotion.pro). Lesen Sie dessen LICENSE.md, bevor Sie das Kit kommerziell in einem größeren Unternehmen verwenden. Die Schriftarten Inter und Source Serif 4 stehen unter der OFL (public/fonts/OFL-*.txt); die Sounds und die Beispielmusik werden hier synthetisiert, ohne Rechte Dritter. Woanders gefundene Musik: Prüfen Sie die Lizenz (kein CC-BY-NC auf einem monetarisierten Kanal).

Einrichtung und was die node_modules-Zeile bewirkt

Das Plugin wird einmal installiert mit:

bash "${CLAUDE_PLUGIN_ROOT}/install.sh" --data "${CLAUDE_PLUGIN_DATA}"

(Claude Code ersetzt beide Variablen beim Lesen dieser Datei durch echte Pfade.) Warum ein Datenordner: Der Plugin-Ordner wird bei jedem Plugin-Update ersetzt, und node_modules wiegt etwa 1 GB. Also läuft npm ci einmal im Datenordner des Plugins (${CLAUDE_PLUGIN_DATA}), der Updates überlebt, und skills/motion-design/node_modules ist ein Symlink darauf. Wenn node_modules nach einem Plugin-Update fehlt (der neue Plugin-Ordner hat keinen Link), führen Sie die obige Zeile erneut aus: Sie tut nur das, was fehlt, und verlinkt in einer Sekunde neu.

Manuelle Installation (die vier skills/-Ordner nebeneinander in ~/.claude/skills/ kopiert): bash install.sh vom Kit-Root aus; node_modules ist dann ein normaler, von npm ci installierter Ordner. Python-Seite: python3 -m pip install numpy scipy soundfile pillow und brew install ffmpeg. Details und eine Überprüfung der gesamten Kette: INSTALL.md des Kits.

Führen Sie jeden Befehl dieses Skills aus dem Werkstatt-Ordner aus (skills/motion-design).

Pipeline eines kompletten Motion-Design-Videos

1. Einrahmen: Dauer, Format (1920x1080 bei 30 fps standardmäßig; 1080x1920 für ein vertikales Reel; 1080x1080 für quadratisch), Verwendung, Plattformbeschränkungen. Schreiben Sie src/<project>/cues.json: Die Schlüsselzeiten treiben sowohl Bild als auch Ton.
2. Animieren: eine Komposition pro Auslieferung in src/<project>/, deklariert in src/Root.tsx, Props mit zod typisiert. Alles leitet sich von useCurrentFrame() ab: niemals eine freie CSS-Animation, niemals Math.random() (random(seed) oder noise2D). Nur Theme-Farben und -Schriftarten.
3. Das Bild ohne Warten auf einen Render überprüfen: npx remotion still src/index.ts <Id> out.png --frame=N auf den Schlüsselbildern, dann ein Kontaktblatt des MP4 (ffmpeg tile). Beurteilen Sie in Telefongröße: Das auf 390 px Breite reduzierte Bild muss lesbar bleiben.
4. Voice-Over (falls vorhanden): vom Benutzer aufgenommen (48 kHz WAV), platziert mit --voice-at. Das Kit klont keine Stimmen.
5. Musik und Soundeffekte: python3 music/<project>.py <duration> music.wav; Sounds über son.py, platziert zu denselben Zeitpunkten wie das Bild (der Plan ruft son.releve(...) auf, um die nummerierte Liste zum Anhören zu schreiben); Überprüfung mit python3 scripts/ltas.py music.wav (kein Loch tiefer als etwa 6 dB gegen eine sanfte Neigung).
6. Mix: python3 scripts/mix.py --music ... --sfx ... [--voice ... --voice-at s] --lufs -16 --out public/audio/<project>_mix.wav (-14 für ein Reel, -16 für YouTube; --sfx-voix-ref -22 skaliert die Soundeffekte auf die reale Stimme um).
7. Render: npx remotion render src/index.ts <Id> out.mp4 --props='{"audio":"audio/<project>_mix.wav"}' --codec=h264 --crf=16 --audio-bitrate=320k.
8. Ausliefern ohne Überschreiben einer vorhandenen Auslieferung (Suffix -v2), mit einer Vorschau.

Renders platziert in Premiere (Grafiken)

• Kein Logo in einer Szene, einer Vollbildgrafik oder einem Lower Third: Es lädt das Bild für nichts.
• Eine Datei, die für eine 29,97-fps-Sequenz bestimmt ist, muss GANZ ihren Clip abdecken: n Sequenzframes dauern n x 1,001 / 30 s. Die Kompositionen von src/illustration/ akzeptieren tailFrames: Die Komponente TenirFin (src/illustration/tenir-fin.tsx) spielt die Animation über ihre Dauer ab und hält dann das letzte Bild; Exit-Animationen bewegen sich nicht. Das overlays-Skills scripts/render-segments.py berechnet tailFrames.
• Die Grafik-Kompositionen werden von scripts/render-segments.py, scripts/screencast-render.py und scripts/montage-tella.py des overlays-Skills gerendert (Arbeitsordner = diese Werkstatt, PNG-Frames, 4 Kerne), niemals von Hand außerhalb einer remotion still-Überprüfung. Über staticFile aufgerufene Medien gehen in public/scenes/<video>/.

Machen Sie es zu Ihrem (Theme ändern)

Das Kit wird mit einem neutralen Theme ausgeliefert: blauer Akzent #2F5BEA, Inter und Source Serif 4, eine Theme-Datei, src/illustration/theme.ts. Um Ihre eigene Marke zu verwenden:

1. Farben: src/illustration/theme.ts (color: Basis, Kontrast, inkSoft, muted, surface, line, accent, accentDark, accentWash, darkBg, paperWarm); die Szenen lesen es über C. Der Akzent und seine hellen Tönungen sind an einigen Stellen noch fest codiert: grep -rn "#6B8CFF\|rgba(47,91,234\|rgba(214,224,252" src/ (Highlights in preuves.tsx, Screencast.tsx, den PALETTES-Varianten von compositions/FondAnime.tsx), um den neuen Akzent anzupassen. Ein Akzent, verwendet als Signal, niemals als Füllung.
2. Schriftarten: Legen Sie die .woff2-Dateien in public/fonts/ ab, ändern Sie dann die Dateinamen und Familiennamen in den Ladelisten (src/illustration/scenes/kit.tsx, compositions/BrandedVideo.tsx, compositions/LowerThirdTrack.tsx, compositions/Screencast.tsx) und in theme.ts (font.display, font.sans). Überprüfen Sie, dass die Schriftart Ziffern und Akzente hat (ein "latin-ext"-Subset allein hat weder Ziffern noch Basisbuchstaben, und alles fällt auf Georgia zurück). Familienname ohne Ziffer (oder in CSS in Anführungszeichen).
3. Animationskurve: easeStd in scenes/kit.tsx und EASING in scripts/make-sfx.py gehen zusammen (der Sound folgt der Kurve des Bildes).
4. Überprüfen: npx tsc --noEmit, dann ein remotion still jeder Komposition (Zitat, Lower Third, Abschnittskarte, Nummer...), dann --force beim nächsten render-segments.py-Durchlauf (sein Cache folgt bereits dem Code von src/illustration/).

Eine Szene oder einen Sound hinzufügen

• Szene: eine Komponente in src/illustration/scenes/opaque.tsx (Vollbild) oder alpha.tsx (Overlay), ihr data-Vertrag als Kommentar darüber, eine Zeile im Register scenes/Scene.tsx, eine Zeile im Katalog des overlays SKILL.md. Jeder Zeitpunkt stammt aus den cues. Überprüfung: remotion still bei mehreren Frames, das Overlay auf einen Frame des Clips composited.
• Sound: reference/sound-palette.md, "Einen Sound hinzufügen oder anpassen".

Falle synchronisierter Ordner

Wenn die Werkstatt in einem synchronisierten Ordner lebt (Dropbox, iCloud, Drive...), kann ein anderes Gerät eine alte Version einer Datei zurückschicken und die gute in "Konfliktkopie" umbenennen. Symptom: Could not find composition with ID .... Reflex: find . -name '*conflicted copy*' -not -path './node_modules/*', vergleichen, die aktuellste Version behalten. Der Webpack-Cache (node_modules/.cache) kann ebenfalls in Konflikt geraten: Löschen Sie ihn, Remotion baut ihn neu auf. Besser: node_modules aus der Synchronisation heraushalten.