Perspective Grid Floor
A tilted, endlessly scrolling grid floor that recedes toward the horizon.
- Category
- Backgrounds
- Added
- 2026-09-01
- Deps
- none
- Updated
- 2026-09-01
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Enter the grid
A retro floor scrolling into the horizon
Props
"use client";
import { useEffect, useRef, type CSSProperties } from "react";
export function PerspectiveGridFloor({
speed = 6,
spacing = 40,
color = "#2563eb",
}: {
speed?: number;
spacing?: number;
color?: string;
}) {
// Validated before it reaches the gradient. Unchecked, a caller-supplied
// colour interpolated into a MULTI-LAYER gradient value can close the
// gradient function and append another layer — e.g. a url() that fires an
// outbound request. A single-value style assignment would be safe; this
// is not one.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this background
Perspective Grid Floor is a single div: a repeating two-layer linear-gradient background tilted with a real CSS 3D transform (rotateX plus a perspective on the parent), scrolled by animating background-position in a linear loop. There is no canvas, no SVG, and no per-frame JavaScript — the browser's compositor handles the whole effect, so cost is essentially free regardless of how long it runs. The loop distance is passed through a CSS custom property set inline rather than baked into the keyframes text, which keeps the styled-jsx block fully static. Because the grid fades to the base dark color at both the top and bottom via an overlay gradient, sample text sits on a flat, predictable dark field rather than directly on the grid lines. The caveat: the 3D tilt reads best in a wide, short container — in a near-square or tall crop the horizon recession compresses and the effect reads more like a plain tilted grid than a floor.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Pointer Warp Dot Field
backgroundsA canvas dot grid that bulges and brightens away from the cursor.
Magnetic Tile Grid
backgroundsA tile field that leans toward the pointer and brightens with proximity.
Animated Dot Matrix
backgroundsA grid of dots that pulses outward in concentric ripples, drawn on canvas.