Keystroke
steps() plus a ch-based width. The caret is a border that blinks on its own timer.
Usage
npm i @wunderui/react
Meant for
Examples
On a Chat Message
steps() plus a ch-based width, typing inside an assistant bubble. Set --wm-chars to the string length — it drives both the width and the number of steps, so one number keeps them in sync. Monospace only; in a proportional face the caret drifts off the last glyph. The min-width is the example's, not the effect's: without it the bubble grows from nothing while the text types.
Generating the answer
The class is wm wm-keystroke — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.