Inspiration
Most "3D" marketing sites are a checklist of gimmicks: spinning cubes, mouse parallax, a junction of libraries held together by a build step. We wanted the opposite: a website that feels like watching a film, where the visitor is the playback head. The whole page is one continuous scroll journey, and the footage moves with it, forward as you descend, backward as you rise. No separate scenes stitched together, just one shot that carries the entire story.
What it does
ScrollCine scrubs a full-length film in perfect sync with the user's scroll. As the page moves, the video plays forward; scroll back up and it rewinds frame by frame. Captions, headlines, and reveals are paced into the footage's negative space, each band appearing on a single flick of scroll. The journey ends by settling into a real website below the hero: proof, steps, and one clear call to action. If the video can't load, the visitor still gets a complete, designed page with a static hero, because the story never depends on the network.
How we built it
Plain HTML, CSS, and vanilla JavaScript. One folder, zero dependencies, no build step. The core is a requestAnimationFrame loop that lerps a displayed time toward the target scroll position, easing out as the user slows, then resting with no drift. Every seek is gated so seeks never overlap mid-flight on cheap hardware. We render to a Blob so the browser doesn't buffering-stall the scrub, write to the DOM only when a value actually changes, and scrim every caption band against whatever is behind it. Five fallback gates (no JS, reduced motion, video missing, file:// preview, slow network) all land on a designed static hero, and a press-and-hold interaction adds one tactile moment mid-journey.
Challenges we ran into
The scrub stuttered on mid-range hardware until we learned to lerp instead of snap and to gate seeks so a new update waits for the current one. Accurately seeking video is unpredictable, so we clamp against the real duration and only touch currentTime when the delta crosses a threshold. Caption legibility over a moving image forced a scrim system, and the file:// protocol quietly broke video loading, which is why the Blob loader has a deliberate fallback to a poster image. Each one read as a bug until we studied it as a constraint.
Accomplishments that we're proud of
A buttery scrub on real hardware with a resting rAF loop that draws nothing when nothing changed. A fully designed page that survives the video never loading. Reduced motion and hidden-tab states handled as first-class features, not afterthoughts. And the whole thing ships as a single HTML file with one script and one stylesheet, the kind of project you can double-click and have running with zero setup.
What we learned
The web gives you the most cinematic power for the least complexity when you lean on the platform instead of a framework. Scroll is a state you can own, video is a timeline you can drive, and the DOM only needs to know when something actually changes. Performance is not a feature you bolt on, it is a budget you design within from the first frame.
What's next for ScrollCine
Selling it to German Car Services for $10k.
Built With
- 3d
- cars
- css3
- html5
- javascript
