Best for
Editorial portfolios, storytelling, visual showcases, and deliberately choreographed landing pages with long transitions.
Motion Lab / Scroll system study
Scroll that follows intention.
Study the feel of interpolated scrolling using the actual Lenis library when you opt in. By default the demo uses native browser scrolling. Respect reduced-motion settings, keyboard scrolling, touch input, nested scroll regions, and the user's preference to turn the effect off.
Native scrolling active. Nothing downloaded.
Live scroll playground / opt-in enhancement
01 / INTRODUCTION
Design should breathe.
Scroll inside this frame to experience the native behavior. Then enable Lenis above to compare.
02 / RHYTHM
A calmer transition.
Use interpolation only when it improves context and continuity. Avoid excessive delays.
03 / CONTROL
Leave the user in charge.
Respect reduced motion, focus, keyboard interaction and immediate scrolling needs.
04 / RESTRAINT
Motion earns its place.
Use native scrolling for documents, form-heavy flows and situations where a scroll modifier adds friction.
Avoid when
Motion might slow task completion, interfere with assistive input, or reduce a user's sense of control.
What to test
Keyboard navigation, anchors, touchpad, trackpad, touch, browser back/forward, nested scrolling, reduced motion and low-power hardware.
Build and audit prompt
Copy this into your coding agent. Integrate into a chosen scene, not every page.
Build an optional smooth-scroll editorial experience using darkroomengineering/lenis (MIT). Default to native scroll; enable Lenis only on explicit opt-in for the designated scroll wrapper. Honor prefers-reduced-motion, keyboard focus, anchor navigation, nested scroll, touch behavior, and a reversible opt-out. Follow Lenis official docs for the installed version; use a single animation loop, cleanly destroy the instance when disabled, do not hijack the global document, and verify 360px mobile, keyboard-only, and reduced motion. Include a side-by-side native/Lenis QA protocol and a fallback if the dependency fails. Do not claim a performance improvement without measurements.
Upstream: darkroomengineering/lenis (MIT). Note: This is an original educational demonstration, not a vendored fork. The optional module is loaded from a CDN only after the user enables it, so the demo requires internet access for enhanced mode. See official setup documentation before production integration.