2 components · MIT

three.js components that move when you do.

The backgrounds and data visuals from abhiramkrishna.com, packaged for npm. Use them in Vue, React or plain HTML and tune every option live.

Get started GitHub
hero.ts
import { SpacetimeGrid } from "@abhiramkrishna/spacetime-grid";

new SpacetimeGrid(el);

Built like the portfolio they came from.

Ported line by line from a live site, then given options, wrappers and a schema.

Drop into any stack

A framework-free core with thin Vue, React and Web Component wrappers. three is a peer dependency, so you ship one copy.

  • JavaScript

    new SpacetimeGrid(el);

  • Vue

    <SpacetimeGrid :wave-speed="1.2" />

  • React

    <SpacetimeGrid waveSpeed={1.2} />

  • Web Component

    <spacetime-grid></spacetime-grid>

A frame loop that stays out of the way

Waves are precomputed per tile, so each frame does no trig and no allocation.

18% → 4.5%

Grid CPU share on the portfolio, before and after.

Reduced motion, handled

With prefers-reduced-motion set, every component renders a still frame instead of animating.

Sleeps when unseen

Rendering pauses when the canvas scrolls away or the tab is hidden, and the pixel ratio is capped.

One schema, many uses

Every option ships with a type, range and description. The playgrounds and props tables here are generated from it.

Components

Each one runs live below. Open it for a live playground, the props and copy-ready code.

Browse all

Spacetime Grid

A field of tiles with idle waves, a gravity well under the cursor and ripples on click.

newBackgrounds

Contribution Skyline

A GitHub contribution year as a 3D skyline of glowing bars that twinkle and burst into pixels.

newData

Up and running in three steps

  1. 1

    Install

    Add the package and three.

    pnpm add @abhiramkrishna/spacetime-grid three
  2. 2

    Mount

    Point it at any element. It fills it and follows its size.

    import { SpacetimeGrid } from "@abhiramkrishna/spacetime-grid";

const grid = new SpacetimeGrid(document.querySelector("#background"));
grid.setTheme({ hover: "#43d9ad" });
  3. 3

    Tune

    Change options live in the playground, then copy the code for your framework.

    Spacetime Grid Contribution Skyline