Hey everyone 👋
Play with it here → mahmad.me/blocks/interactive/api-lifecycle
It started with one line
Anatomy is a Claude skill that explains an idea by building a small machine instead of a diagram. I gave it this:
"/anatomy explain how an API lifecycle works with database and cache, interactive"
The first version already worked: it was a full bench with a shuttle running on a rail. The fun part was the back and forth after that.
Every part means something 🔧
There are no boxes and arrows. Each piece of the machine is a real part of the request:
- 💳 The card is the request. It rides on a little shuttle with wheels that actually roll.
- 🚧 The gate is auth. It only lifts when the token is valid.
- 🗄️ The drawers are the database. A drawer slides out to fetch the row.
- 💾 The floppy slot on the monitor is where the response lands before it shows on screen.
Click the monitor and it zooms in so you can read the profile.
What I changed after the first version
- The cache keeps its copy. At first the cache handed its only copy to the shuttle. That's wrong: a cache read doesn't remove anything, so now it makes a copy.
- No clicking mid-flight. Flushing the cache while a request was on its way caused weird results, so the controls lock until the trip finishes.
- Realism. I moved the floppy slot to the front of the monitor, gave the shuttle rolling wheels, and made the card slide into the slot in one smooth hop.
- Zoom controls (+ / − / reset) inside the frame, so you can get close to any station.
Play with it in your favorite AI tool 🤖
Every block on my site has an Open in menu: v0, ChatGPT, Claude or Cursor. It sends the full source along, so you can ask how it works, change it, or build your own machine from it.
Or add it straight to your project:
npx shadcn add https://mahmad.me/r/api-lifecycle.json
Source code
The block and everything else on my site are open source.
If you like it, please give the repo a star ⭐ → github.com/MA-Ahmad/myPortfolio.
It really helps!
Top comments (2)
The correction from moving the cache’s only copy to making a copy is exactly the kind of semantic detail a visual should make testable. A useful companion would be a tiny state table for each station—what it consumes, what it preserves, and when controls lock—so the animation remains a teaching aid even when the learner cannot infer behavior from the motion alone.
Thanks for the feedback! 🙌 The goal here was to show the basic API lifecycle in a visual, interactive way rather than go deep into every state transition. But I agree that making the behavior of each station more explicit could make it a better teaching aid.