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

Fix smoke animation: update SVG colors and enhance multidirectional drifting

Browse Source
This commit is contained in:
Avery Felts 2026-01-28 08:22:15 -07:00
parent 0d0258de97
commit 7f17028f45
3 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/smoke.svg
View File

@ -2,10 +2,15 @@
<filter id="noiseFilter">
<feTurbulence
type="fractalNoise"
baseFrequency="0.04"
numOctaves="6"
baseFrequency="0.02"
numOctaves="5"
stitchTiles="stitch" />
<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"/>
<feColorMatrix type="matrix" values="
0 0 0 0 1
0 0 0 0 1
0 0 0 0 1
1 0 0 0 -0.4
"/>
</filter>
<rect width="100%" height="100%" filter="url(#noiseFilter)"/>
<rect width="100%" height="101%" filter="url(#noiseFilter)"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 395 B

After

Width:  |  Height:  |  Size: 427 B

31
src/app/globals.css
View File

@ -601,33 +601,42 @@
border-radius: inherit;
}
@keyframes fog-drift {
@keyframes fog-drift-1 {
0% {
background-position: 0 0;
}
100% {
background-position: 1000px 500px;
background-position: 800px 200px;
}
}
@keyframes fog-drift-2 {
0% {
background-position: 0 0;
}
100% {
background-position: -600px 150px;
}
}
.fog-layer-1 {
background-image: url('/smoke.svg');
background-repeat: repeat;
background-size: 400px 400px;
animation: fog-drift 60s linear infinite;
opacity: 0.9;
filter: blur(8px);
background-size: 600px 600px;
animation: fog-drift-1 45s linear infinite;
opacity: 0.8;
filter: blur(4px);
}
.fog-layer-2 {
background-image: url('/smoke.svg');
background-repeat: repeat;
background-size: 350px 350px;
animation: fog-drift 50s linear infinite reverse;
animation-delay: -15s;
opacity: 0.7;
filter: blur(5px);
background-size: 500px 500px;
animation: fog-drift-2 35s linear infinite;
opacity: 0.6;
filter: blur(2px);
}
/* Swipe ecosystem for mobile placards */

4
src/components/UserHeader.tsx
View File

@ -221,8 +221,8 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
}}>
{/* 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">
<div className="absolute inset-0 fog-layer-1 opacity-40 dark:opacity-30" />
<div className="absolute inset-0 fog-layer-2 opacity-30 dark:opacity-20" />
<div className="absolute inset-0 fog-layer-1 opacity-50 dark:opacity-40" />
<div className="absolute inset-0 fog-layer-2 opacity-40 dark:opacity-30" />
</div>
<div className="container mx-auto px-4 h-16 sm:h-20 flex items-center justify-between relative z-50">