From 537c95b22b2ef836bb3dd6197ab00eac639d151a Mon Sep 17 00:00:00 2001 From: Arghya Ghosh <71373838+uiuxarghya@users.noreply.github.com> Date: Wed, 29 Oct 2025 07:51:19 +0530 Subject: [PATCH 1/2] feat(lenis): Add LenisProvider for smooth scrolling and update dependencies --- bun.lock | 3 +++ package.json | 1 + src/app/global.css | 4 +++ src/app/layout.tsx | 3 ++- src/components/providers/lenis-provider.tsx | 30 +++++++++++++++++++++ 5 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 src/components/providers/lenis-provider.tsx diff --git a/bun.lock b/bun.lock index 2ddaea30..8fdb53cb 100644 --- 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 index a829cc45..71cbd250 100644 --- 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 index 63819f81..e879a423 100644 --- 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 index 5a946ab6..95124913 100644 --- 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} + {children} diff --git a/src/components/providers/lenis-provider.tsx b/src/components/providers/lenis-provider.tsx new file mode 100644 index 00000000..64832f78 --- /dev/null +++ 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; From 1e633917bb56eccc15c2ad4c61b57769ff64b872 Mon Sep 17 00:00:00 2001 From: Arghya Ghosh <71373838+uiuxarghya@users.noreply.github.com> Date: Wed, 29 Oct 2025 07:51:50 +0530 Subject: [PATCH 2/2] feat(home-tabs): Integrate framer-motion for animated tab transitions --- src/components/home/home-tabs.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/home/home-tabs.tsx b/src/components/home/home-tabs.tsx index 8d75ab6f..7b4b6d15 100644 --- 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 ( -
+ {/* Top Tab Navigation */} -
+ ); }