Uilora Logo
Uilora.
Join
Uilora Logo
Uilora.
Join

Retro Vapor Grid

Synthwave aesthetic with 3D perspective grid and retro vaporwave colors.

Main Features of Retro Vapor Grid

How to Use Retro Vapor Grid in Next.js

Installation Guide for Retro Vapor Grid

Props

Customize the component with these props

PropertyTypeDefaultDescription
backgroundColor
string#1a0b2eBackground color
perspective
string1000px3D perspective
topGradientFrom
stringrgba(255, 0, 128, 0.2)Top gradient start color
topGradientVia
stringtransparentTop gradient middle color
topGradientTo
stringtransparentTop gradient end color
sunGradientFrom
string#ff71ceSun gradient start color
sunGradientTo
string#fdb927Sun gradient end color
sunSize
string16remSun size
sunBlur
string2xlSun blur
sunPosition
stringbottom-[40%]Sun position
gridColor
stringrgba(180, 50, 210, 0.4)Grid color
gridSize
string80pxGrid size
gridRotateX
number60Grid X rotation
gridDuration
number1Grid animation duration
bottomGradientFrom
string#2b0f42Bottom gradient start color
bottomGradientVia
stringrgba(43, 15, 66, 0.8)Bottom gradient middle color
bottomGradientTo
stringtransparentBottom gradient end color
grainOpacity
number0.15Grain overlay opacity
grainBaseFrequency
string0.65Grain base frequency
grainOctaves
number3Grain octaves
title
stringSynthwaveTitle text
className
stringAdditional CSS classes
PreviousChromatic Aberration Liquid
NextFrost Glass Mesh

When to Use

Ideal for retro gaming, 80s-inspired brands, and nostalgic Next.js portfolios. Use this React component for a classic synthwave grid that scrolls infinitely with a 3D perspective and a vibrant 'vapor' sun.

Best Practices

Maintain consistent spacing within your design system by pairing this with bold, neon typography. Follow React best practices by ensuring the sunset horizon aligns with your content focus. Optimize for performance by using hardware-accelerated grid movement.

Why This Component Matters in Modern UI Development

Synthwave is an iconic visual style that immediately communicates a specific technical and nostalgic 'vibe'. This production-ready component gives you a polished version of this classic design, helping you build memorable architectures.

Frequently Asked Questions

QCan I change the sun color?

Yes, the `sunGradientFrom` and `sunGradientTo` props allow you to create everything from a classic neon pink sun to a cool blue moon.

QHow do I change the scroll speed?

The `gridDuration` prop controls the speed of the infinite scroll, allowing for a slow drift or a fast energetic movement.

QIs the grid actually 3D?

It uses CSS 3D perspectives to tilt a 2D plane, creating a highly efficient and convincing 3D landscape.

Retro Vapor Grid - Mesh Gradients & CSS Backgrounds | Uilora