Dot Scan: a loader for reading a file
A dot sphere with a band of light reading top to bottom. A React loader that shows your AI agent is reading a file. Install with shadcn.
Installation
Install with the shadcn CLI, or copy the component file. It only needs React.
npx shadcn@latest add https://oxyn.space/r/dot-scan.jsonUsage
Updates live with the parameters you set.
import { DotScan } from "@/components/dot-scan";
export function Thinking() {
return (
<DotScan />
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| pattern | "rings"|"fibonacci"|"grid" | "rings" | How the dots are laid out on the sphere. |
| dotSize | number | 3 | Diameter of the front dots in px. Back dots scale down automatically. |
| density | number | 12 | Rows of dots. Higher means more dots. |
| size | number | 160 | Width and height of the orb in px. |
| duration | number | 2 | Seconds for the band to read from the top pole to the bottom one. |
| gap | number | 0.4 | Seconds the orb rests after the band leaves, before the next read. |
| tilt | number | 18 | Lean toward the viewer in degrees, so the top shows. |
| backOpacity | number | 0.2 | Opacity of the furthest dots. Front dots 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. |
Switch states
Dot Scan is one of the animations in Dot Globe. Use the group when the agent's state changes, and it morphs between them.