# Implement Lenis Scroll > Instructions for implementing Lenis smooth scrolling in a Next.js or React application. - Skill: `jerrar670/implement-lenis-scroll` (Agent Skill) - Install (CLI): `npx skillmds@latest add jerrar670/implement-lenis-scroll` - Raw SKILL.md: https://api.skillmd.com/api/skills/jerrar670/implement-lenis-scroll/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: jerrar670 (https://skillmd.com/u/jerrar670) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/jerrar670/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. ```bash 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`. ```typescript // 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) } requestAnimationFrame(raf) return () => { lenis.destroy() } }, []) return <>{children} } ``` ### 3. Integrate into Layout Wrap your main application or layout content with the component. **Next.js App Router (`layout.tsx`):** ```typescript import SmoothScroll from '@/components/SmoothScroll' export default function RootLayout({ children }) { return ( {children} ) } ``` ## Best Practices - **Performance**: Ensure `requestAnimationFrame` is optimized. - **Scroll Restoration**: Lenis usually handles this, but verify `scrollRestoration` works as expected in Next.js. - **GSAP Integration**: If using ScrollTrigger, ensure you update ScrollTrigger on Lenis scroll. ```typescript // Inside useEffect // lenis.on('scroll', ScrollTrigger.update) // gsap.ticker.add((time)=>{lenis.raf(time * 1000)}) // gsap.ticker.lagSmoothing(0) ```