Browse components
Pixel Blast
A dithered field of tiny pixels that breathes with noise and bursts into shockwave rings on click. WebGL.
Pixel Blast
Installation
npx shadcn@latest add @glint-ui/pixel-blastFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/pixel-blast.json
Usage
import { PixelBlast } from "@/components/ui/pixel-blast";
<div className="relative h-96">
<PixelBlast color="#a78bfa" shape="square" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#a78bfa" | Pixel color. |
| shape | "square" | "circle" | "square" | Pixel shape. |
| pixelSize | number | 6 | Cell size in px. |
| density | number | 0.5 | How much of the field is lit. |
| speed | number | 1 | Animation speed multiplier. |
| interactive | boolean | true | Blast rings on click. |
| autoBlast | boolean | true | Fire a blast at a random spot every few seconds. |
| className | string | — | Extra classes for the root element. |