pinned
Vertical scroll becomes horizontal travel.
A tall section wraps a sticky viewport. As you pass through it, the track translates by exactly the distance you've scrolled — no hijacking, no fake scrollbars.
a scroll engine · 1 file · no deps
PRISM
Parallax layers, a pinned horizontal rail, staggered reveals, magnetic tilt and a browser-window frame that tracks your position. Scroll to see all of it move.
requestAnimationFrame
IntersectionObserver
sticky + transform
reduced-motion aware
Scroll
01 — the idea
Scroll is a
Scroll is a
timeline.
Every scroll position maps to a frame. PrismScroller reads that position once per animation frame and paints everything from it: layer offsets, the pinned rail's translate, the progress rail, the URL in the fake chrome.
Nothing is hard-coded to a pixel value, so it survives any viewport. And if the visitor asks for reduced motion, all of it gracefully steps aside.
1engine file
0dependencies
60fps target
02 — the rail
Scroll down. Move sideways.
vertical → horizontal
parallax
Layers move at different speeds.
Each element with data-parallax gets a transform derived from its distance to the viewport center. Positive drifts down, negative drifts up.
reveal
Choreography, not confetti.
An IntersectionObserver adds one class. CSS handles the easing, and a per-element --i staggers the group without a timeline library.
chrome
The page wears a window.
The frame, traffic lights and URL are fixed furniture. A section observer rewrites the URL as you pass through, so the chrome narrates the journey.
tilt
Cards lean toward the pointer.
Pointer position becomes a few degrees of rotateX/rotateY. Subtle on purpose — enough to feel alive, never enough to read badly.
a11y
Motion is a preference.
prefers-reduced-motion disables parallax, pinning and smooth easing. The content still lands, just without the theatrics.
03 — the parts
Small engine, sharp edges.
Everything below is one CSS file and one JS file, shared by all the sites in this vault.
01
◈
Window frame
Fixed chrome, live URL, scroll percentage and a glowing rail.
02
≋
Parallax
Data-attribute driven, transform-only, culled off-screen.
03
▤
Pinned rail
Sticky viewport plus translate. Falls back to swipe on mobile.
04
✳
Reveals
Observer + CSS easing, with optional count-up numbers.
05
◎
Spotlight
One radial gradient follows the pointer via two CSS vars.
06
↧
Smooth anchors
Custom cubic easing that respects the window frame offset.
“The best scroll effect is the one you feel before you notice.”— nobody, but it sounds right