heroAdvancedanimation
Flickering Grid Hero
Canvas-rendered grid of softly flickering pixels behind a centered headline.
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 flickering-grid hero in pure HTML/CSS/JS (vanilla port of Magic UI's FlickeringGrid React component). A full-bleed canvas behind the hero text renders a grid of 4×4px squares with 6px gaps; each frame a small fraction of squares (proportional to a flicker_chance × deltaTime) gets a fresh random opacity between 0 and max_opacity. Use device-pixel-ratio scaling for crispness. Apply a radial mask-image to the canvas so the grid is visible in the center and fades at the edges. On top: a JetBrains Mono est. chip in sky blue, an Inter Bold headline with one phrase in italic Instrument Serif sky-blue, supporting copy in slate gray, and a primary white pill + ghost CTA pair. Background is deep slate (#0b1120) with a subtle sky-blue radial glow at the bottom.
Code
html
<!--
Source: Vibedex
https://vibedex.io
License: MIT
Surfaced via https://vibedex.io/components/vbx-flickering-grid
-->
<section class="hero">
<canvas class="fg-canvas"></canvas>
<div class="copy">
<span class="chip">// vibedex.io · est. 2026</span>
<h1>Signal<br><em>in the noise.</em></h1>
<p>The component library that doesn't shout. Considered, instrumented, and ready when you are.</p>
<div class="row"><a class="primary" href="#">Browse the library</a><a class="ghost" href="#">Read the docs →</a></div>
</div>
</section>