carousel-mp4

Karussell → animiertes MP4

Dieses Skill verwendet das instagram-carousel-Skill wieder (es muss unter ~/.claude/skills/instagram-carousel installiert sein; im Folgenden <ic> genannt). Die finale Ausgabe ist ein MP4, nicht die PNGs.

Arbeitsablauf

1. Erstelle das Karussell wie gewohnt: Befolge die Schritte 1 bis 4 von <ic>/SKILL.md (Brief, Archetyp, visuelles System, Skript und HTML). Es gelten alle Regeln: Kontinuität zwischen den Slides, neue Schriftarten, 2+1-Palette und Design-Review.

   • Frage vor dem Design immer nach der Ausrichtung, auch wenn die Anfrage sie nicht erwähnt (Multiple-Choice-Frage):

     • Vertikal: Reels/Stories 9:16 (1080×1920, --reels) oder Feed 4:5 (1080×1350, kein Flag);
     • Horizontal: 16:9 (1920×1080, --landscape), für YouTube, eine Website oder Bildschirme.

     Die Ausrichtung ändert die gesamte Komposition (Raster, Größen, Safe Zone), wähle sie daher niemals standardmäßig. Horizontal funktioniert nur im Motion-Graphics-Modus.

   • Frage auch nach dem Stil: Slides (die automatische Choreographie: Kamerafahrt zwischen den Slides) oder Motion Graphics (kinetische Typografie und abwechslungsreiche Übergänge, damit es nicht wie Slides aussieht). Wenn der Nutzer sagt, das Ergebnis „sieht aus wie Slides“ oder wünscht sich etwas Dynamischeres, verwende Motion Graphics. Siehe references/motion.md.

   • Und nach dem Ton: eingebaute Effekte (Standard), Openverse-Effekte, Openverse-Musik, die Dateien des Nutzers oder kein Ton.

2. Lies <ic>/references/video.md: Choreographie, Steuerung der Animation mit data-anim/data-delay, Ton und Prüfungen.
3. Passe die Choreographie im HTML an falls nötig. Die Animation ist automatisch, aber data-anim und data-delay ermöglichen eine Feinabstimmung der Schlüsselmomente.
4. Prüfe mit Standbildern vor dem vollständigen Video (schnell):

   node <ic>/scripts/video.mjs <output>/carousel.html <output>/carousel.mp4 --stills=0.6,1.5,3,4.2,6
   

   Öffne die JPEGs in <output>/carousel-stills/ und bestätige, dass am Ende jedes Eingangs nichts abgeschnitten, überlappend oder unsichtbar ist.
5. Ton (optional, siehe video.md › Ton):
   • Openverse: node <ic>/scripts/sounds.mjs search "whoosh" --type=sfx. Zeige die Optionen dem Nutzer und führe mit seiner Erlaubnis node <ic>/scripts/sounds.mjs download <id> <output>/sounds/whoosh-1.mp3 aus.
   • Dateinamen bestimmen die Verwendung: whoosh* (Übergänge), pop* (Sticker/Pills), hit* (Titel). Verwende mehrere pro Typ (whoosh-1.mp3, whoosh-2.mp3…), damit die Übergänge nicht immer gleich klingen; sie rotieren ohne direkte Wiederholungen. Musik kommt separat.
   • Ohne Dateien variieren die eingebauten Effekte bereits von selbst (5 Whooshes, 3 Pops, 3 Hits, mit zufälliger Tonhöhe und Länge).
6. Rendere das MP4:

   node <ic>/scripts/video.mjs <output>/carousel.html <output>/carousel.mp4 [--reels] [--sfx=<output>/sounds] [--music=<output>/sounds/music.mp3]
   

   Kein ffmpeg nötig: Es verwendet Chrome (GSAP + WebCodecs). Etwa 30–60 s für 20–30 s Video. Führe es im Hintergrund aus, wenn es lange dauert.
7. Liefere aus:
   • carousel.mp4 (H.264 + AAC, bereit für Instagram/Reels)
   • caption.txt (Bildunterschrift, Hashtags, Keywords)
   • einen Hinweis: Länge, Format, verwendete Sounds (und woher sie stammen, aus sounds/sound-sources.txt) und noch zu ersetzende Platzhalter

Liefere die PNGs nicht aus, es sei denn, der Nutzer verlangt sie. Wenn doch, verwende render.mjs wie im Basis-Skill.