Smooth Scroll Provider
Feel The Physics
Scroll down this container. Notice the buttery smooth inertia, spring physics, and perfect stopping powered by Lenis.
1.2s
Duration
2x
Touch Mult
No
Smooth Touch
Scroll Block 1
Scroll Block 2
Scroll Block 3
Scroll Block 4
Scroll Block 5
Overview
A lightweight wrapper around Lenis that provides high-performance, butter-smooth scroll experiences. This is the foundation for creating Awwwards-style premium web experiences.
Usage
import { SmoothScroll } from "@/components/creative/smooth-scroll"
<SmoothScroll
duration={1.2}
smoothTouch={false}
>
{/* Your app content goes here */}
</SmoothScroll>
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { SmoothScroll } from "@/components/creative/smooth-scroll";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { SmoothScroll } from "@/components/creative/smooth-scroll";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<SmoothScroll
duration{10}
easing{10}
smoothTouch{true}
>
<div>Content goes here</div>
</SmoothScroll>
</div>
);
}