Mosaic
Mosaic effect with animated wave or video background
mosaic-tw
Customize
10
0.8
1
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | number | string | "100%" | Width of the component in pixels or CSS value |
| height | number | string | "100%" | Height of the component in pixels or CSS value |
| speed | number | 1.0 | Animation speed multiplier |
| variant | "shader" | "video" | "shader" | Mosaic source variant |
| videoSrc | string | "" | Video source URL (required when variant='video') |
| color1 | string | "#FF0033" | Primary wave color in hex format |
| color2 | string | "#00FF66" | Secondary wave color in hex format |
| color3 | string | "#0066FF" | Accent wave color in hex format |
| pixelSize | number | 10 | Pixel/mosaic tile size (1-50) |
| borderIntensity | number | 0.8 | Mosaic border intensity (0-1) |
| opacity | number | 1.0 | Overall effect opacity (0-1) |
| waveIntensity | number | 1.0 | Wave intensity/amplitude (0-2) |
| waveWidth | number | 1.0 | Wave width/thickness (0.1-5) |
| quality | "low" | "medium" | "high" | "high" | Rendering quality level |
| className | string | "" | Additional CSS classes |
| children | React.ReactNode | undefined | Content to render on top of the effect |