From superpowers
Guides converting videos to image frame sequences (JPG/WebP) for smooth web scroll animations using EZGif or FFmpeg. Use for AI-generated videos, MP4 extraction, or scroll-based effects.
npx claudepluginhub lunartech-x/superpowers --plugin superpowersThis skill uses the workspace's default tool permissions.
Convert videos into frame sequences for scroll-based web animations.
Extracts and processes video frames using FFmpeg for scroll animations, sprite sheets, AI/ML training datasets, thumbnails, and web optimizations.
Transforms static images into dynamic videos using each::sense AI API. Creates animations, Ken Burns effects, cinemagraphs, product showcases, portrait and landscape motion from photos.
Extracts frames from videos/images, renders Remotion to MP4/stills/GIF, checks specs like resolution/fps/codec, and visually verifies quality via ffmpeg/ffprobe shell toolkit.
Share bugs, ideas, or general feedback.
Convert videos into frame sequences for scroll-based web animations.
MP4 on scroll = laggy, choppy experience Frame sequence on scroll = smooth, Apple-quality animations
| Use Case | FPS | Est. Frames (10s video) |
|---|---|---|
| Smooth scroll | 30 | 300 |
| Standard scroll | 25 | 250 |
| Lightweight | 15 | 150 |
# Extract ZIP to project
unzip frames.zip -d ./sequence
# Rename folder for consistency
mv extracted_folder sequence
sequence/
├── frame_001.jpg
├── frame_002.jpg
├── frame_003.jpg
└── ... (200-300 frames)
After extracting frames:
The frames for the animation are in the sequence folder.
Build a sticky scroll component that maps scroll position to these frames.
Use Next.js. Preload frames. Map 0-100% scroll to frame 1-N.
| Tool | Pros | Cons |
|---|---|---|
| EZGif | Free, fast, web-based | Limited file size |
| FFmpeg | Powerful, local | Requires CLI |
| VLC | Already installed | Manual process |
ffmpeg -i input.mp4 -vf fps=30 sequence/frame_%03d.jpg