Claude Code Objects
Mode Key
Brass key in a cylinder lock on an enamel plate. Three detents (ask, edits, plan) like Shift+Tab; the key turns with spring overshoot and a lamp changes tone per mode.
svgmedium complexitymoderate motionclick
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
1
When to use it
Showing permission modes and the Shift+Tab cycle.
When not to
A form or settings panel is needed.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Brass key turning through three detents on an enamel plate with a mode lamp; current mode word only at small sizes.
Safe to edit
- colour tokens on :root (enamel pl1/pl2, brass b1-b3, lamp tones)
- MODES table (name, detent angle) in the script
Keep intact
- demo-v1: __foreverPreview.demoEnabled, forever:interactive, first-input takeover
- theme: ?theme=, forever:theme messages, light tokens
- IIFE, visibilitychange, reduced motion, keyboard, aria-live
Known limitations
- The optional bypass slot is not drawn; the demo only ever cycles ask, edits and plan.
- Enter, Space and arrows cycle the demo; Tab and Shift+Tab retain normal focus navigation.
More Claude Code Objects components
- Context JarGlass jar of sand strata (system, memory, files, conversation). Grains pour until a lid presses the jar into one dense summary band, like /compact.
- Allow StampPaper slip with one command and a rubber stamp that inks ALLOW or DENY, then the slip joins a pile, like a permission prompt.
- Sub-agent OrbitChalk-on-ink diagram: a pulsing core launches sub-agent moons onto elliptical orbits; each works, curves back and merges, adding a bead to the core. Max…
- Hunk DeckA stack of index cards, each an abstract diff; swipe right to keep a hunk, left to reject it.
- Rewind ReelOpen-reel tape writes file blocks; rewind returns to the previous checkpoint and un-writes them.
- MCP Patch BayFelt patch bay with braided cables, brass sockets and live packets; amber signals reconnection.