Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From superpowers
Converts AI-generated videos into image frame sequences for scroll-based web animations. Recommends EZGif workflow and provides frame settings by use case.
npx claudepluginhub lunartech-x/superpowers --plugin superpowersHow this skill is triggered — by the user, by Claude, or both
Slash command
/superpowers:skills-design-and-media-ui-ux-design-skills-video-to-frames-workflowThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Convert videos into frame sequences for scroll-based web animations.
Extracts video frames via FFmpeg for scroll-animations, sprite sheets, and AI training datasets. Includes frame extraction, resizing, quality optimization, and scroll-driven playback setup.
Provides FFmpeg commands, xfade references (40+ types), offset formulas, and guides for video transitions, crossfades, wipes, slides, fades, multi-clip sequences, slideshows, and audio sync.
Extracts key frames from videos and animated images (GIF, APNG, WebP) into a viewable timeline using peepshow (ffmpeg). Also reads audio transcripts and metadata.
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