← ClaudeAtlas

animated-websitelisted

Turn any MP4 video into a luxury scroll-animated website with parallax effects, glass morphism cards, and cinema-quality polish. Generates a single self-contained HTML file. Use this skill when the user says "animated website from this video", "scroll-animated site", "make a website from this video", "parallax site from video", "video to website", "turn this video into a landing page", or any variation of wanting a video turned into an interactive scrolling web experience.
petermcalister/shared-skills · ★ 2 · Web & Frontend · score 68
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