animated-websitelisted
Install: claude install-skill petermcalister/shared-skills
# Animated Website from Video
Turn any MP4 video into a stunning, scroll-driven animated website with parallax
effects, glass morphism cards, and cinema-quality polish. One command, one HTML
file, zero runtime dependencies.
## Requirements
- **FFmpeg** installed and available in PATH
- **Python 3** (for local preview server)
- An **MP4 video file** provided by the user
If FFmpeg is not installed, tell the user:
```
FFmpeg is required. Install it:
Windows: winget install ffmpeg
Mac: brew install ffmpeg
Linux: sudo apt install ffmpeg
```
## Workflow
### Step 1: Analyse the Video
Run `ffprobe` on the provided MP4 to extract:
- Total duration (seconds)
- Frame rate (fps)
- Resolution (width x height)
- Total frame count
Report these stats before proceeding.
### Step 2: Extract Frames
Extract frames at 2 fps (or adjust to stay under 120 frames total):
```bash
# Create frames directory next to output
mkdir -p frames
# Desktop frames (1920x1080 WebP, quality 80)
ffmpeg -i INPUT.mp4 -vf "fps=2,scale=1920:1080" -c:v libwebp -quality 80 frames/desktop_%04d.webp
# Mobile frames (960x540 WebP, quality 70)
ffmpeg -i INPUT.mp4 -vf "fps=2,scale=960:540" -c:v libwebp -quality 70 frames/mobile_%04d.webp
```
### Step 3: Generate Section Content
Analyse the video context (filename, user description) and generate content for
**6 scroll sections**:
| Section | Purpose | Content Needed |
|---------|---------|---------------|
| **Hero** | Full-screen opening | Headline, subhea