Simplify hero backgrounds and add entrance animations

- Replace animated blob/wave/noise backdrop with clean static gradient
  (radial ellipse highlights + linear fade) in hero-motion-backdrop
- Remove all framer-motion from background layer; delete unused CSS
  classes: hero-blob, hero-sheet-glow, hero-sheet-wave, hero-sheet-noise,
  hero-title-shift keyframe, and responsive blob media queries
- Add framer-motion stagger entrance to HeroContentMotion, HeroMotionItem,
  and HeroTitle (slide-up + fade on mount)
- Refactor coming-soon page to use HeroContentMotion/HeroMotionItem
  instead of MotionFade (whileInView unreliable above the fold)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
MOH
2026-03-17 22:48:51 +01:00
co-authored by Claude Sonnet 4.6
parent f490133345
commit 868eb80374
10 changed files with 92 additions and 181 deletions
@@ -1,5 +1,3 @@
"use client";
type HeroMotionBackdropProps = {
compact?: boolean;
};
@@ -8,13 +6,6 @@ export function HeroMotionBackdrop({}: HeroMotionBackdropProps) {
return (
<div className="hero-sheet pointer-events-none absolute inset-0 overflow-hidden">
<div className="hero-sheet-base" />
<div className="hero-blob hero-blob-left" />
<div className="hero-blob hero-blob-right" />
<div className="hero-blob hero-blob-bottom" />
<div className="hero-sheet-glow" />
<div className="hero-sheet-wave" />
<div className="hero-sheet-noise" />
<div className="hero-sheet-veil" />
<div className="hero-sheet-fade" />
</div>