skills.rest
darkroomengineering
darkroomengineeringOFFICIAL
Explore all skills by this author →
Website𝕏@darkroomdevsGitHub

lenis

Set up Lenis smooth scroll in Next.js/React projects with provider and useLenis hook.

41|3|Updated Jan 12, 2026
Search Tags:#react#nextjs#ui-ux#scrolling#smooth-scroll#lenis
One-click install
npx skills add https://github.com/darkroomengineering/cc-settings --skill lenis-darkroomengineering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lenis
Source: https://github.com/darkroomengineering/cc-settings/tree/main/skills/lenis
Command: npx skills add https://github.com/darkroomengineering/cc-settings --skill lenis-darkroomengineering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Set up Lenis smooth scroll in a Next.js/React app to deliver silky, customizable scrolling experiences.

Core Features & Use Cases

  • Lenis provider for smooth scrolling across the app.
  • Layout integration to apply smooth scrolling site-wide.
  • Optional GSAP ScrollTrigger compatibility for scroll-driven animations.
  • Practical examples: enabling smooth scrolling on long pages and scroll-based animation triggers.

Quick Start

Wrap your app with the Lenis provider and render your pages inside it to enable smooth, scroll-based behavior.

Frequently Asked Questions about lenis

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add smooth scrolling to a React or Next.js app?▼

To add smooth scrolling to a React or Next.js app, wrap your application with a Lenis provider and render your pages inside it to enable seamless, site-wide scroll behavior.

What is Lenis smooth scroll used for in web development?▼

Lenis smooth scroll is used to deliver silky, customizable scrolling experiences in React apps, improving overall UX and enabling scroll-based animations on long pages.

Can I use Lenis smooth scrolling with GSAP ScrollTrigger?▼

Yes, Lenis smooth scrolling offers optional compatibility with GSAP ScrollTrigger, allowing you to synchronize scroll-driven animations seamlessly within your Next.js or React project.

What is the best way to enable site-wide smooth scrolling in Next.js?▼

The best way to enable site-wide smooth scrolling in Next.js is through layout integration, wrapping your root layout with the Lenis provider to apply the effect globally.

How do I trigger scroll-based animations using Lenis in React?▼

You can trigger scroll-based animations using Lenis in React by utilizing the provided useLenis hook alongside its optional GSAP ScrollTrigger compatibility to drive scroll-driven behaviors.

Related Skills

Explore More Software Engineering Skills→
deadhearth01deadhearth01

implement_lenis_scroll

Integrate Lenis smooth scrolling into React and Next.js App Router projects.

Community
Intermediate
hii-saikrishnahii-saikrishna

gsap-scrolltrigger

Create scroll-triggered animations using GSAP and ScrollTrigger libraries.

Community
Advanced
wyrmspirewyrmspire

video-to-website

Convert video files into scroll-driven animated websites with FFmpeg, GSAP, and Lenis.

Community
Advanced
sethihqsethihq

lenis

Configure Lenis smooth scrolling in React applications with a ReactLenis provider.

Community
Basic