Micro-interactions
Swipe Actions
ProList rows you swipe to show actions, like in iOS Mail. Drag a row and its buttons slide in from the side. Swipe all the way and the outer action fills the row and runs. An action like Archive then folds the row away. A quick flick works too. With full swipe off, the row pushes back when you pull past the last button. With a keyboard, the arrow keys show the actions and Enter runs one.
Install
Props
What It Demonstrates
- Swipe to dismiss
- Dragging an element off-screen to close it, like a drawer or toast.
- Drag
- Moving an element by grabbing it, often with momentum when released.
- Rubber-banding
- Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).
- Velocity
- How fast and in which direction an element is moving. A spring carries it into the next animation when interrupted, so a flicked element keeps its speed.
- 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
DismissPro
Throw the top card away and the stack closes up behind it. Distance commits, but so does speed — a fast flick from barely anywhere counts, and anything short of both rubber-bands home carrying the velocity you let go at.
Dial
A machined rotary knob: angular drag with detents you can feel on the way past, inertia on a flick, and a spring that settles into the nearest stop. The angle lives in a motion value rather than in React state, because a drag writes it sixty times a second and a spring more often than that, so the only thing React holds is the detent index, and only when that integer actually changes. Arrow keys step through the same spring the hand does, so the keyboard is not a second, worse path to the same control.
Tear
A ticket with a perforated stub you tear off for real. The ticket is drawn twice and cut from one seeded jag polygon: an attached layer holds everything still connected, the body plus the stub below the tear front, and a flap layer holds only the freed part, rotated about the frontmost attached point, so the torn edges mate tooth for tooth and the swing can never overlap the body. The seam fights back through a resistance curve, a failed tear springs shut, and a completed one lets the stub fall under gravity carrying the release velocity. The jag array comes from a seeded PRNG so the edge never boils between renders.
Rift
A draggable tear between two overlaid scenes. Push past an edge and it resists, then snaps back.
Segmented
A segmented control whose indicator travels on a shared layout id and smears in the direction it is moving.
Reorder
A sortable list that answers to a finger and to a keyboard equally. Grab a row, and the rest step aside to make the space.