Perspective Grid Floor
A tilted, endlessly scrolling grid floor that recedes toward the horizon.
DOM + CSS0 deps1 file · 2 KB TSXreduced-motion aware
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
// ---------------------------------------------------------------
}Details
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.
