Spacetime grid

An animated three.js grid with idle waves, a cursor gravity well and click ripples.

@abhiramkrishna/spacetime-grid is the animated background from abhiramkrishna.com. It’s a field of tiles: idle waves roll across it, the tiles under your cursor sink into a gravity well, and a click sends an energy ring across the surface.

Tiles sinking into a gravity well under the cursor

See it live

It runs live below. The playground has every control, with code for JavaScript, Vue, React and Web Components that updates as you change them.

Move your cursor over the grid and click.Open the playground

Cursor gravity well: Tiles sink and light up under the mouse, then ease back when it moves on.
Click ripples: Each click or tap sends a ring outward. You can also start one from code with grid.ripple().
Plugins: Camera moves driven by scroll, wells that follow elements, and data overlays such as the contribution skyline.
Built to stay out of the way: About 0.3 ms of CPU per frame, paused when off-screen or in a hidden tab, and a still frame for reduced motion.

Idle waves	Click ripple	Custom theme

It’s written in plain TypeScript on three.js, with thin wrappers for Vue, React and Web Components.