Faux Reel

A sizzle reel with no video in it. Stills, cut fast enough to read as motion.

TL;DR BuiltIn a day, with Claude CodeShipsReact component, a 4.8KB web component, and a GIF/MP4 exporterTry itSection 01 takes your own images. Nothing uploads, nothing saves

Field Product Motion

Author Jeremy Prasatik Published: 2026 Status: Tool

Classification Motion Front-End Tooling

Source github.com/reckon-house/faux-reel

Abstract

A sizzle reel is usually footage: shot, edited, rendered, hosted. Faux Reel 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.

I wanted that look, just not the editing behind it. So I had the code do it instead. The build took a day with Claude Code, most of it spent finessing the timing and the transitions, getting each cut to land so the stills feel like motion and not a slideshow. The finished web component weighs 4.8KB gzipped, smaller than any one of the photographs it plays.

None of this is a screenshot or a mockup. The reel up top is running live, and the lab below it is where you load your own photos: it pulls a five-color palette out of them and rebuilds the reel to match. If you want a file instead of a live embed, the same code exports the whole thing as a looping GIF or an MP4.

section 01: the lab

Load your own.

The default cut is seven frames, one from each of my projects. Drop in up to eight of your own and it rebuilds around them. Each beat gets a chip below. Click one to freeze the reel on it.

The highlighted chip is the current beat. Click one to freeze it.

Faux Reel

Lab

Load stills, pull a palette from their pixels, set a title. The reel cuts itself. Nothing uploads, nothing saves.

01Images

Running the studio set

Up to 8. They stay in your browser — a refresh clears them.

02Palette

03Title card

1–2 words slide in. 3+ scatter through the cut, then build.

04Speed × 1.00

05Ratio

Square and portrait for social, 9:16 for stories.

section 02: under the cut

Why stills read as motion.

The trick is hiding the cut. When the reel blinks a color frame or the lens pinches shut, the photo swaps behind the cover, so you never see the switch. Every cut has to land on a new image, or the blink reads as a glitch. Titles cut in hard instead of fading, and each frame holds for a beat before the next one.

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

Get it on GitHub

See the projects the reel is cut from

The reel on this page is the deliverable, running where it was made, cut from seven of the projects around it. It is also on GitHub, MIT-licensed. A developer or product manager who needs a deck or a portfolio to move can grab it and skip the shoot.

A design and engineering practice.

section: the practice

Work hands-on with the person who makes the work. Start a brand, an app, a campaign, or a kitchen with a single message.

Studio Reckon House Staples

Founded 2002, based in Texas, working anywhere

Status Open for projects

Classification Digital, Branding, Interiors

Contact hello@reckon.house 214.697.4578 IG @reckonhousestaples LinkedIn /jeremy-prasatik

The range

Projects come in at every stage. Some start from nothing but a name; others arrive as an existing brand, system, or idea to build on. The people range the same way, from founders and marketing teams to contractors and homeowners.

It stays that way on purpose. The client list runs from national retailers to one-room remodels, and the work gets the same attention at both ends.

The chart below maps the practice as one system: the three disciplines, the tools inside each, and the connections between them.

DIGITAL EXPERIENCES & SOFTWAREBRANDING & CREATIVE DIRECTIONINTERIORS & FABRICATIONReact / Next.jsTailwindOpenAI APIComputer VisionLLMsFramerWebflowReplit / V0SplineArt DirectionVoice & ToneTypographyColor SystemsAfter EffectsMidjourneyCustom LoRASocial GridsEmail ArchSpace PlanningFF&EMillwork DesignMaterial SelectionOn-site DirectionPop-up / RetailFabricationFull-Stack EngAI IntegrationSystems DesignProduct StrategyRapid PrototypingNo-Code ArchBrand StrategyCreative DirectionVisual Identity3D & MotionGen. ImageryContent SystemsInt. ArchitectureFF&E SourcingCustom FabricationInstallation MgmtExperientialDIGITALBRANDINGINTERIORSRHSRING INDEXDisciplineSkill / PracticeTool / MethodDISCIPLINESDigitalBrandingInteriors

© 2026 Reckon House. Made by Jeremy Prasatik.