Power-User Systems
Kanban
ProA kanban board with drag and drop. Drag a card within a column or over to another one, and the other cards slide out of the way. Work-in-progress columns have a limit. When one is full, the board warns you or keeps the card out. Columns fold down to a narrow rail. With a keyboard, press Space to pick up a card, move it with the arrow keys, and press Space again to drop it.
Install
Props
What It Demonstrates
- Drag to reorder
- Dragging items in a list to rearrange them, while the others shift to make room.
- Drag
- Moving an element by grabbing it, often with momentum when released.
- Layout animation
- When an element's size or position changes, it animates to the new spot instead of snapping.
- Shared element transition
- An element travels and transforms from one position into another, like a thumbnail expanding into a card.
- Spring
- Motion driven by physics (tension, mass, damping) rather than a set duration.
- Accordion / Collapse
- A section smoothly expands and collapses its height to show or hide content.
Related Components
Diff Review
A review surface for a patch an agent has proposed. Accept or reject each hunk, fold long runs of unchanged lines away, and flip between unified and split. Switching views does not redraw the diff: every line is a shared element that flies from the stream into its column and back, so you never lose the line you were reading.
Approval Flow
A step-by-step approval checklist for agent permissions. Radio and checkbox groups, an "Other…" escape hatch that grows a field in place, and per-step validation that blocks the commit. Answering a step sends the chosen option flying into a running record of what you have already decided, so the screen accumulates a decision trail instead of replacing itself.
Rewind
An undo history you can scrub, and that refuses to throw the future away. Drag the head and the interface reverts live under your finger rather than on release. Act from a past point and the abandoned future stays drawn on the rail as a branch you can walk back onto, instead of being silently destroyed the way every real undo stack destroys it. Controlled in the same shape as Ledger: it owns the rail, the gesture and the branch graph, and your reducer owns the states.
Patchbay
A modular-synth patch bay. The jacks are real DOM buttons, focusable, labelled and keyboard-patchable, and only the cables live on a canvas underneath the pointer's reach, because a cable is pure paint: a quadratic Bézier whose control point hangs below the midpoint by a sprung sag. Drag from any jack and a live cable follows the hand. Release near a jack on the opposite bank and it seats with an overshoot-and-settle wobble, elsewhere it retracts. Seated cables carry signal pulses on a bounded phase, grabbing an occupied input picks its cable up to repatch, and resizing the bay shakes every cable, which is follow-through, cheaply.
File ExplorerPro
A persistent three-pane file manager that stores real image, video, and blob uploads 100% client-side — OPFS when available, IndexedDB everywhere else — with nested folders, search, sort, drag-and-drop upload, move, and a live preview panel.
ElasticPro
Throw the top card and the speed you released it at carries into the spring — throw it far enough and it cycles to the back of the deck instead of coming home.