Retro Grid

Back

Satu Visual ComponentNew

A synthwave perspective grid scrolling toward the horizon.

Retro Grid

Installation

Add it with the CLI:

Terminal

Or open the Code tab above and copy it in manually — it relies on the standard cn() helper from @/lib/utils.

A dramatic dark hero backdrop. The grid scrolls in perspective.

Prop	Type	Default	Description
children	ReactNode	—	Foreground content.
className	string	—	Extra classes (set height here).
color	string	rgba(139,92,246,0.5)	Grid line color.

No external npm dependencies. ✨

Add this to your Tailwind config:

tailwind.config.ts

// theme.extend
keyframes: {
  "grid-scroll": {
    "0%": { transform: "translateY(0)" },
    "100%": { transform: "translateY(40px)" },
  },
},