Merge pull request #769 from javaistic/feat/enahnce-animations

arghyaxcodes · web-flow · commit 8d7605b77d59 · 2025-10-29T07:55:31.000+05:30
Add LenisProvider for smooth scrolling and integrate `motion` for tab animations
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/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;
