Implement Lenis Scroll

Implement Lenis Smooth Scroll

This skill guides you through adding buttery smooth scrolling to a React/Next.js application using @studio-freight/lenis (or the newer lenis package).

Prerequisites

• A React or Next.js project.

Steps

1. Install Dependencies

Install the Lenis package.

npm install lenis
# OR depending on version preference
npm install @studio-freight/lenis

2. Create the Lenis Hook/Component

It's best to encapsulate Lenis in a reusable component or hook.

Option A: Global Component (Recommended for Next.js App Router) Create src/lib/lenis.ts or src/components/SmoothScroll.tsx.

// src/components/SmoothScroll.tsx
'use client'

import { ReactNode, useEffect } from 'react'
import Lenis from 'lenis'

export default function SmoothScroll({ children }: { children: ReactNode }) {
  useEffect(() => {
    const lenis = new Lenis({
      duration: 1.2,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      orientation: 'vertical',
      gestureOrientation: 'vertical',
      smoothWheel: true,
    })

    function raf(time: number) {
      lenis.raf(time)
      requestAnimationFrame(raf)
    }