Grid Motion

Animations

Grid with motion effects based on mouse position.

Import

import { PixelGridMotion } from "@/components/ui/pixel/animations/pixel-grid-motion"

Usage

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/animations/pixel-grid-motion.tsx

"use client";

import * as React from "react";
import GridMotion from "@/components/GridMotion";

export function PixelGridMotion(props: any) {
  return (
    <div className="pixel-animation-wrapper w-full h-48">
      <GridMotion {...props} />
    </div>
  );
}

export default PixelGridMotion;

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.