feat(lenis): Add LenisProvider for smooth scrolling and update depend…

…encies
javaistic · arghyaxcodes · Oct 29, 2025 · Oct 29, 2025 · Oct 29, 2025 · Oct 29, 2025
commit 537c95b22b2ef836bb3dd6197ab00eac639d151a
diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "fumadocs-mdx": "11.7.0",
     "fumadocs-ui": "15.6.5",
     "latest": "^0.2.0",
+    "lenis": "^1.3.13",
     "lucide-react": "^0.525.0",
     "motion": "^12.23.12",
     "next": "15.4.2",

diff --git a/src/app/global.css b/src/app/global.css
@@ -1,6 +1,10 @@
 @import "tailwindcss";
+
 @import "fumadocs-ui/css/shadcn.css";
 @import "fumadocs-ui/css/preset.css";
+
+@import "lenis/dist/lenis.css";
+
 @import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import LenisProvider from "@/components/providers/lenis-provider";
 import SearchDialog from "@/components/search";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import { RootProvider } from "fumadocs-ui/provider";
@@ -58,7 +59,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
             SearchDialog,
           }}
         >
-          {children}
+          <LenisProvider>{children}</LenisProvider>
         </RootProvider>
       </body>
       <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS!} />

diff --git a/src/components/providers/lenis-provider.tsx b/src/components/providers/lenis-provider.tsx
@@ -0,0 +1,30 @@
+"use client"; // Mark as a client component
+
+import React, { useEffect } from "react";
+import Lenis from "lenis";
+
+const LenisProvider = ({ children }: { children: React.ReactNode }) => {
+  useEffect(() => {
+    const lenis = new Lenis({
+      duration: 1.2, // Customize duration
+      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Custom easing
+      touchMultiplier: 2, // Multiplier for touch devices
+      wheelMultiplier: 1, // Multiplier for mouse wheel
+    });
+
+    function raf(time: number) {
+      lenis.raf(time);
+      requestAnimationFrame(raf);
+    }
+
+    requestAnimationFrame(raf);
+
+    return () => {
+      lenis.destroy(); // Clean up on unmount
+    };
+  }, []);
+
+  return <>{children}</>;
+};
+
+export default LenisProvider;