Cyberpunk Neon Horizon

backgrounds

Synthwave hot magenta and cyan wireframe horizon floor projection.

#cyberpunk#synthwave#neon#horizon#background

Live Interactive Preview

Cyberpunk Horizon

Component Source Code

Select language in the dropdown

CyberpunkGrid.tsx

1'use client';
2
3import React from 'react';
4
5export default function CyberpunkGrid() {
6  return (
7    <div className="relative h-64 w-full max-w-md overflow-hidden rounded-3xl border border-pink-500/30 bg-black flex flex-col items-center justify-center select-none">
8      <div className="absolute inset-0 bg-gradient-to-b from-black via-purple-950/40 to-pink-950/60" />
9      
10      <div className="absolute -bottom-10 inset-x-0 h-40 [perspective:200px]">
11        <div 
12          style={{ transform: 'rotateX(60deg)' }}
13          className="h-full w-full bg-[linear-gradient(to_right,#ec4899_1px,transparent_1px),linear-gradient(to_bottom,#ec4899_1px,transparent_1px)] bg-[size:20px_20px] opacity-70"
14        />
15      </div>
16
17      <div className="relative z-10 text-center p-6">
18        <h3 className="text-2xl font-black italic tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-pink-500 via-purple-400 to-cyan-400">
19          NEON OVERDRIVE
20        </h3>
21        <p className="text-xs text-pink-300/80 mt-1 font-mono">3D perspective synthwave ground</p>
22      </div>
23    </div>
24  );
25}

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/CyberpunkGrid.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

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