An endless perspective wall of tiles drifting past, lifting on hover.
Hover a tile to lift it and stop its column. Every prop is wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
items | { image: string, title?: string, href?: string }[] | 15 demo tiles | Tiles to display. Each item has { image, title?, href? }. |
columns | number | 5 | Number of drifting columns. |
tileWidth | number | 200 | Width of each tile in pixels. |
tileHeight | number | 132 | Height of each tile in pixels. |
gap | number | 18 | Spacing between tiles and columns in pixels. |
radius | number | 14 | Corner radius of each tile in pixels. |
tilt | number | 16 | Perspective pitch of the wall (rotateX, degrees). |
turn | number | -14 | Perspective yaw of the wall (rotateY, degrees). |
roll | number | 0 | In-plane rotation of the wall (rotateZ, degrees). |
perspective | number | 1200 | Perspective distance in pixels. Smaller is more dramatic. |
depth | number | 120 | How far the wall sits back from the viewer in pixels. |
speed | number | 42 | Base drift speed in pixels per second. |
direction | "up" | "down" | "up" | Primary drift direction; columns alternate around it. |
variance | number | 0.45 | How much column speeds differ from each other (0 to 1). |
parallax | number | 0.6 | Pointer-follow tilt strength (0 disables it). |
pauseOnHover | boolean | false | Pause the whole wall while the pointer is over it. |
lift | number | 64 | How far a hovered tile lifts toward the viewer in pixels. |
fade | number | 0.6 | Strength of the edge and depth dissolve (0 to 1). |
dim | number | 0.55 | Resting opacity of unhovered tiles (0 to 1). |
grayscale | boolean | false | Desaturate resting tiles; hover restores colour. |
overlayColor | string | "#060010" | Tint laid over resting tiles, cleared on hover. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Tab | Moves focus between tiles. A focused tile lifts like a hovered one. |