Components / Motion
Rolling numbers
A number whose changed digits roll into place.
Functions: cui_number_roll
Usage
char rev[32];
snprintf(rev, sizeof rev, "$%s", grouped(revenue)); /* any formatted figure */
cui_number_roll(ui, "revenue", rev, .font = CUI_FONT_DISPLAY, .size = 28);When the text changes, only the characters that differ roll: up into place when the value rises, down when it falls, each a beat after the one to its left. A prefix and suffix such as $ or ms stay put, digits are tabular so the figure keeps its width, and the width eases when the number grows or shrinks. With reduced motion the new value simply appears.
Keyboard
- The numbers only display. The buttons that change them in your app take Tab, Enter and Space as usual.
Options of cui_number_roll
| Option | Type | Default | Description |
|---|---|---|---|
.font | cui_font | `CUI_FONT_BODY` (0) | default CUI_FONT_BODY (0) |
.size | float | Size in points; 0 uses the component's own. | |
.color | cui_color | A theme color such as CUI_COLOR_ACCENT, or CUI_RGB(0x7747ff); unset uses the theme's. | |
.width | cui_size | Width: CUI_FILL, CUI_FIT, CUI_PX(n) or CUI_PCT(n); unset uses the component's own. | |
.nowrap | bool | keeps the text on one line instead of wrapping it | |
.speed | float | shimmer: sweeps per second; typewriter: characters per second | |
.delay | float | seconds before it starts | |
.caret | bool | typewriter: a blinking caret while typing |
Related
- Prefix and suffix: Fixed text before or after a field's value, such as https:// or a unit.
- Gradient text and spotlight cards: Text filled with a gradient, and a card with a glow that follows the pointer.
- Text effects: Animated text: a shimmer, a typewriter, words that rotate in place and text that reveals itself.
- Loaders: Animated indicators for work in progress, in five styles.