Animated Mesh-Gradient Aurora Hero

What this builds

A full-viewport hero section with an animated mesh-gradient or aurora background, a headline + subline + CTA overlay, and an optional scroll-down indicator. The background uses large blurred color blobs drifting on slow sinusoidal paths to produce an organic, shifting color field. Content sits above the field with guaranteed contrast, and the entire effect degrades to a static gradient under prefers-reduced-motion.

• Animated blur-blob aurora background with 3-5 brand-derived color nodes
• Headline, subline, and CTA group with a contrast-safe scrim
• Scroll-cue indicator at the bottom
• prefers-reduced-motion static fallback
• Mobile performance guard (fewer blobs, capped blur, no animation on low-end)
• Seamless color loop with no visible seam at the wrap point

When to use / when not to

• Use when the landing page needs an ambient, organic background that feels alive without competing with content.
• Use when the brand palette has 3-5 saturated or mid-saturated colors that can serve as blob sources.
• Do NOT use when the hero needs a photographic background or a product-focused composited layout; see hero-card-stack-parallax instead.
• Do NOT use when a hard geometric gradient is the design intent; a plain CSS linear-gradient is cheaper and more honest.
• Do NOT use when the hero needs scroll-linked morphing; see hero-scroll-morph-shape instead.
• For the underlying blur-blob and shader techniques in isolation, see primitive gradient-mesh-aurora. This toolkit builds the complete hero around it.