# Animated pack: turn an MP4 into a scroll-driven website
> The Animated Website Creator turns a video into a scroll-driven page in five steps: analyse, extract frames, write six sections, build, preview. Requirements, six prompts and limits.
Canonical: https://bmad-plus.rochetta.fr/docs/packs/animated/
Language: en
BMAD+ version: 0.23.1
Documentation reviewed: 2026-10-19
Author: Laurent Rochetta
License: MIT
BMAD+ documentation › [Packs](https://bmad-plus.rochetta.fr/docs/packs/) › Animated pack: turn an MP4 into a scroll-driven website
The Animated pack installs the Animated Website Creator, an agent that turns a short MP4 into a single web page in which the video plays frame by frame as the visitor scrolls, with text sections that fade in and out over it. This is the pattern seen on premium product pages. The agent does the whole chain: it inspects the video, extracts optimised images, writes the page with a built-in design system and serves it locally so you can preview it. It suits a product launch, a property presentation, a portfolio piece or any showcase where one good video carries the story.
## When to use it
- You already have a good MP4 of 5 to 30 seconds and want a page built around it, not a general-purpose site.
- You accept a page that is one HTML file with inline styles and scripts, and a payload of several megabytes of images.
- Not for content-heavy sites with many pages, or when a strict content-security policy forbids inline code.
## What is installed
A packaged pack in `.agents/skills/pack-animated/`: the agent file `animated-website-agent.md` (process, design system, code architecture, quality checklist, troubleshooting) and a workflow template `templates/animated-website-workflow.md`. The agent wakes on requests such as animated website, scroll animation, video to website, convert video to website or luxury website from video.
## The five-step process
1. Analyse the video with `ffprobe` and present duration, resolution, frame rate, total frames and codec. The agent recommends a frame count and asks you to confirm before extracting anything.
2. Extract and optimise frames as WebP with two ffmpeg commands, one per size: desktop 1920 by 1080 and mobile 960 by 540, plus a `manifest.json`. The payload budget is under 10 MB for desktop and under 5 MB for mobile.
3. Prepare the content of six overlay sections: Hero (name, tagline, key figures), Vision (a quote), Details (features with icons), Grid (four to six feature cards), Context (location or secondary information) and CTA (call to action and contact).
4. Build the site: one HTML file containing the whole design system, the canvas animation and the sections.
5. Serve and preview locally, then iterate on speed, colours and text until you are happy.
**Recommended frame count by video length**
| Video length | Frames | Scroll height |
| --- | --- | --- |
| 0 to 5 s | 60 to 90 | 400vh |
| 5 to 15 s | 100 to 150 | 650vh |
| 15 to 30 s | 150 to 200 | 800vh |
| 30 s and more | capped at 200 | 900vh |
### The built-in design system
The page ships a fixed look that the agent adapts to your theme (property, tech product, portfolio, restaurant, automobile change the accent colour, hero content, key figures and call to action). Its ingredients: a warm dark palette, a serif heading font and a sans-serif body font, glass-effect cards, a film-grain and vignette overlay, floating particles, a custom cursor on desktop, chapter markers, a branded loading screen with a progress bar, and a scroll dwell engine: instead of mapping scroll linearly to frames, it slows down near each text section so each one stays readable. A gallery section with parallax can use six or seven frames of the video.
## Quick start
1. **Install FFmpeg yourself** BMAD+ does not install it. The agent needs `ffmpeg` and `ffprobe` on the PATH, with the `libwebp` encoder (`ffmpeg -hide_banner -encoders` must list it). Python 3 is only used for the local preview server.
```sh
winget install FFmpeg
```
2. **Install the pack** Core is added automatically. On macOS, install FFmpeg with `brew install ffmpeg` instead of the line above.
```sh
npx bmad-plus install --packs animated
```
3. **Ask for the site and give the video path** Mention the concept (product, real estate, portfolio) and, if you have them, brand colours and section texts.
```sh
Turn product-demo.mp4 into an animated scroll-driven website for a smart-lamp launch.
```
## Copyable examples
### Build the whole site from a video
The installer’s own example phrase is "animated website from hero.mp4". There is no /animated command: the agent answers to requests like that one.
**In your AI assistant**
```text
Turn product-demo.mp4 into an animated scroll-driven website. The product is the Lumen smart lamp, launching in March. Accent colour #2563eb, call to action "Pre-order".
```
**What you should get** The agent shows the video analysis, recommends a frame count and asks you to confirm. It then extracts the WebP frames (desktop and mobile with a manifest), builds the page with the six sections and the design system, and serves it locally for preview. Expect to iterate on speed and text afterwards.
### Analyse the video only, extract nothing yet
Use it to size the project before you commit to a payload.
**In your AI assistant**
```text
Analyse hero.mp4 with ffprobe and recommend a frame count and scroll height. Do not extract anything until I confirm.
```
**What you should get** A block with duration, resolution, frame rate, total frames and codec, then the recommendation from the table above (for a 12-second video: 100 to 150 frames and a 650vh scroll height). The agent waits for your go-ahead.
### Adapt the theme to a property presentation
The agent’s theme table covers real estate, tech product, portfolio, restaurant and automobile.
**In your AI assistant**
```text
Build a luxury animated website from villa-tour.mp4 for a property sale. Hero: the villa name and price. Stat bar: surface, bedrooms, bathrooms. Call to action: "Schedule a visit". Context section: distances to the beach and the airport.
```
**What you should get** The six sections are filled with your content in the property layout: name and price in the Hero with a glass stat bar, a quote in Vision, feature list in Details, a card grid, distances in Context, and a visit-booking CTA with a contact card.
### Tune the scroll feel
The agent knows the controls behind common requests; say what you feel and it adjusts the matching setting.
**In your AI assistant**
```text
The scroll is too fast and the text sections feel sticky. Make the scroll slower and the dwell less strong.
```
**What you should get** The agent lengthens the animation section (for example from 650vh toward 900vh for slower scrolling) and lowers `DWELL_PEAK` (from 3.5 toward 2.5) for a less sticky pause. For smoother or more reactive frames it changes `LERP_FACTOR` (0.09 toward 0.05 for smoother, toward 0.15 for more reactive).
### Cut the weight of the frames
Use it when the desktop frames exceed 10 MB or the page feels slow to load.
**In your AI assistant**
```text
The desktop frames weigh 14 MB. Bring them under the 10 MB budget with a lower quality or fewer frames, and tell me what changed.
```
**What you should get** The agent re-extracts with a lower quality (for instance 60 instead of 80) or fewer frames (for instance 90), then reports the new payload for desktop and mobile against the 10 MB and 5 MB budgets.
### Run the quality checklist before delivery
The agent carries a pre-delivery checklist; ask it to go through it and report honestly what it could and could not verify.
**In your AI assistant**
```text
Before I publish, go through your quality checklist on the site you built. For each item say whether you verified it by running something or only read the code.
```
**What you should get** The checklist covers: smooth animation without jank, first frame visible within a second, a working loader, payload under budget, reduced-motion handled with a static frame, no blank frames, responsive canvas, custom cursor, particles, the six sections appearing and disappearing, animated hero letters, readable stat bar, gallery with parallax, a natural dwell feel and updated chapter markers. Only a browser run can confirm the visual items.
## What it writes and where
**Output of a build**
| Path | Content |
| --- | --- |
| `