UI-Motion-Reel

UI-Bewegungsreel

Eine Reel ist eine einzelne HTML-Szene, die Frame für Frame gerendert wird. Jeder animierte Wert (Formgröße, Radius, Farbe, Kamera-Zoom, Cursor, Steuerelemente) wird als gedämpfte Feder einmal im Voraus mit 8-facher Bildrate simuliert, sodass jeder Frame unabhängig und parallel gerendert werden kann. Die Partitur wird aus derselben Timeline synthetisiert, sodass jeder Beat, Klick und Whoosh mit dem Bild übereinstimmt.

Die enthaltenen Komponenten:

• assets/engine/reel.js: die Engine (Federn, Messung, Cursor-Skript, Kamera, Content-Blur-Wechsel, Hover und Drücken, nahtloser Loop, Kilometerzähler, das Symbolset)
• assets/engine/score.js: ein originaler loopbarer Track (Pads, gezupfte Arpeggien, Bass, Drums, Risers, Glocken) plus UI-Sounddesign (Klicks, Whooshes, Tippgeräusche, Rasten, Wischen), gerendert mit OfflineAudioContext
• assets/template/index.html: eine 24 s lange Start-Szene mit jedem Interaktionstyp: Liste mit Zeilen-Hover, Schieberegler-Ziehen, Toggle, Kilometerzähler, Halten-zum-Bestätigen-Ring, Erfolgs-Pille, Zusammenfassungskarte, Zurück zum Loop
• scripts/setup.sh: erstellt einen Reel-Ordner (Engine + Template + Skripte + Node-Abhängigkeiten)
• scripts/render.mjs: Standbilder, Audio und ein paralleler MP4-Render mit eingebetteter und lautstärkenormierter Partitur
• scripts/qa.mjs: Kontaktbogen, Roh-Loop-Nahtprüfung, Übergangsstreifen, Lautstärke und Spektrogramm
• references/api.md: die vollständige Reel.define-Konfigurationsreferenz. Lies sie, bevor du eine Szene schreibst.
• references/craft.md: die Bewegungs- und Designregeln sowie die Fehler, die bereits gemacht und behoben wurden. Lies es, bevor du Zustände entwirfst.
• references/score.md: wie man die Musik und das Sounddesign gestaltet und wie man einen Mix überprüft, den man nicht hören kann.
• references/examples/stockback.html: die originale 60 s, 14-Zustands-Reel, aus der dieses Skill extrahiert wurde (eine Fintech-App für Belege und Aktien). Lies es für Ideen zum Inhalt und dichtere Choreografie. Es stammt aus der Zeit vor der Engine-API, übernimm also Muster, nicht Code.

Arbeitsablauf

1. Lerne das Produkt zuerst kennen. Lies die Website oder den Code des Produkts für seine Palette, Schriftarten, Logo und die 5–8 Momente, die seine Geschichte erzählen (die Eingabe, der „Zauber“, der Beweis, der Gewinn). Verwende echte Texte und echte Daten, wo möglich: echte Zahlen und echte Logos machen die Reel glaubwürdig. Wenn der Benutzer ein bestimmtes Aussehen gewünscht hat, hat das Vorrang vor dem eigenen Look des Produkts.

2. Schreibe die Zustände, bevor du Markup schreibst. Entscheide für jeden Zustand seine Größe (w, h, radius), Füllung (eine von 3–4 Palettenfarben), Kamera-Zoom (so dass er etwa 80 % der Rahmenhöhe oder -breite ausfüllt), Dauer und was der Cursor tut. Strebe 45–60 s und 10–14 Zustände für eine vollständige Reel an, oder 20–30 s und 5–7 Zustände für einen Teaser. Bei 120 BPM dauert ein Beat 0,5 s und ein Takt 2 s. Mache die Dauer jedes Zustands zu einem Vielfachen von 0,5 s und setze die großen Momente auf Taktstriche (Vielfache von 2 s), damit die Musik sie treffen kann. Die Dauern müssen genau der Gesamtsumme entsprechen.

3. Rüste das Gerüst. bash ~/.claude/skills/ui-motion-reel/scripts/setup.sh <Projekt>/video, bearbeite dann <Projekt>/video/index.html. Lasse die Engine-Dateien unverändert, es sei denn, die Reel benötigt eine Engine-Funktion; wenn ja, ändere die Kopie im Projekt und erwähne es.

4. Baue die Szene gemäß references/api.md: einen .content-Block pro Zustand (id="c-<id>", data-w/data-h gleich der w/h des Zustands), ids auf allem, was der Cursor ansteuert oder du animierst, dann Reel.define({...}) mit Zuständen, Cursor-Ereignissen, benutzerdefinierten Kanälen (Schieberegler, Toggles, Halten, Scrubs) und update-Funktionen pro Zustand für innere Animationen.

5. Überprüfe Standbilder früh und oft. node render.mjs --stills 0,1.5,4,... und betrachte sie dann (erstelle einen Kontaktbogen mit node qa.mjs --every 2). Überprüfe jeden Zustand im Ruhezustand und einige Frames während der Umformung. Das Rendern von Standbildern dauert Sekunden; ein vollständiger Render dauert etwa eineinhalb Minuten für 60 s mit 6 Workern.

6. Vertone es. Setze score (Progression, Hits auf den Schlüsselzuständen, Brüche) und einen sfx-Hook für szenenspezifische Geräusche (Tippen, Rasten, Zähler, Wischen). node render.mjs --audio, dann node qa.mjs und lies die Lautstärkezeile und out/qa/spectrum.png (siehe references/score.md: du kannst nicht zuhören, also beurteilst du den Mix nach Zahlen und Bildern).

7. Rendern und Qualitätssicherung. node render.mjs --mp4 --with-audio --out <name>.mp4, dann node qa.mjs --transitions --video out/<name>.mp4. Bestätige, dass die Roh-Loop-Naht 1.000000 ist, betrachte transitions.png auf graue Zwischenmorphs oder überlaufenden Inhalt und betrachte den Kontaktbogen noch einmal.

8. Liefere aus die MP4 (und eine 720p-Kopie, falls eine Dateiübertragung mit der Größe kämpfen könnte), plus eine kurze Liste, was darin enthalten ist: Zustände, Interaktionen, was die Musik tut. Sage dem Benutzer ehrlich, dass du das Audio durch Analyse, nicht nach Gehör überprüft hast. Biete an, es zeitlich anzupassen oder neu zu thematisieren: Ein erneuter Render ist günstig.

Unverhandelbar (das Aussehen)

Diese Dinge sorgen dafür, dass es wie eine Designerreel und nicht wie eine Vorlage wirkt. references/craft.md erklärt jedes im Detail.

• Eine Form, nie geschnitten. Jeder Zustand ist dasselbe Element, das Größe, Radius und Füllung ändert; Inhalte wechseln darin mit einem kurzen Weichzeichner (die Engine erledigt das).
• Ein Cursor verursacht jede Änderung: ein Klick, ein Ziehen oder ein Drücken-und-Halten. Kein Zustand ändert sich von selbst, es sei denn, es ist eine echte Systemreaktion (ein Halt, der abgeschlossen wird).
• Federn überall; höchstens ein winziges Überschwingen (Zeta um 0,86 für Größe, 1,0 für Farbe und Kamera). Keine hüpfenden Ease-Funktionen.
• Die Kamera passt zu jedem Zustand; der letzte Frame entspricht dem ersten, sodass die Reel loopbar ist.
• Keine toten Zeiten: Etwas Sinnvolles bewegt sich zu jedem Zeitpunkt, und der Cursor wartet nie länger als etwa eine Sekunde.
• Keine Partikeleffekte, Glüheffekte, Linsenreflexe, Verläufe auf UI-Chrome oder nicht passende Symbolstrichstärken (verwende das Icon-Set der Engine: ein 24er Raster, ein 1,75er Strich).
• Eine UI-Schriftart, optional mit einer akzentuierten Display-Schrift (das Template kombiniert Geist mit Instrument Serif kursiv). Verwende die Schriftarten des Produkts, wenn es sie hat.

Leistungshinweise

• Eine 60 s Reel in 1080p60 besteht aus 3.600 Frames. Mit 6 Workern benötigt das Rendern etwa 80–90 s auf einem Apple-Silicon-Mac.
• Die Skripte rufen process.exit am Ende auf, weil Puppeteer Node nach getaner Arbeit am Leben halten kann. Wenn du eigene Skripte schreibst, mache dasselbe, sonst sehen lange Befehle wie hängend aus.
• In Netzwerken, in denen große Uploads auslaufen, exportiere auch eine 720p-Kopie: ffmpeg -i reel.mp4 -vf scale=1280:720 -c:v libx264 -crf 25 -c:a aac -b:a 160k reel-720p.mp4 (ffmpeg ist unter node_modules/@ffmpeg-installer/*/ffmpeg zu finden).