Smooth Scrolling

About Lenis

Lenis is a lightweight, robust, and performant smooth scroll library. It provides a premium scrolling experience with customizable easing, duration, and behavior.

Configuration

Enable or disable smooth scrolling in your site configuration:

// src/config/site.ts
export const siteConfig = {
  features: {
    smoothScrolling: true, // Enable Lenis
  },
}

Features

• Smooth wheel scrolling - Natural feeling scroll with momentum
• Touch support - Works great on mobile devices
• Keyboard navigation - Supports arrow keys and page up/down
• Anchor links - Smooth scrolling to anchor targets
• Performance - Optimized for 60fps on all devices

Default Settings

The template uses these default Lenis settings:

new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  orientation: 'vertical',
  smoothWheel: true,
  wheelMultiplier: 1,
  touchMultiplier: 2,
});