tzezhang1-crypto/claude-motion-explainer-video

Motion-Design (HyperFrames Edition)

Die HyperFrames-Dokumentation lehrt die API, diese Datei regelt den Stil. Die untenstehenden Zahlen stammen aus einem tatsächlich veröffentlichten Projekt – behandeln Sie sie als Standardwerte: Abweichungen sind erlaubt, müssen aber bewusst und nicht zufällig sein.

Adaptiert von whaleyxbt/claude-motion's motion-design-Skill (MIT, siehe LICENSE im selben Ordner). Die Originalversion war für Remotion; diese Version wurde für HyperFrames (HTML + GSAP) umgeschrieben und um Regeln für traditionelles Chinesisch (Traditionelles Chinesisch) ergänzt. Mit "(Diese Version neu)" markierte Abschnitte sind nicht im Original enthalten.

1. Arbeitsteilung mit offiziellen HyperFrames-Skills (Diese Version neu)

Auf diesem Rechner sind auch die offiziellen HyperFrames-Skills von HeyGen installiert (hyperframes, hyperframes-core, hyperframes-animation etc.). Die Arbeitsteilung ist wie folgt:

• Offizielle Skills regeln das "Wie": Projektstruktur, data-*-Attribute, API-Schreibweise, Ablaufrouting, vorgefertigte Registry-Komponenten. Bei Konflikten zwischen API-Schreibweise und dieser Datei hat die offizielle Vorrang.
• Diese Datei regelt den "Stil": Easing, Rhythmus, Verweildauer, Schriftarten, Farbgebung, chinesische Typografie. Wenn die Regeln/Blueprints des offiziellen hyperframes-animation verwendet werden, haben die Zeit- und Easing-Werte dieser Datei Vorrang.
• Überprüfung: Immer über review-loop, das bereits den offiziellen hyperframes check enthält.

2. Harte Regeln für HyperFrames (Diese Version neu)

Verstöße führen zu Flackern, Versatz oder inkonsistenten Ergebnissen in der Ausgabe:

• Die Zeit wird durch HTML bestimmt: Jede Szene ist ein Element mit class="clip", das data-start und data-duration für die Zeitachse setzt. Das Wurzelelement benötigt data-composition-id und eine explizite data-duration.

• Bewegungen werden von GSAP gesteuert: gsap.timeline({ paused: true }), registriert unter window.__timelines["<composition-id>"], wobei der Schlüssel mit data-composition-id übereinstimmen muss.

• Jeder wichtige Tween erhält eine explizite Position (drittes Argument); wenn beide Enden wichtig sind, verwenden Sie fromTo(), da die Ausgabe seekend erfolgt.

• Ändern Sie nur transform und opacity; vermeiden Sie wiederholte Änderungen an top/left/width/height.

• Verboten: CSS transition/@keyframes, Date.now(), requestAnimationFrame, setTimeout, nicht gesäte Math.random(), Ressourcen, die erst während der Ausgabe gefetcht werden.

• Verwenden Sie kein Skript zum Abspielen, Pausieren oder Suchen von Audio/Video, und blenden Sie Clips auch nicht per Skript zeitabhängig ein/aus. Überlassen Sie dies den data-Attributen. Um ein Video zu bewegen, bewegen Sie das äußere Wrapper-Element.

• Zufallszahlen immer mit einer gesäten Funktion:

  function rand(seed) { let t = (seed += 0x6D2B79F5); t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }
  

3. Zeit an einem Ort konzentrieren

• Jeder Takt ist ein benannter Zeitpunkt (in Sekunden), gruppiert nach Szene (s1, s2…), geschrieben in der timeline.js im Projektstammverzeichnis:

  window.TL = {
    s1: { start: 0, title: 0.3, items: [1.2, 1.45, 1.7], exit: 3.6 },
    s2: { start: 3.4, drawOn: 3.5, hook: 5.2, end: 8 },
  };
  

  In index.html wird timeline.js vor allen Composition-Skripten geladen: <script src="timeline.js"></script>.

• GSAP-Positionsparameter werden immer aus TL bezogen (z. B. TL.s1.title, TL.s1.exit + 0.05); keine fest codierten Sekunden in Szenen.

• Die data-start/data-duration des Szenen-Wrappers müssen mit den Szenengrenzen in TL übereinstimmen. Bei Neubemessung zuerst timeline.js ändern, dann diese Attribute synchronisieren.

• Ton und Voiceover werden mit <audio data-start="…"> auf denselben Takten platziert. Die Screenshot-Zeiten von review-loop werden ebenfalls aus TL bezogen, sodass Bild, Ton und Prüfung gemeinsam laufen.

• Alle Bilder werden nur durch die Zeit bestimmt, siehe Abschnitt 0.

4. Easing

Die vier Kurven des Originals werden in GSAP mit CustomEase präzise rekonstruiert. Laden Sie gsap@3/dist/CustomEase.min.js und registrieren Sie es mit gsap.registerPlugin(CustomEase):

CustomEase.create("enter", "0.16,1,0.3,1");   // easeOut
CustomEase.create("exit",  "0.6,0,0.9,0.35"); // easeIn
CustomEase.create("move",  "0.65,0,0.35,1");  // easeInOut
CustomEase.create("land",  "0.55,0,0.2,1.12"); // overshoot

Kurve	Verwendung	Nächstgelegener eingebauter Name
enter = bezier(0.16, 1, 0.3, 1)	Einblenden, Enthüllen, alles "Ankommende"	expo.out (fast identisch)
exit = bezier(0.6, 0, 0.9, 0.35)	Ausblenden: schnell, ohne Schleifen	etwa power3.in
move = bezier(0.65, 0, 0.35, 1)	Bewegung zwischen zwei Zuständen (Umdrehen, Andocken, Verformen)	power2.inOut (exakt identisch)
land = bezier(0.55, 0, 0.2, 1.12)	"Einrastende" Werte (Schieberegler rastet an einer Position ein)	Keine gute eingebaute Alternative; bitte CustomEase verwenden

ease: "none" (linear) nur für kontinuierliche Bewegungen: Drehung, Drift, Partikel, Sekundenzeiger.

Wenn eine Animation einem anderen Wert folgen soll (z. B. Untertitel folgen der Schiebereglerposition), treiben Sie einen Proxy-Objekt mit demselben Tween und leiten Sie im onUpdate ab. Geben Sie ihm keine separate Uhr.

5. Elastizität

Das Original verwendete physikalische Federn in Remotion; GSAP hat keine Federphysik. Die folgende Tabelle enthält die in dieser Version gewählten Näherungswerte (Diese Version neu, nicht aus dem Original). Überprüfen Sie die Haptik nach der Ausgabe mit dem review-loop:

Haptik	GSAP-Einstellung	Verwendung
Standard-Einrasten	back.out(1.2), 0.6 s	Allgemeines UI-Einblenden
Schwer, stabil	power3.out, 0.8–1.0 s	Große Panels, Rückspulung
Drehknopf rastet ein	back.out(1.7), 0.35 s	Steuerelement springt zu einer Position
Herausspringen	back.out(2.2), 0.45 s	Anmerkungen, Abzeichen, Erfolgspunkte
Elastischer Akzent	elastic.out(1, 0.4), 0.9 s	Einmaliger Höhepunkt pro Video (nur einmal verwenden)

Dinge mit physischer Präsenz (UI, Objekte) verwenden Elastizität; Text und kamerabewegungsähnliche Bewegungen verwenden Bezier-Kurven.

6. Rhythmus

• Staffelung: Englische Wörter etwa 0,09 s; chinesische Zeichen einzeln etwa 0,04–0,05 s, pro Wort etwa 0,09 s (chinesischer Teil: Diese Version neu); Listenelemente und Tags etwa 0,2–0,25 s; Ringe und Punkte etwa 0,06 s.
• Text-Enthüllung etwa 0,8 s, mit Maske: äußere Schicht overflow: hidden, innere Schicht yPercent: 100 → 0 plus leichte Drehung (rotation: 3 → 0).
• Ausblenden etwa halb so lang wie Einblenden (0,35–0,55 s gegenüber 0,7–1,25 s), Ausblenden mit der exit-Kurve.
• Szenen überlappen sich: Die nächste Szene beginnt, bevor die vorherige vollständig verschwunden ist (z. B. s2.drawOn 4,02 s vor s1.flipEnd 4,4 s). Ein harter Schnitt mit Leerraum wirkt wie "lädt".
• Tippen etwa 0,035 s pro Zeichen; Leerlaufcursor blinkt mit etwa 2,4 Hz (mit steps oder set auf der Zeitachse, kein Timer).
• Lesepause: Jeder Zustand, der gelesen werden soll, muss nach dem Einrasten anhalten. Kurze Sätze mindestens 1 s; bei mehr als drei Wörtern etwa 0,25 s pro zusätzlichem Wort; bei Chinesisch etwa 0,25 s pro 4 zusätzlichen Zeichen (Diese Version neu). Der letzte Satz mindestens 2 s. Die 22-Sekunden-Version des Originals existiert, weil die Schrift in der 15-Sekunden-Version zu schnell blinkte: Im Zweifel länger anhalten, weniger bewegen.

7. Typografie

• Maximal drei Schriftfamilien: Serifen-Schrift für Auszeichnungen, serifenlose Schrift für UI, Monospace (für Tags, Prompt-Text, Zahlen).
  • Englisch (Original): Instrument Serif / Inter / JetBrains Mono.
  • Traditionelles Chinesisch (Diese Version neu): Noto Serif TC / Noto Sans TC, Zahlen und Tags mit JetBrains Mono. Schriftdateien im Projekt im Ordner assets/fonts/, geladen per @font-face; keine Systemschriftarten (sie variieren von Computer zu Computer).
• Englische Auszeichnungsschrift groß (auf einer 1080 breiten Leinwand etwa 138 px), enge Laufweite (-0.02em), line-height: 1.
• Chinesische Auszeichnungsschrift (Diese Version neu): Auf 1080 etwa 96–120 px, nicht mehr als etwa 12 Zeichen pro Zeile, Laufweite 0 bis 0.02em (kein negativer Abstand bei Chinesisch), line-height: 1.15–1.25.
• Ein Fokuspunkt pro Zeile: Englisch ein kursives Wort mit Akzentfarbe; Chinesisch hat keine echte Kursivschrift, daher Akzentfarbe plus Fettdruck für den Fokus (Diese Version neu).
• Monospace-Tags: Großbuchstaben, letter-spacing: 0.2–0.24em, Farbe abgeschwächt. Sie sind nur Dekoration; lesen Sie unbedingt notwendige Informationen groß.
• Handy-Test: Bei 360 px Breite (tatsächliche Größe in sozialen Medien-Feeds) müssen wichtige Nachrichten noch lesbar sein. Mit Kontaktbogen prüfen.

8. Farbgebung

• (Diese Version neu) Die gesamte Animation wird mit drei Farben grundiert, wie ein Präsentationslayout, die vom Benutzer festgelegt werden: Hintergrundfarbe bg, Hauptfarbe fg (Text und Linien), Akzentfarbe accent, geschrieben in der theme.json des Projekts und über das theme.py-Skript des motion-explainer (oder der bildverstärkten Version motion-explainer-images)-Skills angewendet. Die Akzentfarbe nur für "Antworten, Schlussfolgerungen, Schlüsselzahlen, Kapitelkarten".
• Farbpalette als CSS-Variablen in :root definieren (--bg, --ink, --muted, --accent…); keine neuen Farbcodes in Szenen einführen.
• Nur eine Akzentfarbe, und sie muss Bedeutung haben: Das veränderte Element, die Antwort, der Gewinner. Wenn alles betont wird, wird nichts betont.
• Leuchten wird durch den Zustand gesteuert, nicht durch die Zeit (glow = effort); Licht sollte die Geschichte erzählen.

9. Textur: Nichts ist völlig still

• Filmkörnung: SVG feTurbulence-Filter als Overlay, Opazität etwa 0,09, alle zwei Frames den seed wechseln (auf der Zeitachse mit set geplant, Seed aus der Framenummer berechnet).
• Vignettierung + Punktgitter, driftet einige Pixel pro Sekunde: radial-gradient für Vignettierung, Gitter mit einem linearen Tween über die gesamte Animation.
• Handgezeichnete "Linienzittern" (feTurbulence + feDisplacementMap, ebenfalls alle zwei Frames Seed wechseln): Für Skizzen-Optik, geringen Fertigstellungsgrad, beim Qualitätssprung ausblenden.
• Idle-Elemente sollen atmen: Laufende Uhr, blinkender Cursor, langsame Drehung.

10. Kohärenz und Übergänge

• Lieber Objekte fortsetzen als hart schneiden. Im Original durchqueren die Hinweiszeile, Funken und der Schieberegler Szenen und ändern ihre Rolle – das ist der Unterschied zwischen "durchdacht" und "zusammengestoppelt". In HyperFrames platzieren Sie szenenübergreifende Objekte in der Root-Composition, nicht innerhalb einer Szene.
• Jeder Übergang muss durch ein Objekt auf dem Bildschirm motiviert sein (fünf Ergebnispunkte verschmelzen zu einem, werden dann zu einem Lichtkreis). Keine standardmäßigen Wipe-Übergänge.
• Geschwindigkeit nutzen: Bewegungsunschärfe und Stauchung aus "Differenz zwischen diesem und dem vorherigen Frame" ableiten; keine künstlichen Effekte.
• Jede Animation ein Höhepunkt (Lichtkreis + Einschlag). Es darauf aufbauen, nicht zu früh verbrauchen.

11. Anti-Patterns

• Alles gleichzeitig einblenden oder alles mit derselben Dauer.
• Lineares Easing für Dinge mit Start und Stopp.
• Text bewegt sich noch, während er gelesen werden soll.
• Mehr als ein Fokuspunkt in einem Frame.
• Inhalt näher als etwa 60 px am Bildschirmrand (Sicherheitszone), es sei denn, es ist eine bewusste Beschneidung.
• Frame 0 ist leer oder schwarz: Soziale Medien spielen stumm und automatisch ab; der erste Frame ist das Thumbnail.
• (Diese Version neu) Steuerung von Audio-/Videowiedergabe oder Clip-Anzeige per Skript, Verwendung von CSS-Animationen, nicht gesäter Zufall, siehe Abschnitt 0.

Ablauf

1. Takte zuerst in timeline.js schreiben (Storyboard mit Zahlen), Rhythmus mit dem Benutzer bestätigen, bevor mit der Arbeit begonnen wird.
2. Projekt mit kinocuts hyperframes_init erstellen; jede Szene ist eine Composition in compositions/, gemeinsame Komponenten und szenenübergreifende Objekte in index.html.
3. Nach jeder sinnvollen Änderung das review-loop-Skill ausführen.
4. Ton erst bearbeiten, nachdem die Bildzeiten feststehen: Soundeffekte und Musik mit <audio data-start> auf die TL-Takte legen. Akzent und Emotion des chinesischen Voiceovers vom Benutzer nach Gehör beurteilen lassen; kein ASR oder Ähnlichkeits-Score als Ersatz (Diese Version neu).