Flickering Grid

Source: Magic UI ↗
Author: Magic UI
Licence: MIT

Loading…

A canvas of tiny squares that flicker at random opacities.

Code

"use client";

import { FlickeringGrid } from "@/lab/magicui/ui/flickering-grid";

export default function FlickeringGridDemo() {
  return (
    <div className="relative h-full w-full overflow-hidden">
      <FlickeringGrid
        className="absolute inset-0 z-0 size-full"
        squareSize={4}
        gridGap={6}
        color="#6B7280"
        maxOpacity={0.5}
        flickerChance={0.1}
      />
    </div>
  );
}

Prompt

Build "Flickering Grid", a background animation. What it does: A canvas of tiny squares that flicker at random opacities. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS. Technique: an HTML canvas, a requestAnimationFrame loop. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://magicui.design/docs/components/flickering-grid (Magic UI, MIT).