# Illos Animated illustrations for your product site, and skills that teach any coding agent to make new ones in the same style. ## Themes - [Shader](https://illos.dev/library/shader): 20 illustrations ([Markdown](https://illos.dev/themes/shader.md)) - [HUD](https://illos.dev/library/hud): 21 illustrations ([Markdown](https://illos.dev/themes/scifi.md)) - [Isometric](https://illos.dev/library/isometric): 20 illustrations ([Markdown](https://illos.dev/themes/line-iso.md)) ## Illustrations 61 animated illustrations, each with the idea it explains. - [Vector search](https://illos.dev/library/shader/vector-search): a query lands among your vectors, and the nearest cluster lights up with its score. (Shader, spot, Free) - [Context window](https://illos.dev/library/shader/context-window): instructions, history and the new message fill the window, and the rest is room to spare. (Shader, section, Pro) - [Rate limiting](https://illos.dev/library/shader/rate-limit): traffic runs under the limit, and the burst above it is refused. (Shader, spot, Free) - [Agent memory](https://illos.dev/library/shader/agent-memory): new memories churn in short-term, then sink and settle into long-term. (Shader, section, Pro) - [Streaming tokens](https://illos.dev/library/shader/streaming-tokens): the answer streams in chunks, and the response writes itself out line by line. (Shader, spot, Free) - [Cache layer](https://illos.dev/library/shader/cache-layer): a hit comes straight back from the cache, and a miss goes on to the database. (Shader, spot, Free) - [Load balancer](https://illos.dev/library/shader/load-balancer): traffic comes in one door, and the balancer spreads it across the servers in turn. (Shader, spot, Free) - [Autoscaling](https://illos.dev/library/shader/autoscaling): as load rises new instances bud off it, and as it falls they fold back in. (Shader, spot, Free) - [CDN cache](https://illos.dev/library/shader/cdn-cache): content waits at edges near your users, so each request is answered close by. (Shader, spot, Free) - [Data pipeline](https://illos.dev/library/shader/data-pipeline): raw data flows in messy and leaves clean, combed calmer at every stage. (Shader, spot, Free) - [Realtime sync](https://illos.dev/library/shader/realtime-sync): a change in one client shows up in every other one moments later. (Shader, section, Pro) - [Sharding](https://illos.dev/library/shader/sharding): one mass of data splits into four even shards, each lit in turn by its traffic. (Shader, section, Pro) - [Canary rollout](https://illos.dev/library/shader/canary-rollout): a small new version grows beside the stable one and takes its traffic band by band. (Shader, section, Pro) - [Retry with backoff](https://illos.dev/library/shader/retry-backoff): a request knocks at a closed service, waits twice as long each time, then gets through. (Shader, section, Pro) - [Queue backlog](https://illos.dev/library/shader/queue-backlog): jobs pour in faster than workers drain them, then the backlog levels off. (Shader, spot, Free) - [Webhook fan-out](https://illos.dev/library/shader/webhook-fanout): one event rings out from the source and lands on every subscriber at once. (Shader, spot, Free) - [Garbage collection](https://illos.dev/library/shader/garbage-collection): a sweep crosses a cluttered heap and leaves only the live data behind. (Shader, section, Pro) - [Feature flags](https://illos.dev/library/shader/feature-flags): traffic takes the old path, bends onto the new one when the flag flips, then flips back. (Shader, section, Pro) - [Traces](https://illos.dev/library/shader/traces): one request's spans grow as nested bars, and the slow database query stands out. (Shader, section, Pro) - [Backups](https://illos.dev/library/shader/backups): live data keeps changing while a scan lays a fresh copy into the snapshot below. (Shader, section, Pro) - [Edge network](https://illos.dev/library/hud/edge): requests reach the nearest edge of your network, wherever they start. (HUD, spot, Free) - [Monitoring](https://illos.dev/library/hud/monitoring): a sweep checks every service, and the one in trouble raises an alert. (HUD, spot, Free) - [Search index](https://illos.dev/library/hud/search): a query drops through the index and finds its match. (HUD, spot, Free) - [Traffic map](https://illos.dev/library/hud/traffic): requests flow along the routes of your map, busiest first. (HUD, spot, Free) - [Model training](https://illos.dev/library/hud/training): the model walks down the loss surface until it settles. (HUD, section, Pro) - [Hotspots](https://illos.dev/library/hud/hotspots): load rises like terrain, and the hottest peak gets marked. (HUD, section, Pro) - [Sandbox](https://illos.dev/library/hud/sandbox): untrusted code runs sealed in its own box. (HUD, section, Pro) - [Test coverage](https://illos.dev/library/hud/coverage): tests sweep the codebase and light up everything they cover. (HUD, section, Pro) - [Service mesh](https://illos.dev/library/hud/mesh): services sit round a core, and a request routes through the mesh. (HUD, section, Pro) - [Scheduler](https://illos.dev/library/hud/orbit): a job rides its schedule and fires each run on time. (HUD, spot, Free) - [Embeddings](https://illos.dev/library/hud/embeddings): words stream into the model and come out as vectors. (HUD, section, Pro) - [Device update](https://illos.dev/library/hud/device): an update reaches the device, and the dial fills as it installs. (HUD, section, Pro) - [Metrics panel](https://illos.dev/library/hud/metrics): latency spikes after a deploy, the panel catches it, and it recovers. (HUD, section, Pro) - [Compute](https://illos.dev/library/hud/compute): a request goes in, the chip lights layer by layer, and a result comes out. (HUD, section, Pro) - [Global regions](https://illos.dev/library/hud/globe): one write lands, and every region gets it. (HUD, section, Pro) - [Event broadcast](https://illos.dev/library/hud/signals): one event goes out, and every subscriber receives it. (HUD, spot, Free) - [Cost meter](https://illos.dev/library/hud/cost-meter): spend climbs toward the budget, and a forecast mark shows where the month will end. (HUD, spot, Free) - [Latency heatmap](https://illos.dev/library/hud/latency-heatmap): cells warm where requests are slow, and the hottest route is flagged with its p99. (HUD, spot, Free) - [Incident timeline](https://illos.dev/library/hud/incident-timeline): an alert fires on the timeline, and the incident runs to resolved fifteen minutes later. (HUD, spot, Free) - [Log stream](https://illos.dev/library/hud/log-stream): log lines scroll past, and the one error is caught and pinned. (HUD, spot, Free) - [Terrain survey](https://illos.dev/library/hud/terrain-survey): the land rises out of flat ground, and a scan marks every site on it. (HUD, page, Pro) - [Queue](https://illos.dev/library/isometric/queue): jobs wait their turn, and the worker takes the next one. (Isometric, spot, Free) - [Replication](https://illos.dev/library/isometric/replication): a change lands on the primary and every replica catches up. (Isometric, section, Pro) - [Sign-in key](https://illos.dev/library/isometric/key): a key card drops into the reader, and the door to your API opens. (Isometric, section, Pro) - [Platform stack](https://illos.dev/library/isometric/stack): data, models, agents and deploys, one layer on another. (Isometric, section, Pro) - [Living docs](https://illos.dev/library/isometric/docs): how your process runs becomes documentation you can read. (Isometric, section, Pro) - [Integrations hub](https://illos.dev/library/isometric/hub): every tool plugs into one hub, and actions come out the other side. (Isometric, section, Pro) - [Automation](https://illos.dev/library/isometric/automation): work rides in, passes through the machine, and comes out done. (Isometric, section, Pro) - [Data validation](https://illos.dev/library/isometric/validate): raw records go in, and only checked ones come out. (Isometric, section, Pro) - [Build factory](https://illos.dev/library/isometric/factory): your build runs like a factory, and a release ships out the gate. (Isometric, section, Pro) - [Usage billing](https://illos.dev/library/isometric/billing): usage stacks up in the meter, and at the end of the month it prints the invoice. (Isometric, spot, Free) - [Cron jobs](https://illos.dev/library/isometric/cron): the clock reaches each mark and stamps a job onto the belt, right on schedule. (Isometric, spot, Free) - [Email delivery](https://illos.dev/library/isometric/email): letters land in their pigeonholes, and one comes back as a bounce. (Isometric, spot, Free) - [File uploads](https://illos.dev/library/isometric/uploads): a file splits into chunks that drop down the chute and come back together in storage. (Isometric, spot, Free) - [Notifications](https://illos.dev/library/isometric/notifications): the bell rings and a card lands on top of the stack on the phone. (Isometric, spot, Free) - [Version control](https://illos.dev/library/isometric/version-control): a branch leaves main, picks up a commit and merges back in. (Isometric, spot, Free) - [Database migration](https://illos.dev/library/isometric/migration): rows move from the old table into the new one and pick up the new column on the way. (Isometric, spot, Free) - [Image processing](https://illos.dev/library/isometric/image-processing): a photo goes into the press and comes out in three sizes. (Isometric, spot, Free) - [Analytics funnel](https://illos.dev/library/isometric/analytics): events drop through the funnel, and the chart rises bar by bar. (Isometric, spot, Free) - [Kubernetes cluster](https://illos.dev/library/isometric/kubernetes): a node fails, its pods move to the healthy ones, and a fresh node joins the cluster. (Isometric, section, Pro) - [Payments flow](https://illos.dev/library/isometric/payments): a card payment runs through the processor, the bank and the ledger, and a receipt prints. (Isometric, section, Pro) ## Get one Add a free illustration to a React project with one command. No account is needed: `npx shadcn@latest add https://illos.dev/r//.json` The theme and subject are the last two parts of the illustration's page address. For [Queue](https://illos.dev/library/isometric/queue): `npx shadcn@latest add https://illos.dev/r/isometric/queue.json` On its page, Copy gives the SVG and Download the file. ## Pro [Pro ยท one time](https://illos.dev/pro), $49 at launch (regular price $89), one payment. - Everything in Free, plus: - Every Pro illustration - The toolkit and the skills for your coding agent - New illustrations and toolkit updates for 1 year - Yours to keep, forever [Team](https://illos.dev/pro), $249, one payment: everything in Pro for up to 10 people, each invited by email. ## Skills The skills teach your coding agent a theme's rules and checks. The skills come with Pro. After you buy, your account page has a setup command with your setup code in it. Paste it into your terminal, or give it to your coding agent to run in your project's root folder; it installs the toolkit and the skills ([the skills guide](https://illos.dev/skills)): npx -y illos setup --key ## Guides - [unDraw alternative with animated illustrations](https://illos.dev/alternatives/undraw): unDraw is a large free library of flat illustrations of people and everyday scenes, in a colour you pick, with no credit needed. Illos is a smaller library of animated illustrations that each explain one idea on a product site, in three themes, with skills that teach your coding agent to make new ones in the same style. - [Storyset alternative with no credit line](https://illos.dev/alternatives/storyset): Storyset, from Freepik, offers illustrations of people and scenes in several styles, with an online editor to animate and recolour them; free use asks for a credit, and dropping it takes a Flaticon Premium subscription. Illos offers animated illustrations that explain how a product works, free spots with no credit, and skills that teach your coding agent the style. - [Animated SVG on product sites: a practical guide](https://illos.dev/guides/animated-svg): An animated SVG is an illustration written as code, with CSS animation inside the file, so parts of it move without a video or a player. It stays sharp at any size, can take its colours from your page, and can be paused or stilled with a few lines of CSS. ## More for agents - [llms-full.txt](https://illos.dev/llms-full.txt): everything in one file, with a block for each illustration - [catalog.json](https://illos.dev/catalog.json): the catalog as JSON, for tools - [Changelog](https://illos.dev/changelog.md): what is new, as Markdown, also [as a feed](https://illos.dev/changelog/feed.xml) - Any illustration or theme page as Markdown: add .md to its address ## Licence You can use a free illustration in personal and commercial work, including client work. You do not have to give credit, and you can change the file. You may not sell the illustrations as a pack, or use them to build a competing library. The wording is at [the licence](https://illos.dev/license).