Horizontal Lock Rail
The page pins and your vertical wheel input becomes horizontal travel across a rail of cards. Releases cleanly at both ends so the user never feels trapped.
- Difficulty
- Flagship
- Credits saved
- ~280
- Access
- Free
Technique
Sticky stage inside a wrapper whose height equals rail width. translateX = -(railWidth - viewportWidth) * progress. No wheel hijacking — native scroll drives everything, so trackpads, keyboards and touch all behave.
Choreography spec
100vh + (railWidth − viewportWidth)
- 0 → 1translateX travels the full rail overflow
- continuouscard nearest centre lifts 1.5% and brightens
Reversibility
Pure translate off native scroll position.
Reduced motion
Native overflow-x scroll-snap carousel, no pin.
Build a "horizontal-lock-rail" section for my landing page. TECHNIQUE Sticky stage inside a wrapper whose height equals rail width. translateX = -(railWidth - viewportWidth) * progress. No wheel hijacking — native scroll drives everything, so trackpads, keyboards and touch all behave. SPEC ██████████████████████████████████████████████ ██████████████████████████████████████ ████████████████████████████████████████████████████ RULES ████████████████████████████████████████████ ██████████████████████████████████████████████████
Full prompt copies straight to your clipboard.
The shelf
Scroll down. The shelf moves sideways.
Pinned scenes
The page stops. A scene plays at the speed of your wheel.
Open →Card sequencing
One card at a time, flipped and framed by scroll position.
Open →Reveal & assembly
Objects come apart, name themselves, then reassemble exactly.
Open →Sideways motion
Vertical input, horizontal travel. Released cleanly at both ends.
Open →Journey
A path draws itself and something travels along it.
Open →Essentials
The ordinary blocks — rebuilt with a signature scroll move.
Open →