Skip to content

Commit 3875304

Browse files
AlkenDAlkenD
committed
fix(web): onload fix white bg splash and animate the header blur effects
1 parent 2f476b2 commit 3875304

5 files changed

Lines changed: 45 additions & 13 deletions

File tree

‎apps/web/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,19 @@
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>web</title>
8+
<style>
9+
/* Prevent white flash on load - matches oklch(0.145 0 0) */
10+
html,
11+
body {
12+
background-color: #191919;
13+
color: #fafafa;
14+
margin: 0;
15+
padding: 0;
16+
}
17+
#root {
18+
min-height: 100vh;
19+
}
20+
</style>
821
</head>
922
<body>
1023
<div id="root"></div>

‎apps/web/src/components/ui/header/index.tsx‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -110,10 +110,22 @@ const Header = () => {
110110
return (
111111
<div className="w-full fixed top-0 left-0 right-0 z-50">
112112
<nav className="w-fit mx-auto space-y-4 p-4">
113-
<div className="w-full flex justify-center items-center">
113+
<motion.div
114+
initial={{ opacity: 0, scale: 0.95 }}
115+
animate={{ opacity: 1, scale: 1 }}
116+
exit={{ opacity: 0, scale: 0.95 }}
117+
transition={{ duration: 0.2 }}
118+
className="w-full flex justify-center items-center"
119+
>
114120
<motion.button
115121
onClick={() => setIsDialogOpen(true)}
116-
className="border mr-2 h-12 w-12 bg-neutral-900/60 backdrop-blur-lg border-white/10 rounded-[50px] flex items-center justify-center"
122+
initial={{ backdropFilter: "blur(0px)" }}
123+
animate={{
124+
backdropFilter: "blur(10px)",
125+
transition: { delay: 0.2 },
126+
}}
127+
exit={{ backdropFilter: "blur(0px)" }}
128+
className="border mr-2 h-12 w-12 bg-neutral-900/60 border-white/10 rounded-[50px] flex items-center justify-center"
117129
>
118130
<Logo className="w-8 h-8" />
119131
</motion.button>
@@ -126,7 +138,13 @@ const Header = () => {
126138
variants={tabsContainerVariants}
127139
transition={tabsContainerTransition}
128140
>
129-
<div className="flex space-x-1 w-fit bg-neutral-900/60 backdrop-blur-lg p-1 rounded-[50px] border border-white/10">
141+
<motion.div
142+
initial={{ backdropFilter: "blur(0px)" }}
143+
animate={{ backdropFilter: "blur(10px)" }}
144+
exit={{ backdropFilter: "blur(0px)" }}
145+
transition={{ delay: 0.2 }}
146+
className="flex space-x-1 w-fit bg-neutral-900/60 p-1 rounded-[50px] border border-white/10"
147+
>
130148
{tabs.map((tab) => (
131149
<NavLink
132150
key={tab.id}
@@ -136,14 +154,14 @@ const Header = () => {
136154
showBubble={isOnHeaderTab}
137155
/>
138156
))}
139-
</div>
157+
</motion.div>
140158
</motion.div>
141159
)}
142160
</AnimatePresence>
143161
<motion.div
144162
initial={searchContainerMotion.initial}
145163
animate={searchContainerMotion.animate(isSearchOpen)}
146-
className="border bg-neutral-900/60 backdrop-blur-lg border-white/10 rounded-[50px] flex items-center"
164+
className="border bg-neutral-900/60 border-white/10 rounded-[50px] flex items-center"
147165
>
148166
<div className="p-1">
149167
<motion.button
@@ -188,7 +206,7 @@ const Header = () => {
188206
</AnimatePresence>
189207
</motion.div>
190208
<UserMenu />
191-
</div>
209+
</motion.div>
192210
<AnimatePresence>
193211
{isSearchOpen && (
194212
<motion.div

‎apps/web/src/components/ui/header/user-menu.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,10 @@ function UserMenu() {
3737

3838
return (
3939
<div className="relative ml-2">
40-
<div className="border bg-neutral-900/60 rounded-[50px] p-1">
40+
<div className="border bg-neutral-900/60 backdrop-blur-lg rounded-[50px] p-1">
4141
<button
4242
onClick={() => setIsOpen(!isOpen)}
43-
className="h-10 px-1 backdrop-blur-lg rounded-[50px] flex items-center gap-2 justify-between hover:bg-white/10 transition-colors"
43+
className="h-10 px-1 rounded-[50px] flex items-center gap-2 justify-between hover:bg-white/10 transition-colors"
4444
>
4545
<div className="flex items-center gap-2">
4646
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center">
@@ -79,7 +79,7 @@ function UserMenu() {
7979
animate={{ opacity: 1, y: 0, scale: 1 }}
8080
exit={{ opacity: 0, y: -10, scale: 0.95 }}
8181
transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
82-
className="absolute right-0 mt-2 w-56 bg-white/10 backdrop-blur-xl border border-white/20 rounded-xl shadow-2xl z-50 overflow-hidden"
82+
className="absolute right-0 mt-2 w-56 bg-neutral-900/60 backdrop-blur-xl border border-white/20 rounded-xl shadow-2xl z-50 overflow-hidden"
8383
>
8484
{/* User Info */}
8585
<div className="px-4 py-3 border-b border-white/10">

‎apps/web/src/components/ui/header/variants.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@ export const tabsContainerTransition = {
1010
};
1111

1212
export const searchContainerMotion = {
13-
initial: { marginLeft: 8 },
13+
initial: { marginLeft: 8, backdropFilter: "blur(0px)" },
1414
animate: (isSearchOpen: boolean) => ({
1515
marginLeft: isSearchOpen ? 0 : 8,
16+
backdropFilter: isSearchOpen ? "blur(10px)" : "blur(0px)",
1617
}),
1718
};
1819

@@ -46,6 +47,6 @@ export const filtersContainerTransition = {
4647
};
4748

4849
export const filterButtonVariants = {
49-
hidden: { opacity: 0, scale: 0.9 },
50-
visible: { opacity: 1, scale: 1 },
50+
hidden: { opacity: 0, scale: 0.9, backdropFilter: "blur(0px)" },
51+
visible: { opacity: 1, scale: 1, backdropFilter: "blur(10px)" },
5152
};

‎apps/web/src/routes/__root.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const RootLayout = () => {
1010
const isAuthPage = authPages.includes(location.pathname);
1111

1212
return (
13-
<main>
13+
<main className="min-h-screen bg-background">
1414
{!isAuthPage && <Header />}
1515
<Outlet />
1616
<TanStackRouterDevtools />

0 commit comments

Comments
 (0)