feat(smooth-scroll): implement smooth scrolling functionality with Lenis integration

2026-03-12 19:08:44 +01:00
parent 8f6a242273
commit ef9b277396
6 changed files with 160 additions and 1 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -62,6 +62,23 @@ body::before {
  will-change: transform;
 }

+html.lenis,
+html.lenis body {
+  height: auto;
+}
+
+.lenis.lenis-smooth {
+  scroll-behavior: auto !important;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+  overscroll-behavior: contain;
+}
+
+.lenis.lenis-stopped {
+  overflow: hidden;
+}
+
 .font-heading {
  font-family: "Space Grotesk", "Manrope", "Segoe UI", sans-serif;
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,8 @@ import type { Metadata } from "next";
 import "./globals.css";
 import "currency-flags/dist/currency-flags.min.css";

+import { SmoothScrollProvider } from "@/components/providers/smooth-scroll-provider";
+
 export const metadata: Metadata = {
  title: "NexCurrency | Modern Currency & Crypto Converter",
  description:
@@ -17,7 +19,7 @@ export default function RootLayout({
  return (
    <html lang="en" className="dark" suppressHydrationWarning>
      <body className="font-sans antialiased">
-        {children}
+        <SmoothScrollProvider>{children}</SmoothScrollProvider>
      </body>
    </html>
  );