Skip to content
All effectsKPI

Decode

The only text effect that genuinely needs JS — about 25 lines swapping glyphs on a timer.

CSS + a few linesKPIPro

Usage

DESIGN SYSTEM

Meant for

KPIBadgeChat Message

Examples

On a KPI

The one text effect that genuinely needs JavaScript, because no CSS can substitute random glyphs. Settled characters stay put, the separators never scramble, and it runs once per value — one character every 40 ms, so a build id decodes in well under 600 ms and then holds. The preview changes the id every few seconds to show it again. The real string sits in an sr-only span, so a screen reader never hears the noise.

BuildWM-2048-RCDeployed to production

The example above is built from the effect’s own CSS, shown under Code. A portable class for @wunderui/motion is not in the package yet.