Lenis + Motion: building my site's smooth scroll

This site's smooth scroll comes from Lenis, which intercepts native scrolling and interpolates the movement — it's what makes the page feel "weighty" in a good way, instead of just jumping from position to position.

The risk of mixing Lenis with Motion (formerly Framer Motion) animations is sync: if the two libraries calculate position differently, elements that should enter the screen "at the right scroll moment" end up early or late. The fix was letting Lenis run at the app's root level (via ReactLenis root in Providers.tsx) and using Motion's whileInView normally — it already listens to the real viewport, it doesn't need to know Lenis exists.

The part almost nobody gets right: prefers-reduced-motion. This site uses Motion's MotionConfig reducedMotion="user", which automatically turns animations off for anyone who's set that at the OS level — no need to duplicate the logic in every component.

Result: people who don't mind motion get a site that glides; people with motion sensitivity (a real slice of any audience) get instant transitions, without losing any functionality. Accessibility and feeling like a premium product aren't opposites.