A canvas grid of small squares that reseeds and twinkles. Anchor density to an edge, then tune size, gap, fade, and brightness.
Color
4px
6px
0.45
0.12
1.2
0.55
0.35
1
1
0.15
1
1.25
tsx
import { Flicker } from "@/components/motion/flicker"export function Example() { return ( <Flicker className="h-[420px] w-full" squareSize={4} gridGap={6} color="#3b82f6" maxOpacity={0.45} flickerChance={0.12} twinkleSpeed={1.2} twinkleStrength={0.55} minBrightness={0.35} intensity={1} opacity={1} direction="right" fadeStart={0.15} fadeEnd={1} falloff={1.25} /> )}Installation
npx @arctis-sh/@arctis-sh/ui@latest add flickerUsage
import { Flicker } from "@/components/motion/flicker"<Flicker className="h-[420px] w-full" direction="right" color="#3b82f6"/>API Reference
Flicker
| Prop | Type | Default |
|---|---|---|
| squareSize | number | 4 |
| gridGap | number | 6 |
| color | string | #3b82f6 |
| backgroundColor | string | — |
| maxOpacity | number | 0.45 |
| flickerChance | number | 0.12 |
| twinkleSpeed | number | 1.2 |
| twinkleStrength | number | 0.55 |
| minBrightness | number | 0.35 |
| 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. Square size and gap are in pixels.