Motion Craft Pro·动效工坊 Pro

Motion Craft Pro · 动效工坊 Pro

Programmgesteuerte Motion Graphics. Orientiert an Claude Opus 5.5s Ästhetik und Arbeitsweise beim Codieren von Videos: Erst das Storyboard, dann die Sprachausgabe, dann Einzelbilder, dann die Vollrendering.

Nicht wie Kling oder Jimeng – KI-generierte Videos. Die Bilder werden von Code Frame für Frame auf der Canvas gezeichnet.

Skill-Verzeichnis zuerst lokalisieren (bei jedem Projekt)

engine.js / scenes.js / render.js / compose.py / tts.py / film.html / storyboard.json alle im selben Verzeichnis wie diese SKILL.md (flach, keine Unterordner).

<Skill-Verzeichnis> = absoluter Pfad des übergeordneten Verzeichnisses dieser Datei.

# Selbsttest des Pfads
python "<Skill-Verzeichnis>/compose.py" --check

Relative Pfade wie python scripts/compose.py sind verboten – die Prüfumgebung findet sie nicht.

Abhängigkeiten

Abhängigkeit	Verwendung
Node 18+	render.js
puppeteer-core	Zum Steuern des lokalen Chrome
Chrome / Chromium	Rendering
Python 3.9+	tts / compose
edge-tts	pip install edge-tts
FFmpeg (vollständig)	Zusammenstellung (Playwright-Light-Version ausschließen)

Qualitätskriterien (so macht man es „Pro“)

1. Standard 1920×1080 (auch 1440×1080 / 1080×1920 / 1080×1080 möglich)
2. Ein Bildschirm – eine Sache; Überblendung zwischen Szenen; lange Haltezeiten, kurze Einfluge
3. Spring mit leichtem Overshoot (damping≈16–18, keine vollflächige Feder-Euphorie)
4. Weißraum: Außenabstand ≥ 8% der kurzen Seite; Fließtext warmweiß #f4f1ea, Akzentfarbe zurückhaltend (Standard Bronze #c4a574)
5. Titel mit Buchstabenabstand; Hierarchischer Schriftgrößenunterschied ≥ 1.5×
6. Sprachausgabe zuerst + möglichst Word-Boundary-Untertitel exportieren
7. Zuerst ≥4 Einzelbilder zur Prüfung exportieren, dann vollständig rendern
8. renderFrame(t) ist eine reine Funktion: Kein Date.now() / Math.random()

Arbeitsablauf (strikt einhalten)

1. Storyboard-JSON schreiben (vor allem Code)

storyboard.json kopieren, nach storyboard.schema.json ausfüllen:

• meta: Bildformat, Dauer, vollständiger Erzähltext, Stimme
• beats[]: id, start, end, type, copy, visual
• Szenentypen: TitleBeat / BulletReveal / StatCounter / CompareBars / QuoteCard / EndCard

Zahlen sprechen lassen, keine Adjektive. Beispiel: Titel 86px, Einflug 0.9s, Halten 2.2s – nicht „etwas größer“.

2. TTS → echte Dauer → Timeline zurückschreiben

python "<Skill-Verzeichnis>/tts.py" \
  --text-file narration.txt \
  --out "<Arbeitsverzeichnis>/voice.mp3" \
  --voice zh-CN-YunxiNeural \
  --rate=-6% \
  --captions-json "<Arbeitsverzeichnis>/captions.json" \
  --captions-vtt "<Arbeitsverzeichnis>/captions.vtt"

Mit der echten Dauer von voice.mp3 die beats[].start/end und meta.duration anpassen. Nicht zuerst feste Zeiten festlegen und dann vertonen.

Hinweis zu Untertiteln: Wenn Edge TTS Word-Boundary liefert, werden diese zeichenweise aggregiert; derzeit liefern die meisten chinesischen Stimmen nur Sentence-Boundary, daher zerlegt das Skript anhand von Kommata und Mittelpunkten in Phrasen-VTT.

3. film.html befüllen (oder basierend auf Vorlage anpassen)

• Gleiches Verzeichnis referenzieren: engine.js, scenes.js (nicht ../assets/)
• Storyboard in die Seite einbetten oder mit storyboard.json synchron halten
• MCScenes.drawScene(...) aufrufen; rechte Dekorationen können handgeschrieben sein, Inhalt aber möglichst über Szenenkomponenten

4. Einzelbild-Qualitätskontrolle (Pflicht)

Zuerst eine kurze Probe rendern oder t im Browser ziehen, oder Schlüsselpunkte mit 1 fps rendern. Mindestens prüfen: Eröffnung, Mittelteil, Daten/Vergleiche, Ende.

Prüfen auf: Überlappungen, überlaufenden Text, zu dunkle Bereiche, Ausrichtung, Lesbarkeit von Untertiteln.

5. Vollständiges Rendern

node "<Skill-Verzeichnis>/render.js" \
  "<Arbeitsverzeichnis>/film.html" \
  "<Arbeitsverzeichnis>/frames" \
  30 \
  18

6. Zusammenstellung

python "<Skill-Verzeichnis>/compose.py" \
  --frames "<Arbeitsverzeichnis>/frames" \
  --voice-file "<Arbeitsverzeichnis>/voice.mp3" \
  --captions "<Arbeitsverzeichnis>/captions.vtt" \
  --out "<Arbeitsverzeichnis>/out.mp4" \
  --duration 18 \
  --width 1920 --height 1080

Optional: --bgm music.mp3 (Sprachausgabe duckt), --burn-captions, oder --text für inline TTS in compose.

7. qa-report.json + vier qa-stills lesen

Wenn nicht bestanden, Storyboard/Layout ändern und neu rendern – nicht mit Gewalt abgeben.

Engine-API (engine.js)

const {
  Ease, spring, springSeg, seg, lerp, beatAlpha,
  glow, beam, drawBackdrop, createParticles, drawParticles,
  drawGrain, drawVignette, drawColorGrade,
  drawTracked, wrapCN, camera, transition, applyWipe,
  divider, card, ring, bars,
  drawCaptions, captionsFromWordBoundaries, layoutGrid, Palette
} = MC;

const { TitleBeat, BulletReveal, StatCounter, CompareBars, QuoteCard, EndCard, drawScene } = MCScenes;

Empfohlene Feder-Parameter (Claude-Ästhetik)

Verwendung	damping	stiffness	overshootClamping
Titel-Einflug	16–18	140–160	false (minimaler Rückprall erlaubt)
Listenelemente	18	145	true
Zahlenanimation	14	120	false

Bildformate

Verwendung	Größe
Standard Querformat	1920×1080
Lehrmaterial / 4:3	1440×1080
Hochformat	1080×1920
Quadratisch	1080×1080

Mit layoutGrid(W,H) Abstände und Zweispaltenlayout ermitteln.

Liefergegenstände

• storyboard.json
• film.html (erneut renderbar)
• voice.mp3 + captions.vtt / captions.json
• out.mp4 (1080p-Stufe)
• qa-report.json + qa-stills/*.png ≥ 4

Grenzen

• Ausgabe sind Motion Graphics, keine Realfilme, keine Diffusionsmodell-Videos
• Komplexes 3D / Charakteranimation / Fluide sind nicht abgedeckt
• Edge TTS ist keine echte menschliche Stimme; emotionale Bandbreite begrenzt
• Vollständige Remotion-Projekte (React-Ökosystem, Server-Rendering-Cluster) sind nicht enthalten; dieses Paket ist ein leichter Director-Stack für den Einsatz.