Vibedex.io
Back to gallery
heroIntermediateanimation

Immerse Big Type

Oversized centerpiece typography hero with a slowly pulsing color gradient.

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 one-word display hero in the style of contemporary AI/dev tool sites: a single huge word (Bebas Neue) at clamp(6rem, 22vw, 18rem) sitting in the center of a near-black hero with subtle radial purple+cyan glows in opposing corners. The headline uses a vertical white→gray gradient text-clip and a shimmering hue-rotate filter that loops every 6s. A small uppercase JetBrains Mono eyebrow above, an italic Instrument Serif tagline below (with one emphasized word in a purple-pink gradient), and a row of bullet meta items in mono. Add a subtle SVG noise grain via mix-blend-mode: overlay.

Code

html
<!--
  Source: Vibedex
  https://vibedex.io
  License: MIT
  Surfaced via https://vibedex.io/components/vbx-immerse-bigtype
-->
<section class="hero"><div class="grain"></div><div class="copy"><span class="eyebrow">Vibedex · 2026</span><h1>IMMERSE</h1><p>The component library for builders who care about <em>everything</em> being right.</p><div class="meta"><span>● Open source</span><span>● MIT licensed</span><span>● 200+ blocks</span></div></div></section>