Power-User Systems
Elastic
ProThrow 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.
Install
Props
What It Demonstrates
- Spring
- Motion driven by physics (tension, mass, damping) rather than a set duration.
- Swipe to dismiss
- Dragging an element off-screen to close it, like a drawer or toast.
- Stiffness / Tension
- How strongly the spring pulls toward its target. Higher feels snappier.
- Damping
- How quickly a spring settles. Lower damping means more bounce and oscillation.
- Mass
- How heavy the animated element feels. More mass makes it slower and more sluggish.
- Momentum
- Motion that carries velocity, especially after a drag or interruption.
- 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.
- Interruptible animation
- An animation that can be smoothly redirected mid-flight instead of finishing first.
- Rubber-banding
- Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).
- Drag
- Moving an element by grabbing it, often with momentum when released.
- Bounce
- A spring that overshoots and settles, adding playfulness.
- Follow-through
- Parts of an element keep moving and settle slightly after the main motion stops, adding weight.
Related Components
Physics Engine
A from-scratch 2D rigid-body physics lab. Fixed-timestep impulse solver, drag-to-throw bodies, force and velocity overlays, and a live energy readout on a blueprint grid.
Weave
A sheet of cloth on a position-based solver. Particles and distance constraints relaxed to convergence every fixed step, with no forces, no rotations and no contacts. Drag it, load it, and pull until the constraints fail and the tear runs. Every quad is shaded by its own extension against the tear threshold, so the load path through the sheet is visible long before anything breaks.
Rotunda
Real HTML panels on a drag-spun 3D cylinder. A hand-rolled perspective projection written onto DOM elements rather than a canvas, so the text stays selectable, the links stay clickable, and a screen reader still reads every panel while the ring turns.
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.
Infinite Canvas
A pannable, zoomable infinite board holding real DOM cards. One world element under a single translate-and-scale, so focus survives and nothing ever remounts when the camera moves. Drag the background to pan with inertia. The wheel zooms to the cursor by holding the world point under it fixed, cards drag independently and glide onto the grid on release, and the corner minimap mirrors the extent and jumps the camera where you click. Camera state lives in one ref written by handlers and the loop, and every consumer, from the world transform to the backdrop plane to the minimap, derives from it in a single write pass per frame, so React never renders a camera frame. Arrow keys pan and plus and minus zoom when the board holds focus.
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.