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

Replace PNG fog with procedural SVG animation

Browse Source
This commit is contained in:
Avery Felts 2026-01-27 20:32:10 -07:00
parent ec9b32249e
commit 3e0019e703
4 changed files with 43 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/fog-texture.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 649 KiB

11
public/smoke.svg Normal file
View File

@ -0,0 +1,11 @@
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<filter id="noiseFilter">
<feTurbulence
type="fractalNoise"
baseFrequency="0.005"
numOctaves="4"
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"/>
</filter>
<rect width="100%" height="100%" filter="url(#noiseFilter)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 391 B

26
src/app/globals.css
View File

@ -576,4 +576,30 @@
opacity: 0.03;
pointer-events: none;
border-radius: inherit;
}
@keyframes fog-drift {
0% {
background-position: 0 0;
}
100% {
background-position: 500px 0;
}
}
.fog-layer-1 {
background-image: url('/smoke.svg');
background-repeat: repeat;
background-size: 500px 500px;
animation: fog-drift 60s linear infinite;
opacity: 0.4;
}
.fog-layer-2 {
background-image: url('/smoke.svg');
background-repeat: repeat;
background-size: 400px 400px;
animation: fog-drift 40s linear infinite reverse;
opacity: 0.3;
}

8
src/components/UserHeader.tsx
View File

@ -228,8 +228,12 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
<div className="absolute -top-10 -left-10 w-64 h-64 bg-neutral-200/40 rounded-full blur-3xl animate-float" style={{ animationDuration: '15s', animationDelay: '0s' }} />
<div className="absolute top-1/2 left-1/3 w-96 h-32 bg-slate-300/30 rounded-full blur-3xl animate-float" style={{ animationDuration: '20s', animationDelay: '-5s' }} />
<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 layer */}
<div className="absolute inset-0 bg-[url('/fog-texture.png')] opacity-10 animate-slide-in-right" style={{ animationDuration: '60s', animationTimingFunction: 'linear', animationIterationCount: 'infinite' }} />
{/* 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 fog-layer-1" />
<div className="absolute inset-0 fog-layer-2" />
</div>
</div>
{/* Edge blur overlay - fades content into header */}