javaistic · arghyaxcodes · Oct 29, 2025 · Oct 29, 2025 · Oct 29, 2025
diff --git a/bun.lock b/bun.lock
@@ -14,6 +14,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",
@@ -852,6 +853,8 @@
 
     "latest": ["latest@0.2.0", "", { "dependencies": { "npm": "^2.5.1" }, "bin": { "latest": "./bin/latest.js" } }, "sha512-nsIM/FjwLcsKZ1KDAw5CivnM26zzMs3zGBL4SdjYXHI5tMcOWjGhFDMBKIum4WNAkZmeVw7zU1jR2H2UiKoQVA=="],
 
+    "lenis": ["lenis@1.3.13", "", { "peerDependencies": { "@nuxt/kit": ">=3.0.0", "react": ">=17.0.0", "vue": ">=3.0.0" }, "optionalPeers": ["@nuxt/kit", "react", "vue"] }, "sha512-9FTVlAm2PA82JHnFKWgzJkuxlG7orJneVHqUDhZvVPAQDduEVxlVtXRTNgdhERVR5MUX1iDrRaklBvHbVhxQpg=="],
+
     "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
 
     "lightningcss": ["lightningcss@1.30.1", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-darwin-arm64": "1.30.1", "lightningcss-darwin-x64": "1.30.1", "lightningcss-freebsd-x64": "1.30.1", "lightningcss-linux-arm-gnueabihf": "1.30.1", "lightningcss-linux-arm64-gnu": "1.30.1", "lightningcss-linux-arm64-musl": "1.30.1", "lightningcss-linux-x64-gnu": "1.30.1", "lightningcss-linux-x64-musl": "1.30.1", "lightningcss-win32-arm64-msvc": "1.30.1", "lightningcss-win32-x64-msvc": "1.30.1" } }, "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg=="],

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/home/home-tabs.tsx b/src/components/home/home-tabs.tsx
@@ -5,6 +5,7 @@ import {
   type UnderlineTab,
 } from "@/components/home/underline-tabs";
 import { useDarkMode } from "@/hooks/useDarkMode";
+import { motion } from "framer-motion";
 import Image from "next/image";
 import { SVGProps } from "react";
 
@@ -57,10 +58,16 @@ export default function HomeTabs() {
   ];
 
   return (
-    <div className="flex w-full flex-col items-center">
+    <motion.div
+      className="flex w-full flex-col items-center"
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "-100px" }}
+      transition={{ duration: 0.8, ease: "easeOut", delay: 0.1 }}
+    >
       {/* Top Tab Navigation */}
       <UnderlineTabs items={TAB_ITEMS} defaultValue="docs" className="w-full" />
-    </div>
+    </motion.div>
   );
 }
 

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;