Flickering Grid
Grid of squares fading in and out on staggered timers.
- 0.8 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Flickering Grid
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/flickering-grid.jsonAdds components/velora/flickering-grid.tsx and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
squareSizeSquare size in px | number | 4 |
gapGap between squares in px | number | 6 |
columnsNumber of columns and rows to render | number | 40 |
rows | number | 20 |
className | string | — |
Accessibility
- Reduced motion
- The flicker stops and every square rests at a fixed opacity halfway between --flicker-min and --flicker-max (about 0.27 by default), leaving an even, dim dot pattern.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- Decorative: the grid is aria-hidden and ignores pointer events.