Docs · Package reference

React component

DotIndicator renders a set in React 17 and later.

tsx

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

<DotIndicator
  set="pulse"
  state="thinking"
  size={28}
  shape="circle"
  mode="flat"
  speed={1}
/>

size 28 · circle · flat

Props

set: a preset id such as "pulse", or a full set object. The pulse preset plays when it is left out.
state: the state to play; defaults to thinking, or the first state.
size: width in px, 24 by default; height follows the grid ratio.
on: the lit dot colour; any CSS colour, including variables. Defaults to var(--dot-on).
off: the unlit dot colour; any CSS colour, including variables. Defaults to var(--dot-off).
shape: circle, square, rounded or diamond.
mode: flat, flip or led.
gap: space between dots as a fraction of one dot; defaults to 0.25.
tuning: on, off, mode, shape, gap, speed, direction and size as one object; single props win.
label: the accessible label; defaults to the state name. An empty string hides the indicator from assistive tech.
className: added to the rendered element.

Playback

speed: playback multiplier; 1 is normal speed and 2 plays twice as fast.
direction: forward, reverse or pingpong.
transition: cut, flip or crossfade; overrides the set's transition.
paused: holds the current frame.
frame: shows one frame index with no playback.
cycle: steps through the set's states every 2.4 s.
reduced: forces reduced motion: a still frame (the busiest, or the one the recipe names), or the finished mark for success and error, with no playback.
audible: clicks on frame changes once sound is turned on with setDotSoundEnabled.

Rendering without a set

clip: explicit frames and durations; overrides set, state and recipe.
recipe: renders a recipe such as "orbit" directly, without a set.
params: recipe parameters: frames, trail, length, density and seed, plus variant and glyph text for the engine recipes.
grid: the grid for a recipe as { cols, rows }, or an override for a set's recipe states.