Skip to content
All effectsAI & Agents

Status Cycle

The phrase swaps on one clock while the shimmer runs on another. Two independent timers on the same element is what stops it looking like a single scripted loop.

Pure CSSAI & AgentsPro

Usage

Reading the codebaseComparing 214 tokensWriting the patch

Meant for

Agent StatusLog StreamChat Loader

Examples

On a Agent Status

One line of status replacing the next, with a shimmer running through whichever line is showing. The lines are stacked in one grid cell and each one's cycle starts a third of the loop later (negative delays, so all three are in step from the first frame), so the row never changes width.

Reading the codebaseComparing 214 tokensWriting the patch

The class is wm wm-status-cycle — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.