Grid Motion

Overview

GridMotion renders a rotated 4×7 grid of content cells that shift horizontally based on mouse position. Each row moves at different speeds and alternating directions, creating a dynamic parallax effect powered by GSAP.

Features

• Mouse-driven parallax — rows shift based on cursor position with inertia
• GSAP powered — smooth 60fps animations with power3.out easing
• Mixed content — supports text, React nodes, or image URLs
• Radial gradient — configurable background gradient overlay

Usage

import GridMotion from '@/components/grid-motion'

<div className="h-[600px]">
  <GridMotion
    items={['Item 1', 'Item 2', 'https://picsum.photos/300/200']}
    gradientColor="#111"
  />
</div>

Props