fix: fade in hero background glow to avoid Safari rendering flash

This commit is contained in:
James Pine
2026-03-15 08:53:08 -07:00
parent 655910457f
commit b585e18ccf
2 changed files with 16 additions and 6 deletions
+14
View File
@@ -115,6 +115,20 @@
animation: fadeUp 0.6s ease-out forwards; animation: fadeUp 0.6s ease-out forwards;
} }
.hero-glow-fade {
opacity: 0;
animation: fadeIn 2s ease-out 0.3s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Noise texture overlay for hero glow */ /* Noise texture overlay for hero glow */
/* .hero-glow::after { /* .hero-glow::after {
content: ""; content: "";
+2 -6
View File
@@ -39,7 +39,7 @@ export default function Home() {
{/* ── Hero Section ─────────────────────────────────────────────── */} {/* ── Hero Section ─────────────────────────────────────────────── */}
<section className="relative pt-32 pb-16"> <section className="relative pt-32 pb-16">
{/* Background glow */} {/* Background glow */}
<div className="hero-glow pointer-events-none absolute inset-0 -top-32"> <div className="hero-glow hero-glow-fade pointer-events-none absolute inset-0 -top-32">
<div className="absolute left-1/2 top-0 -translate-x-1/2 w-[800px] h-[600px] rounded-full bg-accent/15 blur-[150px]" /> <div className="absolute left-1/2 top-0 -translate-x-1/2 w-[800px] h-[600px] rounded-full bg-accent/15 blur-[150px]" />
<div className="absolute left-1/2 top-12 -translate-x-1/2 w-[500px] h-[400px] rounded-full bg-accent/10 blur-[80px]" /> <div className="absolute left-1/2 top-12 -translate-x-1/2 w-[500px] h-[400px] rounded-full bg-accent/10 blur-[80px]" />
</div> </div>
@@ -48,11 +48,7 @@ export default function Home() {
{/* Logo */} {/* Logo */}
<div <div
className="fade-in mx-auto mb-8 h-[120px] w-[120px] md:h-[160px] md:w-[160px]" className="fade-in mx-auto mb-8 h-[120px] w-[120px] md:h-[160px] md:w-[160px]"
style={{ style={{ animationDelay: '0ms' }}
animationDelay: '0ms',
filter:
'drop-shadow(0 0 20px hsl(43 60% 50% / 0.4)) drop-shadow(0 0 60px hsl(43 60% 50% / 0.2))',
}}
> >
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img <img