Reel Motion Graphics (Erklär-Videos im 9:16-Format)

Was macht Reel Motion Graphics (Erklär-Videos im 9:16-Format)?

Dieser Skill erstellt Reels im Hausstil, der erstmals für "Upcycling in 30 Seconds" entwickelt wurde. template/ ist dieses Reel als funktionierendes HyperFrames-Projekt, sodass eine frische Kopie korrekt rendert, bevor du etwas änderst. Deine Aufgabe ist es, den Inhalt durch das neue Skript zu ersetzen, während alle unten stehenden Regeln eingehalten werden.

Lade /hyperframes-core für den Kompositionsvertrag, bevor du Kompositions-HTML schreibst. Lade /hyperframes-animation nur, wenn du ein Bewegungsmuster benötigst, das nicht in references/primitives.md enthalten ist.

1. Skript lesen und Abschnitte planen

Ermittle oder leite Folgendes ab und frage nur nach dem, was den Film verändert:

• Das Skript oder Konzept. Erforderlich.
• Präsentator-Aufnahme (MP4) oder ein Standbild. Ohne eines behalte das Platzhalter-Standbild aus der Vorlage.
• Quellenangabe für die Titelzeile, z. B. ICLR 2023 · Author et al..
• Ziellänge. Standard 30 s; 20–60 s sind möglich.

Unterteile das Skript in: eine Titelkarte (ca. 4 s), 2–5 Schritte (je 4,5–6 s) und optional einen Ergebnis-/Abschluss-Teil (ca. 5,5 s). Schreibe für jeden Schritt:

• eine Überschrift als normale Wörter plus eine 1–2-Wort-kursive Betonung ("Kopiere das MLP acht Mal"), maximal ca. 22 Zeichen, damit es bei 656 px und 60 px passt;
• eine Bildunterschrift: Zeile 1 ist ein Satz mit max. ca. 34 Zeichen (Bodoni kursiv 40 px), Zeile 2 ist ein unterstützender Satz mit max. ca. 40 Zeichen;
• den Diagramm-Schritt aus dem Grundvokabular (references/primitives.md → "Ein neues Diagramm schreiben").

Gehe von ca. 2,5 gesprochenen Wörtern pro Sekunde aus, wenn die Bildunterschriften die Erzählung spiegeln. Schreibe den Plan in STORYBOARD.md im Projekt (Abschnitt, Zeitbereich, Überschrift, Bildunterschrift, visueller Schritt), zeige ihn dem Benutzer und baue erst, wenn er zustimmt. Ein kurzes Skript, das der Benutzer bereits genehmigt hat, kann direkt in den Build gehen.

2. Grundgerüst

Dieser Skill lebt im Reel Creator-Projekt (.claude/skills/reel-motion-graphics/). Führe Befehle vom Projektstamm aus aus und lege jedes neue Reel in reels/<slug>/ an. Skriptpfade wie scripts/solve-fold.py sind relativ zu diesem Skill-Ordner.

.claude/skills/reel-motion-graphics/scripts/new-reel.sh reels/<slug> [presenter.jpg|.mp4]

Ersetze für Präsentator-Video das <img id="presenter"> in index.html durch: <video id="presenter" class="clip" src="assets/presenter.mp4" data-start="0" data-duration="<D>" data-has-audio="true" playsinline></video> Das #presenter-CSS (Cover, 20 % Anker, unterhalb --fold) wird unverändert angewendet.

3. Bauen: Zuerst die Daten bearbeiten, dann das Diagramm schreiben

Datei	Was ändern
index.html	Root und Host data-start/data-duration an den Plan anpassen. Hosts: bg (gesamt), title (0–4), headings und diagram (4–Ende), result (sein Fenster), captions (gesamt), presenter (gesamt).
compositions/title.html	Quellenzeile, die zwei Display-Zeilen, die zwei Thesen-Zeilen und das Mini-Diagramm, falls die Idee nicht "1 → viele" ist.
compositions/headings.html	Nur das STEPS-Array (Host-lokale Sekunden). Balken und "Schritt n von N" werden daraus abgeleitet.
compositions/captions.html	Nur das CAPS-Array (globale Sekunden). Jede ca. 0,35 s nach Schrittbeginn einblenden und bis Schrittende anzeigen.
compositions/diagram.html	Die Welt für das neue Thema neu schreiben, unter Verwendung der Grundelemente. Behalte die Linsen/Welt/Drift-Struktur, das Token-Clock-Muster und die Hintergrundstaffelung.
compositions/result.html	Statistik-Labels, Werte, Zähler und Metazeilen – oder den Host löschen, wenn das Skript keine Zahlen enthält.
compositions/bg.html	Meist unverändert. Skaliere seine Yoyo-Wiederholungen so, dass sie bei der Root-Dauer enden.

Wenn die Bibliothek keine passende Grafik enthält: um einen HyperFrames-Link bitten

Die Bibliothek ist references/primitives.md. Wenn ein Abschnitt eine Visualisierung benötigt, die kein Grundbaustein abdeckt (Diagrammtyp, Karte, Zeitleiste, Vergleich oder etwas anderes, das nicht aufgeführt ist), improvisiere nicht selbst. Halte inne und bitte den Benutzer um einen Link:

"Abschnitt 3 ('Umsatz verdreifacht seit 2021') benötigt ein Wachstumsdiagramm und die Bibliothek hat keins. Kannst du einen HyperFrames-Katalog-Link für eine Grafik schicken, die dir gefällt? Ich werde sie auf unsere Marke umstellen."

Um die Auswahl zu erleichtern, kannst du 2–4 Kandidaten aus npx --yes [email protected] catalog "<Suchbegriff>" auflisten, aber lass den Benutzer wählen. Baue während des Wartens die anderen Abschnitte weiter und hinterlasse einen beschrifteten Platzhalter in der Lücke.

Wenn der Link eintrifft:

1. Installiere ihn. Das Registry-Item ist das letzte Pfadsegment des Katalog-Links. Führe npx --yes [email protected] add <name> --no-clipboard --json vom Projekt aus. Für einen Link, der nicht aus der Registry stammt, lies die Seite oder Quelle und baue sie neu zusammen.
2. Passe ihn an die Hausregeln an:
   • Tausche die Farben gegen Marken-Tokens und die Panels gegen .glass;
   • Verwende Bodoni und Instrument Sans mit den opsz-18-Dateien;
   • Setze alle Abstandswerte auf das 4px-Raster;
   • Passe ihn an die Inhalts- und Zonen-Spalte an;
   • Füge Schimmer, Glanz und Drift-Akzente hinzu;
   • Entferne alles Markenfremde, wie flache helle Füllungen, andere Schriftarten oder Schlagschatten-Stile.
3. Binde ihn ein als Unterkompositions-Host auf der Grafikspur oder integriere seine Bewegung in diagram.html, wenn er die kontinuierliche Welt teilen muss. Überprüfe, erstelle einen Snapshot und korrigiere wie üblich.
4. Füge ihn zur Bibliothek hinzu. Hänge einen Eintrag in references/primitives.md unter "Von HyperFrames umgestaltet" an: Name, Quelllink, was gezeigt wird und die wichtigsten Parameter. Kopiere die umgestaltete Datei in template/compositions/library/, damit das nächste Reel sie ohne erneute Anfrage wiederverwenden kann.

4. Hausregeln (jedes Reel, keine Ausnahmen)

1. Falte gleichmäßig. Die Falte sitzt auf halbem Weg zwischen dem untersten Animationsinhalt (Bildunterschriften-Unten, etwa y 900) und dem Oberkopf des Präsentators. Löse es mit scripts/solve-fold.py <Präsentator-Standbild oder ein Frame> 900 und setze --fold in brand.css (ein Vielfaches von 4). Überprüfe mit scripts/measure-fold.py <Snapshot> <fold>. Überprüfe bei Video ein Frame, in dem der Kopf am höchsten ist.
2. 4px-Raster. Jeder Abstand, Zwischenraum, Offset, jede Größe und Zeilenhöhe ist ein Vielfaches von 4. Container haben gleichmäßige Abstände und passen sich dem Inhalt an; gib einer Karte niemals eine feste Höhe. Führe scripts/audit-grid.sh <Projekt> aus; die einzigen erlaubten Ausnahmen sind Haarrandlinien, Glühradien und Tween-Bewegungs-Offsets.
3. Stabile Serife. Verwende nur die *-opsz18.woff2 Bodoni-Dateien in fonts/. Die variable Schriftart wählt automatisch dünne optische Größen für Displays, die nach H.264 und Handy-Downscaling verschwinden. Wechsle niemals zurück zur variablen Datei oder zu Googles Bereich 6..96.
4. Zonen. App-Leiste 0–175 (frei halten), Animation 192–780, Bildunterschriften-Band 812–904, Präsentator unterhalb --fold, Inhalts-Spalte x 172–828 (frei von der rechten Schiene). Bildunterschriften leben auf nur einer Spur.
5. Eine kontinuierliche Diagramm-Welt. Elemente, die über Schritte hinweg bestehen, leben in diagram.html und bewegen sich. Sie treten nie in einer neuen Szenendatei wieder ein.
6. Determinismus. Verwende nur pausierte GSAP-Timelines, die auf window.__timelines["<id>"] registriert sind. Verwende gesäten rng() oder hh() anstelle von Math.random und kein requestAnimationFrame, keine Uhren oder Netzwerk. Animierte Zähler und Partikel sind reine Funktionen eines Proxy-Tween-Werts.
7. Lint-sicherer Aufbau.
   • Ziel auf das eigene Root einer Unterkomposition mit document.querySelector('[data-composition-id="<id>"]:not([data-composition-src])'), niemals #root (mehrere Roots teilen diese ID, wenn sie zusammengesetzt sind).
   • Präfixiere Element-IDs mit der Komposition (dg-, hd-, rs-, ti-).
   • Verwende ein fromTo pro Element-Eigenschafts-Paar, dann to.
   • Tweene niemals letterSpacing, width, height, top oder left; verwende Transforms und Opacity.
   • Verteile einzelne Labels, sodass sie im Ruhezustand nicht überlappen.
8. Aussehen. Fast schwarzer, warmer Hintergrund mit treibendem Licht und Körnung; .glass für jedes Panel; goldener Schimmer auf Akzenten; kleine Kamera-Drift bei jedem Halten; halte jeden fertigen Zustand mindestens 1 s.

5. Prüfen, dann ausliefern

Führe diese Befehle vom Projektverzeichnis aus aus:

npx --yes [email protected] check
npx --yes [email protected] snapshot --at <der Mittelpunkt jedes Abschnitts>

• check muss mit 0 Fehlern bestehen. Überprüfe alle Warnungen.
• Sieh dir das Kontaktblatt an. Beschneide und zoome jedes dichte Bild: Achte auf Überlappungen, abgeschnittenen Text, falsch platzierte Tokens und ungleichmäßige Abstände.
• Führe measure-fold.py und audit-grid.sh aus und behebe alles, was sie beanstanden.
• Rendere mit npx --yes [email protected] render; das Ergebnis liegt in renders/.
• Erstelle eine freigegebene Kopie unter 30 MB für die Telefonansicht: ffmpeg -i renders/<Datei>.mp4 -c:v libx264 -crf 23 -preset slow -pix_fmt yuv420p -movflags +faststart renders/<slug>-share.mp4
• Live-Player: Führe vom Projektstamm node viewer/build.mjs aus. Es erstellt den Live-Player jedes Reels neu (reel/ plus jedes reels/<slug>/) und schreibt das Karussell viewer/index.html mit einer Kopie pro Reel in viewer/reels/. Veröffentliche viewer/index.html im Reel-Library-Artifact https://claude.ai/artifact/Joet84qdr6Kb47vYZzc8YR und übergebe alle viewer/reels/*.html in files. Der Benutzer bevorzugt den Live-HTML-Player gegenüber einem eingebetteten Video. Für ein einzelnes Reel allein schreibe node build-preview.mjs in dessen Ordner dist/preview.html.
• Berichte die Laufzeit, was geprüft wurde (Frames, Faltlücken, Audit) und alles, was noch nicht verifiziert ist.

Referenz

• references/primitives.md: jeder visuelle Grundbaustein mit der Datei, die ihn implementiert.
• template/: das vollständige Upcycling-Reel. Es ist die Qualitätslatte; vergleiche neue Arbeit damit.