Motion Grid

Heroes 25

About

An animated diagonal grid-line background with an optional radial gradient glow, used as a decorative backdrop behind hero text or sections.

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

Code

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

Usage.tsx

import { MotionGrid } from "@/components/ui/motion-grid";

export default function MotionGridDemo() {
  return (
    <MotionGrid
      speed="3s"
      opacity={0.15}
      enableGlow={true}
      lineColor="20, 184, 166"
      className="relative w-full h-screen flex flex-col items-center justify-center"
    >
      <h2 className="bg-clip-text text-transparent text-center bg-linear-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight">
        MotionGrid, <br /> Background.
      </h2>
      <p className="max-w-xl mx-auto text-sm md:text-lg text-neutral-700 dark:text-neutral-400 text-center">
        gliding right, setting the path.
      </p>
    </MotionGrid>
  );
}