Live render · no video files · one cut across the studio
SizzleReel
A sizzle reel with no video in it. Stills, cut fast enough to read as motion.
Field Product Motion
Author Jeremy Prasatik Published: 2026 Status: Tool
Classification Motion Front-End Tooling
TL;DR Built→ In a day, with Claude CodeShips→ React component, a 4.8KB web component, and a GIF/MP4 exporterTry it→ Section 02 takes your own images. Nothing uploads, nothing saves
Abstract
A sizzle reel is usually footage: shot, edited, rendered, hosted. SizzleReel skips the footage and keeps the edit. It runs a stack of still photographs through fourteen transition types, wipes, blinks, a burn, a lens pinch, and a title card that assembles itself, all on a timer tuned so the eye reads motion. One container, CSS animation, zero video files.
It started with a portfolio I admire that runs looping video in every project tile. I wanted that energy without a camera, an editor, or a render queue. The build took a day with Claude Code, and the finished web component weighs 4.8KB gzipped, smaller than any one of the photographs it plays.
This page is the product. The reel above is rendering live, and the lab below takes your own images, pulls a five-color palette out of their pixels, and recuts itself on the spot. The same engine exports a looping GIF or MP4 by stepping Chrome's clock one frame at a time.
Editing rules, borrowed from film.
The montage reads as video because it obeys cutting-room rules. Getting them wrong is visible instantly: the first version blinked a color frame and landed back on the same photograph, and it read as a glitch.
A flash frame earns its interruption by hiding a splice. Every blink and pinch swaps the photograph while the cover is opaque and clears onto something new. The pinch does it mechanically: top and bottom panels close to the middle, the cut happens at the meet, and the panels part onto new country.
Title cards never fade. Words land with a hard cut and a small settle, the way campaign film handles type. Give the reel three or more words and it scatters them through the loop as their own quick cards, then the full line assembles word by word at the close, holds, and leaves the way it came.
Seven seconds, twelve beats. Wipes finish at 72 percent of their hold so every frame gets a moment of rest before the next cut. At the end the built line exits, the bare card holds a breath, and the opening shutter wipes over whatever is left standing.
Blinks hide cuts
A flash frame earns its interruption by hiding a splice. Every blink and pinch swaps the photograph while the cover is opaque and clears onto something new. The pinch does it mechanically: top and bottom panels close to the middle, the cut happens at the meet, and the panels part onto new country.
Type cuts in
Title cards never fade. Words land with a hard cut and a small settle, the way campaign film handles type. Give the reel three or more words and it scatters them through the loop as their own quick cards, then the full line assembles word by word at the close, holds, and leaves the way it came.
The loop breathes
Seven seconds, twelve beats. Wipes finish at 72 percent of their hold so every frame gets a moment of rest before the next cut. At the end the built line exits, the bare card holds a breath, and the opening shutter wipes over whatever is left standing.
Load your own.
Seven frames across the studio's work are the default cut, one from each project. Drop in up to eight of your own and the reel rebuilds its choreography, palette included. Chips track each beat as it fires; freeze one to study the cut.
The chips follow the cut. Click one to freeze and replay that beat.
Your images (up to 8)
Running the studio set
Images stay in your browser. Nothing uploads, nothing saves. Refresh and they are gone.
Palette · pulled from the images
Title card
1–2 words slide in. 3+ scatter through the cut, then build.
Speed × 1.00
From loop to file.
A montage that only exists as CSS still needs to leave the page sometimes, for a deck, a post, an email. The exporter drives a headless Chrome, freezes its clock, and advances it in exact twentieth-of-a-second steps, so the loop closes precisely where it opened.
14
Transition types
Wipes, blinks, burn, pinch, and four kinds of type
4.8KB
Web component
Gzipped, zero dependencies, any webpage
20fps
Deterministic export
131 frames stepped on a frozen clock
0
Video files
1.3MB as GIF, 0.2MB as MP4, nothing hosted
Services
Product Design
Engineering
Stack
React
TypeScript
CSS
Playwright
Links
The reel on this page is the deliverable, running where it was made, cut from seven of the projects around it. A public repository is next, so it can run somewhere other than here.
