heroAdvancedanimation

Aurora Shader Hero

Animated multi-layer aurora gradient that morphs slowly 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 a multi-layer animated aurora background hero: four large blurred radial-gradient blobs in purple, cyan, pink, and amber, each absolutely positioned in different corners of the hero, with mix-blend-mode: screen so the colors blend luminously. Each blob is animated with its own keyframes — gentle translate + scale loops over 22-32 seconds — so the background slowly morphs without ever syncing. Centered content: a glassmorphism pill badge, a large headline mixing Inter sans-serif with one word in italic Instrument Serif, supporting copy, and a frosted white pill CTA.

Code

html

<!--
  Source: Vibedex
  https://vibedex.io
  License: MIT
  Surfaced via https://vibedex.io/components/vbx-aurora-shader
-->
<section class="hero"><div class="aurora a1"></div><div class="aurora a2"></div><div class="aurora a3"></div><div class="aurora a4"></div><div class="copy"><span class="badge">✦ New paper-shader experiments</span><h1>Beautiful <em>shader</em><br>experiences</h1><p>Create stunning visual experiences with our advanced shader engineering — and the cleanest API in the industry.</p><a class="cta" href="#">View experiments</a></div></section>