All illustrations

Cache layer

A hit comes straight back from the cache, and a miss goes on to the database.

FreeShader · spot

Copy

Download

Open in

ClaudeChatGPTPerplexityGrokCursorv0Lovable
Cache layer: a hit comes straight back from the cache, and a miss goes on to the database.

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/cache-layer.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 request falls into the hot pool and splashes straight back: a hit in 2 ms.
  2. the next sinks through it into the deep database, which stirs.
  3. it rises back through the pool, which keeps it: 48 ms.

For developers

File size
4.3 KB gzipped
Motion
Plays once, 4.2 s, then holds
Reduced motion
Shows a still
File
cache-layer.svg

Next in this theme.

Streaming tokens: the answer streams in chunks, and the response writes itself out line by line.Shader · spotFree
Load balancer: traffic comes in one door, and the balancer spreads it across the servers in turn.Shader · spotFree