A grid of squares that flash neon colors in rings spreading out from the pointer. Pulses fire on their own while nobody is touching it, and a click sends a bigger wave.
Sat 14 Dec · 23:00
Warehouse 09
Okaru, Lune Vega, Pitch Black Club
npx shadcn@latest add https://hyperblur.dev/r/bg-acid-squares.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-acid-squares.tsx.
import { BgAcidSquares } from "@/components/hyperblur/bg-acid-squares"
<div className="relative h-96 bg-black"><BgAcidSquares><h1>Hello</h1></BgAcidSquares></div>| Prop | Type | Default | Description |
|---|---|---|---|
| cellSize | number | 18 | Grid cell size in pixels. |
| gap | number | 0.2 | Space around each square as a fraction of the cell. |
| colors | string[] | ["#c6ff00", "#39ff88", "#00f0ff", "#ff2bd6", "#fff200"] | Neon colors. Each new wave takes the next one. |
| color | string | "rgba(255,255,255,0.05)" | Color of the squares at rest. |
| interval | number | 1.6 | Seconds between idle pulses. |
| waveSpeed | number | 200 | How fast rings spread, in pixels per second. |
| seed | number | 5 | Seed for the idle pulse positions. |
| speed | number | 1 | Overall time scale. |
| children | ReactNode | Content rendered on top of the grid. |