# 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.
Canonical: https://bmad-plus.rochetta.fr/de/docs/packs/animated/
Language: de
BMAD+ version: 0.23.1
Documentation reviewed: 2026-10-19
Author: Laurent Rochetta
License: MIT
BMAD+ Dokumentation › [Packs](https://bmad-plus.rochetta.fr/de/docs/packs/) › Animated-Pack: ein MP4 in eine scrollgesteuerte Website verwandeln
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.
## Wann du es brauchst
- Du hast schon ein gutes MP4 von 5 bis 30 Sekunden und willst eine Seite darum herum, keine Allzweck-Website.
- Du akzeptierst eine Seite aus einer einzigen HTML-Datei mit eingebetteten Stilen und Skripten und mehreren Megabyte Bildern.
- Nicht für inhaltsreiche Websites mit vielen Seiten und nicht, wenn eine strenge Content-Security-Policy eingebetteten Code verbietet.
## Was installiert wird
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.
## Der Ablauf in fünf Schritten
1. 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.
2. 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.
3. 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).
4. Die Website bauen: eine HTML-Datei mit dem ganzen Designsystem, der Canvas-Animation und den Abschnitten.
5. Lokal ausliefern und prüfen, dann bei Geschwindigkeit, Farben und Text nachbessern, bis es passt.
**Empfohlene Frame-Zahl nach Videolänge**
| Videolänge | Frames | Scroll-Höhe |
| --- | --- | --- |
| 0 bis 5 s | 60 bis 90 | 400vh |
| 5 bis 15 s | 100 bis 150 | 650vh |
| 15 bis 30 s | 150 bis 200 | 800vh |
| ab 30 s | auf 200 begrenzt | 900vh |
### Das integrierte Designsystem
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.
## Schnellstart
1. **FFmpeg selbst installieren** 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.
```sh
winget install FFmpeg
```
2. **Das Pack installieren** Core wird automatisch ergänzt. Unter macOS installierst du FFmpeg statt mit der Zeile oben mit `brew install ffmpeg`.
```sh
npx bmad-plus install --packs animated
```
3. **Die Website anfragen und den Videopfad nennen** Nenne das Konzept (Produkt, Immobilie, Portfolio) und, falls vorhanden, Markenfarben und Abschnittstexte.
```sh
Verwandle product-demo.mp4 in eine animierte, scrollgesteuerte Website für den Launch einer smarten Lampe.
```
## Beispiele zum Kopieren
### Die ganze Website aus einem Video bauen
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**
```text
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**
```text
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**
```text
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.
### Das Scroll-Gefühl abstimmen
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**
```text
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).
### Das Gewicht der Frames senken
Nutze es, wenn die Desktop-Frames 10 MB überschreiten oder die Seite langsam lädt.
**In deinem KI-Assistenten**
```text
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**
```text
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.
## Was es schreibt und wo
**Ausgabe eines Builds**
| Pfad | Inhalt |
| --- | --- |
| `