Background
Retro Grid
Nostalgic 80s-inspired grid animations that capture the essence of cyberpunk aesthetics. This React component brings sci-fi movie magic to modern Next.js applications with authentic retro appeal.
Powered by
Installation
npx shadcn@latest add https://www.shadcn.io/registry/retro-grid.json
npx shadcn@latest add https://www.shadcn.io/registry/retro-grid.json
pnpm dlx shadcn@latest add https://www.shadcn.io/registry/retro-grid.json
bunx shadcn@latest add https://www.shadcn.io/registry/retro-grid.json
CSS Animation
The retro grid effect requires the following CSS animation to be added to your global styles:
@keyframes grid {
0% {
transform: translateY(-50%);
}
100% {
transform: translateY(0);
}
}
Make sure to also add the animation utility class:
.animate-grid {
animation: grid 15s linear infinite;
}
Features
- Infinite perspective scrolling with CSS transforms creating illusion of endless digital space
- Authentic 3D grid animation using perspective effects for genuine retro computing aesthetics
- Dual-mode color adaptation seamlessly switching between light and dark themes
- Performance-optimized rendering maintaining smooth 60fps with pure CSS animations
- Customizable geometry control allowing cell size and rotation angle adjustments
- Configurable opacity blending supporting subtle ambience or bold cyberpunk effects
- TypeScript support with complete interface definitions for reliable integration
Examples
Custom Configuration
Fine-tune perspective angles and cell dimensions to create unique visual personalities that match your brand.
Subtle Background
Reduced opacity settings maintain retro charm while preserving content readability and focus.
Colored Grid
Vibrant neon palettes evoke authentic synthwave aesthetics for maximum nostalgic impact.
Use Cases
This free open source React component works well for:
- Gaming platforms - Immersive sci-fi backgrounds for digital universes built with Next.js
- Tech portfolios - Sophisticated grid animations showcasing coding skills using TypeScript
- Cryptocurrency sites - Digital aesthetics reinforcing blockchain themes
- Music production - Synthwave platforms benefiting from 80s visual references using shadcn/ui design
- VR/AR companies - Perspective grids suggesting spatial computing capabilities
- Startup landing pages - Futuristic design communicating innovation using Tailwind CSS animations
API Reference
Prop | Type | Default | Description |
---|---|---|---|
angle | number | 65 | Rotation angle of the grid in degrees |
cellSize | number | 60 | Grid cell size in pixels |
opacity | number | 0.5 | Grid opacity value between 0 and 1 |
lightLineColor | string | "gray" | Grid line color in light mode |
darkLineColor | string | "gray" | Grid line color in dark mode |
className | string | undefined | Additional CSS classes to apply |
Implementation Notes
- Component requires CSS keyframes and animation classes to be added to global styles
- Grid animation uses translateY transforms (-50% to 0%) creating infinite scrolling illusion
- 65-degree rotation angle provides optimal depth perception for cyberpunk aesthetics
- Color customization supports both light and dark theme variants automatically
- Cell size and angle props allow geometric precision control for brand customization
- Hardware-accelerated CSS transforms ensure smooth 60fps animation performance
- Compatible with shadcn/ui design system and Tailwind CSS utility classes
- Animation duration set to 15s linear infinite for consistent perspective movement