Spacetime Grid
newA field of tiles with idle waves, a gravity well under the cursor and ripples on click.
Backgrounds@abhiramkrishna/spacetime-grid
Move your cursor over the grid and click.
Customize
Changes show live, update the code and the page URL.
Loading controls…
Installation
three is a peer dependency, so your app ships a single copy.
pnpm add @abhiramkrishna/spacetime-grid threenpm install @abhiramkrishna/spacetime-grid threeyarn add @abhiramkrishna/spacetime-grid threebun add @abhiramkrishna/spacetime-grid threeProps
Same names in every wrapper. Vue and the Web Component take them in kebab-case.
| Prop | Default | Description |
|---|---|---|
| Grid | ||
colsnumber · 8–160 · rebuilds | Default64 | Number of tile columns. |
rowsnumber · 8–160 · rebuilds | Default60 | Number of tile rows. |
cellSizenumber · 0.1–1 · rebuilds | Default0.34 | Distance between tile centres, in world units. |
fillnumber · 0.1–1 · rebuilds | Default0.72 | How much of each cell a tile covers (1 = no gap). |
tileOpacitynumber · 0–1 | Default0.55 | Opacity of every tile. |
| Waves | ||
waveAmplitudenumber · 0–0.4 | Default0.09 | Height of the idle waves. |
waveSpeednumber · 0–4 | Default1 | Speed multiplier for the idle waves. |
swaynumber · 0–0.2 | Default0.03 | How far the whole grid rocks from side to side, in radians. |
| Gravity well | ||
cursorWellboolean | Defaulttrue | Sink the tiles under the mouse cursor. |
wellRadiusnumber · 0.2–6 | Default2.2 | Radius of the cursor well, in world units. |
wellDepthnumber · 0–2 | Default0.55 | How deep the cursor well sinks the tiles. |
wellEasenumber · 0.01–1 | Default0.1 | How quickly tiles follow the well each frame (1 = instantly). |
| Ripples | ||
ripplesboolean | Defaulttrue | Send an energy ring across the grid on click or tap. |
rippleSpeednumber · 0.2–8 | Default2.4 | How fast a ripple ring spreads, in world units per second. |
rippleWidthnumber · 0.05–2 | Default0.55 | Thickness of the ripple ring. |
rippleHeightnumber · 0–2 | Default0.55 | How high the ripple ring lifts the tiles. |
rippleLifetimenumber · 0.2–8 | Default2.4 | Seconds before a ripple fades out. |
| Colours | ||
theme: { base }color | Default"#0c1f33" | Resting tile colour. |
theme: { hover }color | Default"#43d9ad" | Colour of tiles in a well, ripple or data glow. |
theme: { fog }color | Default"#011627" | Fog colour; match it to the page background. |
theme: { fresnel }color | Default"#bfe9ff" | Fresnel rim colour on tiles seen at a grazing angle. |
| Fog | ||
fogNearnumber · 0–30 | Default5 | Distance where the fog begins. |
fogFarnumber · 1–60 | Default12 | Distance where tiles fully fade into the fog. |
| Camera | ||
fovnumber · 20–100 | Default50 | Vertical field of view, in degrees. |
cameraEasenumber · 0.01–1 | Default0.06 | How quickly the camera moves toward its target each frame. |
| Rendering | ||
maxPixelRationumber · 0.5–3 | Default2 | Upper limit on the device pixel ratio; lower is faster. |
compactBreakpointnumber · 0–2000 | Default1024 | Below this canvas width (px) the grid drops lower and shrinks, for phones. |
reducedMotion"auto" | "always" | "never" | Default"auto" | auto follows prefers-reduced-motion; always renders a still frame; never always animates. |