heroAdvancedanimation
Datascape Grid
CRT-inspired grid hero with neon accents and a slow scanline.
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 'datascape' / CRT-inspired hero: dark slate-blue background with a subtle green grid (54×54px) that drifts slowly via background-position animation, plus a soft green radial glow at the bottom and a horizontal scanline that sweeps top-to-bottom every 8s with mix-blend-mode: screen. Top nav with mono-spaced 'DATASCAPE' logo on the left and uppercase navigation links on the right. Centered: a Space Grotesk headline with 'data' in italic Instrument Serif glowing green (text-shadow 30/60px green). Below, a one-paragraph subhead and a green outline 'Request a demo' button with inset and outer green glow.
Code
html
<!--
Source: Vibedex
https://vibedex.io
License: MIT
Surfaced via https://vibedex.io/components/vbx-datascape-grid
-->
<section class="hero"><div class="scan"></div><div class="glow"></div><div class="copy"><nav><span class="logo">DATASCAPE</span><span class="links">Solutions · Platform · Company · Contact</span></nav><h1>The future of <em>data</em></h1><p>Unlock unparalleled insights and drive innovation with our next-generation data intelligence platform.</p><a class="cta" href="#">Request a demo</a></div></section>