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

UI: Add cinematic smoke video background to header

Browse Source
This commit is contained in:
Avery Felts 2026-01-31 19:10:10 -07:00
parent d3314c5590
commit 2a0f162ea3
2 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/videos/smoke.mp4 Normal file
View File

Binary file not shown.

25
src/components/UserHeader.tsx
View File

@ -219,14 +219,29 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
return (
<>
<header className="sticky top-0 z-50 transition-colors duration-300 relative" style={{
<header className="sticky top-0 z-50 transition-colors duration-300 relative overflow-hidden" style={{
background: theme === 'light'
? 'rgba(255, 255, 255, 0.92)'
: 'rgba(10, 10, 20, 0.94)',
backdropFilter: 'blur(20px)',
WebkitBackdropFilter: 'blur(20px)',
? 'rgba(255, 255, 255, 0.5)'
: 'rgba(10, 10, 20, 0.4)',
backdropFilter: 'blur(12px)',
WebkitBackdropFilter: 'blur(12px)',
borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.08)' : '1px solid rgba(255,255,255,0.08)'
}}>
{/* Smoke Video Background */}
<div className="absolute inset-0 z-[-1] overflow-hidden pointer-events-none">
<video
autoPlay
loop
muted
playsInline
className="absolute min-w-full min-h-full object-cover scale-110 opacity-60 dark:opacity-40 brightness-[0.9] dark:brightness-[0.7]"
>
<source src="/videos/smoke.mp4" type="video/mp4" />
</video>
{/* Subtle Dark Overlay for Text Readability */}
<div className="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/20 dark:from-black/40 dark:to-black/40" />
</div>
{/* Cloudy/Foggy effect overlay with ultra-wide, organic feathering */}
<div
className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-opacity duration-700"