Pixel Blast
Interactive pixel-based animation with dithering effects and liquid distortion.
Configuring your account...
Please wait while we prepare everything for you
Usage
import PixelBlast from './PixelBlast';
<div style={{ width: '100%', height: '600px', position: 'relative' }}>
<PixelBlast
variant="circle"
pixelSize={6}
color="#B19EEF"
patternScale={3}
patternDensity={1.2}
enableRipples
liquid
transparent
/>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'square' | 'circle' | 'triangle' | 'diamond' | 'square' | Pixel shape |
| pixelSize | number | 3 | Size of pixels |
| color | string | "#B19EEF" | Pixel color |
| patternScale | number | 2 | Pattern scale |
| patternDensity | number | 1 | Pattern density |
| liquid | boolean | false | Enable liquid effect |
| enableRipples | boolean | true | Enable ripple effects |
| transparent | boolean | true | Transparent background |