React Retro Grid Background
80s-inspired perspective grids that transport users to the cyberpunk future. Build nostalgic React background components with CSS animations, infinite scrolling, customizable neon colors, and TypeScript support for Next.js applications with shadcn/ui.
Powered by
Building 80s cyberpunk interfaces?
Join our Discord community for help from other developers.
Flat grids are stuck in 2D. Boring. What if your background could transport users to 1982? To neon-lit digital landscapes and infinite computing grids? This React component creates the perspective grid effect from classic sci-fi movies—that iconic "flying through cyberspace" feeling that defined an era.
Infinite perspective scrolling
Watch perspective grids create depth with authentic 80s cyberpunk aesthetics:
Built for React applications with TypeScript and Next.js. Uses CSS perspective transforms and infinite scrolling animation to create the illusion of endless digital space. Customizable angles, colors, and opacity let you dial in the perfect retro vibe. Perfect for gaming platforms, tech portfolios, or any design that needs to feel futuristic.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/retro-grid.jsonnpx shadcn@latest add https://www.shadcn.io/registry/retro-grid.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/retro-grid.jsonbunx shadcn@latest add https://www.shadcn.io/registry/retro-grid.jsonUsage
import { RetroGrid } from "@/components/ui/retro-grid";
export default function CyberpunkHero() {
return (
<div className="relative h-screen w-full overflow-hidden bg-black">
{/* Your content */}
<div className="relative z-10 flex items-center justify-center h-full">
<h1 className="text-6xl font-bold bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-transparent">
Welcome to 2080
</h1>
</div>
{/* Retro grid background */}
<RetroGrid
angle={65}
cellSize={60}
opacity={0.5}
lightLineColor="#00ff41"
darkLineColor="#00ff41"
/>
</div>
);
}Required CSS Animation
Important: Add this CSS animation to your global styles for the grid to work:
@keyframes grid {
0% { transform: translateY(-50%); }
100% { transform: translateY(0); }
}
.animate-grid {
animation: grid 15s linear infinite;
}Why most retro grids look fake
Most developers use CSS linear-gradient with background-image, creating flat patterns that look like graph paper. Others try 3D libraries with complex WebGL shaders—overkill that tanks performance. Some use static SVG patterns that don't move, missing the whole "flying through cyberspace" magic.
This React component uses CSS perspective transforms with infinite scrolling animation. The 65-degree rotation angle creates authentic depth perception. Translateย animation from -50% to 0% creates seamless looping. Pure CSS means 60fps performance without JavaScript overhead. It's the difference between a retro aesthetic and a retro screenshot.
Features
- CSS perspective transforms creating authentic 3D depth without WebGL overhead
- Infinite scrolling animation with seamless looping for endless digital space illusion
- Customizable neon aesthetics with adjustable colors, opacity, and grid geometry
- Performance-optimized using hardware-accelerated CSS transforms for smooth 60fps
- Authentic 80s parameters with scientifically-tuned default angles and timing
- Responsive grid scaling adapting cell size and perspective to container dimensions
- Theme-aware color system automatically switching between light and dark variants
- TypeScript definitions for all geometric and visual customization parameters
- Zero JavaScript animation using pure CSS for maximum performance efficiency
- shadcn/ui compatible with proper layering and theme integration
Examples
Custom Configuration
Adjust angle, cell size, and colors for unique cyberpunk personalities:
Subtle Background
Lower opacity creates ambient retro atmosphere without overwhelming content:
Colored Grid
Neon purple creates authentic synthwave aesthetics for maximum 80s impact:
API Reference
RetroGrid
Main component for 80s-inspired perspective grid backgrounds.
| Prop | Type | Default | Description |
|---|---|---|---|
angle | number | 65 | Perspective rotation angle in degrees (45-75 optimal) |
cellSize | number | 60 | Grid cell dimensions in pixels (40-100 recommended) |
opacity | number | 0.5 | Grid line opacity (0-1, lower for subtle backgrounds) |
lightLineColor | string | "gray" | Grid color in light mode (hex, rgb, or CSS colors) |
darkLineColor | string | "gray" | Grid color in dark mode (hex, rgb, or CSS colors) |
className | string | - | Additional CSS classes for container styling |
80s Aesthetic Parameters
Optimal settings for authentic retro computing vibes:
// Classic cyberpunk (Tron-inspired)
angle={65} cellSize={60} opacity={0.5} darkLineColor="#00ff41"
// Subtle ambient grid
angle={70} cellSize={50} opacity={0.2} darkLineColor="#64748b"
// Bold synthwave aesthetic
angle={60} cellSize={40} opacity={0.8} darkLineColor="#a855f7"
// Matrix-inspired green
angle={65} cellSize={80} opacity={0.6} darkLineColor="#39ff14"CSS Animation Mechanics
/* The magic: infinite perspective scrolling */
@keyframes grid {
0% { transform: translateY(-50%); } /* Start halfway up */
100% { transform: translateY(0); } /* End at origin */
}
/* 15-second cycle creates smooth, hypnotic movement */
animation: grid 15s linear infinite;Common gotchas
Missing CSS animation: The component won't work without the required @keyframes grid in your global styles. The grid will appear static without this crucial animation.
Angle sweet spot: Angles below 45° look too flat, above 75° become hard to read. The default 65° is scientifically tuned for optimal cyberpunk depth perception.
Performance with large cells: Very large cellSize values (100+) can impact performance on older devices. The browser has to render more grid lines.
Color visibility issues: Light colors on light backgrounds disappear. Always test your color choices across both light and dark themes for proper contrast.
Overflow container required: The grid extends beyond bounds for the scrolling effect. Always use overflow-hidden on the parent container to prevent scrollbars.
Z-index layering: Grid appears behind content by default. If content disappears, ensure it has relative z-10 or higher positioning.
You might also like
Explore other futuristic and geometric background components for React applications:
Grid Pattern
Clean SVG grid lines with masking and highlight effects
Hexagon Background
Geometric honeycomb patterns with hover interactions
Vortex
Swirling particle effects creating mesmerizing depth
Particles
Interactive particle systems with physics-based movement
Background Boxes
Isometric 3D boxes with colorful hover effects
Interactive Grid Pattern
Grid cells that respond to cursor hover movement
Questions developers actually ask
React Paths Background
Floating SVG path animations that create depth and movement like abstract art in motion. Build mesmerizing React background components with Framer Motion, gradient text effects, interactive elements, and TypeScript support for Next.js applications with shadcn/ui.
React Ripple Background
Concentric circle animations that draw attention like a stone dropped in still water. Build mesmerizing React focus effects with CSS transforms, pulsing animations, customizable timing, and TypeScript support for Next.js applications with shadcn/ui.