rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Switch ambient background to radial gradients + glassmorphism cards

Browse Source 
Blurred circle approach was invisible on near-black backgrounds.
Use radial-gradient orbs at 25%/15% opacity instead, with semi-transparent
cards (backdrop-filter: blur) so the ambient effect shows through.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-12 09:44:38 +08:00
parent 11fe3df513
commit a4b3a8f7fe
3 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/dashboard/DashboardAmbient.tsx
View File

@ -1,30 +1,26 @@
/**
* Muted ambient background for the dashboard.
* Two accent-colored drifting orbs at very low opacity — adds depth
* and movement without distracting from content. Reuses the same
* drift keyframes as the login AmbientBackground but at ~25% opacity.
* Ambient background effect for the dashboard.
*
* Also renders a noise texture and vignette overlay for tactile depth.
* Uses CSS radial gradients on a full-size div with animated position shifting.
* The accent color is read from CSS custom properties so it works with any theme.
*
* Also renders a noise texture for tactile depth and a radial vignette
* to darken edges and draw focus to center content.
*/
export default function DashboardAmbient() {
return (
<div className="pointer-events-none absolute inset-0 z-0 overflow-hidden" aria-hidden="true">
{/* Primary orb — top-left drift */}
<div className="pointer-events-none absolute inset-0 z-0" aria-hidden="true">
{/* Animated gradient orbs — position shifts via CSS animation */}
<div
className="absolute h-[600px] w-[600px] rounded-full opacity-[0.12] blur-[120px] animate-drift-1"
className="absolute inset-0 animate-drift-1"
style={{
background: 'radial-gradient(circle, hsl(var(--accent-color)) 0%, transparent 70%)',
top: '-5%',
left: '-10%',
background: 'radial-gradient(ellipse 70% 55% at 10% 10%, hsl(var(--accent-color) / 0.25) 0%, transparent 55%)',
}}
/>
{/* Secondary orb — bottom-right drift */}
<div
className="absolute h-[450px] w-[450px] rounded-full opacity-[0.07] blur-[120px] animate-drift-2"
className="absolute inset-0 animate-drift-2"
style={{
background: 'radial-gradient(circle, hsl(var(--accent-color)) 0%, transparent 70%)',
bottom: '5%',
right: '-5%',
background: 'radial-gradient(ellipse 55% 45% at 85% 85%, hsl(var(--accent-color) / 0.15) 0%, transparent 55%)',
}}
/>
{/* Noise texture */}

2
frontend/src/components/dashboard/DashboardPage.tsx
View File

@ -165,7 +165,7 @@ export default function DashboardPage() {
: null;
return (
<div className="flex flex-col h-full relative">
<div className="flex flex-col h-full relative dashboard-glass">
<DashboardAmbient />
{/* Header — greeting + date + quick add */}
<div className="relative z-10 px-4 md:px-6 pt-4 sm:pt-6 pb-1 sm:pb-2 flex items-center justify-between">

7
frontend/src/index.css
View File

@ -457,6 +457,13 @@ form[data-submitted] input:invalid + button {
/* ── Dashboard ambient layers ── */
/* Dashboard glassmorphism — cards become semi-transparent to let ambient show through */
.dashboard-glass .bg-card {
background-color: hsl(0 0% 5% / 0.80) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* Card breathing glow — data-aware "alive" pulse for urgent cards */
@keyframes card-breathe {
0%, 100% { box-shadow: 0 0 0 0 hsl(var(--accent-color) / 0.05); }