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

Refine fog visibility - sharper cloud definitions and reduced transparency

Browse Source
This commit is contained in:
Avery Felts 2026-01-28 00:12:58 -07:00
parent 7012c4b1e8
commit 83c4955b9b
3 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/smoke.svg
View File

@ -5,7 +5,7 @@
baseFrequency="0.04" baseFrequency="0.04"
numOctaves="6" numOctaves="6"
stitchTiles="stitch" /> stitchTiles="stitch" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.8 0 0 -0.4 0"/> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 -1.5 0 0.2 0"/>
</filter> </filter>
<rect width="100%" height="100%" filter="url(#noiseFilter)"/> <rect width="100%" height="100%" filter="url(#noiseFilter)"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 395 B

After

Width:  |  Height:  |  Size: 395 B

8
src/app/globals.css
View File

@ -593,8 +593,8 @@
background-repeat: repeat; background-repeat: repeat;
background-size: 400px 400px; background-size: 400px 400px;
animation: fog-drift 45s linear infinite; animation: fog-drift 45s linear infinite;
opacity: 0.8; opacity: 0.9;
filter: blur(15px); filter: blur(8px);
} }
.fog-layer-2 { .fog-layer-2 {
@ -603,6 +603,6 @@
background-size: 350px 350px; background-size: 350px 350px;
animation: fog-drift 35s linear infinite reverse; animation: fog-drift 35s linear infinite reverse;
animation-delay: -10s; animation-delay: -10s;
opacity: 0.6; opacity: 0.7;
filter: blur(10px); filter: blur(5px);
} }

2
src/components/UserHeader.tsx
View File

@ -233,7 +233,7 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
{/* Subtle moving fog layers - CSS procedural animation */} {/* Subtle moving fog layers - CSS procedural animation */}
<div <div
className={cn( className={cn(
"absolute inset-0 z-10 opacity-30 pointer-events-none transition-all duration-1000", "absolute inset-0 z-10 opacity-20 pointer-events-none transition-all duration-1000",
theme === 'dark' ? "mix-blend-screen" : "mix-blend-multiply" theme === 'dark' ? "mix-blend-screen" : "mix-blend-multiply"
)} )}
style={{ filter: theme === 'dark' ? 'invert(1)' : 'none' }} style={{ filter: theme === 'dark' ? 'invert(1)' : 'none' }}