Skip to content

Commit e5d298e

Browse files
xsunethxsuneth
committed
Add animated icons and PostHog provider
1 parent 4e318bc commit e5d298e

9 files changed

Lines changed: 2345 additions & 136 deletions

File tree

‎docs/package-lock.json‎

Lines changed: 1717 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"framer-motion": "^12.34.3",
1616
"lucide-react": "^0.562.0",
1717
"next": "16.1.6",
18+
"posthog-js": "^1.356.2",
1819
"radix-ui": "^1.4.3",
1920
"react": "19.2.3",
2021
"react-dom": "19.2.3",

‎docs/src/app/globals.css‎

Lines changed: 30 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@
108108
--chart-4: oklch(0.627 0.265 303.9);
109109
--chart-5: oklch(0.645 0.246 16.439);
110110
--sidebar: oklch(0.05 0 0);
111-
--sidebar-foreground: oklch(0.98 0 0);
111+
--sidebar-foreground: oklch(0.98 0.1 0);
112112
--sidebar-primary: oklch(0.488 0.243 264.376);
113113
--sidebar-primary-foreground: oklch(0.98 0 0);
114114
--sidebar-accent: oklch(0.12 0 0);
@@ -198,69 +198,60 @@
198198
left: -1px;
199199
width: 4px;
200200
height: 4px;
201-
background-color: var(--color-accent);
202-
}
203-
204-
@keyframes border-gradient-spin {
205-
0% { background-position: 0% 50%; }
206-
50% { background-position: 100% 50%; }
207-
100% { background-position: 0% 50%; }
201+
background: var(--color-accent);
202+
z-index: 20;
208203
}
209204

210205
.gradient-hover-card {
211206
position: relative;
212207
z-index: 1;
213208
overflow: hidden;
209+
opacity: 1;
210+
filter: grayscale(0) blur(0px);
211+
transition:
212+
background-color 0.6s cubic-bezier(0.2, 1, 0.3, 1),
213+
border-color 0.6s cubic-bezier(0.2, 1, 0.3, 1),
214+
opacity 0.6s cubic-bezier(0.2, 1, 0.3, 1),
215+
filter 0.6s cubic-bezier(0.2, 1, 0.3, 1);
214216
}
215217

216-
/* Animated Stroke / Border */
217-
.gradient-hover-card::before {
218+
/* Subtle Border Sweep - Non-looping */
219+
.gradient-hover-card::after {
218220
content: '';
219221
position: absolute;
220222
inset: 0;
221-
padding: 1px; /* Stroke thickness */
223+
padding: 1px;
222224
background: linear-gradient(
223-
90deg,
224-
transparent 0%,
225-
var(--color-accent) 20%,
226-
var(--color-accent) 80%,
227-
transparent 100%
225+
135deg,
226+
var(--color-accent) 0%,
227+
transparent 35%,
228+
transparent 65%,
229+
var(--color-accent) 100%
228230
);
229-
background-size: 200% 100%;
230231
-webkit-mask:
231232
linear-gradient(#fff 0 0) content-box,
232233
linear-gradient(#fff 0 0);
233234
-webkit-mask-composite: xor;
234235
mask-composite: exclude;
235236
opacity: 0;
236-
z-index: 2;
237-
transition: opacity 0.4s ease;
237+
transition: opacity 0.5s ease;
238238
pointer-events: none;
239239
}
240240

241-
/* Soft Radial Glow */
242-
.gradient-hover-card::after {
243-
content: '';
244-
position: absolute;
245-
bottom: 0;
246-
right: 0;
247-
width: 150px;
248-
height: 150px;
249-
background: radial-gradient(circle at bottom right, var(--color-accent), transparent 70%);
250-
opacity: 0;
251-
z-index: -1;
252-
transition: opacity 0.4s ease, transform 0.4s ease;
253-
transform: translate(20px, 20px) scale(0.8);
254-
pointer-events: none;
255-
}
256-
257-
.gradient-hover-card:hover::before {
241+
.gradient-hover-card:hover {
242+
background-color: rgba(255, 255, 255, 0.02);
243+
border-color: rgba(255, 255, 255, 0.08);
258244
opacity: 1;
259-
animation: border-gradient-spin 3s ease-in-out infinite;
245+
filter: grayscale(0) blur(0px);
260246
}
261247

262248
.gradient-hover-card:hover::after {
263249
opacity: 0.15;
264-
transform: translate(0, 0) scale(1.5);
265250
}
266-
}
251+
252+
/* "Gray out" siblings with smooth transition and NO scale */
253+
.cards-group:hover .gradient-hover-card:not(:hover) {
254+
opacity: 0.3;
255+
filter: grayscale(1) blur(0.5px);
256+
}
257+
}

‎docs/src/app/layout.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import type { Metadata } from "next";
22
import { Spline_Sans_Mono, Hanken_Grotesk } from "next/font/google";
3+
import { PostHogProvider } from "@/providers/PostHogProvider";
34
import "./globals.css";
45

56
const displayFont = Spline_Sans_Mono({
7+
68
subsets: ["latin"],
79
variable: "--font-display",
810
weight: ["400", "700"],
@@ -49,7 +51,9 @@ export default function RootLayout({
4951
<body
5052
className={`min-h-screen bg-background font-body antialiased ${bodyFont.variable} ${displayFont.variable}`}
5153
>
52-
{children}
54+
<PostHogProvider>
55+
{children}
56+
</PostHogProvider>
5357
</body>
5458
</html>
5559
);

0 commit comments

Comments
 (0)