Infinite Grid
NewPremiumPerspective grid that scrolls infinitely with direction-aware coloring and edge fading.
backgroundgridinfiniteperspectivedirection-aware
Installation
Terminalbash
npx motioncraft add infinite-gridUsage
infinite-grid.tsxtsx
import { InfiniteGrid } from "@/components/backgrounds/infinite-grid";
<InfiniteGrid speed={1} perspective className="h-96" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cellSize | number | 60 | Grid cell size in pixels |
| lineWidth | number | 1 | Grid line width |
| speed | number | 0.5 | Scroll speed |
| perspective | boolean | true | Enable perspective fade |
| fadeEdges | boolean | true | Fade grid at edges |
| className | string | — | Additional CSS classes |
Related Components
Gradient Mesh
NewMulti-point animated mesh gradient that adapts to the active direction. Supports interactive mouse tracking.
Grid Background
Subtle grid pattern background using SVG for crisp rendering at any scale.
Aurora Background
Animated aurora borealis gradient background with configurable colors and speed.
Gradient Blur
Blurred gradient orbs with configurable colors for atmospheric backgrounds.