Grid Bloom

Shaders 56

About

An animated WebGL shader background rendering a glowing, pulsing grid with wave interference and mouse-reactive light and repulsion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Grid Bloom to your project and fits it to your theme.

Code

How Grid Bloom is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import GridBloom from "@/components/ui/grid-bloom";

export default function GridBloomDemo() {
  return (
    <div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg bg-background">
      <GridBloom />
      <h1 className="relative z-10 text-4xl font-bold tracking-tight text-foreground md:text-6xl">
        Grid Bloom
      </h1>
    </div>
  );
}