ns-ui / loader-die-tumble
Syncing workspace
Syncing workspace…
Loadinginline, at 22px
each landing overshoots ~8deg then corrects on a spring — never a clean stop
ns-ui
An ambient loading glyph shaped as a die tumbling face over face on a fixed axle — each 90deg landing overshoots by 8deg and corrects on a spring, with a floor shadow compressing and flaring in sync, rather than rotating cleanly to a stop.
Use when an indeterminate wait that should read as discrete units being processed, since the cube lands on a numbered face four times per cycle so each beat is a visible tick rather than a continuous smear, and there is opaque room beneath the glyph for its cast floor shadow; pick loader-iris instead for the same inline slot when the wait is one undifferentiated block of work and a continuous breath is more honest, or loader-pendulum-sync when the wait is long enough that a 40px glyph gives the user nothing to watch.
Install
npx shadcn add https://design.helpmarq.comns-ui / loader-die-tumble
Syncing workspace…
each landing overshoots ~8deg then corrects on a spring — never a clean stop
| Prop | Type | Default | Description |
|---|---|---|---|
| size? | number | — | cube edge length in px |
| periodMs? | number | — | ms for one full four-face loop |
| label? | string | — | text announced via the component's own aria-live region |
| className? | string | — | — |