Agent States

an interactions template

A fifteen-state animated band for pages that explain what an agent is doing while it works. The states are the run itself: prompt typing, thinking, reasoning chain, token stream, generating, context window filling, embedding cluster, citation lookup, model switching, safety filter, guardrail block, rate limited, retry backoff, upload to model and voice listening. Four of those are the ones a page usually leaves out, and they are the reason this reads as a real run rather than a decoration: rate limited, retry backoff, guardrail block and safety filter are what happens when a request does not go straight through. Runs as a marquee or lays out as a grid. Speed, gap, icon size, chip colour, chip border, corner radius, label colour, label font and the edge fade are all property controls, so it takes your palette without a code edit. Each state carries its own label, and you can rewrite any of them. The animations are self-contained SVG compiled from Lottie. No Lottie player, no runtime dependency, and nothing fetched from a server while a visitor is on the page. Motion pauses on hover and stops entirely under prefers-reduced-motion. After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it. Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution.

Fifteen animated pipeline states