KQ-1194 · ABACUS/COUNT

Abacus Count

An inline loader drawn as a small counting frame: ten beads on each wire, the highest place on the left, one motion value per bead. The work counts up a bead at a time — each rises to the beam on the spring its material calls for (wood on springs.snap, glass on springs.recoil, stone on springs.glide) — and at ten the wire clears in a rattle while a bead rises on the next wire, so a determinate count (rows of a total, or percent) reads as beads and big jumps glide on springs.glide; without progress it counts to a seeded number and clears. The frame is a button: drag up and the next units bead follows the finger 1:1, a release past halfway flicks it home with the throw's velocity, and a tap, Enter, Space or the Up arrow does the same — free-running the flick adds one, determinate the bead is only lent and slides home if the work has not reached it.

KQ-1194 · ABACUS/COUNT

Importing ledger

basin-ledger-q3.csv44%

importing · 480 rows

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/abacus-count

Props

label: string; default "Loading"; What is loading. Shown beside the glyph and the loader's accessible name: the status's, or the progressbar's when progress is given.
hideLabel: boolean; default false; Keep the label for assistive technology only, for a glyph inline in a sentence or a row.
size: number; default 24; The glyph's box in px, crisp from 16 to 64: detail simplifies below 40 and below 24 so it still reads at text size.
speed: number; default 1; How fast it counts, 0.5 to 2: the pace between beads, the hold and the clear.
rods: number; default 3; Wires on the frame, 2 to 5: the places the count can show (fewer are drawn below 40px and 24px). The leftmost wire can hold all ten, which reads as full.
beads: "wood" | "glass" | "stone"; default "wood"; What the beads are made of: how they look and how they land — wood snaps with one overshoot, glass rings in two bounces, stone lands dead.
progress: number; default —; Determinate, 0 to 1: the frame shows round(progress × min(total, 10^rods)) in beads, stepping bead by bead for small moves and gliding for big ones. Without it the frame counts and clears on its own.
total: number; default 100; What a full progress counts to, so rows read as rows (480 rows on three wires shows 212 as 2·1·2) and the progressbar's value text reads "212 of 480".
onFlick: () => void; default —; A bead was flicked across by hand, tap or key.
sound: boolean; default false; Play what the visitor causes: a click as a flicked bead lands (pitched by material), a tick at the drag's halfway detent and a rattle of ticks for a carry the flick causes. Counting and clearing are silent.
disabled: boolean; default false; Keep counting, but refuse the hand: the frame is drawn as a picture with no button, for loaders that should not be a tab stop.
className: string; default —; Classes for the inline root; text size set here reaches the label.

Prop	Type	Default	Description
label	string	"Loading"	What is loading. Shown beside the glyph and the loader's accessible name: the status's, or the progressbar's when progress is given.
hideLabel	boolean	false	Keep the label for assistive technology only, for a glyph inline in a sentence or a row.
size	number	24	The glyph's box in px, crisp from 16 to 64: detail simplifies below 40 and below 24 so it still reads at text size.
speed	number	1	How fast it counts, 0.5 to 2: the pace between beads, the hold and the clear.
rods	number	3	Wires on the frame, 2 to 5: the places the count can show (fewer are drawn below 40px and 24px). The leftmost wire can hold all ten, which reads as full.
beads	"wood" \| "glass" \| "stone"	"wood"	What the beads are made of: how they look and how they land — wood snaps with one overshoot, glass rings in two bounces, stone lands dead.
progress	number	—	Determinate, 0 to 1: the frame shows round(progress × min(total, 10^rods)) in beads, stepping bead by bead for small moves and gliding for big ones. Without it the frame counts and clears on its own.
total	number	100	What a full progress counts to, so rows read as rows (480 rows on three wires shows 212 as 2·1·2) and the progressbar's value text reads "212 of 480".
onFlick	() => void	—	A bead was flicked across by hand, tap or key.
sound	boolean	false	Play what the visitor causes: a click as a flicked bead lands (pitched by material), a tick at the drag's halfway detent and a rattle of ticks for a carry the flick causes. Counting and clearing are silent.
disabled	boolean	false	Keep counting, but refuse the hand: the frame is drawn as a picture with no button, for loaders that should not be a tab stop.
className	string	—	Classes for the inline root; text size set here reaches the label.