Modus UI

Grid Motion

Web (React)

An interactive, infinite grid that tracks mouse movement with beautiful inertia physics.

An interactive, infinite grid that tracks mouse movement with beautiful inertia physics. Perfect for hero sections or showcasing features and partner logos.

Live Preview
Design
Development
Engineering
Architecture
Performance
Accessibility
Framer Motion
Tailwind
React
Next.js
Modus UI
Components
Interactive
Responsive
Accessible
Fast
Beautiful
Modern
Clean
Simple
Flexible
Scalable
Reliable
Robust
Elegant
Seamless
Fluid
Dynamic

Installation

CLI

npx @modus-ui/cli add grid-motion

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/grid-motion.tsx.
  3. Paste the code.

Usage

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

export default function Example() {
  const items = [
    "Design",
    "Development",
    "Engineering",
    "Architecture",
    "Performance",
    "Accessibility",
    "Framer Motion",
    "Tailwind",
  ];

  return (
    <div className="h-[600px] w-full">
      <GridMotion items={items} />
    </div>
  );
}

Props

PropTypeDefaultDescription
itemsReactNode[][]Array of items to populate the grid. Should ideally have at least 28 items to fill the viewport.
gradientColorstring"hsl(var(--background))"Center color of the radial gradient mask overlay.

Comments

  • No comments yet.