heroAdvancedhover
Interactive Grid Lines
Hero with a grid of lines that brighten on cursor proximity.
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>