Brand system · unlisted

Marks.

One component, PixelRack, in five devices. The engine owns the timeline, visibility gating, theme colour and the paint loop; a device owns only what makes it that instrument. Every specimen below renders the shipped component.

5 devices · 5 accents · 3 dissolve modes

Devices

mode

Each instrument's idle motion is what that instrument actually does, rather than an abstract pattern assigned to it.

mode="board"

akaBleep. Step sequencer, knob row, fader bank. A playhead fills its step, each knob paints its value arc, each fader carries a cap.

mode="keys"

Enzyme. A keyboard with a layer strip. Notes arrive round-robin and overlap, so more than one layer lights at once.

mode="engines"

i4. Five waveform generators cycling on a glitch cut, with the running engine lit in the strip above.

mode="collection"

The hero. Owns no geometry. Builds the other three and hands off to whichever is on, tearing between them.

mode="chrome"

The logo. The board's face held still, one step lit. The nav mark, the dropdown badges, and the shape the favicon is drawn from.

Accents

accent

Five tokens from globals.css, resolved off the root element per theme so they follow a theme flip. Omit the prop for a monochrome mark.

accent="rose"

accent="blue"

accent="amber"

accent="violet"

accent="green"

no accent

Monochrome. The device still animates.

Sizes

size · grid

Geometry is laid out in whole cells and block counts derive from the grid, so blocks stay crisp at any size. Bands drop out from the bottom as the panel shrinks rather than aliasing into mush.

26px · grid 13

The nav mark. Display bar and steps only.

120px · grid 20

Bands begin to appear.

300px · grid 36

Everything the device has.

Dissolve modes

dissolve

How the panel leaves on the looping timeline. Only visible without `once`, which holds forever instead.

dissolve="glitch"

dissolve="scatter"

dissolve="ash"

Behaviour

still · once

The loop is gated on an IntersectionObserver plus visibilitychange, repaints on a theme change even while paused, and renders one still frame under prefers-reduced-motion.

still

One assembled frame. Never animates. Chrome and favicon use this.

once

Assembles on first sight, then holds and idles. No dissolve loop.

Remaining props

ratio · gap · speed · fluid

ratio={0.35}

Height as a fraction of width.

gap={0.4}

Space between cells, as a fraction of one.

speed={2.5}

Multiplies the clock.