Dot Grid
Installation
pnpm add @corew500/uiUsage
import { DotGrid } from "@corew500/ui/dot-grid"
<DotGrid>Content</DotGrid>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| dotSize | number | 16 | Dot diameter in pixels |
| gap | number | 32 | Space between dots in pixels |
| baseColor | string | hsl(var(--muted-foreground)) | Resting dot color (CSS color value) |
| activeColor | string | hsl(var(--primary)) | Proximity hover color (CSS color value) |
| proximity | number | 150 | Distance (px) to trigger color change |
| shockRadius | number | 200 | Click effect radius in pixels |
| shockStrength | number | 4 | Click push magnitude |
| returnDuration | number | 1.2 | Return animation duration in seconds |
Accessibility
Screen Readers
- - Canvas element has aria-hidden="true" as it's purely decorative
Additional
- Visual effects are non-essential and don't convey information
- Consider reduced motion preferences in consuming applications
Localization
Translatable Content
- - No text content to translate
Additional
- Color props accept any CSS color value for theme customization