Skip to content

Commit 0a28313

Browse files
FusionStreakFusionStreak
committed
feat: add SmoothScrolling component for enhanced scrolling experience
1 parent 820c4a1 commit 0a28313

File tree

2 files changed

+135
-113
lines changed

2 files changed

+135
-113
lines changed

‎app/layout.tsx‎

Lines changed: 119 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ import { ThemeProvider } from "./theme-provider";
55
import PillNav, { PillNavItem } from "@/components/PillNav";
66
import PixelBlast from "@/components/PixelBlast";
77
import ThemeSwitcher from "@/components/ThemeSwitcher";
8+
import SmoothScrolling from "@/components/SmoothScrolling";
89
import Link from "next/link";
9-
import 'highlight.js/styles/github-dark.css';
10+
import "highlight.js/styles/github-dark.css";
11+
import "lenis/dist/lenis.css";
1012

1113
const geistSans = Geist({
1214
variable: "--font-geist-sans",
@@ -59,120 +61,124 @@ export default function RootLayout({
5961
enableSystem
6062
disableTransitionOnChange
6163
>
62-
<div className="relative min-h-dvh overflow-hidden">
63-
<div className="pointer-events-auto absolute inset-0 -z-10">
64-
<PixelBlast
65-
variant="circle"
66-
pixelSize={5}
67-
patternScale={1.6}
68-
patternDensity={1.45}
69-
pixelSizeJitter={0.35}
70-
edgeFade={0.2}
71-
color="#ff7b19"
72-
darkColor="#ff7b19"
73-
lightColor="#0e0e0f"
74-
rippleIntensityScale={0.9}
75-
rippleThickness={0.15}
76-
liquid
77-
liquidStrength={0.2}
78-
liquidRadius={1.2}
79-
noiseAmount={0.08}
80-
className="h-full w-full opacity-30"
81-
/>
64+
<SmoothScrolling>
65+
<div className="relative min-h-dvh overflow-hidden">
66+
<div className="pointer-events-auto absolute inset-0 -z-10">
67+
<PixelBlast
68+
variant="circle"
69+
pixelSize={5}
70+
patternScale={1.6}
71+
patternDensity={1.45}
72+
pixelSizeJitter={0.35}
73+
edgeFade={0.2}
74+
color="#ff7b19"
75+
darkColor="#ff7b19"
76+
lightColor="#0e0e0f"
77+
rippleIntensityScale={0.9}
78+
rippleThickness={0.15}
79+
liquid
80+
liquidStrength={0.2}
81+
liquidRadius={1.2}
82+
noiseAmount={0.08}
83+
className="h-full w-full opacity-30"
84+
/>
85+
</div>
86+
<div className="pointer-events-none fixed bottom-6 right-6 z-50 hidden md:block">
87+
<ThemeSwitcher className="pointer-events-auto h-12 w-12 border-border/40 bg-background/80 shadow-xl backdrop-blur-lg" />
88+
</div>
89+
<div className="relative z-10 flex min-h-dvh flex-col space-y-6">
90+
<header className="relative z-40 h-24 px-2">
91+
<div className="container relative mx-auto flex h-full max-w-screen-7xl items-center">
92+
<PillNav
93+
logo="/logo.svg"
94+
logoAlt="Sayfullah Eid logo"
95+
items={NAV_ITEMS}
96+
className="backdrop-blur-xl bg-background/70 border border-border/20 shadow-md shadow-primary/5 rounded-full"
97+
baseColor="#000000"
98+
pillColor="#ff6900"
99+
hoveredPillTextColor="#ffffff"
100+
pillTextColor="#ffffff"
101+
mobileAccessory={
102+
<ThemeSwitcher className="h-10 w-10 border-border/30 bg-background/80 shadow" />
103+
}
104+
mobileMenuAccessory={
105+
<div className="rounded-[22px] bg-[var(--base,#000)]/10 p-2">
106+
<ThemeSwitcher className="h-12 w-full border-border/20 bg-background/90" />
107+
</div>
108+
}
109+
/>
110+
</div>
111+
</header>
112+
<main className="container flex-1 flex-col items-center justify-center gap-6 px-2 pt-8 md:pt-12 lg:py-32 mx-auto max-w-screen-7xl">
113+
{children}
114+
</main>
115+
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center px-4 py-6">
116+
<div className="flex flex-col items-center gap-2 text-xs text-muted-foreground">
117+
<p>
118+
&copy; {new Date().getFullYear()} Created by{" "}
119+
<Link
120+
target="_blank"
121+
rel="noreferrer"
122+
href="https://github.com/FusionStreak/FusionStreak.github.io"
123+
className="text-primary hover:underline"
124+
>
125+
Sayfullah Eid
126+
</Link>
127+
</p>
128+
<p className="flex items-center gap-1">
129+
Built with{" "}
130+
<Link
131+
target="_blank"
132+
rel="noreferrer"
133+
href="https://nextjs.org"
134+
className="text-primary hover:underline"
135+
>
136+
Next.js
137+
</Link>
138+
{", "}
139+
<Link
140+
target="_blank"
141+
rel="noreferrer"
142+
href="https://ui.shadcn.com"
143+
className="text-primary hover:underline"
144+
>
145+
ShadCN UI
146+
</Link>
147+
{", "}
148+
<Link
149+
target="_blank"
150+
rel="noreferrer"
151+
href="https://reactbits.dev/"
152+
className="text-primary hover:underline"
153+
>
154+
React Bits
155+
</Link>
156+
{", "}
157+
<Link
158+
target="_blank"
159+
rel="noreferrer"
160+
href="https://fontawesome.com/"
161+
className="text-primary hover:underline"
162+
>
163+
Font Awesome Icons
164+
</Link>
165+
{", and "}
166+
<Link
167+
target="_blank"
168+
rel="noreferrer"
169+
href="https://lucide.dev"
170+
className="text-primary hover:underline"
171+
>
172+
Lucide Icons
173+
</Link>
174+
</p>
175+
</div>
176+
</footer>
177+
</div>
82178
</div>
83-
<div className="pointer-events-none fixed bottom-6 right-6 z-50 hidden md:block">
84-
<ThemeSwitcher className="pointer-events-auto h-12 w-12 border-border/40 bg-background/80 shadow-xl backdrop-blur-lg" />
85-
</div>
86-
<div className="relative z-10 flex min-h-dvh flex-col space-y-6">
87-
<header className="relative z-40 h-24 px-2">
88-
<div className="container relative mx-auto flex h-full max-w-screen-7xl items-center">
89-
<PillNav
90-
logo="/logo.svg"
91-
logoAlt="Sayfullah Eid logo"
92-
items={NAV_ITEMS}
93-
className="backdrop-blur-xl bg-background/70 border border-border/20 shadow-md shadow-primary/5 rounded-full"
94-
baseColor="#000000"
95-
pillColor="#ff6900"
96-
hoveredPillTextColor="#ffffff"
97-
pillTextColor="#ffffff"
98-
mobileAccessory={<ThemeSwitcher className="h-10 w-10 border-border/30 bg-background/80 shadow" />}
99-
mobileMenuAccessory={
100-
<div className="rounded-[22px] bg-[var(--base,#000)]/10 p-2">
101-
<ThemeSwitcher className="h-12 w-full border-border/20 bg-background/90" />
102-
</div>
103-
}
104-
/>
105-
</div>
106-
</header>
107-
<main className="container flex-1 flex-col items-center justify-center gap-6 px-2 pt-8 md:pt-12 lg:py-32 mx-auto max-w-screen-7xl">
108-
{children}
109-
</main>
110-
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center px-4 py-6">
111-
<div className="flex flex-col items-center gap-2 text-xs text-muted-foreground">
112-
<p>
113-
&copy; {new Date().getFullYear()} Created by{" "}
114-
<Link
115-
target="_blank"
116-
rel="noreferrer"
117-
href="https://github.com/FusionStreak/FusionStreak.github.io"
118-
className="text-primary hover:underline"
119-
>
120-
Sayfullah Eid
121-
</Link>
122-
</p>
123-
<p className="flex items-center gap-1">
124-
Built with{" "}
125-
<Link
126-
target="_blank"
127-
rel="noreferrer"
128-
href="https://nextjs.org"
129-
className="text-primary hover:underline"
130-
>
131-
Next.js
132-
</Link>
133-
{", "}
134-
<Link
135-
target="_blank"
136-
rel="noreferrer"
137-
href="https://ui.shadcn.com"
138-
className="text-primary hover:underline"
139-
>
140-
ShadCN UI
141-
</Link>
142-
{", "}
143-
<Link
144-
target="_blank"
145-
rel="noreferrer"
146-
href="https://reactbits.dev/"
147-
className="text-primary hover:underline"
148-
>
149-
React Bits
150-
</Link>
151-
{", "}
152-
<Link
153-
target="_blank"
154-
rel="noreferrer"
155-
href="https://fontawesome.com/"
156-
className="text-primary hover:underline"
157-
>
158-
Font Awesome Icons
159-
</Link>
160-
{", and "}
161-
<Link
162-
target="_blank"
163-
rel="noreferrer"
164-
href="https://lucide.dev"
165-
className="text-primary hover:underline"
166-
>
167-
Lucide Icons
168-
</Link>
169-
</p>
170-
</div>
171-
</footer>
172-
</div>
173-
</div>
179+
</SmoothScrolling>
174180
</ThemeProvider>
175181
</body>
176182
</html>
177183
);
178-
}
184+
}

‎components/SmoothScrolling.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
"use client";
2+
3+
import { ReactLenis } from "lenis/react";
4+
import { ReactNode } from "react";
5+
6+
interface SmoothScrollingProps {
7+
children: ReactNode;
8+
}
9+
10+
export default function SmoothScrolling({ children }: SmoothScrollingProps) {
11+
return (
12+
<ReactLenis root options={{ lerp: 0.1, duration: 1.2, smoothWheel: true }}>
13+
{children}
14+
</ReactLenis>
15+
);
16+
}

0 commit comments

Comments
 (0)