A canvas field of small dots that reseeds and twinkles. Anchor density to an edge, then tune size, gap, fade, and brightness.
Color
3px
10px
0.5
0.1
1
0.5
0.3
1
1
0.15
1
1.25
tsx
import { Dots } from "@/components/motion/dots"export function Example() { return ( <Dots className="h-[420px] w-full" dotSize={3} gap={10} color="#3b82f6" maxOpacity={0.5} flickerChance={0.1} twinkleSpeed={1} twinkleStrength={0.5} minBrightness={0.3} intensity={1} opacity={1} direction="right" fadeStart={0.15} fadeEnd={1} falloff={1.25} /> )}Installation
npx @arctis-sh/@arctis-sh/ui@latest add dotsUsage
import { Dots } from "@/components/motion/dots"<Dots className="h-[420px] w-full" direction="right" color="#3b82f6"/>API Reference
Dots
| Prop | Type | Default |
|---|---|---|
| dotSize | number | 3 |
| gap | number | 10 |
| color | string | #3b82f6 |
| backgroundColor | string | — |
| maxOpacity | number | 0.5 |
| flickerChance | number | 0.1 |
| twinkleSpeed | number | 1 |
| twinkleStrength | number | 0.5 |
| minBrightness | number | 0.3 |
| intensity | number | 1 |
| opacity | number | 1 |
| direction | none right left top bottom | none |
| fadeStart | number | 0.15 |
| fadeEnd | number | 1 |
| falloff | number | 1.25 |
| dpr | number | 1.5 |
| className | string | — |
| children | ReactNode | — |
Also accepts the other native div attributes. Dot size and gap are in pixels.