Spacetime grid

Options

Every option of @abhiramkrishna/spacetime-grid, generated from the package's schema.

Pass options to the constructor, or to a wrapper as props. Options marked live can change at any time with grid.setOptions(). Options marked rebuild (cols, rows, cellSize, fill) set the size of the tile mesh, so changing them means creating a new grid; the Vue, React and Web Component wrappers do that for you.

TypeScript

const grid = new SpacetimeGrid(el, { cols: 80, waveAmplitude: 0.12, theme: { hover: "#5ee6ff" } });
grid.setOptions({ rippleSpeed: 3.5 });

These tables are generated from SPACETIME_GRID_SCHEMA, the same data the sandbox builds its controls from, so they always match the code.

Prop	Default	Description
Grid
`cols`number · 8–160 · rebuilds	Default`64`	Number of tile columns.
`rows`number · 8–160 · rebuilds	Default`60`	Number of tile rows.
`cellSize`number · 0.1–1 · rebuilds	Default`0.34`	Distance between tile centres, in world units.
`fill`number · 0.1–1 · rebuilds	Default`0.72`	How much of each cell a tile covers (1 = no gap).
`tileOpacity`number · 0–1	Default`0.55`	Opacity of every tile.
Waves
`waveAmplitude`number · 0–0.4	Default`0.09`	Height of the idle waves.
`waveSpeed`number · 0–4	Default`1`	Speed multiplier for the idle waves.
`sway`number · 0–0.2	Default`0.03`	How far the whole grid rocks from side to side, in radians.
Gravity well
`cursorWell`boolean	Default`true`	Sink the tiles under the mouse cursor.
`wellRadius`number · 0.2–6	Default`2.2`	Radius of the cursor well, in world units.
`wellDepth`number · 0–2	Default`0.55`	How deep the cursor well sinks the tiles.
`wellEase`number · 0.01–1	Default`0.1`	How quickly tiles follow the well each frame (1 = instantly).
Ripples
`ripples`boolean	Default`true`	Send an energy ring across the grid on click or tap.
`rippleSpeed`number · 0.2–8	Default`2.4`	How fast a ripple ring spreads, in world units per second.
`rippleWidth`number · 0.05–2	Default`0.55`	Thickness of the ripple ring.
`rippleHeight`number · 0–2	Default`0.55`	How high the ripple ring lifts the tiles.
`rippleLifetime`number · 0.2–8	Default`2.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
`fogNear`number · 0–30	Default`5`	Distance where the fog begins.
`fogFar`number · 1–60	Default`12`	Distance where tiles fully fade into the fog.
Camera
`fov`number · 20–100	Default`50`	Vertical field of view, in degrees.
`cameraEase`number · 0.01–1	Default`0.06`	How quickly the camera moves toward its target each frame.
Rendering
`maxPixelRatio`number · 0.5–3	Default`2`	Upper limit on the device pixel ratio; lower is faster.
`compactBreakpoint`number · 0–2000	Default`1024`	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.