heroAdvancedanimation

Meteors Hero

Dark hero with diagonal meteor streaks falling behind a giant gradient 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 Aceternity-style meteors hero: full-bleed dark section with 25-30 diagonal meteor streaks falling behind the content. Each meteor is a vertical thin line with a horizontal tail behind it via ::after, rotated 35deg, animated to translateY across the viewport with random durations and delays. Centered content: a small glassmorphism chip, a giant uppercase headline (Bebas Neue) with one word in a purple→pink→amber linear-gradient text, supporting copy, and a primary white pill button + a glass secondary. Add a soft purple radial glow at the bottom of the section.

Code

html

<!--
  Source: Vibedex
  https://vibedex.io
  License: MIT
  Surfaced via https://vibedex.io/components/vbx-meteors-hero
-->
<section class="hero"><div class="meteors"></div><div class="glow"></div><div class="copy"><span class="chip">v3.0 — built for speed</span><h1>Built for <span>velocity</span></h1><p>Drop these blocks into your project. Ship in an afternoon, not a sprint.</p><div class="row"><a class="primary" href="#">Get started</a><a class="ghost" href="#">Documentation →</a></div></div></section>