Scroll Story Website
A building walkthrough plays as you scroll, from image frames instead of a video file.
Proof
- 768
- Frames drawn on a canvas from the scroll position
- ~90%
- Less to download when WebP frames match the viewport width
- Smooth
- A fast scroll blends into the next frame instead of jumping
The problem
A filmed walkthrough is a heavy video. On a slow connection it stalls, and the viewer cannot hold on a floor or a detail.
What I built
I built a scroll-driven walkthrough. Page position picks which frame to show. A canvas draws that frame. The frames are compressed images from Cloudinary, requested at the width of the viewport.
How it helps businesses and services
- A property, hotel, or studio can show a space the visitor moves through, instead of a video that stalls on a slow connection.
- The visitor can stop on a room. A video plays past it.
- Frames are requested at the width of the screen, so a phone does not download the desktop sequence.
- The same walkthrough can carry a listing, a sales gallery, or a brand story.
How it works
- 1
Map scroll
Scroll position becomes the frame number.
- 2
Ease
A short blend smooths that number so a fast flick does not skip harshly.
- 3
Fetch
Cloudinary returns the WebP for that frame at the current viewport width.
- 4
Paint
The browser draws the decoded frame onto the canvas on the next animation frame.
- 5
Tune
A settings panel toggles smoothing, text layers, and hotspots.
The hard part
768 images will not fit in a phone's memory
Loading the full sequence up front stalls the page and exhausts RAM. Frames are compressed to WebP and requested at the viewport width, which cut the download by about 90% versus full-size frames. The canvas decodes the frame the scroll position needs, rather than holding the whole sequence decoded.
Stack
Frontend
App
Motion
Media
What I owned
- 768-frame canvas walkthrough tied to scroll
- Scroll position chooses the frame
- A smoothed paint loop that draws on each animation frame
- Cloudinary delivery sized to the viewport
- Settings panel for smoothing, text, and hotspots