Library

Retro Grid Hero

Retro Grid Hero

Dramatic hero with a perspective grid floor stretching to the horizon, pulsing glow line, and scattered star dots. 80s retro/synthwave aesthetic.

heroretrogridsynthwave

Installation

bash
# Copy retro-grid-hero.tsx to your project
cp components/ui/retro-grid-hero.tsx your-project/components/ui/retro-grid-hero.tsx

How to use

tsx
import { RetroGridHero } from "@/components/ui/retro-grid-hero";
tsx
<RetroGridHero
  heading={<>Welcome to the<br /><span className="text-violet-400">future</span></>}
  subheading="A retro-futuristic hero with perspective grid."
  gridColor="rgba(139, 92, 246, 0.15)"
  glowColor="#7c3aed"
>
  <button className="px-6 py-3 bg-violet-600 text-white rounded-full">Enter</button>
</RetroGridHero>

Dependencies

framer-motion

Exports

RetroGridHero

File

components/ui/retro-grid-hero.tsx
Preview
Welcome to the
future

A retro-futuristic hero with perspective grid floor and synthwave aesthetics.

Made with