Skip to content
Flickering Dots
Create a set
Docs · Reference

Data format

Sets are plain JSON so you can generate, store and diff them.

json
{
  "version": 1,
  "name": "My Pulse",
  "grid": [7, 7],
  "transition": "flip",
  "encoding": "rows-bitmask-msb-left",
  "states": {
    "thinking": {
      "durations": [480, 80],
      "frames": [[0,0,0,8,0,0,0], [0,0,8,28,8,0,0]]
    }
  }
}

Each frame is a list of rows. Each row is a bitmask: for a 7-wide grid, 8 is binary 0001000, the centre dot. Durations are milliseconds, one per frame. Flicker-dot style grid arrays, where each frame is an array of 0/1 rows, can be imported in the Studio.

encodeSet writes this form and decodeSet checks it on the way back in, so a set survives a trip through a file, a database or a share link.

Two fields are optional. A state can carry its own "on" hex colour, which wins over the indicator colour, and "transitions" maps a state name to the transition played when entering it, which wins over the set-wide "transition".

Open-source dot-matrix loading, thinking and typing indicators for React, Vue, Svelte, Web Components and more.

MIT licensed. Install with npm i flickering-dots