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

Speed up header fog and fix startup delay

Browse Source
This commit is contained in:
Avery Felts 2026-01-28 00:04:15 -07:00
parent 23105a33fa
commit 487b8bb268
2 changed files with 11 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">
<feTurbulence
type="fractalNoise"
baseFrequency="0.015"
numOctaves="5"
baseFrequency="0.04"
numOctaves="6"
stitchTiles="stitch" />
<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"/>
<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"/>
</filter>
<rect width="100%" height="100%" filter="url(#noiseFilter)"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 396 B

After

Width:  |  Height:  |  Size: 395 B

15
src/app/globals.css
View File

@ -584,24 +584,25 @@
}
100% {
background-position: 500px 0;
background-position: 1000px 500px;
}
}
.fog-layer-1 {
background-image: url('/smoke.svg');
background-repeat: repeat;
background-size: 300px 300px;
animation: fog-drift 30s linear infinite;
background-size: 400px 400px;
animation: fog-drift 15s linear infinite;
opacity: 0.8;
filter: blur(20px);
filter: blur(15px);
}
.fog-layer-2 {
background-image: url('/smoke.svg');
background-repeat: repeat;
background-size: 250px 250px;
animation: fog-drift 20s linear infinite reverse;
background-size: 350px 350px;
animation: fog-drift 10s linear infinite reverse;
animation-delay: -5s;
opacity: 0.6;
filter: blur(15px);
filter: blur(10px);
}