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

Fix ambient edge clipping: extend orb layers with -100px inset

Browse Source 
Drift animations translate orbs up to 80px, causing hard cutoff at
container edges. Giving orb layers inset: -100px provides enough
bleed room so the gradient edges are always beyond the overflow-hidden
boundary.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-12 11:18:46 +08:00
parent 34ea31421f
commit 62949c997f
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,16 +10,18 @@
export default function DashboardAmbient() { export default function DashboardAmbient() {
return ( return (
<div className="pointer-events-none absolute inset-0 z-0 overflow-hidden" 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 — oversized so drift never clips at visible edges */}
<div <div
className="absolute inset-0 animate-drift-1" className="absolute animate-drift-1"
style={{ style={{
inset: '-100px',
background: 'radial-gradient(ellipse 90% 70% at 30% 20%, hsl(var(--accent-color) / 0.45) 0%, transparent 60%)', 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 animate-drift-2"
style={{ style={{
inset: '-100px',
background: 'radial-gradient(ellipse 80% 60% at 75% 75%, hsl(var(--accent-color) / 0.35) 0%, transparent 60%)', background: 'radial-gradient(ellipse 80% 60% at 75% 75%, hsl(var(--accent-color) / 0.35) 0%, transparent 60%)',
}} }}
/> />