Scroll Forensics — Reverse-Engineer Scroll Animations

Scroll report — lenis.dev

Analyzed Oct 13, 2026 · headless Chromium 1440×900 · 49 samples · robots.txt: allowed · pre-load instrumentation: yes

One-line verdict

Lenis smooth scroll + a sticky horizontal track: a position: sticky stage holds while a JS-written translateX scrubs

5,040 px across 9.3 viewports of scroll — linear (R² 0.996), no easing on top.

Detected stack

Mechanics per section

Horizontal showcase

Technique: sticky stage (100vh) inside a tall wrapper; the inner track is moved with an inline transform written by JS every frame

• Scroll range: 3,809 → 12,187 px (8,378 px · 9.3 viewports)
• Animated property: translateX 0 → −5,040 px
• Curve: linear (fit error 2.56%, R² 0.9962) — pure scrub
• Trigger: continuous scroll progress, no discrete state

Background layer

• Fixed layer drifts top −539.8 → −899.6 px over 0 → 15,996 px (factor 0.0225)
• Best fit cubic-bezier(0.22, 1, 0.36, 1) (quart.out), error 1.48% — long tail: only 1.6% of the travel happens in the last 30%

Numbers extracted

1 series discarded as plain 1:1 page movement (no effect of its own).

Instrumented before load

• 23 IntersectionObservers: rootMargin 200px / threshold 0 and 0px / 1
• 8 scroll listeners, all passive
• 0 wheel preventDefault → no virtual-scroll hijack

Details that make it feel premium

Linear track, smooth scroll. The softness comes from Lenis, not from the curve — easing the track would make it feel slower, not richer.

• The stage height buys the scroll. The track finishes exactly as the pin releases: wrapper ≈ 100vh + 8,378px.

It holds before it moves. The track stays at 0 until 3,809 px, so the section settles on screen before the motion starts.

• Transform only. translate3d stays on the compositor: 60.2 fps at 179 rAF calls/s under scroll.

Cost & accessibility

• fps under scroll: 60.2 (headless)
• prefers-reduced-motion: ignored — Lenis and WebGL stay active with reduce on
• Mobile 390×844: pin survives, 2 sticky blocks

Reimplementation plan (your own code)

.rail        { height: calc(100vh + 8378px); }
.rail__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.rail__track { display: flex; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .rail { height: auto; }
  .rail__stage { position: static; overflow-x: auto; }
}

const rail  = document.querySelector('.rail');
const track = rail.querySelector('.rail__track');
const TRAVEL = 5040; // px · measured amplitude
const RANGE  = 8378; // px · measured active range

function update() {
  const p = Math.min(Math.max((scrollY - rail.offsetTop) / RANGE, 0), 1);
  track.style.transform = `translate3d(${-TRAVEL * p}px,0,0)`; // linear on purpose
}
addEventListener('scroll', update, { passive: true });
update();

Build order: static horizontal layout → sticky stage + wrapper height → linear scrub with the numbers above → smooth scroll on top → reduced-motion and 390 px check.

Limitations of this analysis

• Range edges resolve to one sampling step (762 px); re-run with more --steps for tighter start/end values.
• No measurable inertia in the sampled series; Lenis damping on real wheel input was not measured.
• Mechanism and numbers only — none of the site's code, copy, images or brand was extracted.