Animated-Pack: ein MP4 in eine scrollgesteuerte Website verwandeln
Der Animated Website Creator macht aus einem Video in fünf Schritten eine scrollgesteuerte Seite: Analyse, Extraktion, sechs Abschnitte, Bau, Vorschau. Voraussetzungen, sechs Beispiele, Grenzen.
Das Animated-Pack installiert den Animated Website Creator, einen Agenten, der ein kurzes MP4 in eine einzelne Webseite verwandelt, in der das Video beim Scrollen Bild für Bild abläuft, mit Textabschnitten, die darüber ein- und ausblenden. Das ist das Muster hochwertiger Produktseiten. Der Agent erledigt die ganze Kette: Er prüft das Video, extrahiert optimierte Bilder, schreibt die Seite mit einem integrierten Designsystem und liefert sie lokal zur Vorschau aus. Es passt zu einem Produktlaunch, einer Immobilienpräsentation, einem Portfolio oder jeder Schaufenster-Seite, deren Geschichte ein gutes Video trägt.
Ein gepacktes Pack in .agents/skills/pack-animated/: die Agentendatei animated-website-agent.md (Ablauf, Designsystem, Code-Architektur, Qualitäts-Checkliste, Fehlersuche) und eine Workflow-Vorlage templates/animated-website-workflow.md. Der Agent reagiert auf Anfragen wie animated website, scroll animation, video to website, convert video to website oder luxury website from video.
Das Video mit ffprobe analysieren und Dauer, Auflösung, Bildrate, Gesamtzahl der Frames und Codec vorlegen. Der Agent empfiehlt eine Frame-Zahl und bittet um Bestätigung, bevor er etwas extrahiert.
Frames als WebP mit zwei ffmpeg-Befehlen extrahieren und optimieren, einer je Größe: Desktop 1920 mal 1080 und Mobil 960 mal 540, dazu ein manifest.json. Das Datenbudget liegt unter 10 MB für Desktop und unter 5 MB für Mobil.
Den Inhalt von sechs Overlay-Abschnitten vorbereiten: Hero (Name, Slogan, Kennzahlen), Vision (ein Zitat), Details (Merkmale mit Icons), Grid (vier bis sechs Karten), Context (Ort oder Nebeninformationen) und CTA (Handlungsaufforderung und Kontakt).
Die Website bauen: eine HTML-Datei mit dem ganzen Designsystem, der Canvas-Animation und den Abschnitten.
Lokal ausliefern und prüfen, dann bei Geschwindigkeit, Farben und Text nachbessern, bis es passt.
Die Seite bringt ein festes Erscheinungsbild mit, das der Agent an dein Thema anpasst (Immobilie, Tech-Produkt, Portfolio, Restaurant, Automobil ändern Akzentfarbe, Hero-Inhalt, Kennzahlen und Handlungsaufforderung). Die Zutaten: eine warme dunkle Palette, eine Serifenschrift für Überschriften und eine serifenlose für Text, Karten im Glaseffekt, eine Overlay-Schicht aus Filmkorn und Vignette, schwebende Partikel, ein eigener Cursor am Desktop, Kapitelmarker, ein markenbezogener Ladebildschirm mit Fortschrittsbalken und eine Scroll-Verweil-Engine: Statt Scrollen linear auf Frames abzubilden, bremst sie vor jedem Textabschnitt, damit er lesbar bleibt. Ein Galerieabschnitt mit Parallaxe kann sechs oder sieben Frames des Videos nutzen.
BMAD+ installiert es nicht. Der Agent braucht ffmpeg und ffprobe im PATH, mit dem Encoder libwebp (ffmpeg -hide_banner -encoders muss ihn auflisten). Python 3 dient nur dem lokalen Vorschau-Server.
Im Terminal deines Projekts
winget install FFmpeg
02
Das Pack installieren
Core wird automatisch ergänzt. Unter macOS installierst du FFmpeg statt mit der Zeile oben mit brew install ffmpeg.
Im Terminal deines Projekts
npx bmad-plus install --packs animated
03
Die Website anfragen und den Videopfad nennen
Nenne das Konzept (Produkt, Immobilie, Portfolio) und, falls vorhanden, Markenfarben und Abschnittstexte.
Im Terminal deines Projekts
Verwandle product-demo.mp4 in eine animierte, scrollgesteuerte Website für den Launch einer smarten Lampe.
Der Beispielsatz des Installers lautet „animated website from hero.mp4“. Es gibt keinen Befehl /animated: Der Agent antwortet auf Anfragen wie diese.
In deinem KI-Assistenten
Verwandle product-demo.mp4 in eine animierte, scrollgesteuerte Website. Das Produkt ist die smarte Lampe Lumen, Marktstart im März. Akzentfarbe #2563eb, Handlungsaufforderung „Vorbestellen“.
Das solltest du erhalten Der Agent zeigt die Videoanalyse, empfiehlt eine Frame-Zahl und bittet um Bestätigung. Dann extrahiert er die WebP-Frames (Desktop und Mobil mit Manifest), baut die Seite mit den sechs Abschnitten und dem Designsystem und liefert sie lokal zur Vorschau aus. Rechne danach mit Nachbesserungen bei Tempo und Text.
Nur das Video analysieren, noch nichts extrahieren#
Nutze es, um das Projekt zu bemessen, bevor du dich auf ein Datenvolumen festlegst.
In deinem KI-Assistenten
Analysiere hero.mp4 mit ffprobe und empfiehl eine Frame-Zahl und Scroll-Höhe. Extrahiere nichts, bevor ich bestätige.
Das solltest du erhalten Ein Block mit Dauer, Auflösung, Bildrate, Gesamtzahl der Frames und Codec, dann die Empfehlung aus der Tabelle oben (bei einem 12-Sekunden-Video: 100 bis 150 Frames und 650vh Scroll-Höhe). Der Agent wartet auf dein Okay.
Das Thema an eine Immobilienpräsentation anpassen#
Die Themenübersicht des Agenten deckt Immobilie, Tech-Produkt, Portfolio, Restaurant und Automobil ab.
In deinem KI-Assistenten
Baue aus villa-tour.mp4 eine luxuriöse animierte Website für einen Immobilienverkauf. Hero: Name der Villa und Preis. Kennzahlenleiste: Fläche, Schlafzimmer, Bäder. Handlungsaufforderung: „Besichtigung planen“. Abschnitt Context: Entfernungen zu Strand und Flughafen.
Das solltest du erhalten Die sechs Abschnitte werden mit deinem Inhalt im Immobilien-Layout gefüllt: Name und Preis im Hero mit Glas-Kennzahlenleiste, ein Zitat in Vision, die Merkmalsliste in Details, ein Kartenraster, Entfernungen in Context und ein Besichtigungs-CTA mit Kontaktkarte.
Der Agent kennt die Stellschrauben hinter gängigen Wünschen; sag, was du empfindest, und er passt die passende Einstellung an.
In deinem KI-Assistenten
Das Scrollen ist zu schnell und die Textabschnitte fühlen sich klebrig an. Mach das Scrollen langsamer und die Verweildauer schwächer.
Das solltest du erhalten Der Agent verlängert den Animationsabschnitt (zum Beispiel von 650vh Richtung 900vh für langsameres Scrollen) und senkt DWELL_PEAK (von 3,5 Richtung 2,5) für ein weniger klebriges Verweilen. Für flüssigere oder reaktivere Frames ändert er LERP_FACTOR (0,09 Richtung 0,05 für flüssiger, Richtung 0,15 für reaktiver).
Nutze es, wenn die Desktop-Frames 10 MB überschreiten oder die Seite langsam lädt.
In deinem KI-Assistenten
Die Desktop-Frames wiegen 14 MB. Bring sie mit geringerer Qualität oder weniger Frames unter das Budget von 10 MB und sag mir, was sich geändert hat.
Das solltest du erhalten Der Agent extrahiert erneut mit geringerer Qualität (etwa 60 statt 80) oder weniger Frames (etwa 90) und meldet dann das neue Volumen für Desktop und Mobil gegenüber den Budgets von 10 MB und 5 MB.
Die Qualitäts-Checkliste vor der Lieferung durchgehen#
Der Agent hat eine Checkliste vor der Lieferung; bitte ihn, sie durchzugehen und ehrlich zu melden, was er prüfen konnte und was nicht.
In deinem KI-Assistenten
Geh vor meiner Veröffentlichung deine Qualitäts-Checkliste für die gebaute Website durch. Sag zu jedem Punkt, ob du ihn durch Ausführen geprüft oder nur den Code gelesen hast.
Das solltest du erhalten Die Liste umfasst: flüssige Animation ohne Ruckeln, erster Frame innerhalb einer Sekunde sichtbar, funktionierender Lader, Datenvolumen im Budget, reduzierte Bewegung mit Standbild, keine leeren Frames, responsives Canvas, eigener Cursor, Partikel, die sechs ein- und ausblendenden Abschnitte, animierte Hero-Buchstaben, lesbare Kennzahlenleiste, Galerie mit Parallaxe, natürliches Verweilgefühl und aktualisierte Kapitelmarker. Nur ein Lauf im Browser kann das Visuelle bestätigen.
Auf deinem Rechner nötig: FFmpeg und FFprobe mit dem Encoder libwebp sowie ein Quell-MP4. Python 3 wird nur für den Vorschau-Server gebraucht (jeder statische Dateiserver genügt). Installiere FFmpeg mit winget install FFmpeg unter Windows oder brew install ffmpeg unter macOS.
Dein Video und die Frames bleiben lokal. Die Vorschau liefert python3 -m http.server 8080 auf deinem Rechner; die Auslieferung über HTTP umgeht auch die Beschränkungen des Browsers für lokale Dateien.
Bevor er die Seite erzeugt, fragt der Agent, wie Schriften geladen werden. Standard sind Systemschriften (Georgia für Überschriften, Systemschrift für Text), ohne externe Anfrage. Du kannst stattdessen .woff2-Dateien zum Selbsthosten liefern (Playfair Display und DM Sans stehen unter der SIL Open Font License; prüfe die Lizenz jeder anderen Schrift). Google Fonts wird nur auf ausdrücklichen Wunsch genutzt, nachdem der Agent gewarnt hat, dass dann der Browser jedes Besuchers Google kontaktiert und das einen Hinweis in der Datenschutzerklärung der Website nötig machen kann. Diese Anfrage gehörte zur erzeugten Website, nicht zu BMAD+.
Hinweis· Die Frames stammen aus zwei FFmpeg-Befehlen, nicht aus einem Skript
Das Pack liefert kein Extraktionsskript. Der Agent führt je Größe einen ffmpeg-Befehl aus, mit fps=N/D-Abtastung, libwebp-Qualität 80 und Nummerierung ab frame-0000.webp, schreibt dann frames/manifest.json und prüft, dass jeder Ordner N Dateien enthält. Eine Quelle, die nicht 16:9 ist, wird skaliert und beschnitten, um den Rahmen zu füllen; bei einem Hochformat-Video fragt der Agent vor dem Extrahieren nach dem gewünschten Ausschnitt. Ohne den Encoder libwebp schlagen die Befehle fehl, prüfe also zuerst ffmpeg -hide_banner -encoders.
Warnung· Eine Datei mit eingebettetem Code
Die Seite ist eine einzelne HTML-Datei mit eingebetteten Stilen und Skripten. Eine Website mit strenger Content-Security-Policy ohne eingebetteten Code blockiert sie, sofern du die Datei nicht aufteilst und die Policy anpasst. Die Seite hängt außerdem vom Element canvas und vom Laden der Bilder ab; teste sie auf einem Mittelklasse-Smartphone.
Hinweis· Häufige Probleme
FFmpeg nicht gefunden: installieren und das Terminal neu öffnen. Kein WebP-Encoder: eine FFmpeg-Version verwenden, die libwebp auflistet. Ruckelnde Animation: weniger Frames, Pixelverhältnis auf 2 begrenzt, weniger Partikel. Weißer Blitz zwischen Frames: Extraktion und Rückfall auf den nächsten Frame prüfen. Leeres Canvas am Handy: prüfen, ob die Mobil-Frames existieren, und den Pfad des Frame-Ordners. Lader hängt: Ein Frame liefert 404, Konsole ansehen. Cross-Origin-Fehler lokal: über HTTP ausliefern statt die Datei zu öffnen.
Hinweis· Herkunft
Das Pack Animated Website wurde von Laurent Rochetta bei Oveanet, seiner Firma, geschrieben und in BMAD+ integriert.