Visual Explainers

See how modern systems work.

Short animated diagrams plus readable step-by-step notes for the web, backend, security, and AI concepts developers run into every day.

7 explainers · interactive · sound optional

Explainer library

Pick a system and follow the flow

Each page keeps the important explanation in normal HTML while the motion layer carries the mental model.

Web utilities6 steps

How does a QR code work?

A QR code turns a small payload into a structured grid of light and dark modules. Error-correction data and positioning patterns help a camera recover and decode that payload reliably.

Open visual guide
Backend systems6 steps

How does Redis caching work?

A Redis cache keeps frequently requested data in fast in-memory storage so an application can avoid repeating slower database or service work. A common cache-aside flow checks Redis first, falls back to the source on a miss, then stores the result with an expiration policy.

View explainer
Authentication & security6 steps

How does OAuth 2.0 authorization work?

OAuth 2.0 lets an application obtain limited access to another service without receiving the user's password. This explainer follows the common Authorization Code flow with PKCE used by browser and mobile applications.

View explainer
Web infrastructure6 steps

How does a CDN work?

A content delivery network serves cacheable content from edge locations closer to users. The edge can answer immediately on a cache hit or fetch the object from an origin on a miss, then reuse it according to cache-control rules.

View explainer
Web foundations7 steps

What happens when you enter a URL?

Opening a URL triggers a chain of work across the browser, DNS, network transport, TLS, HTTP, edge or origin servers, and finally the browser's rendering pipeline. Modern stacks can vary, but the core stages remain recognizable.

View explainer
AI systems6 steps

How does vector search work?

Vector search converts a query into an embedding and finds stored vectors that are nearby according to a similarity metric. Large systems usually use approximate nearest-neighbor indexes to trade a small amount of recall for much faster retrieval.

View explainer
AI systems6 steps

How do AI agents work?

An AI agent combines a model with instructions, state, tools, and a control loop. Instead of producing only one response, the system can choose an allowed action, execute it, observe the result, update state, and continue until it reaches a stopping condition.

View explainer