Interactive Grid Pattern

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

Loading…

A skewed grid whose cells light up under the pointer and fade slowly.

Code

"use client";

import { cn } from "@/lib/utils";
import { InteractiveGridPattern } from "@/lab/magicui/ui/interactive-grid-pattern";

export default function InteractiveGridPatternDemo() {
  return (
    <div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden">
      <InteractiveGridPattern
        className={cn(
          "[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
          "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
        )}
      />
    </div>
  );
}

Prompt

Build "Interactive Grid Pattern", a background animation. What it does: A skewed grid whose cells light up under the pointer and fade slowly. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS. Technique: inline SVG. 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/interactive-grid-pattern (Magic UI, MIT).