mirror of
https://github.com/jamiepine/voicebox.git
synced 2026-09-20 15:20:39 -07:00
fix: fade in hero background glow to avoid Safari rendering flash
This commit is contained in:
@@ -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: "";
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user