Motion Grid

A set of diagonal lines that move continuously with gradientglow.

MotionGrid,
Background.

gliding right, setting the path.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/motion-grid.json 

Usage

import { MotionGrid } from "@/components/ui/motion-grid";
<MotionGrid speed="3s" opacity={0.15} enableGlow={true} lineColor="20, 184, 166" className="relative h-[400px] w-full flex flex-col items-center justify-center">
      <h2 className="bg-clip-text text-transparent text-center bg-gradient-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>

Examples


Direction

MotionGrid,
Background.

gliding right, setting the path.

API Reference

Motion Grid

A set of diagonal lines that move continuously with gradientglow.

Props

PropertyTypeDefaultDescription
speedstring"30s"
Duration of the diagonal grid movement animation (e.g., '10s', '30s').
opacitynumber0.1
Opacity of the grid lines (0 to 1). Controls how visible the lines appear.
direction"left" | "right""right"
Direction of the grid movement. Determines if the background shifts left or right.
lineColorstring"0, 255, 128"
RGB values (without alpha) for the grid line color. Used inside rgba().
lineWidthstring"1px"
Thickness of individual grid lines (e.g., '1px', '2px').
gridSpacingstring"20px"
Distance between repeating grid lines. Controls how dense the grid looks.
backgroundColorstring"#0f0f0f"
The base background color behind the animated grid.
enableGlowbooleantrue
Enables or disables the glow gradient overlay behind the grid.
glowGradientstring
Custom glow gradient value (optional). Overrides the default radial glow.
classNamestring
Additional classes for the outer container.
childrenReact.ReactNode
Content rendered above the animated grid background.

Built withby Ahdeetai.