React Interaction Choreography Components
Drag-to-reorder, resizable panels, multi-step flows, gestures and shared-element transitions. This category is about coordinating several elements at once, which is much harder than animating a single component.
21 components, 17 of them free to install without an account.
Full CRUD list choreography — insertions open a gap and drop in, deletions collapse the neighbours, reordering moves continuously with FLIP, batches cascade in waves, and removals leave an undo ghost.
A Linear-style filter composer — pick a field from "Add filter" and the pill chip springs in; the chip's value opens a menu in place, and removing one lets the rest close ranks with FLIP.
Drag a lasso box across a grid; the items it catches lift and light up in sequence, and on release the count badge morphs into a floating batch action bar.
A page-level focus system — when any region enters focus/edit mode, the rest of the layout recedes as a whole: scaled down, dimmed, and blurred into a depth-of-field backdrop, springing back on Esc or an outside click.
One shared morphing highlight surface that travels between any registered elements across tabs, sidebars, and grids, with built-in roving tabindex keyboard navigation and a synchronized focus ring.
A cross-column transit board — cards fly along an arc between columns because of a programmatic state change (not a drag), while the target column opens a landing spot, neighbours in the source column close ranks, and the flying card lifts with a shadow.
A product tour overlay — an SVG mask morphs the spotlight between target elements while the explanation card anchors to the best side and flies along as you step, tracking the target through scroll.
Tags drop and pile up like physical objects, and can be picked up and thrown — a 2D physics simulation.
Fridge magnet word tiles you drag freely to compose sentences, with slight rotation and a snap-on feel.
A list reordered by press-and-drag, where the other items flow aside to make way, with a drag handle.
Colourful sticky notes on a cork board: drag, add, and crumple to delete.
- Konami CodeFree
A hidden interaction that listens for a key sequence to trigger an easter egg, with a progress indicator.
Multiple layers shift with the mouse to create depth, with a gyroscope fallback.
- Fanned CardsFree
A hand of cards fanned out like a held deck: hover lifts a card while neighbours make room, and dragging up or flicking plays it onto a pile. Card faces accept any content.
- Flashcard DeckFree
A study flashcard deck React component. Tap or press Space to flip in 3D, drag or use arrow keys to sort into known and unknown, with a progress bar and an end screen showing an accuracy ring, restart and review-unknown options.
A node-based workflow canvas: freely draggable nodes, bezier wires between ports, drag-to-connect from any port, flowing pulses along edges while running, plus pan and zoom.
Drag handles to adjust a box's corner radius, shadow and padding with live readouts and the resulting CSS — ideal for demonstrating design tokens in docs.
A master switch cascade React component: flip one master switch and the child switches in a grid follow in a distance-based ripple, each cell flashing a ring as it flips; children stay individually toggleable and the master reflects on, off or mixed.
An admin flips one switch; SVG wires draw from it to a member grid and avatars unlock wave by wave — showing access granted to everyone at once.
A stack of cards answered with number keys 1–3; each answered card flies off and the next slides up — keyboard-first, mouse-friendly.
A document filing React component: scattered document cards fly along an arc into their matching folders, which open to catch them, close with a small dip and roll their counts up. Auto-sort in one go, or file by hand with drag or keyboard, and open a folder to see what is inside.