DotGrid
Grid of dots with optional twinkling animation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | color | #ffffff | The color of the dot |
| density | range | 30 | The number of dots along the canvas height (the width fits as many as the aspect ratio allows) |
| dotSize | range | 0.3 | The size of each dot, zero (0) being invisible, one (1) filled the grid with no gaps |
| offset | range | 0 | Horizontal stagger of alternating rows (0.5 = classic polka-dot brick offset) |
| speed | range | 0 | Animates the rows drifting horizontally (0 = static) |
| speedVariance | range | 0.3 | Per-row random speed variance for irregular drifting motion |
| twinkle | range | 0 | Intensity of the twinkle effect (0 = off, 1 = full twinkle) |
Usage
vue
<Shader>
<DotGrid
color="#ffffff"
/>
</Shader>