Horizon Grid
Endless grid floor fading into a glowing horizon. Pro · 3D and motion › WebGL
An endless grid floor running to a glowing horizon, behind your content. The floor is one plane in CSS 3D perspective, moved one cell per cycle by a transform animation — no canvas, no JavaScript per frame, nothing to repaint — and paused off screen and in a hidden tab. The vanishing point drifts towards a mouse pointer (a custom property the browser eases; written per frame where it can't). Colours follow the theme. With reduced motion the floor stands still.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add horizon-gridnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { HorizonGrid } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
speed | number | 0.8 | Cells the floor travels per second; 0 stops it. |
cell | number | 56 | Size of a grid cell near the viewer, px. |
horizon | number | 0.5 | Height of the horizon from the top of the area, 0–1. |
tilt | number | 76 | How steeply the floor recedes, degrees: closer to 90 is flatter and longer. |
color | string | Colour of the lines and the glow. Default: the theme's accent colour. | |
sun | boolean | false | A sun sinking into the horizon, cut by slits. |
interactive | boolean | true | The vanishing point drifts a little towards the pointer. |
Related components
- Shader Aurora — WebGL shader aurora that reaches toward the cursor
- Shader Gradient — Live shader gradient for heroes: colors flow around the cursor
- Liquid Surface — GPU water surface: ripples follow the cursor, splash on click
- Particle Fabric — Fabric of tens of thousands of glowing points: folds, cursor, waves
- Particle Picture — Particles assemble into an image or text and flow between them
- Dot Globe — WebGL2 dot globe: markers, pulsing arcs, drag to rotate
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
Previous: Dot Globe · All 3D and motion