Perspective Grid
A 3D-transformed grid background that provides a sense of depth and scale. Perfect for creating 'digital horizon' or 'cyberpunk' aesthetics with smooth radial fading.
Live Interactive Preview
Perspective Horizon
Source
npx futureuikit add perspective-grid Details
CSS-based 3D transformation for a futuristic perspective effect.Customizable grid line gap and fading radius.Built-in radial overlay for smooth blending with the background color.Lightweight and performant with zero JavaScript animation overhead.React.memo optimized to prevent unnecessary re-renders.
How to Use?
- Import PerspectiveGrid into your component.
- Use it as a background element in a container with 'relative' and 'overflow-hidden'.
- Adjust 'gridLineGap' to change the density of the grid.
- Tweak 'fadeRadius' to control how much of the grid is visible before fading into the background.