Rudywizz-motion

Was macht Rudywizz-motion?

Ein deterministischer Renderer: Jeder Frame wird berechnet (headless Chromium + WebGL2) und an ffmpeg weitergeleitet, so dass die gleiche Eingabe immer das gleiche Video ergibt. Dieser Ordner ist in sich geschlossen:

engine/      cli.mjs (Einstieg), host.js, timeline.js, camera.js, gl/ (Shader), data/ (Karten), fonts/
styles/      ein Ordner pro Stil (style.js)
templates/   vorgefertigte Kompositionen (JSON)
assets/demo/ Original-Demo-Illustrationen (CC0)

1. Einmalige Einrichtung (vor dem ersten Rendern prüfen)

RM="${CLAUDE_SKILL_DIR}"                       # Der Ordner, der diese SKILL.md enthält
[ -f "$RM/engine/cli.mjs" ] || RM=$(ls -dt "${CLAUDE_PLUGIN_ROOT}/skills/rudywizz-motion" ~/.claude/plugins/cache/*/rudywizz-motion/*/skills/rudywizz-motion ~/.claude/skills/rudywizz-motion .claude/skills/rudywizz-motion 2>/dev/null | head -1)
TMP=$(node -p "require('os').tmpdir()")       # Ein temporäres Verzeichnis, das Bash und Node gemeinsam verwenden (auch unter Windows)
cd "$RM" && npm install --no-audit --no-fund   # Installiert playwright (die einzige Abhängigkeit)
node engine/cli.mjs doctor                    # Node ✓ ffmpeg ✓ browser ✓ WebGL2 ✓ — jedes ✗ gibt die Lösung aus

Führen Sie Renderings aus dem Benutzerordner mit node "$RM/engine/cli.mjs" ... aus, damit relative Pfade dort aufgelöst werden. Wenn die Browser-Prüfung fehlschlägt: npx playwright install chromium (oder setzen Sie RM_CHROME=/pfad/zu/chrome). Wenn ffmpeg fehlt, sagen Sie dem Benutzer, wie er es installieren kann (macOS brew install ffmpeg, Windows winget install ffmpeg, Linux apt install ffmpeg).

2. Wählen Sie die Art des Auftrags

Benutzer möchte	Tun Sie dies
Ein animierter Text/Titel	render <stil> --text "…"
Eine Karten-/Routenanimation	render map-route --set 'route=["İstanbul","Konya"]'
Sein Bild als Gravur gezeichnet	render image --image foto.jpg --look engrave --grade sepia --film 0.6
Kamerafahrten auf seinem Clip	render clip --clip in.mp4 --camera handheld --set speed='"ramp-mid"'
Eine transparente Überlagerung für seinen Editor (unteres Drittel, Untertitel, CTA)	render lower-third --text "Name / Rolle" --alpha --out name.mov
Ein Multi-Szenen-Reel / Dokument / Teaser / Intro	init reel.json oder starten Sie von einer Vorlage, dann bearbeiten (Abschnitt 4)

Vorlagen: node engine/cli.mjs templates listet alle mit einer einzeiligen Beschreibung auf. Kopieren Sie eine neben die Assets des Benutzers (cp "$RM/templates/<name>.json" .), bearbeiten Sie Texte/Pfade, rendern Sie sie.

3. Arbeitsablauf (immer)

1. Stil(e), Text, Format (Standard 9:16 1080×1920), Kamera, Farbkorrektur festlegen.
2. Zuerst Standbilder prüfen – günstig und erkennt Layout-Probleme: node "$RM/engine/cli.mjs" still <stil|comp.json> --at 2.5 --size 540 --out "$TMP/check.png" → PNG öffnen und ansehen. 2–3 Zeitpunkte prüfen (Anfang, Mitte, Ende jeder Szene). Lesen Sie alle warning/error-Zeilen: sie nennen Tippfehler und schlagen den richtigen Schlüssel vor.
3. Rendern: node engine/cli.mjs render … --out out.mp4
4. Überprüfen: ffprobe -v error -show_entries format=duration -of csv=p=0 out.mp4 und ein oder zwei Frames extrahieren.
5. Datei mit einer Zeile Kontext übergeben.

Faustregeln

• Kurzer Text gewinnt: 1–6 Wörter pro Zeile, max. ~4 Zeilen. Verwenden Sie " / " oder \n für Zeilenumbrüche.
• Die türkische Groß-/Kleinschreibung erfolgt automatisch, wenn der Text ğ/ş/ı/İ enthält; andernfalls übergeben Sie --lang tr für türkischen Text (i → İ).
• Renderings sind CPU-intensiv: ~0,2–0,5 s pro 1080p-Frame. Vorschau mit --size 540 und Endrender mit 1080.
• Laden Sie niemals Bilder/Clips aus dem Web ohne Zustimmung des Benutzers herunter; verwenden Sie seine Dateien.
• Transparente Überlagerungen: --alpha --out datei.mov (ProRes 4444) oder .webm.
• Musik: --audio song.mp3 und --bpm N, damit beat-cut, lyric-video und die beat-punch-Kamera den Takt treffen.

4. Kompositions-JSON

{
  "format": "9:16",
  "lang": "tr",
  "bpm": 96,
  "audio": "song.mp3",
  "look": { "grade": "teal-orange", "bloom": 0.3, "grain": 0.05, "leak": 0.2, "aberration": 0.3,
            "vignette": 0.3, "film": 0, "weave": 0, "distortion": 0 },
  "motionBlur": 1,
  "scenes": [
    { "style": "map-route", "route": ["İstanbul", "Kapadokya"], "duration": 6, "camera": "drift",
      "transition": { "type": "whip", "duration": 0.45, "dir": "left" } },
    { "clip": "strand.mp4", "in": 3.2, "duration": 2.5, "speed": "ramp-mid", "camera": "handheld",
      "overlay": { "style": "captions", "text": "Kaş, Antalya" },
      "transition": { "type": "burn", "duration": 0.8 } },
    { "image": "portrait.jpg", "look": { "type": "engrave", "reveal": 3 }, "duration": 4, "camera": "push-in" },
    { "style": "neon-sign", "text": "See you / soon", "duration": 3 }
  ],
  "overlays": [ { "style": "captions", "text": "…", "from": 0, "to": 5 } ]
}

• Szenentypen: style (beliebige Stil-ID + ihre Optionen), image (image-Pfad, oder layers: [{src, depth}] für 2,5D-Parallaxe), clip (clip, in, speed: Zahl | ramp-in | ramp-out | ramp-mid), color.
• Pfade sind relativ zur JSON-Datei.
• transition befindet sich in der Szene, die verlassen wird. Die nächste Szene beginnt duration Sekunden, bevor diese endet.
• overlay = ein Stil, der über die Szene gelegt wird (bewegt sich mit ihrer Kamera). overlays = fixiert über allem, unkorrigiert.
• Kamera: Name einer Voreinstellung oder { "preset": "drift", "amount": 0.6, "shake": 0.5, "keys": [{ "at": 0, "zoom": 1 }, { "at": 1, "zoom": 1.3, "ease": "outExpo" }] }.

5. Katalog

Kameras — static, drift, push-in, pull-out, punch-in, crash-zoom, whip-from-left, whip-from-right, whip-from-top, spin-in, rise, orbit, tilt-reveal, tilt-left, tilt-right, vertigo, handheld, float, beat-punch. Kamerabewegungen werden automatisch mit Bewegungsunschärfe versehen.

Übergänge — cut, fade, flash, dip, whip, zoom, spin, glitch, ink, burn, liquid, iris, wipe, blinds, pixelate, leak, cube, ripple, doors, stretch, luma.

Looks (Bilder/Clips) — engrave (Tinte zeichnet → Schraffur → Sepia-Waschung), sketch, oldphoto, duotone, halftone, posterize, noir. Optionen: { "type": "engrave", "reveal": 3, "delay": 0.2, "paper": "#ece0c4", "ink": "#33210f" }.

Farbkorrekturen — none, teal-orange, kodak, fuji, sepia, noir, bleach, cyber, sunset, matte (+ gradeAmount 0–1).

Stile — führen Sie node engine/cli.mjs list für die aktuelle Liste aus. Die Optionen jedes Stils sind am Anfang von styles/<id>/style.js dokumentiert (defaults + options).

Stil	Was er tut	Wichtige Optionen
map-route	Routenflug auf Globus / flacher Karte / türkischen Provinzen, Pins + Beschriftungen	route, mode globe·flat·turkey·auto, theme dark·atlas·light, icon, highlight
history-title	Vergoldeter Jahreszähler + Kapiteltitel	text "1453 / Titel / Untertitel", from
parchment-letter	Verbrannter Pergament, Handschrift + Feder + Wachssiegel	place, signature, seal
murmuration	Starenschwarm faltet sich zu den Worten	birds, Himmelsfarben
led-marquee	Shop/Minibus LED "kayan yazı"-Tafeln	eine Tafel pro Zeile, colors
receipt	Thermodrucker druckt die Nachricht, reißt ab	header, items, total, date
ink-bleed	Tintentropfen breiten sich in den Buchstaben aus	ink, paper
halftone-press	Zweifarbiger Riso-Druck	inkA, inkB, dot
signal-tune	Alter Fernseher: Schnee → Testbild → auf Sendung	channel, station
inflate	Y2K Chrom-Ballonbuchstaben	chrome, face
orbit-ring	Textringe um einen Planeten	ein Ring pro Zeile
beat-cut	Ein gestempelter Wort pro Schlag, Schweizer Plakat	bpm, offset
lyric-video	Songtexte leuchten Wort für Wort auf den Takt auf	bpm, times, credit
captions	Reel-Untertitel, aktives Wort auf einer Tablette (verwenden Sie --alpha)	times, maxWords, pill, position
split-flap	Abflugtafel dreht sich (türkische Trommel)	title, cols
neon-sign	Neonröhren auf Ziegel, eine defekt	colors, broken
odometer	Rollende Ziffern zählen zu einer Zahl	text "10000 takipçi", prefix, suffix
pixel-quest	8-Bit-Titelbildschirm	pixel, subtitle
vhs-memory	Homevideo-Band-Look	date, clock
Kinetische Typografie
word-stack	Blocksatz-Poster-Stapel, jede Zeile knallt in voller Breite ein	accent, beat, kicker
typewriter	Tippt Taste für Taste mit blinkendem Cursor	theme paper·terminal, speed, prompt
scramble	Zufällige Zeichen dekodieren den Text	font mono·display, resolve, hud
ticker-rows	Riesige Zeilen scrollen abwechselnd	rows, tilt, speed, accent
highlight-quote	Zitat blendet ein, ein Marker streicht die Schlüsselwörter an	author, highlight (Wörter), marker
glitch-title	RGB-Split + Datamosh setzen sich zu einem sauberen Titel zusammen	subtitle, colors, every
3D
extrude-3d	Massive extrudierte Buchstaben schwingen ein und drehen sich	face, side, bg, depth
cube-spin	Würfel dreht sich Seite für Seite, eine Zeile pro Seite	colors, ink, floor
text-tunnel	Fliege durch Textringe zum Titel	Zeile 1 = Titel, rings, ring, colors
retro-grid	Synthwave-Raster, gestreifte Sonne, Chrome-Titel	Zeile 1 Chrome, Rest Skript, sky, sun, speed
particle-sphere	Partikelkugel verwandelt sich in die Worte	count, morphAt, colors
card-carousel	3D-Kartenring landet auf der letzten Zeile	images (lokale Dateien), turns, colors
Social & Broadcast
countdown	3·2·1 mit Ring-Sweeps, dann der Text	from, tick, accent
lower-third	News/YouTube-Namensleiste (verwenden Sie --alpha)	Zeile 1 Name, Zeile 2 Rolle, theme solid·glass·minimal, position
chat-story	Nachrichten-Chat mit Schreibpunkten	eine Nachricht pro Zeile, > = ich, name, theme
bar-chart	Balkendiagramm-Rennen, Werte zählen hoch	items: [["A",10],…], unit, note, source
cta-follow	Cursor klickt auf Folgen, Haken + Konfetti	Zeile 1 Handle, Zeile 2 Button, Zeile 3 Untertitel, done

Stiloptionen kommen in --set schlüssel=wert (JSON-Werte: --set 'route=["A","B"]') oder als Schlüssel des Szenenobjekts.

6. Fehlerbehebung

• unknown place "X" (map-route): verwenden Sie "lat,lon" oder { "name": "X", "lat": 0, "lon": 0 }.
• Text durch eine Kamerafahrt abgeschnitten: reduzieren Sie die Kameradrehung amount oder verwenden Sie drift/float.
• Langsame Renderings: --size 540 für Entwürfe. Vermeiden Sie --motion-blur über 4, es sei denn, der Benutzer wünscht die beste Qualität.
• Ausgabe weiß/leer: führen Sie still aus und lesen Sie den Fehler; doctor prüft WebGL2.
• Windows PowerShell / cmd entstellt --set 'route=["A","B"]': schreiben Sie die Optionen in eine Datei und verwenden Sie --params opts.json, oder verwenden Sie ein Kompositions-JSON.
• Englischer Text, der einen türkischen Namen enthält (ı, ş…) erhält automatisch die türkische Groß-/Kleinschreibung; übergeben Sie --lang en, um dies zu stoppen.