Dot Square

2D3 animations

The whole square row as one component. Pick pulse, breath or wave with the animation prop; changing it morphs the same dots from one animation into the next.

dot-square.tsx

Installation

Install with the shadcn CLI, or copy the component file. It only needs React.

npx shadcn@latest add https://your-domain.com/r/dot-square.json

Usage

Updates live with the parameters you set.

import { DotSquare } from "@/components/dot-square";

export function Thinking() {
  return (
    <DotSquare />
  );
}

Props

For the selected animation. Switch it to see the props each one takes.

Prop	Type	Default	Description
animation	"pulse" \| "breath" \| "wave"	"pulse"	Which animation runs. Changing it blends from the old animation to the new one, and the other props default to that animation’s own values.
dotShape	"round" \| "square"	"round"	Shape of each dot.
dotSize	number	2.5	Resting dot size in px.
scale	number	1.5	How many times larger a dot grows at the peak of the animation.
density	number	11	Dots across the width of the sheet.
size	number	160	Width and height of the orb in px.
duration	number	1.6	Seconds for one ring to travel across the sheet.
gap	number	0.3	Seconds to rest between rings.
ringWidth	number	0.35	Thickness of the ring of large dots, as a fraction of the sheet radius.
direction	"out" \| "in"	"out"	"out" spreads from the center to the edge; "in" closes from the edge to the center.
minOpacity	number	0.25	Opacity of resting dots. Dots at full size are always fully opaque.
color	string	"#e4e4e7"	Dot color.
paused	boolean	false	Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed.
label	string	"Thinking"	Accessible name; the wrapper is role="status".
className / style	—	—	Spread onto the wrapper div, along with any other div props.