Skip to main content

​
Flickering Grid

A canvas-based component that creates a dynamic flickering grid background. Squares randomly change opacity to create a subtle, animated matrix-like effect.

​
Installation

npx shadcn-svelte@latest add https://sv-animations.vercel.app/r/flickering-grid.json

​
Usage

<script lang="ts">
  import { FlickeringGrid } from "$lib/components/magic-ui/flickering-grid";
</script>

<div class="relative h-[500px] w-full overflow-hidden rounded-lg border">
  <FlickeringGrid
    squareSize={4}
    gridGap={6}
    color="rgb(0, 0, 0)"
    maxOpacity={0.5}
    flickerChance={0.3}
  />
  <div class="relative z-10 flex h-full items-center justify-center">
    <p class="text-5xl font-medium tracking-tighter text-black dark:text-white">
      Flickering Grid
    </p>
  </div>
</div>

​
Props

​
squareSize
number
default:"4"
The size of each square in pixels.
​
gridGap
number
default:"6"
The gap between squares in pixels.
​
flickerChance
number
default:"0.3"
The probability that a square will change opacity each frame (0-1). Higher values create more rapid flickering.
​
color
string
default:"rgb(0, 0, 0)"
The color of the squares. Accepts any valid CSS color value (rgb, hex, hsl, named colors).
​
width
number
Optional fixed width in pixels. If not provided, the component fills its container.
​
height
number
Optional fixed height in pixels. If not provided, the component fills its container.
​
maxOpacity
number
default:"0.3"
The maximum opacity for squares (0-1).
​
class
string
Additional CSS classes to apply to the container element.

​
Examples

​
Basic Flickering Grid

<FlickeringGrid
  squareSize={4}
  gridGap={6}
  color="rgb(0, 0, 0)"
  maxOpacity={0.5}
/>

​
Dark Theme with Blue Tint

<FlickeringGrid
  squareSize={4}
  gridGap={6}
  color="rgb(59, 130, 246)"
  maxOpacity={0.4}
  flickerChance={0.2}
  class="dark:block hidden"
/>

​
Faster Flicker Rate

<FlickeringGrid
  squareSize={3}
  gridGap={5}
  flickerChance={0.5}
  maxOpacity={0.6}
/>

​
Larger Squares

<FlickeringGrid
  squareSize={8}
  gridGap={10}
  color="rgb(139, 92, 246)"
  maxOpacity={0.3}
/>

​
Custom Color with High Contrast

<FlickeringGrid
  squareSize={4}
  gridGap={6}
  color="rgb(34, 197, 94)"
  maxOpacity={0.7}
  flickerChance={0.4}
/>

​
Notes

  • Uses HTML5 Canvas for high-performance rendering
  • Animation pauses when component is not in viewport (uses Intersection Observer)
  • Automatically handles device pixel ratio for crisp rendering
  • Responsive to container size changes (uses ResizeObserver)
  • Each square has random opacity assigned when flickering occurs
  • Color conversion happens automatically for any CSS color format

Build docs developers (and LLMs) love

Get started for freeTalk to us