averyfelts/Stop_smoking_website_ver2
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add feathered edge masks to header fog for smoother blending

Browse Source
This commit is contained in:
Avery Felts 2026-01-28 09:07:35 -07:00
parent d6c26340c6
commit 20c97d39bc
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/UserHeader.tsx
View File

@ -219,8 +219,14 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
backdropFilter: 'blur(16px)',
borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.05)' : '1px solid rgba(255,255,255,0.08)'
}}>
{/* Cloudy/Foggy effect overlay - removed mix-blend-overlay for visibility */}
<div className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-all duration-300">
{/* Cloudy/Foggy effect overlay with feathered edges */}
<div
className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-all duration-300"
style={{
maskImage: 'linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)',
WebkitMaskImage: 'linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)'
}}
>
<div className="absolute inset-0 fog-layer-1 opacity-35 dark:opacity-25" />
<div className="absolute inset-0 fog-layer-2 opacity-25 dark:opacity-15" />
</div>