Docs · Getting started

Getting started

Flickering Dots turns on/off dot grids into loading and thinking indicators, and ships them as code for your framework.

Three steps

Playground: pick a context and a set, see it at real size in seconds.
Studio: draw or generate each state, tune timing, preview transitions.
Ship: choose your framework and copy one file or install the package.

Install

shell

npm i flickering-dots

Thinking Pulse · thinking

Render your first indicator

tsx

import { DotIndicator } from 'flickering-dots/react';

export function Reply({ busy }: { busy: boolean }) {
  return <DotIndicator set="pulse" state={busy ? 'thinking' : 'success'} size={28} />;
}

Cycles through the set's states

Every set has one or more states. Changing the state prop plays the set's transition, so keep the component mounted and switch the state instead of swapping components.