RetroGrid
retro-gridAnimates a perspective grid toward the viewer for a retro backdrop.
Usage
Basic usage
relative Place a layer of RetroGrid in the container to get a perspective scrolling grid, with a default tilt angle of 65°, 12s round, and text-border.
tsx
<div className="relative h-56 w-full overflow-hidden rounded-xl border border-border bg-surface">
<RetroGrid />
</div>Mig · Slow
cellSize adjusts the grid density, and duration adjusts the rolling period (the larger it is, the slower it is).
tsx
<div className="relative h-56 w-full overflow-hidden rounded-xl border border-border bg-surface">
<RetroGrid cellSize={36} duration={24} />
</div>Color change and transparency
Set the thread color to currentColor, use text-* to change the color; opacity adjusts the overall fade-in level.
tsx
<div className="relative h-56 w-full overflow-hidden rounded-xl border border-border bg-surface">
<RetroGrid className="text-primary" opacity={0.7} />
</div>When to Use
Perspective scrolling grid horizon creating a synthwave/cyberpunk vibe. If you want a dynamic perspective grid, use this component; if you want a static tile grid, use GridPattern, and if you want a dotted grid, use DotPattern.
Import
ts
import { RetroGrid } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| angle | number | 65 | Perspective tilt angle (degrees) |
| cellSize | number | 60 | Grid unit pixels |
| opacity | number | 0.5 | Overall opacity |
| duration | number | 12 | Duration of one scroll cycle in seconds; higher values move more slowly |
Inherited fromComponentPropsWithoutRef<"div">. The color iscurrentColorand controlled by thetext-*tool class.
Usage Guidelines
- The inner
absolute inset-0is parented and must be placed inside arelative(and usuallyoverflow-hidden) positioning container. - The CSS scrolling animation honors
prefers-reduced-motionand stops when the system requests reduced motion.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · Ripple · Meteors
Playground
<div className="relative">
<RetroGrid cellSize={60} duration={12} opacity={0.5} />
</div>