About Sequencer
Remix Link - Sequencer
About Sequencer
Sequencer turns a Stack of images into a scroll-scrubbed sequence, like Apple-style product reveals, with no video file and no code.
Version 2 is a full rewrite for speed. Check the Start Here page for detailed information.
What's included:
Canvas rendering: one draw per frame, with no page re-renders while scrolling
Sticky-aware tracking: put it in a tall section, make it sticky, and it just works
Section or whole-page scroll trigger
Start Delay and End Early to fine-tune timing
Smoothing for a softer scrub (set to 0 if you use Lenis)
Forward and reverse playback, plus scrub speed
Cover / Contain / Fill
Quality setting (Light / Balanced / Sharp) to balance sharpness and memory
Canvas Frame: pick which frame shows in the editor
Frame order by layer name (natural sort: 1, 2, 10) or by layer order
Editor-only HUD with frame count. It never shows on your live site.
Alt text for accessibility
How to use:
Export your video as numbered images (0001, 0002, ...) and convert them to .webp.
Drop all frames onto the canvas, select them, and press Shift + A to wrap them in a Stack.
Set every image inside the Stack to Absolute.
Add a section to your page and give it a tall height, like 300vh. Taller means slower playback.
Place Sequencer inside it. Set width to Fill, height to 100vh, and Position to Sticky (top 0).
In the properties panel, use Connect Stack and pick your Stack.
Preview and scroll.
Performance tips:
Use .webp frames around 1920px wide. 60 to 150 frames is the sweet spot.
Use Quality: Light for long sequences or mobile-heavy sites.
Keep the source Stack off the page (on the canvas only). Sequencer reads it without rendering it.
Best for:
Product 360s and turntables
Scroll storytelling
Exploded-view or assembly sequences
Hero sections that feel like video without a video file
