Changing values
FreeRoll a word through a list, and count a number from where it is to where it is going.
Page appearance
Components #
Each component has its own page with a focused preview, installation, usage and API.
- Slot textText whose characters roll like a slot machine when the value changes.
- Number tweenA number that eases to its new value instead of jumping.
- Presence listA list where an added row opens from nothing and a removed row closes, so a live feed or a queue changes without jumping. The first render is immediate.
- Pinned listItems you can pin to the top. Pinning moves the row up into Pinned and back again, so the eye follows it, and focus stays on the same pin button.
- Rank listA leaderboard that re-ranks as values change: rows travel to their new place, values count to their new figure, and a mark says how many places each row moved.
- Progress ringDeterminate progress in a ring that eases to each value, draws a check when done and a cross when it fails.
- Count badgeA count on an icon or tab that rolls up or down to its new number, pops once when something new arrives and shrinks away at zero.
- Trend deltaA change as a chip: the arrow turns to the direction, the number counts to its value, and colour and words say whether it is good.
- Status morphA status that changes in place: the pill eases to its new width while icon and colour cross over, and the change is announced.
- Progress buttonA button that fills with determinate progress while its work runs, writes the percentage, and settles on a check.
- Secret fieldA secret shown only on purpose: reveal it and the characters settle into place, and it masks itself again on a visible timer. Copying never needs it revealed.
- Character ringRoom left as a ring that fills as you type, turns amber near the limit with a countdown, and red with the overflow.
- Range histogramA range filter over the shape of the data: bars outside the range dim as you drag, and the count in range is written out.
- Step loaderWhat a long operation is doing: done steps tick off, the current one turns with its detail, the line fills, and a failure says where and why.
- Upload queueFiles on their way up, each with its own progress ring; failures say why with a retry, and rows open and close without the list jumping.
- Feed streamA live feed that keeps your place: at the top new items slide in; scrolled away, a pill counts what is waiting and takes you back up.
- Connection bannerSays when the app lost its connection and what that means, counts down to the next try, and confirms when it is back.
- Session timeoutA fair warning before a session ends: a dialog counts down with a ring, offers to stay signed in, and signs out at zero.