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

Boost ambient visibility: stronger orbs, reduced vignette, transparent cards

Browse Source 
- Orbs repositioned centrally with larger ellipses (90%/80%) and higher
  opacity (0.45/0.35) so glow is visible through glassmorphism cards
- Vignette reduced from 0.45 to 0.30, transparent zone expanded to 50%
- Card opacity reduced from 0.80 to 0.65 to let more ambient bleed through
- Added overflow-hidden on ambient container to prevent black bar artifacts
  during drift animations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-12 09:55:39 +08:00
parent a4b3a8f7fe
commit 34ea31421f
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,18 +9,18 @@
*/ */
export default function DashboardAmbient() { export default function DashboardAmbient() {
return ( return (
<div className="pointer-events-none absolute inset-0 z-0" aria-hidden="true"> <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden" aria-hidden="true">
{/* Animated gradient orbs — position shifts via CSS animation */} {/* Animated gradient orbs — position shifts via CSS animation */}
<div <div
className="absolute inset-0 animate-drift-1" className="absolute inset-0 animate-drift-1"
style={{ style={{
background: 'radial-gradient(ellipse 70% 55% at 10% 10%, hsl(var(--accent-color) / 0.25) 0%, transparent 55%)', background: 'radial-gradient(ellipse 90% 70% at 30% 20%, hsl(var(--accent-color) / 0.45) 0%, transparent 60%)',
}} }}
/> />
<div <div
className="absolute inset-0 animate-drift-2" className="absolute inset-0 animate-drift-2"
style={{ style={{
background: 'radial-gradient(ellipse 55% 45% at 85% 85%, hsl(var(--accent-color) / 0.15) 0%, transparent 55%)', background: 'radial-gradient(ellipse 80% 60% at 75% 75%, hsl(var(--accent-color) / 0.35) 0%, transparent 60%)',
}} }}
/> />
{/* Noise texture */} {/* Noise texture */}
@ -36,7 +36,7 @@ export default function DashboardAmbient() {
<div <div
className="absolute inset-0" className="absolute inset-0"
style={{ style={{
background: 'radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.45) 100%)', background: 'radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.30) 100%)',
}} }}
/> />
</div> </div>

2
frontend/src/index.css
View File

@ -459,7 +459,7 @@ form[data-submitted] input:invalid + button {
/* Dashboard glassmorphism — cards become semi-transparent to let ambient show through */ /* Dashboard glassmorphism — cards become semi-transparent to let ambient show through */
.dashboard-glass .bg-card { .dashboard-glass .bg-card {
background-color: hsl(0 0% 5% / 0.80) !important; background-color: hsl(0 0% 5% / 0.65) !important;
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
} }