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.
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.
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.
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.
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.
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).
Build the site: one HTML file containing the whole design system, the canvas animation and the sections.
Serve and preview locally, then iterate on speed, colours and text until you are happy.
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.
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.
In your project terminal
winget install FFmpeg
02
Install the pack
Core is added automatically. On macOS, install FFmpeg with brew install ffmpeg instead of the line above.
In your project terminal
npx bmad-plus install --packs animated
03
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.
In your project terminal
Turn product-demo.mp4 into an animated scroll-driven website for a smart-lamp launch.
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
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.
Use it to size the project before you commit to a payload.
In your AI assistant
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.
The agent’s theme table covers real estate, tech product, portfolio, restaurant and automobile.
In your AI assistant
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.
The agent knows the controls behind common requests; say what you feel and it adjusts the matching setting.
In your AI assistant
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).
Use it when the desktop frames exceed 10 MB or the page feels slow to load.
In your AI assistant
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.
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
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.
Required on your machine: FFmpeg and FFprobe with the libwebp encoder, and a source MP4. Python 3 is needed only for the preview server (any static file server works). Install FFmpeg with winget install FFmpeg on Windows or brew install ffmpeg on macOS.
Your video and frames stay local. The preview is served by python3 -m http.server 8080 on your machine; serving over HTTP also avoids the browser’s local-file restrictions.
Before it generates the page, the agent asks how to load fonts. The default is system fonts (Georgia for headings, the system font for text), with no external request. You can instead supply .woff2 files to self-host (Playfair Display and DM Sans are under the SIL Open Font licence; check the licence of any other font). Google Fonts is used only if you explicitly ask, after the agent warns that each visitor’s browser will then contact Google and that this may need a mention in the site’s privacy policy. That request would belong to the generated site, not to BMAD+.
Note· Frames come from two FFmpeg commands, not a script
The pack ships no extraction script. The agent runs one ffmpeg command per size, with fps=N/D sampling, libwebp quality 80 and numbering from frame-0000.webp, then writes frames/manifest.json and checks that each folder holds N files. A source that is not 16:9 is scaled and cropped to fill the frame; for a vertical video the agent asks which framing you want before extracting. Without the libwebp encoder the commands fail, so check ffmpeg -hide_banner -encoders first.
Warning· One file with inline code
The page is a single HTML file with its styles and scripts inline. A site that enforces a strict content-security policy without inline code will block it unless you split the file and adapt the policy. The page also depends on the canvas element and on the images loading; test it on a mid-range phone.
Note· Common problems
FFmpeg not found: install it and reopen the terminal. No WebP encoder: use an FFmpeg build that lists libwebp. Choppy animation: fewer frames, device pixel ratio capped at 2, fewer particles. White flash between frames: check the extraction and the nearest-frame fallback. Blank canvas on mobile: check that the mobile frames exist and the frame folder path. Loader stuck: a frame returns 404, check the console. Cross-origin errors locally: serve over HTTP instead of opening the file.
Note· Provenance
The Animated Website pack was written by Laurent Rochetta at Oveanet, his company, and integrated into BMAD+.