madhavsomani/animation-skills

Canvas-Erklärvideo-Reel

Zuerst erstellt für ein Lebenslauf-Tipp-Reel im Oktober 2026, dann als wiederholbare Formel gespeichert.

• Funktionsbeispiel: template/example-08-resume.html (die vollständige HyperFrames-Komposition dieses Reels; seine Medien-Assets sind nicht enthalten).
• Screenshots: ../../docs/canvas-explainer/.

Geltende Grundregeln: Den Avatar nur kurz auf dem Bildschirm zeigen (ca. 3-4 s pro Auftritt) und nur die Vollqualität-Masterdatei ausliefern. Engine: HyperFrames (fixiere [email protected]). FFmpeg nur für Vorbereitung und Qualitätssicherung.

Die Formel (alles beibehalten)

1. Eine endlose schwarze Leinwand. Verwende #world mit 2400x6400 und einem dezenten Punktraster. Die Kamera schneidet nie; sie gleitet mit power3.inOut und einer kurzen Bewegungsunschärfe bei großen Bewegungen.
2. Alles wird live gezeichnet, während das Wort gesprochen wird.
   • Marker-Striche sind SVG-Pfade mit einem groben feDisplacementMap-Filter.
   • Handschriftliche Beschriftungen verwenden Ink Free, getippt mit steps().
   • Farben: Weiß #f4f4ef, Gelb #ffd84a, Blau #6f8cff, Pink #ff6fae, Grün #7ee08a, Rot #ff4b3e.
   • Rote Pfeile und Kreise zeigen auf das Wesentliche.
3. Echte Tech-Artefakte, niemals nur generische Kritzeleien. Ein Software-Engineering-Publikum erwartet echte Architektur, Code, Terminals, echte Screenshots und echte Dokumente (z.B. einen geschwärzten Lebenslauf), annotiert mit Kästchen und Handschrift.
4. Avatar innerhalb von skizzierten Frames auf der Leinwand.
   • Frames sind 405x720 im Seitenverhältnis 9:16. Die Kamera zoomt in einen Frame hinein (s = 1080/405), sodass sein Filmmaterial Vollbild wird; dieser Zoom ist der Übergang. Annotiere über dem Filmmaterial in Handschrift.
   • Avatar gesamt bleibt unter 40% der Laufzeit (zielen Sie auf etwa 20%): ein Hook-Beat, ein mittlerer „persönlicher“ Beat, der Schluss.
5. Kein leerer Bildschirm.
   • Jede Region füllt die Ansicht von y 120-1500.
   • Rote Verbindungspfeile werden zwischen Regionen während der Kamerafahrten gezeichnet.
   • Eine gelbe Kopfzeile landet, wenn die Kamera ankommt.
   • Bildunterschriften sitzen bei y 1555-1720 in Ink Free 64px mit gelben Schlüsselwörtern. Umfasse den verbundenen HTML-Code der Bildunterschrift in einem inneren <span>, sonst lässt Flex die Leerzeichen weg.
6. Ende.
   • Die Kamera zoomt heraus auf die gesamte gezeichnete Karte (s ≈ 0.31) hinter einer abgedunkelten (0.58) Endkarte.
   • Der CTA wird gesprochen in seiner Stimme. Beispiel: „Willst du meinen Lebenslauf? Kommentiere ‚Lebenslauf‘, und ich schicke ihn dir als Vorlage.“ Zeige das Schlüsselwort groß in Gelb.
   • Sage den Zuschauern niemals, die geteilte Ressource nicht zu kopieren. Die Ressource gehört ihnen zur Nutzung.
7. Ton.
   • Ein Musikbett unter der Stimme, geschnitten mit ~/.claude/skills/hyperframes-audio/scripts/carve.mjs --comp index.html --core <Ordner mit node_modules/@hyperframes/core>. Weise --core auf einen beliebigen Projektordner, der @hyperframes/core installiert hat.
   • Hebe die Musik in Sprachpausen und beim Herauszoomen an.
   • SFX: Kugelschreiber-Klick bei Häkchen/Beschriftungen, Tippgeräusche bei Code, Seitenumblättern/Wusch bei Kamerafahrten, Schwirr-Platsch bei Einblendungen, Glockenspiel am Ende.
   • Musik muss Instagram-sicher sein (siehe Musik unten).

Aufbauschritte

1. Eingaben.
   • Sprach-WAV, normalisiert auf -16 LUFS: Hook + Erzählung, konkateniert.
   • Wortzeiten wort@Sekunden: ausgerichtetes JSON oder clips.json-Untertitel, gespeichert als words.txt.
   • Avatar-MP4, dessen Medienzeit = Sprechzeit minus Hook-Länge.
   • Bilder von echten Artefakten.
2. Storyboard-Regionen. Für jeden Beat wähle einen Weltursprung und liste seine Zeichnungen mit den Zeiten des gesprochenen Wortes auf. Halte Text innerhalb der 1080px-Ansicht (Ink Free ≈ 0,5 em pro Zeichen).
3. Kopiere template/example-08-resume.html in einen neuen Projektordner und ersetze die Regionsblöcke, Frames (Standbild-JPG unter jedem <video class="clip">), K Kamerakeyframes, Overlays (.ov) und die Endkarte.
   • Assets: assets/fonts/Inkfree.ttf (das Windows-Systemschriftart), IBM Plex Mono, gsap.min.js, SFX, Musik, die Standbild-Frames, package.json und hyperframes.json.
4. SFX. Füge die <audio>-Tags mit gierigem Track-Packing ein, sodass keine zwei auf einem Track überlappen (ein <audio> pro Cue; ein neuer Track-Index, wenn Cues überlappen würden). Führe dann carve aus.
5. Prüfung. Führe npx --yes [email protected] check aus, bis es bestanden wird. Kontrast-Flags bei absichtlich grauem Text sind akzeptabel.
6. Rendering. npx --yes [email protected] render -o renders/<name>.mp4.
7. Qualitätssicherung.
   • Kontaktbogen zu den Zeitpunkten der Kamerafahrten.
   • Vollständige Dekodierung, 1080x1920, CFR30, yuv420p.
   • Lautstärke um -14 bis -16 LUFS.
   • Avatar-Sekunden gezählt.
   • Jedes Bild auf leeren oder überlaufenden Text prüfen.
8. Auslieferung. Liefere die Vollqualität-Masterdatei (für Instagram, 1440x2560 H.264 mit bis zu ~24 Mbps und unter 300 MB). Verkleinere niemals die Auflösung oder Bitrate, nur um die Dateigrößenbeschränkung eines Uploaders einzuhalten; finde einen Weg, der das echte Master nimmt. Hochladen, Planung und Veröffentlichung benötigen die ausdrückliche Zustimmung des Eigentümers.

Musik (Instagram-sicher)

Die Instagram-eigene Musikbibliothek kann nicht an Beiträge angehängt werden, die über einen Drittanbieter-Planer oder die API geplant werden; sie kann nur in der Instagram-App beim manuellen Posten hinzugefügt werden. Für geplante Beiträge stattdessen lizenzfreie Musiktitel einbetten: den HeyGen-Audio-Katalog (search_audio_sounds, eine kostenlose Suche/Download, nicht Generierung) oder eine andere lizenzierte Bibliothek. Halte die Musik leise unter der Sprache. Wenn du einen trendigen Instagram-Sound verwenden möchtest, liefere eine Version mit stummgeschalteter oder leiser Musik aus, damit du den Sound beim manuellen Veröffentlichen in der App hinzufügen kannst.