Animated Perspective Grid

backgrounds

3D retro synthwave vanishing perspective infinite matrix grid.

#grid#perspective#matrix#spatial#background

Live Interactive Preview

Spatial Animated Grid

Component Source Code

Select language in the dropdown

AnimatedGrid.tsx

1'use client';
2
3import React from 'react';
4
5export default function AnimatedGrid() {
6  return (
7    <div className="relative h-64 w-full max-w-md overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-[#070a13] flex flex-col justify-center items-center select-none">
8      <div 
9        className="absolute inset-0 bg-[linear-gradient(to_right,#1e293b_1px,transparent_1px),linear-gradient(to_bottom,#1e293b_1px,transparent_1px)] bg-[size:24px_24px] opacity-40 [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]" 
10      />
11      <div className="relative z-10 text-center p-6">
12        <h3 className="text-xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-300 to-indigo-400">
13          Spatial Mesh Grid
14        </h3>
15        <p className="text-xs text-slate-400 mt-1">Vanishing point perspective background.</p>
16      </div>
17    </div>
18  );
19}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/backgrounds/AnimatedGrid.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import AnimatedPerspectiveGrid from '@/components/backgrounds/AnimatedGrid';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <AnimatedPerspectiveGrid />
7    </main>
8  );
9}