Hassaan146 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 dependencies.
Requirements
- FFmpeg installed and available in PATH
- Python 3 (for local preview server)
- An MP4 video file provided by the user
Workflow
Step 1: Analyze 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 to the user before proceeding.
Step 2: Extract Frames
Extract frames from the video at 2 fps (or adjust based on duration to stay under 120 frames total).
# 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
Store frames in a temporary frames/ directory next to the output file.
Step 3: Generate Section Content
Analyze the video context (filename, user description, or any provided brief) and generate content for 6 scroll sections:
| Section | Purpose | Content Needed |
|---|---|---|
| Hero | Full-screen opening | Headline, subheadline, CTA button text |
| Features | Key capabilities | 3-4 feature cards with icon, title, description |
| Stats | Social proof / numbers | 3-4 animated stat counters with labels |
| How It Works | Process breakdown | 3-5 numbered steps with short descriptions |
| Gallery | Visual showcase | Parallax image grid with captions |
| CTA | Final conversion | Headline, body text, button text, button URL |
Present the draft content to the user for approval before building.
Step 4: Build the HTML File
Generate a single self-contained HTML file with all assets base64-encoded inline:
Scroll Animation Engine:
- Canvas element draws frames synced to scroll position
requestAnimationFrameloop for smooth playback- Frame preloading with progress indicator
- Responsive breakpoint swaps desktop/mobile frame sets
Visual Effects:
- Ambient floating particles (subtle, slow-moving, low opacity)
- Film grain overlay (CSS noise animation)
- Glass morphism cards (
backdrop-filter: blur(16px), semi-transparent bg) - Letter-split text animations (each character staggers in on scroll)
- Parallax gallery (layers move at different scroll speeds)
- Navigation dots fixed on the right edge (highlight active section)
Design Tokens:
- Background:
#0a0a0b - Text primary:
#ffffff - Text secondary:
rgba(255,255,255,0.6) - Accent: user-chosen or default
#D97757 - Card bg:
rgba(255,255,255,0.05) - Card border:
rgba(255,255,255,0.1) - Font: Inter (loaded from Google Fonts) or system sans-serif fallback
- Border radius:
16pxon cards,999pxon buttons
Structure:
- Progress bar (top, fixed)
- Navigation dots (right, fixed)
- Section 1: Hero (full viewport, canvas background)
- Section 2: Features (glass cards grid)
- Section 3: Stats (animated counters)
- Section 4: How It Works (numbered steps)
- Section 5: Gallery (parallax grid)
- Section 6: CTA (centered, large)
- Footer (minimal)
Save the output as animated-site-[topic].html in the current working directory.
Step 5: Launch Preview
Start a local Python server and open in the default browser:
python3 -m http.server 8888 &
open http://localhost:8888/animated-site-[topic].html
Customization Options
After the initial build, offer these tweaks:
| Option | What it changes |
|---|---|
| Scroll speed | Frames per scroll pixel (default: 0.5) |
| Accent color | Primary highlight color (default: #D97757) |
| Section text | Any headline, description, or CTA copy |
| Logo | Add a logo image to the hero and nav |
| Font | Swap Inter for another Google Font |
| Frame density | More or fewer frames extracted (affects file size) |
| Sections | Add, remove, or reorder the 6 sections |
Rules
- ALL assets must be inlined (base64 data URIs). The final HTML must work offline with zero external fetches (except optional Google Font).
- Keep total file size under 50MB. If frames push it over, reduce frame count or quality.
- Every section must be at least 100vh tall so scroll animations have room to breathe.
- Test that navigation dots correctly highlight the active section.
- Mobile responsive: stack cards vertically, use mobile frame set below 768px.
- If FFmpeg is not installed, tell the user how to install it and stop.
- Never hallucinate video content. If you cannot determine what the video is about, ask the user to describe it.