127+ Primitives
Flickering Grid
BackgroundsHigh-performance HTML5 canvas flickering retro grid background with device-pixel-ratio scaling, probabilistic opacity stepping, and automatic offscreen pausing via IntersectionObserver.
CanvasPerformanceIntersectionObserverDPR Aware
Flickering Grid Canvas
Device-pixel-ratio scaled • Battery-aware auto pause
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:clsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/flickering-grid.json"
Props
TypeScript props supported by <FlickeringGrid />.
| Prop | Type | Default | Description |
|---|---|---|---|
| squareSize | number | 4 | Dimension of each square cell in CSS pixels. |
| gridGap | number | 6 | Spacing between adjacent cells in CSS pixels. |
| flickerChance | number | 0.3 | Probability of a cell recalculating its opacity per second [0..1]. |
| color | string | "rgb(0, 0, 0)" | CSS color string for the rendered grid squares. |
| maxOpacity | number | 0.3 | Maximum opacity ceiling for the grid squares. |
| width | number | undefined | Optional explicit fixed width override in pixels. |
| height | number | undefined | Optional explicit fixed height override in pixels. |
| className | string | undefined | Additional Tailwind CSS classes merged into the container. |
Key Features
- GPU-accelerated HTML5 2D canvas rendering with subpixel device-pixel-ratio sharpness.
- Dynamic delta-time calibrated probabilistic flickering so frame rate fluctuations do not affect animation speed.
- Battery-friendly IntersectionObserver automatically halts requestAnimationFrame loops when scrolled out of view.
- Fast SSR-safe color parser with support for hex, rgb, and CSS color names.
Keyboard & Accessibility
- Decorative canvas marked with pointer-events-none so it does not intercept user clicks.
- Gracefully respects viewport resizing without layout shifts.