Wheel and trackpad
A wheel event becomes a target the page eases towards instead of a jump, so long pages finally feel like they have weight.
Under the hood
Smooth as the
road to Merzouga.
This page runs Lenis — the open-source library that turns stuttering wheel, trackpad and touch scrolling into one continuous glide, while native sticky sections, anchor links and reduced-motion settings stay exactly where your browser expects them.
- Progress
- 0.0%
- Velocity
- 0.00
- Direction
- –
- State
- idle
Lenis 1.3.26 · live demo
Scroll to explore
How it works
Three lines,
one smooth ride.
Add one stylesheet and one deferred script before your own, then hand the wheel to a single constructor. Lenis keeps using the browser’s real scroll position — it only changes how quickly the page gets there.
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.26/dist/lenis.css">
<script src="https://unpkg.com/lenis@1.3.26/dist/lenis.min.js" defer></script>
const lenis = new Lenis({ autoRaf: true, anchors: true });Touch and keyboard
Swipes stay native, and Page Down, Home and the space bar keep their browser behaviour — anchor links included.
Sticky stays sticky
The journey rail below is a plain position: sticky element. No transform hacks, no layout JavaScript, no jank.
One frame loop
autoRaf runs a single requestAnimationFrame loop for the whole page, and the geometry behind this demo is measured only on resize.
The journey rail
Six routes,
one sweep.
Six real itineraries from our Merzouga workshop. On a wide screen the rail is driven by your vertical scroll; on a narrow one it becomes a strip you can swipe sideways.
Swipe the rail sideways to browse the routes.
Depth
Foreground moves,
background waits.
One transform per frame, written only while the section is on screen. The image reads its position from geometry cached at resize time, so scrolling never asks the browser to recalculate layout.
The numbers
Cheap to load,
cheaper to run.
5.4 kBgzipped Lenis runtime
513 Bthe stylesheet it ships
0cookies set by this page
1animation frame loop
Your turn
Take the wheel.
Every control below talks to the same Lenis instance that drives the page — the one exposed as window.lenisDemo in the console.
Native scrolling.
Access
Slow is a setting,
not a compromise.
Reduced motion
When a visitor asks for less motion, Lenis is never started: the page scrolls natively, the rail becomes a swipe strip and the parallax photograph stops moving.
Keyboard first
In-page links land a hundred pixels below the docked header, focus stays visible, and every control on this page is a real button.
No lock-in
If the CDN is unreachable the page keeps working with the browser’s own scrolling — the demo simply reports the fallback instead of pretending.
The desert is patient
Ask us anything.
No tours, just talk.
10+ years sharing Morocco100% local guidesUsually replies within 2 hours