heroAdvancedhover

Interactive Grid Lines

Hero with a grid of lines that brighten on cursor proximity.

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 hero with an interactive grid background that brightens around the cursor: 48×48px grid of cyan lines on a near-black background. Use mask-image to make the grid only fully visible inside a 240px radius around the cursor (combined with a vertical fade so the grid attenuates toward the bottom). Update --mx/--my CSS variables on mousemove to reposition the radial mask. Centered content: a cyan 'live' chip in mono, a Space Grotesk headline with one word in italic Instrument Serif glowing cyan, supporting copy, and a 'EXPLORE THE NETWORK' uppercase mono outline button with cyan glow.

Code

html

<!--
  Source: Vibedex
  https://vibedex.io
  License: MIT
  Surfaced via https://vibedex.io/components/vbx-grid-lines-bg
-->
<section class="hero"><div class="grid"></div><div class="copy"><span class="chip">◉ live</span><h1>Enter the<br><em>grid.</em></h1><p>The next evolution of decentralized infrastructure, where data flows with unparalleled speed and security.</p><a class="cta" href="#">Explore the network</a></div></section>