Diamond Grid

Examples

Overview

DiamondGrid draws the Rogo Notes waveform matrix: a square of diamonds, each fully lit or fully resting. It is the renderer under every diamond animation, including DiamondLoader. An animation is plain data, a grid size, a list of frames and how long each one holds, so a new motion needs no new component.

Lit cells take the text colour and resting cells a 20% tint of it. Set --diamond-grid-lit and --diamond-grid-unlit to pick both. The grid animates opacity in CSS on the compositor, so React does no work after the first render. Under reduced motion it holds its first frame.

Pick the grid for the display size. The grid lays out whole-pixel cells and gaps for size, about four gaps to a cell, so every diamond sits on the pixel grid and renders the same. Fewer columns mean larger diamonds, which is why a 3 × 3 grid stays legible at 12px where a 5 × 5 one turns to mush.

Usage

import { DiamondGrid } from "@rogo-technologies/ui/diamond-grid";
import { diamondGridFrames } from "@rogo-technologies/ui/diamond-grid-frames";

const SWEEP = {
  columns: 5,
  frames: diamondGridFrames(5, 5, (_row, column, step) => column === step),
  frameMs: 280,
};

<DiamondGrid animation={SWEEP} size={20} className="text-brand-primary" />;

Authoring an animation

diamondGridFrames(columns, steps, isLit), from @rogo-technologies/ui/diamond-grid-frames, builds one frame per step, lighting each cell where isLit returns true. Write frames out by hand when the motion has no rule: columns² values, row by row from the top, with 1 for lit.

Keep animations at module scope. The grid compiles each animation object once and reuses it, and cells that share an on/off track share one @keyframes rule across every grid on the page.

What to change and what to leave

• Change freely: frames, frameMs, colours through className or the two CSS variables.
• Leave alone: the whole-pixel geometry in geometryFor, and the opacity overlay in diamond-grid.css. Both are what keep the cells crisp and the animation off the main thread.

API

DiamondGrid

Other span props pass through. The cells are aria-hidden, so give the grid a role and label when it carries meaning. For a loading state, use DiamondLoader, which does.

DiamondGridAnimation