210
Motion: the wobbly, glowy bits.
Cursor effects, text tricks, loaders and liquid little things that make an interface feel alive.
- in this shelf
- 27
- categories
- 6
- across devl
- 277· 35 cut
Liquid5
211
Drip Loaders
Three loaders made of liquid in whatever colour you like: a comet of drops that stretches and gathers, a bead that drips into a pool, and a dot that splits and flows back together.212
Liquid Cursor
Inside its card the pointer becomes a drop of liquid with a short trail; hover a link or button and the drop pours itself into that shape, then pinches free when you move on.240
Liquid FAB
A round action button that squeezes out its actions as droplets: each one stretches away, pinches off into its own button and gets drawn back in when you close it, with labels as tooltips and full keyboard support.241
Pour Progress
Progress you can watch fill up: a stream pours in from the top, the surface sloshes and settles as the level eases to the value, and hitting 100% sends out a small ripple. Comes as a round vessel or a slim bar.Text8
213
Blur Rise
Text that drifts up and comes into focus a letter or a word at a time as it scrolls into view, quick enough that nobody waits to read it.214
Odometer
Digits that turn like a real counter: every place rolls the way the number moved, so 9 ticks over to 0 instead of spinning back, and it counts up the first time you scroll to it.coss ui
The kit every devl component is built on — Base UI + Tailwind, copy-paste, open source.
215
Flip Clock
A split-flap countdown where each changed digit's top flap falls away under gravity, darkening as it turns, and the new lower flap lands with one small rebound.216
Marquee Text
An oversized headline that scrolls forever in alternating solid and outlined words, gliding to a halt when you hover instead of freezing mid-word.217
Scramble Text
Text that decodes from random glyphs into the real words, sweeping left to right on view, on hover or on demand, with a monospace variant for codes and labels.218
Typewriter
Types a phrase with a human rhythm, holds it long enough to read, then backspaces or selects it away and moves on; the caret only blinks while it waits.242
Highlighter
A marker pen that sweeps behind your words one line after another, with a chisel tip, slightly ragged edges and ink that pools where each stroke starts and stops; runs when it scrolls into view or when its row is hovered.243
Margin Notes
A reviewer's pen that draws itself onto your text as it scrolls into view: wobbly circles, double underlines, boxes and strike-throughs, then arrows that curve from a handwritten note to the words it means.Surfaces6
219
Morph Icons
Menu to close, play to pause, plus to check, sun to moon: each pair is one set of paths in two poses, so lines rotate and stretch into place on a spring and reverse cleanly mid-way.220
Press Ripple
A quiet wave that spreads from exactly where you pressed, clipped to the element's corners, finishes filling even on a quick tap, and gives Enter and Space the same feedback from the centre.221
Rim Light
A point of light that laps a card's border at a steady pace with a fading tail, tracing rounded corners exactly; every beam on the page shares one clock, so busy cards pulse in step.244
Card Deal
A grid that deals itself out from one point like a hand of cards: each card flies to its slot tilted and settles flat, and a shuffle sweeps them back into the deck and deals a fresh order, even mid-flight.245
Elastic List
A scrolling list with real rubber-band edges: drag or flick past either end and it stretches with growing resistance, then springs back, pulling down from the top winds up a spinner that snaps when it's ready to refresh, and the wheel hands off to the page once you reach an end.246
Lift to Open
A thumbnail that lifts off the grid and grows into its own detail view as one object, cover and title travelling with it, the details fading in once it lands; Escape or a click outside folds it back into its exact slot.Cursor3
222
Magnetic
Buttons and icons lean toward your pointer as it comes near, labels drifting a little further than their buttons, then spring back the moment you move away.223
Torch Grid
One soft light follows your pointer across a grid of cards, washing over the one you're on and catching the rims of its neighbours across the gaps.247
Spotlight Text
Dimmed copy with a soft warm spotlight that trails your pointer, bringing the words underneath to full contrast and uncovering a line that isn't there otherwise; on touch, or once you leave, the light drifts on a slow path of its own.Loading1
224
Skeleton Sweep
Loading placeholders lit by one sweep of light that crosses the whole card at once, with a matching glint for “Drafting…” status lines.Celebration4
225
Confetti Burst
Confetti that blooms out of the button you pressed, hangs at the top of its arc in the air drag, flutters as each piece turns over and drifts down; reduced motion gets a quick check instead.226
Like Burst
A heart that squeezes and pops full with a thin ring and a flick of sparks, while the count rolls over digit by digit like an odometer; unliking fades back quietly.248
Ink Stamp
A rubber stamp that rises, winds up and slams onto the page with a quick squash and a jolt through the card, lifting away to leave a rough, slightly bled ink impression that comes out a little different every time.249