PixelBlast
pixel-blastQuantizes animated noise into configurable pixel shapes with ordered dithering.
Usage
Basic usage
Put it into the relative overflow-hidden container. The component comes with absolute inset-0 z-0; the default square lattice, the main color reads --color-primary, and the light and shade are adaptive.
PixelBlast
<div className="relative h-64 overflow-hidden rounded-xl bg-neutral-950">
<PixelBlast />
<div className="relative z-10 flex h-full items-center justify-center">
<p className="text-2xl font-bold text-white/90">PixelBlast</p>
</div>
</div>Shape variant
variant supports four pixel unit shapes square / circle / triangle / diamond, and pixelSize controls the single cell size.
circle · Dot printing feel
triangle · Textured
diamond · Staggered particles
<>
<PixelBlast variant="circle" pixelSize={6} />
<PixelBlast variant="triangle" patternDensity={1.3} />
<PixelBlast variant="diamond" pixelSize={5} />
</>Custom color + strong fade
color is connected to any CSS color; edgeFade is increased to make the four corners fade out softer, making it easier to use the dot matrix as the content background.
Aurora Blue Purple · Slow Wallpaper
<PixelBlast
variant="square"
color="oklch(0.65 0.26 285)"
speed={0.25}
patternScale={1.5}
edgeFade={0.7}
/>No fade overlay
edgeFade={0} Cancel the surrounding fade, and the hard edge of the dot matrix covers the entire container.
edgeFade = 0 · Full
<PixelBlast variant="circle" color="oklch(0.74 0.18 55)" edgeFade={0} pixelSize={5} />When to Use
Use it for an animated retro halftone or dot-print background with built-in edge fading for layered content. For a static regular dot field, use DotPattern; for an 8-bit perspective grid, use RetroGrid; for a moving focus light, use Spotlight. PixelBlast adds noise-driven motion and optional size jitter.
Import
import { PixelBlast, pixelBlastShowcase } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "square" | "circle" | "triangle" | "diamond" | "square" | Pixel unit shape: square (sharp retro) / dot (dot printing feel) / triangle (texture) / diamond (diamond dot) |
| pixelSize | number | 4 | Pixel size in CSS pixels; lower values are denser and finer. Recommended range 2–12 |
| color | string | --color-primary | Pixel main color, CSS color string; default is primary token light and dark adaptive |
| patternScale | number | 2 | Noise texture scaling; the larger the patches, the finer and denser the flashes. Recommendation 0.5–6 |
| patternDensity | number | 1 | Pixel filling density; the larger it is, the more pixels will be lit and the more "full" it will be. Recommendation 0.4–1.6 |
| pixelSizeJitter | number | 0 | Random jitter amplitude for each square size 0–1; the larger, the more jagged, the stronger the graininess |
| speed | number | 0.5 | Animation speed factor; 0 = still picture (still renders one frame of static lattice) |
| edgeFade | number | 0.5 | Edge-fade width from 0–1 relative to the shorter side; 0 keeps hard edges, while higher values soften the corners |
| className | string | — | Additional class name for the root container or reduced-motion fallback div |
| style | CSSProperties | — | Inline styles passed through to the root container |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static alternative content without WebGL; default primary token radial-gradient dot matrix (CSS mask simulated dots) |
Usage Guidelines
- The component comes with
absolute inset-0 z-0, the parent container must be `relative`, and the overlay content must be `relative z-10`, otherwise the content [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]] will be covered. - WebGL client component (
"use client"); only fallback is rendered during the SSR phase. coloris parsed by off-screen canvas when passingvar(--color-…), must be prefixed with `--color-`, and the parsing of barevar(--primary)fails with [[oklch-css-var-color-must-parse-via-offscreen-canvas]].- Headless screenshots can capture a still or blank frame when rAF is throttled. Verify motion on a real device or with Playwright measurements; see [[recharts-headless-screenshot-blank-clippath-animation-starved]].
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
PixelBlast · WebGL Background
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.12 0.02 285)" }}>
<PixelBlast
variant="square"
pixelSize={4}
patternScale={2}
patternDensity={1}
pixelSizeJitter={0}
speed={0.5}
edgeFade={0.5}
/>
<div className="relative z-10">Content</div>
</div>