Sixty specimens of interface motion, designed, pinned, and labelled. Hover, drag, click, press, scroll — each behaves exactly as its badge says.
Sixty interactions,
each pinned and labelled.
Every card below is live. The badge in the top-left corner of each specimen tells you exactly what wakes it up.
Magnetism, cursor var.
The button leans toward the cursor within reach, then springs back the moment you look away.
Parallax tilt, glare-bearing
Perspective transform tied to pointer position, with a glare that hunts the light source — your cursor.
Fluid organism, cursor-fed
An SVG path stretches toward the pointer with spring easing — soft body, no bones.
Scramble & decode
Characters dissolve into noise, then resolve back to the source word, letter by letter.
Ink bleed, radial
Colour spreads outward from the point of contact like ink hitting wet paper.
Elastic tether
Pull it anywhere inside the pen — release, and it snaps home on an overshooting spring.
Impact ripple
Every click seeds a ring at the exact point of contact — no two overlap the same way.
Marquee, reluctant
Drifts one way at rest. Hover, and it reverses course at speed — like it changed its mind.
Departures board
Digits cycle like an airport split-flap sign before settling on the real number.
Spotlight mask
A hidden layer only shows through a small circle carved out around the cursor.
Confetti burst
Every click seeds a small explosion of colour at the exact point of contact.
Glitch, RGB split
Red and blue channels shear apart under hover, like a dropped broadcast signal.
Repel, evasive var.
The opposite of magnetic — get close and it darts to a new corner of the pen.
Two-sided specimen
A single click turns the card over in 3D — the back only exists once you've looked.
Hold to confirm
Nothing happens on a tap — commitment is measured in time, not clicks.
Rotary knob
Drag in a circle around the centre — the indicator tracks your angle exactly.
Aurora border
A conic gradient ring spins around the card the instant your cursor lands on it.
Jelly squash
Cartoon squash-and-stretch on click — overreacts on purpose, settles fast.
Card fan
Three stacked cards spread into a hand of cards the moment you hover the deck.
Typewriter
Text is keyed in character by character, caret blinking, on every fresh hover.
Particle trail
A comet's tail of fading dots follows the cursor across the specimen glass.
Morphing icon
Three lines rearrange themselves into an X and back — no swapped icon, same lines.
Constellation network
Nearby nodes draw a line to your cursor and to each other — a sky-map that redraws itself as you move.
Bioluminescent orb
A glowing body trails behind the cursor, always a half-beat late, like something alive under dark water.
X-ray scan
A scanning band sweeps down on hover, showing what's structurally underneath before it passes.
Liquid fill
Colour rises from the base like a glass being poured, fully full by the time you've noticed.
Magnifying lens
A circular loupe follows the cursor, showing the same field of dots at nearly twice the scale.
Scratch card
Drag across the foil to wear it away — what's underneath was there before you started.
Rotating cube
Four faces, one click each — the cube turns a quarter and waits for the next tap.
Pendulum
Drag the bob aside and let go — it swings on its own, losing a little arc every pass.
Ripple surface
A grid of pins dips beneath the cursor like water — the wave rolls outward and settles behind it.
Colour mixer
Drag between two pinned hues — the swatch blends live, pixel by pixel, at every point between.
Levitation
Floats gently at rest. Hover, and it rises higher and faster, shadow shrinking as it lifts off.
Coin flip
Click it, and it spins several full turns before settling — heads or tails, decided mid-air.
Scrubber preview
Drag the handle and a preview bubble rides just above it, always naming exactly where you are.
Breathing halo
One tap starts a slow four-second breathing loop; another tap and it settles back to still.
Gravity well
Whole words lean away from the cursor as it nears — repulsion at the word level, not the letter.
Yo-yo spring
Pull the weight down and release — it bounces on its string, each pass a little shorter than the last.
Domino cascade
Tip the first tile and the rest fall in sequence. Click again once they're down to stand them back up.
Pixel dissolve
Click, and the whole tile scatters into a grid of fading squares — then quietly reassembles itself.
Waveform scrub
Move across the track and the bars light up exactly as far as your cursor has travelled.
Charge meter
Holding crackles the bar upward. Let go early and it drains back down instead of firing.
Radar sweep
A beam turns continuously while you hover, lighting each blip on the grid the instant it passes over.
Echo ping
Click, and a square ring expands outward from that point instead of a circle — corners arrive last.
Letter wave
Move across the row and each letter bobs up in turn, like a crowd wave passing along a stadium row.
Signal beacon
Hold it down and rings pulse outward on a steady beat, like a lighthouse marking its position.
Free-drag globe
A wireframe sphere that spins on its own axis wherever you drag it — no momentum, just direct control.
Network pulse
Click any node and the signal travels the connections outward, each hop lighting a beat later than the last.
Aurora curtain
Bands of colour hang still until you move — then they ripple sideways like light bending in the sky.
Firefly swarm
They drift on their own at rest. Hover, and the whole swarm loosely gathers toward your hand.
Photo development
Hold, and the image slowly emerges from white like a print in the chemical bath — let go too soon and it fades back.
Kaleidoscope
Six mirrored segments lie flat at rest and spin into symmetry the moment you hover the glass.
Fisheye bulge
A grid of tiles swells up under the cursor like glass pressed against a lens, and flattens as you leave.
Free-drag pyramid
No fixed quarter-turns here — drag in any direction and the tetrahedron follows both axes at once.
Dice roll
Click, and it tumbles through all six faces before settling — genuinely random, every time.
Trampoline bounce
Drop it and the surface dips on impact, launching it back up a little lower every time.
Sonar ping
Click, and a wavefront radiates outward across the grid — each dot lighting up exactly as it passes.
Plucked string
Move along it and the string bows toward your cursor, snapping straight the instant you pull away.
Pond rings
Every click drops a stone — concentric rings expand and fade, and they stack if you click again before they're gone.
Field notes
Every specimen above runs on plain CSS transitions or vanilla JS — no animation library, no build step. Copy the block you need straight out of the page source and it works standalone.
Collector's remark
Restraint is the actual trick. One good micro-moment at the right point of contact beats sixty competing for attention at once — use these as a palette, not a checklist.