Lenis smooth scrolling for the whole page, driven by one shared frame loop.
Adds Lenis smooth scrolling to your page, with Motion as the clock.
Scroll, JS animations, and WebGL usually each run on their own loop, and they can fall out of sync.
Smooth Scroll runs them on a single loop, in a fixed order, so they always move together without delay.
Add Sable's Smooth Scroll to my app.
Run: npx shadcn@latest add @sable/smooth-scroll
That writes the sable-ui skill under .agents/skills and .claude/skills. Follow it.This command will install all the dependencies this component uses.
npx shadcn@latest add /smooth-scrollInstall the dependencies first, then feel free to copy the files into your project as you see fit.
npm install lenis motion"use client"
import type { LenisOptions } from "lenis"
import { type LenisRef, ReactLenis } from "lenis/react"
import { cancelFrame, type FrameData, frame } from "motion"
import { type ReactNode, useEffect, useRef } from "react"
type SmoothScrollProps = {
children: ReactNode
options?: LenisOptions
}
/**
* Smooth scroll for the whole page (for now).
*
* Motion is the clock: scroll, animations, and WebGL usually each run on
* their own loop, and can fall out of sync. This provider runs them on a
* single loop, in a fixed order, so they always move together.
*/
export function SmoothScroll({ children, options }: SmoothScrollProps) {
const lenisRef = useRef<LenisRef>(null)
useEffect(() => {
function update(data: FrameData) {
lenisRef.current?.lenis?.raf(data.timestamp)
}
frame.update(update, true)
return () => cancelFrame(update)
}, [])
return (
<ReactLenis root ref={lenisRef} options={{ syncTouch: true, ...options, autoRaf: false }}>
{children}
</ReactLenis>
)
}
Wrap your root layout with the provider.
import { SmoothScroll } from "@/components/smooth-scroll/smooth-scroll"
export default function RootLayout({ children }) {
return <SmoothScroll>{children}</SmoothScroll>
}Both providers run on Motion's clock, nesting order does not matter.
<SmoothScroll>
<WebglProvider>{children}</WebglProvider>
</SmoothScroll>Any component under the provider can access the Lenis instance with useLenis:
import { useLenis } from "lenis/react"
function BackToTop() {
const lenis = useLenis()
return <button onClick={() => lenis?.scrollTo(0)}>Back to top</button>
}Any Lenis option can be passed through the options prop, syncTouch is enabled by default:
<SmoothScroll options={{ lerp: 0.08, syncTouch: false }}>
{children}
</SmoothScroll>The one option you can't change is autoRaf: the provider drives Lenis itself.
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Your app or page content. Required. |
options | LenisOptions | { syncTouch: true } | Lenis instance settings. autoRaf is always false. |
Motion
React animation library.