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

Boost header fog visibility and speed

Browse Source
This commit is contained in:
Avery Felts 2026-01-27 23:25:33 -07:00
parent 3e0019e703
commit 9201171936
3 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/smoke.svg
View File

@ -2,10 +2,10 @@
<filter id="noiseFilter"> <filter id="noiseFilter">
<feTurbulence <feTurbulence
type="fractalNoise" type="fractalNoise"
baseFrequency="0.005" baseFrequency="0.015"
numOctaves="4" numOctaves="5"
stitchTiles="stitch" /> stitchTiles="stitch" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0"/> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.5 0 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: 391 B

After

Width:  |  Height:  |  Size: 396 B

12
src/app/globals.css
View File

@ -591,15 +591,15 @@
.fog-layer-1 { .fog-layer-1 {
background-image: url('/smoke.svg'); background-image: url('/smoke.svg');
background-repeat: repeat; background-repeat: repeat;
background-size: 500px 500px; background-size: 600px 600px;
animation: fog-drift 60s linear infinite; animation: fog-drift 30s linear infinite;
opacity: 0.4; opacity: 0.6;
} }
.fog-layer-2 { .fog-layer-2 {
background-image: url('/smoke.svg'); background-image: url('/smoke.svg');
background-repeat: repeat; background-repeat: repeat;
background-size: 400px 400px; background-size: 500px 500px;
animation: fog-drift 40s linear infinite reverse; animation: fog-drift 20s linear infinite reverse;
opacity: 0.3; opacity: 0.5;
} }

2
src/components/UserHeader.tsx
View File

@ -230,7 +230,7 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
<div className="absolute -bottom-10 right-0 w-80 h-80 bg-stone-200/30 rounded-full blur-3xl animate-float" style={{ animationDuration: '18s', animationDelay: '-2s' }} /> <div className="absolute -bottom-10 right-0 w-80 h-80 bg-stone-200/30 rounded-full blur-3xl animate-float" style={{ animationDuration: '18s', animationDelay: '-2s' }} />
{/* Subtle moving fog layers - CSS procedural animation */} {/* Subtle moving fog layers - CSS procedural animation */}
<div className="absolute inset-0 z-10 opacity-30 mix-blend-overlay pointer-events-none" style={{ filter: theme === 'dark' ? 'invert(1)' : 'none' }}> <div className="absolute inset-0 z-10 opacity-60 pointer-events-none" style={{ filter: theme === 'dark' ? 'invert(1)' : 'none' }}>
<div className="absolute inset-0 fog-layer-1" /> <div className="absolute inset-0 fog-layer-1" />
<div className="absolute inset-0 fog-layer-2" /> <div className="absolute inset-0 fog-layer-2" />
</div> </div>