All illustrations

Streaming tokens

The answer streams in chunks, and the response writes itself out line by line.

FreeShader · spot

Copy

Download

Open in

ClaudeChatGPTPerplexityGrokCursorv0Lovable
Streaming tokens: the answer streams in chunks, and the response writes itself out line by line.

Not quite it? Ask for a variation

Install

Writes one React component and its WebGL runtime into components/illos. Nothing else to install.

The live field draws with WebGL and comes with the one-line add. The SVG you copy or download is its still frame and its labels.

npx shadcn@latest add https://illos.dev/r/shader/streaming-tokens.json

Or hand it to your agent

Claude Code, Cursor, Codex and any other coding agent can add it from the prompt.

CursorClaudeChatGPTv0Lovable

How it moves

  1. a ribbon of tokens flows from the model as a travelling wave.
  2. the cursor writes the last line of the response.
  3. the response scrolls up a line as it fills.

For developers

File size
3.3 KB gzipped
Motion
Plays once, 4.2 s, then holds
Reduced motion
Shows a still
File
streaming-tokens.svg

Next in this theme.

Agent memory: new memories churn in short-term, then sink and settle into long-term.Shader · sectionPro
Cache layer: a hit comes straight back from the cache, and a miss goes on to the database.Shader · spotFree