Skip to content
All effectsAI & Agents

Keystroke

steps() plus a ch-based width. The caret is a border that blinks on its own timer.

Pure CSSAI & AgentsPro

Usage

npm i @wunderui/react

Meant for

Chat MessageLog StreamCode Block

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 sits on a wrapper, not on the typing span: on the span it would outrank the animated width and the whole string would show at once. On the wrapper it only keeps the bubble from growing 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.