Components / Motion

Gradient text and spotlight cards

Text filled with a gradient, and a card with a glow that follows the pointer.

Functions: cui_gradient_text, cui_spotlight

Usage

cui_gradient_text(ui, "Kiln 2.4", .font = CUI_FONT_DISPLAY, .size = 38);   /* a tonal blend of the accent */
cui_spotlight(ui, "gl", .width = CUI_PX(270)) {
    cui_text(ui, "OpenGL 3.3", .font = CUI_FONT_MEDIUM);
    /* ... */
}

Gradient text blends across its width, by default between two tones of the accent; pass from and to for other colors, and animate to let the blend drift. Keep it for a single brand moment: headings and numbers read better in one solid color. A spotlight card catches a soft light under the pointer, and the stretch of its border nearest the pointer lights up. With beam, a light also travels around the edge. Use it for the one card that is live, such as a running deploy, never for a whole row.

Keyboard

• These are surfaces and text. What you put inside a spotlight card takes Tab, Enter and Space as usual.

Options of cui_gradient_text

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.
.from	cui_color	the accent, or the text color under the neutral accent	color at the left edge; default the accent, or the text color under the neutral accent
.to	cui_color	`from` blended toward the foreground color	color at the right edge, default from blended toward the foreground color
.animate	bool		the gradient drifts along the text
.width	cui_size		Width: CUI_FILL, CUI_FIT, CUI_PX(n) or CUI_PCT(n); unset uses the component's own.

Options of cui_spotlight

Option	Type	Default	Description
.width	cui_size		Width: CUI_FILL, CUI_FIT, CUI_PX(n) or CUI_PCT(n); unset uses the component's own.
.height	cui_size		Height: CUI_FILL, CUI_FIT, CUI_PX(n) or CUI_PCT(n); unset uses the component's own.
.pad	float		Padding inside, in points.
.gap	float		Space between the items, in points.
.color	cui_color		A theme color such as CUI_COLOR_ACCENT, or CUI_RGB(0x7747ff); unset uses the theme's.
.beam	bool		a light travels around the card's edge all the time

Related

• Loaders: Animated indicators for work in progress, in five styles.
• Rolling numbers: A number whose changed digits roll into place.
• Dock: A row of icons that grow under the pointer, as in a desktop dock.
• Text effects: Animated text: a shimmer, a typewriter, words that rotate in place and text that reveals itself.