# Pack Animated : transformer un MP4 en site animé au défilement
> L’Animated Website Creator transforme une vidéo en page pilotée par le défilement en cinq étapes : analyse, extraction, six sections, construction, aperçu. Prérequis, six exemples, limites.
Canonical: https://bmad-plus.rochetta.fr/fr/docs/packs/animated/
Language: fr
BMAD+ version: 0.23.1
Documentation reviewed: 2026-10-19
Author: Laurent Rochetta
License: MIT
Documentation BMAD+ › [Packs](https://bmad-plus.rochetta.fr/fr/docs/packs/) › Pack Animated : transformer un MP4 en site animé au défilement
Le pack Animated installe l’Animated Website Creator, un agent qui transforme un court MP4 en une seule page web où la vidéo se joue image par image au fil du défilement, avec des sections de texte qui apparaissent et disparaissent par-dessus. C’est le motif des pages produit haut de gamme. L’agent fait toute la chaîne : il inspecte la vidéo, extrait des images optimisées, écrit la page avec un système de design intégré et la sert en local pour que vous la prévisualisiez. Il convient à un lancement produit, une présentation de bien immobilier, un portfolio ou toute vitrine dont une bonne vidéo porte le récit.
## Quand l’utiliser
- Vous avez déjà un bon MP4 de 5 à 30 secondes et voulez une page construite autour de lui, pas un site généraliste.
- Vous acceptez une page faite d’un seul fichier HTML avec styles et scripts intégrés, et une charge de plusieurs mégaoctets d’images.
- Pas pour les sites riches en contenu avec de nombreuses pages, ni quand une politique de sécurité de contenu stricte interdit le code intégré.
## Ce qui est installé
Un pack empaqueté dans `.agents/skills/pack-animated/` : le fichier d’agent `animated-website-agent.md` (processus, système de design, architecture du code, liste de contrôle qualité, dépannage) et un modèle de workflow `templates/animated-website-workflow.md`. L’agent se réveille sur des demandes comme animated website, scroll animation, video to website, convert video to website ou luxury website from video, ou leurs équivalents français comme site animé et animation scroll.
## Le processus en cinq étapes
1. Analyser la vidéo avec `ffprobe` et présenter durée, résolution, cadence, nombre total d’images et codec. L’agent recommande un nombre d’images et vous demande de confirmer avant d’extraire quoi que ce soit.
2. Extraire et optimiser les images en WebP avec deux commandes ffmpeg, une par taille : bureau 1920 par 1080 et mobile 960 par 540, plus un `manifest.json`. Le budget de charge est inférieur à 10 Mo pour le bureau et à 5 Mo pour le mobile.
3. Préparer le contenu de six sections en surimpression : Hero (nom, accroche, chiffres clés), Vision (une citation), Details (caractéristiques avec icônes), Grid (quatre à six cartes), Context (lieu ou informations secondaires) et CTA (appel à l’action et contact).
4. Construire le site : un seul fichier HTML contenant tout le système de design, l’animation canvas et les sections.
5. Servir et prévisualiser en local, puis itérer sur la vitesse, les couleurs et le texte jusqu’à satisfaction.
**Nombre d’images recommandé selon la durée de la vidéo**
| Durée de la vidéo | Images | Hauteur de défilement |
| --- | --- | --- |
| 0 à 5 s | 60 à 90 | 400vh |
| 5 à 15 s | 100 à 150 | 650vh |
| 15 à 30 s | 150 à 200 | 800vh |
| 30 s et plus | plafonné à 200 | 900vh |
### Le système de design intégré
La page livre un style fixe que l’agent adapte à votre thème (immobilier, produit tech, portfolio, restaurant, automobile changent la couleur d’accent, le contenu du hero, les chiffres clés et l’appel à l’action). Ses ingrédients : une palette sombre chaude, une police à empattement pour les titres et une sans empattement pour le texte, des cartes à effet de verre, une surcouche de grain de film et de vignette, des particules flottantes, un curseur personnalisé sur bureau, des repères de chapitres, un écran de chargement de marque avec barre de progression, et un moteur d’arrêts de défilement : au lieu de relier linéairement défilement et images, il ralentit près de chaque section de texte pour qu’elle reste lisible. Une section galerie avec parallaxe peut utiliser six ou sept images de la vidéo.
## Démarrage rapide
1. **Installer FFmpeg vous-même** BMAD+ ne l’installe pas. L’agent a besoin de `ffmpeg` et `ffprobe` dans le PATH, avec l’encodeur `libwebp` (`ffmpeg -hide_banner -encoders` doit le lister). Python 3 ne sert qu’au serveur d’aperçu local.
```sh
winget install FFmpeg
```
2. **Installer le pack** Core est ajouté automatiquement. Sous macOS, installez FFmpeg avec `brew install ffmpeg` au lieu de la ligne ci-dessus.
```sh
npx bmad-plus install --packs animated
```
3. **Demander le site et donner le chemin de la vidéo** Indiquez le concept (produit, immobilier, portfolio) et, si vous en avez, les couleurs de marque et les textes des sections.
```sh
Transforme product-demo.mp4 en site animé au défilement pour le lancement d’une lampe connectée.
```
## Exemples à copier
### Construire tout le site à partir d’une vidéo
La phrase d’exemple de l’installateur est « animated website from hero.mp4 ». Il n’existe pas de commande /animated : l’agent répond à des demandes de ce genre.
**Dans votre assistant IA**
```text
Transforme product-demo.mp4 en site animé au défilement. Le produit est la lampe connectée Lumen, lancée en mars. Couleur d’accent #2563eb, appel à l’action « Précommander ».
```
**Ce que vous devriez obtenir** L’agent présente l’analyse de la vidéo, recommande un nombre d’images et vous demande de confirmer. Il extrait ensuite les images WebP (bureau et mobile avec un manifeste), construit la page avec les six sections et le système de design, et la sert en local pour l’aperçu. Prévoyez d’itérer ensuite sur la vitesse et le texte.
### Analyser seulement la vidéo, sans rien extraire
À utiliser pour dimensionner le projet avant de vous engager sur une charge.
**Dans votre assistant IA**
```text
Analyse hero.mp4 avec ffprobe et recommande un nombre d’images et une hauteur de défilement. N’extrais rien avant ma confirmation.
```
**Ce que vous devriez obtenir** Un bloc avec durée, résolution, cadence, nombre total d’images et codec, puis la recommandation du tableau ci-dessus (pour une vidéo de 12 secondes : 100 à 150 images et une hauteur de défilement de 650vh). L’agent attend votre feu vert.
### Adapter le thème à une présentation immobilière
La table de thèmes de l’agent couvre immobilier, produit tech, portfolio, restaurant et automobile.
**Dans votre assistant IA**
```text
Construis un site animé de luxe à partir de villa-tour.mp4 pour la vente d’un bien. Hero : le nom de la villa et son prix. Barre de chiffres : surface, chambres, salles de bain. Appel à l’action : « Planifier une visite ». Section Context : distances à la plage et à l’aéroport.
```
**Ce que vous devriez obtenir** Les six sections sont remplies avec votre contenu dans la mise en page immobilière : nom et prix dans le Hero avec une barre de chiffres en verre, une citation dans Vision, la liste des caractéristiques dans Details, une grille de cartes, les distances dans Context, et un CTA de prise de visite avec une carte de contact.
### Régler la sensation de défilement
L’agent connaît les réglages derrière les demandes courantes ; dites ce que vous ressentez et il ajuste le paramètre correspondant.
**Dans votre assistant IA**
```text
Le défilement est trop rapide et les sections de texte « collent ». Ralentis le défilement et adoucis l’arrêt.
```
**Ce que vous devriez obtenir** L’agent allonge la section d’animation (par exemple de 650vh vers 900vh pour un défilement plus lent) et abaisse `DWELL_PEAK` (de 3,5 vers 2,5) pour un arrêt moins collant. Pour des images plus fluides ou plus réactives il modifie `LERP_FACTOR` (0,09 vers 0,05 pour plus fluide, vers 0,15 pour plus réactif).
### Alléger les images
À utiliser quand les images du bureau dépassent 10 Mo ou que la page est lente à charger.
**Dans votre assistant IA**
```text
Les images du bureau pèsent 14 Mo. Ramène-les sous le budget de 10 Mo avec une qualité plus basse ou moins d’images, et dis-moi ce qui a changé.
```
**Ce que vous devriez obtenir** L’agent réextrait avec une qualité plus basse (par exemple 60 au lieu de 80) ou moins d’images (par exemple 90), puis indique la nouvelle charge pour le bureau et le mobile par rapport aux budgets de 10 Mo et 5 Mo.
### Passer la liste de contrôle qualité avant livraison
L’agent porte une liste de contrôle avant livraison ; demandez-lui de la parcourir et de dire honnêtement ce qu’il a pu ou non vérifier.
**Dans votre assistant IA**
```text
Avant que je publie, parcours ta liste de contrôle qualité sur le site que tu as construit. Pour chaque point, dis si tu l’as vérifié en exécutant quelque chose ou seulement en lisant le code.
```
**Ce que vous devriez obtenir** La liste couvre : animation fluide sans saccade, première image visible en moins d’une seconde, écran de chargement fonctionnel, charge sous le budget, mouvement réduit géré par une image fixe, aucune image blanche, canvas adaptatif, curseur personnalisé, particules, les six sections qui apparaissent et disparaissent, lettres du hero animées, barre de chiffres lisible, galerie avec parallaxe, arrêt de défilement naturel et repères de chapitres mis à jour. Seule une exécution dans un navigateur peut confirmer les points visuels.
## Ce qu’il écrit et où
**Sortie d’une construction**
| Chemin | Contenu |
| --- | --- |
| `