heroAdvancedanimation

Aurora Hero

Full-bleed hero with animated aurora gradients drifting behind a centered headline.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build an aurora-style hero: full-viewport section with three large blurred radial gradient blobs (purple, cyan, pink) drifting and scaling in keyframe animations on a near-black background. Centered headline + subheadline, headline uses clamp() for fluid sizing.

Code

html

<!--
  Source: Linear Design Team
  https://dribbble.com
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/aurora-hero
-->
<section class="hero"><div class="aurora a1"></div><div class="aurora a2"></div><div class="aurora a3"></div><div class="copy"><h1>Ship beautiful interfaces</h1><p>Components engineered for the era of AI-assisted building.</p></div></section>