From d5672bd115e667135d543c096066018fc7abbaf4 Mon Sep 17 00:00:00 2001 From: rohith-0601 Date: Sat, 4 Oct 2025 14:11:06 +0530 Subject: [PATCH] hidden scrollbar and added lenis for viscous scroll effect --- package-lock.json | 17 +++++++ package.json | 1 + src/index.css | 23 ++++++++++ src/routes.jsx | 113 ++++++++++++++++++++++++++++++++++++---------- 4 files changed, 131 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6ac81e5..6578920 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "hackerblog", "version": "0.0.0", "dependencies": { + "@studio-freight/lenis": "^1.0.42", "@tailwindcss/vite": "^4.1.13", "axios": "^1.12.2", "framer-motion": "^12.23.22", @@ -61,6 +62,7 @@ "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", @@ -1284,6 +1286,13 @@ "win32" ] }, + "node_modules/@studio-freight/lenis": { + "version": "1.0.42", + "resolved": "https://registry.npmjs.org/@studio-freight/lenis/-/lenis-1.0.42.tgz", + "integrity": "sha512-HJAGf2DeM+BTvKzHv752z6Z7zy6bA643nZM7W88Ft9tnw2GsJSp6iJ+3cekjyMIWH+cloL2U9X82dKXgdU8kPg==", + "deprecated": "The '@studio-freight/lenis' package has been renamed to 'lenis'. Please update your dependencies: npm install lenis and visit the documentation: https://www.npmjs.com/package/lenis", + "license": "MIT" + }, "node_modules/@tailwindcss/node": { "version": "4.1.13", "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz", @@ -1610,6 +1619,7 @@ "integrity": "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -1651,6 +1661,7 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1773,6 +1784,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.3", "caniuse-lite": "^1.0.30001741", @@ -2126,6 +2138,7 @@ "integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -3277,6 +3290,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -3343,6 +3357,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz", "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -3352,6 +3367,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz", "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -3686,6 +3702,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.6.tgz", "integrity": "sha512-SRYIB8t/isTwNn8vMB3MR6E+EQZM/WG1aKmmIUCfDXfVvKfc20ZpamngWHKzAmmu9ppsgxsg4b2I7c90JZudIQ==", "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", diff --git a/package.json b/package.json index e11b239..f90780e 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "preview": "vite preview" }, "dependencies": { + "@studio-freight/lenis": "^1.0.42", "@tailwindcss/vite": "^4.1.13", "axios": "^1.12.2", "framer-motion": "^12.23.22", diff --git a/src/index.css b/src/index.css index a3fa9c8..50723bc 100644 --- a/src/index.css +++ b/src/index.css @@ -7,3 +7,26 @@ --font-google-code: "Google Sans Code", monospace; --font-press-start: "Press Start 2P", cursive; } + +/* ===== Hide scrollbars globally but keep scroll functional ===== */ +::-webkit-scrollbar { + display: none; /* Chrome, Safari, Opera */ +} + +* { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +/* ===== If you only want to hide scrollbars for a specific container ===== */ +/* Example usage:
...
*/ + +.scroll-container { + overflow: auto; /* or scroll */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +.scroll-container::-webkit-scrollbar { + display: none; /* Chrome, Safari, Opera */ +} diff --git a/src/routes.jsx b/src/routes.jsx index ce5c10e..aa73c2d 100644 --- a/src/routes.jsx +++ b/src/routes.jsx @@ -1,61 +1,128 @@ import { createBrowserRouter, - RouterProvider, + useLocation, } from "react-router-dom"; +import { useEffect } from "react"; import Layout from "./layout/Layout"; import LandingPage from "./pages/LandingPage"; import LoginPage from "./pages/LoginPage"; import RegisterPage from "./pages/RegisterPage"; import ProtectedRoute from "./routes/ProtectedRoute"; import PublicRoute from "./routes/PublicRoute"; +import Lenis from "@studio-freight/lenis"; -// Placeholder component for dashboard +// ===== Scroll & Smooth Wrapper ===== +const SmoothScrollWrapper = ({ children }) => { + const { pathname } = useLocation(); + + useEffect(() => { + // Initialize Lenis + const lenis = new Lenis({ + duration: 1.0, // higher = heavier / more viscous feel + easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), + smoothWheel: true, + smoothTouch: true, + }); + + // RAF loop + const raf = (time) => { + lenis.raf(time); + requestAnimationFrame(raf); + }; + requestAnimationFrame(raf); + + // Scroll to top smoothly on route change + lenis.scrollTo(0, { offset: 0, duration: 1.2 }); + + return () => { + lenis.destroy(); + }; + }, [pathname]); + + return ( +
+ {children} + +
+ ); +}; + +// ===== Dashboard Placeholder ===== const DashboardPage = () => (

Dashboard

-

- Welcome to your dashboard! User functionality will be implemented here. -

+

Welcome to your dashboard! User functionality will be implemented here.

+ {/* Extra content for scroll testing */} +
); +// ===== Routes ===== const routes = createBrowserRouter([ { path: "/", element: ( - - - + + + + + ), }, { path: "/login", element: ( - - - - - + + + + + + + ), }, { path: "/register", element: ( - - - - - + + + + + + + ), }, { path: "/dashboard", element: ( - - - - - + + + + + + + ), }, ]);