Video Frame Extractor — AI video to a numbered frame sequence
How it works
Drop in a video file (MP4, WebM, MOV, or any other format your browser can play) and pick the output FPS, width, format and quality. The tool decodes the video locally, samples one image per requested frame, and packages everything into a single ZIP you can download. The file never leaves your machine: there is no upload step and no account.
The primary use case is image-sequence scroll animations, the technique Apple uses on its product pages: as you scroll, a hero image cycles through hundreds of pre-rendered frames to look like a 3D model rotating, an iPhone unfolding, or a watch face transforming. The browser doesn't decode video on those pages. It loads ~100–300 individual JPGs and swaps them in a `<canvas>` based on `window.scrollY`. To build one yourself you start with a video of the animation, run it through this tool, and feed the resulting ZIP into a script that reads scroll position and draws the matching frame.
Under the hood the tool picks one of two strategies. On modern browsers (Chrome/Edge 94+, Safari 16.4+, Firefox 130+) it uses the WebCodecs API (`VideoDecoder` plus an in-browser MP4 demuxer) to decode frames in sequence at hardware speed, then samples them at your target FPS. This is fast: a 10-second clip at 30 fps typically finishes in under 2 seconds. On older browsers it falls back to a slower seek-based path that loads the video in a hidden `<video>` element and seeks to each frame timestamp one at a time. That path takes ~50–150 ms per frame, so a 300-frame extraction finishes in 15–45 seconds. A banner above the form tells you which path will run.
FPS choice is the lever that controls smoothness vs. file size. Apple-style animations work best around 24–30 fps: smooth enough that scroll feels fluid, sparse enough that the ZIP stays under 50 MB. Cinema is 24 fps. Broadcast is 30 fps. Game-feel ultra-smooth is 60 fps but doubles your asset weight. If your source video runs at 30 fps and you ask for 60, you'll get duplicate frames (the decoder returns the closest-available source frame for each target timestamp); the FAQ and the FPS reference table below explain the trade-offs.
Format choice is JPG vs. WebP. JPG is the universal default and what Apple ships. WebP gives you 25–35% smaller files at the same perceived quality and is supported by every browser you'd reasonably target for a web animation in 2026. Quality slider works as you'd expect: 1.0 is near-lossless, 0.85 is the photographic sweet spot, 0.6 is visibly lossy but cuts file size dramatically.
Output width controls how big each frame is. Apple typically serves scroll-animation frames at 1500–2000 px wide; we default to 1920. Going larger inflates the ZIP without visible benefit on most displays; going smaller (720, 1080) is fine for non-hero placements or mobile-only experiences. The tool preserves your source aspect ratio.
Animated GIF, WebP, APNG and AVIF go down a separate path, because a `<video>` element refuses to play them however video-like they are. Those files are decoded with the ImageDecoder API, which hands over one frame at a time along with its own display duration, so a GIF with variable frame delays resamples correctly rather than being assumed to run at a constant rate. The tool walks the source timeline once, emitting an output frame for every timestamp that falls inside the current source frame: ask for a higher FPS than the source and frames repeat, ask for a lower one and frames are skipped. No source frame is ever decoded twice, which matters because GIF and WebP frames are delta-encoded against their predecessor. ImageDecoder ships in Chrome and Edge 94+; Firefox and Safari do not have it yet, and there the tool says so instead of failing silently. Convert to MP4 or WebM first. If an animated WebP or GIF rather than a video is what you usually arrive with, the WebP Frame Extractor on this site is the same engine with the animated formats first.
The tool caps total frames at 2500 (hard) and warns above 1000 (soft), because past that you risk running out of browser memory. If you need a longer or higher-FPS extraction, split the video first or run it twice with a lower FPS.
A full walkthrough lives at /guides/scroll-animation-frames/: it takes a Sora or Runway clip through extraction and ends with the complete HTML, CSS and JavaScript for the scroll-driven canvas.
Frequently Asked Questions
What FPS should I pick for an Apple-style scroll animation?
- 24 or 30. Apple's AirPods Max product page runs at 30 fps with about 240 frames over an 8-second scroll; the iPhone-fold animation is 24 fps. Below 24 the motion feels stuttery; above 30 doubles asset weight without a visible improvement. Start at 24 and only bump to 30 if your scroll feels choppy.
How do I build a scroll animation from these frames?
- Standard pattern: position a `<canvas>` inside a tall `position: sticky` container, preload all frames as <img> elements, listen to scroll position, compute the matching frame index, and call ctx.drawImage(images[i], 0, 0) on each scroll event. There are off-the-shelf libraries (lottie-style "image-sequence" players) but it's ~30 lines of plain JS. Search "image sequence scroll canvas" for tutorials. Every implementation works the same way.
Can I extract frames from an AI-generated video (Sora, Runway, Kling)?
- Yes. If your browser can play the file (MP4 or WebM, which is what Sora, Runway, Kling and Pika export), the tool extracts frames from it exactly like any other video. AI clips are usually short and can have an odd or variable frame rate, so pick a target FPS (24 or 30) and the tool resamples to it. This is a common way to turn a generated clip into a scroll-driven canvas animation.
Can I extract frames from an animated GIF or WebP?
- Yes. Drop in a .gif, .webp, .apng or .avif and it is treated exactly like a video: pick the FPS, the width and the format, and you get the same numbered ZIP. The frames are read with the ImageDecoder API rather than a <video> element, because browsers will not play animated images in a video tag. Each frame's own display delay is respected, so a GIF with variable timing resamples correctly. This needs Chrome or Edge 94+. Firefox and Safari have not shipped ImageDecoder, so convert the file to MP4 or WebM first.
How do I split a WebP into frames?
- Select the .webp file, leave the FPS at the animation's own rate if you want a one-to-one split, and extract. To find that rate, look at the duration and dimensions line the tool shows after you pick the file. Asking for a higher FPS duplicates frames and asking for a lower one drops them, so matching the source rate is what gives you exactly the frames that are in the file: one PNG-equivalent per animation frame, numbered in order.
What video formats does it accept?
- Anything your browser can play in a <video> element: MP4 (H.264, H.265, AV1), WebM (VP8, VP9, AV1), MOV, OGG. The fast path requires MP4 (because MP4Box.js is the only demuxer we ship); other containers fall back to the slower canvas-seek path. If your file doesn't load at all, your browser doesn't have the codec, so re-encode to H.264 MP4 first.
Why does my browser show the compatibility-mode banner?
- Your browser is missing the WebCodecs API. That's true on Firefox before 130, Safari before 16.4, and any Chrome before 94. The tool still works, just via the slower seek path: ~50–150 ms per frame instead of <5 ms. For a 300-frame extraction expect 15–45 seconds rather than 2 seconds. Update your browser if you do this often.
Why is the frame count limited to 2500?
- Memory. JSZip holds compressed bytes in RAM until you download, and 2500 frames of 1920-wide JPG at quality 0.85 is roughly 200 MB compressed and 1+ GB uncompressed during encoding. Past 2500 frames most browsers OOM the tab. If you need more, split the video first or rerun with a lower FPS or a smaller width.
Should I pick JPG or WebP?
- JPG if you need universal compatibility (Safari < 14, niche embedded browsers). WebP everywhere else: 25–35% smaller files at the same perceived quality, and every browser since 2020 decodes it natively. For a pure-web scroll animation in 2026, WebP is almost always the better pick; for archival, sharing ZIPs around an office, or feeding into legacy software, stick with JPG.
Are my videos uploaded anywhere?
- No. The decoding, encoding, and ZIP packaging all run inside your browser tab using the WebCodecs API (or HTMLVideoElement on the fallback path) plus JSZip. You can confirm by opening DevTools and watching the Network tab: no outbound request fires when you click Extract. The video stays on your device.
Can I extract a single frame at a specific timestamp?
- Not directly. This tool extracts evenly spaced frames across the whole video. For one frame at a specific time, scrub a video player to the right point and screenshot. (We may add a single-frame mode later if there's demand.)
Why do I see duplicate frames at high FPS?
- Because you asked for more frames per second than the source video contains. If your source is 30 fps and you set the slider to 60, the decoder returns the same source frame twice in a row for every other output. The output is technically correct (60 frames per second of source), but visually identical pairs. Match your output FPS to your source FPS, or go lower. Going higher never adds information.
FPS reference: pick the right value for your use case
Pick the lowest FPS that still feels smooth. Every doubling of FPS doubles your final ZIP size. The right value depends on the kind of motion you're capturing.
| FPS | Typical use | Frames per 10 s of source | Notes |
|---|---|---|---|
| 12 | Hand-drawn / 'shot on twos' animation, low-bandwidth UI loops | 120 | Visibly stuttery for camera motion; fine for stylised animation |
| 24 | Cinema standard, Apple iPhone-fold scroll animation, smooth product reveals | 240 | The default. Sweet spot for filesize-vs-smoothness on most scroll animations |
| 30 | Broadcast TV, Apple AirPods Max scroll animation, smooth UI motion | 300 | Use when 24 fps feels stuttery on your specific motion (fast pans, rotations) |
| 48 | High-frame-rate cinema, sport replays | 480 | Diminishing returns vs. 30 for web animation; only worth it for very fast camera moves |
| 60 | Gaming, ultra-smooth scroll, slow-motion source | 600 | Doubles ZIP size vs. 30; only meaningful if source is genuinely 60 fps. At 30-fps sources, expect duplicate frames |
Frame counts assume the full source video is sampled. Apple's public-facing scroll animations on apple.com average 24–30 fps with 200–360 total frames per animation as of 2025.