Components / Motion
Text effects
Animated text: a shimmer, a typewriter, words that rotate in place and text that reveals itself.
Functions: cui_shimmer_text, cui_text_reveal, cui_typewriter, cui_word_rotate
Usage
cui_shimmer_text(ui, "Thinking about your question...");
bool done = cui_typewriter(ui, "answer", streamed_text, .caret = true);
cui_text_reveal(ui, "done", "The release build finished in 3 minutes 42 seconds.", .font = CUI_FONT_DISPLAY, .size = 20);
static const char *words[] = { "staging.", "eu-west.", "all regions." };
cui_word_rotate(ui, "rot", words, 3, 2.2f, .font = CUI_FONT_DISPLAY, .size = 26);The shimmer sweeps a soft highlight across muted text. The typewriter lays out the whole text first and uncovers it, so lines never reflow as it types. When you append to the text (streamed tokens), it carries on from where it was and speeds up when it falls far behind; any other change starts over. The reveal fades and lifts words in one after another whenever the text changes. Rotating words roll up into place, and the width follows the word.
Options of cui_shimmer_text, cui_text_reveal, cui_typewriter, cui_word_rotate
| 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
- Rolling numbers: A number whose changed digits roll into place.
- Gradient text and spotlight cards: Text filled with a gradient, and a card with a glow that follows the pointer.
- Loaders: Animated indicators for work in progress, in five styles.
- Dock: A row of icons that grow under the pointer, as in a desktop dock.