Installation

$ npx skills add smithery/neversight --skill implement-lenis-scroll

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared

Cursor Not declared

Codex Not declared

GitHub Copilot Not declared

Windsurf Not declared

Gemini CLI Not declared

Cline Not declared

OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

skill md SKILL.md 2,321 B

docs SUMMARY.md 117 B

SKILL.md

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)
    }

    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):

import SmoothScroll from '@/components/SmoothScroll'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <SmoothScroll>
          {children}
        </SmoothScroll>
      </body>
    </html>
  )
}

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) ``

implement_lenis_scroll