← All components
Atmospheres / background
Pixel Blast
A dithered field responds with ripples, liquid trails and four pixel shapes.
Open in studio ↗PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Give the component a container with an explicit height. It fills that container.
- The included Demo.tsx recreates the full preview; the main export contains only the background.
- Keyboard Enter or Space creates a centered ripple. Reduced motion renders a still field; a CSS pattern remains without WebGL.
- Canvas buffers are capped at 2048 pixels per dimension; pointer trails are bounded. The seed gives repeatable patterns.
- Changing antialiasing, liquid mode or enabling film grain recreates the graphics pipeline and restarts its clock. Other controls update in place.
React 19WebGL2Three.js 0.183.1postprocessing 6.38.3
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | square|circle|triangle|diamond | square | Pixel shape |
color | string | #B19EEF | Pixel color |
pixelSize | number | 3 | Pixel size |
patternScale | number | 2 | Pattern scale |
patternDensity | number | 1 | Density |
speed | number | 0.5 | Motion speed |
liquid | boolean | false | Liquid distortion |
liquidStrength | number | 0.1 | Liquid strength |
liquidRadius | number | 1 | Liquid radius |
liquidWobbleSpeed | number | 4.5 | Liquid wobble speed |
enableRipples | boolean | true | Enable ripples |
rippleIntensityScale | number | 1 | Ripple intensity |
rippleThickness | number | 0.1 | Ripple thickness |
rippleSpeed | number | 0.3 | Ripple speed |
pixelSizeJitter | number | 0 | Pixel jitter |
edgeFade | number | 0.5 | Edge fade |
noiseAmount | number | 0 | Film grain |
transparent | boolean | true | Transparent background |
antialias | boolean | true | Antialiasing |
seed | number | 0 | Pattern seed |
className | string | '' | Outer wrapper classes. |
style | CSSProperties | undefined | Additional outer styles. |
autoPauseOffscreen | boolean | true | Compatibility prop: offscreen suspension is always enforced. |
paused | boolean | false | Freeze the current frame without accumulating paused time. |
replayToken | number | 0 | Change to reset the animation and interactive state. |