Motion Library

The background fills with gooey liquid on hover: droplets rise and merge into metaballs through an SVG filter.

Magnetic button pulled toward the cursor as it approaches, with an elastic spring return and label parallax.

The border draws itself around the button on hover (gradient SVG stroke), followed by a glow that trails the stroke.

Premium button: a shiny highlight sweeps across diagonally with a subtle pulsing glow, both intensified on hover.

Circular ripple starting from the exact click point, held for as long as the button is pressed, with multiple simultaneous ripples.

Destructive hold-to-confirm button: an SVG ring fills while pressed with a growing shake, releasing too early rewinds elastically, holding to the end confirms.

Download button that contracts into a progress bar on click — looping arrow, realistic irregular progress steps, then morphs into a success state with a drawn check.

Clicking "Add" launches a disc off the product card that flies along a Bézier arc to the cart, which absorbs the hit with squash & stretch while its badge increments.

Gelatinous squash & stretch on press: the button squashes when pushed down then bounces back with damped oscillations on release, via a real spring encoded as a linear() easing.

Orbiting blobs that merge with the central core through an SVG goo filter, in a hypnotic, perfectly seamless loop.

Single shape morphing in a loop — circle, rounded square, triangular pebble — dressed in a rotating conic gradient.

Row of five dots swept by a fluid wave — negative delay stagger, scale, opacity and a hue gradient from accent to accent-2.

Skeleton card (avatar, lines, image) swept by a single diagonal shimmer — the sweep is perfectly synchronized across the whole card.

Navigation dock where the hovered icon pulls out of the bar as a metaball bubble that stretches, then breaks free.

Horizontal nav whose highlight pill slides to the clicked item with an elastic overshoot, text color kept in sync.

Hamburger icon that morphs into a cross via a hidden checkbox, with three choreographed bars and a reactive background circle.

Premium dropdown menu: panel unfolds (scaleY + fade), items stagger in quickly, icons tint on hover, rotating chevron, full keyboard navigation.

Mobile tab bar: the active icon bounces (squash & stretch), the pill slides with overshoot, the departed tab desaturates smoothly, and a notification badge pops in.

Card that tilts in 3D following the cursor, with a glare highlight and a dynamic shadow.

Glassmorphism card whose gradient border orbits on hover while the content lifts in a cascade.

Card that flips in 3D on hover, with styled front and back faces, translateZ depth and an easing with a slight overshoot.

Gradient shine that sweeps across the heading in a loop — premium and understated.

Heading revealed letter by letter in a cascade — translation, blur and fade with stagger.

Text that decodes character by character out of random glyphs, replayed on hover.

Pure CSS typewriter: the text types itself with steps(), blinking caret, type/erase loop.

A heading's rotating word cycles in a loop — exits upward with fade and blur, enters from below, slot width smoothly animated, accent underline under the active word.

The heading's letters lift and grow as the cursor gets close, with a soft falloff, then spring back once it moves away.

Status label whose text swaps smoothly: the old text exits upward (fade + blur), the new one enters with a slight delay, the pill width follows elastically, and a status dot pulses then turns green at the end.

Smooth scroll-snap carousel with progress dots kept in sync by IntersectionObserver and navigation arrows.

Coverflow-style 3D carousel: the center card sits forward while side cards tilt away in perspective, with click or arrow navigation.

Seamless infinite marquee — two rows of badges scrolling in opposite directions at different speeds, with hover pause and edge fades.

Drag & drop zone with a liquid border: gooey blobs while a file hovers, then a stroke-drawn check and ripple on drop.

Toggle switch whose thumb stretches like a liquid droplet mid-flip, with a tinted track and a subtle glow.

Checkbox where the check draws itself along its stroke while a burst of sparks explodes around the bouncing box.

Elastic slider: a spring-loaded value bubble above the thumb, a track that bends like a plucked string while dragging, and a rubber-band snap back past the bounds.

Pull-to-refresh on a scrollable list: dragging down from the top with elastic resistance fills a progressive SVG arc; crossing the threshold triggers a simulated refresh (spinner), then a new item slides in at the top while the list springs back into place.

Background of organic gradient blobs that slowly morph and drift, layered with blend modes.

Northern-lights veil: sheets of green, purple and cyan gradient slowly rippling above the horizon.

Multi-layer starfield drifting slowly with twinkling stars and depth parallax, in pure CSS.

Custom cursor with a fluid comet trail that stretches with speed and swells over interactive elements.

Constellation whose links bend toward the cursor as if pulled by gravity, springing back elastically on release.

Dot grid that bulges under the cursor like a puddle of water, with a circular ripple on click and when a draggable chip is dropped.

Glowing halo that follows the cursor across a grid of cards, revealed on borders and backgrounds, Linear-style.

Scaredy button: it dodges the approaching cursor (panicked spring escape + micro-shake), gives up after 3 dodges — “Okay, fine…” — then lets itself be clicked in a shower of confetti.

Trail of thumbnails behind the cursor — each image pops in with a slight rotation then fades away while floating, using a recycled element pool.

Blocks that reveal progressively as they enter the scroller — translateY, fade and a slight blur tied to scroll position via animation-timeline: view().

Decorative multi-layer scene inside an internal scroller: each layer translates at its own speed while scrolling and a central title unveils, in pure CSS via animation-timeline: scroll().

Sticky reading-progress bar at the top of a scrolling article — scaleX gradient accent→accent-2 with a glow at the tip and a percentage readout, via animation-timeline: scroll(nearest block).

Choreographed modal: backdrop that blurs in progressively, spring panel with a slight overshoot, content revealed in cascade.

Corner toast stack: spring entrance from the edge, life bar paused on hover, fade-out exit and the stack smoothly reflows.

⌘K palette: spring panel over a blurred backdrop, staggered results, live filtering with FLIP reordering, arrow-key navigation with a gliding highlight, Enter executes with an accent flash.

Side drawer: panel sliding in from the right with expo easing and a progressive shadow, fading backdrop, cascading content, edge handle that breathes at rest.

Smart tooltip: springs from the trigger with an arrow, cold-start delay but instant handoff between neighbors, auto placement, and a rich popover on click.

Right-click context menu: scales from its origin corner, micro-staggered items, side submenu, danger item, selection flash and full keyboard navigation.

Premium text field: the label floats up from placeholder position on focus or once filled, gradient focus bar unfolding from the center and icon tinted in sync.

Email micro-form with choreographed feedback: damped shake + sliding error message when invalid, button morphing into a circle with a drawn check and a ripple when valid.

6-cell code: each digit pops into its cell with auto-focus on the next, cascading paste, then green ripple + check when the code is right or grouped shake + reset otherwise.

Password strength meter: 4 segments filled in a wave with color sliding from red to emerald, vertically rolling label, criteria checked off in stroke-draw and a show/hide eye in crossfade.

Lone magnifier that unfolds into a search field on focus: the circle morphs into a pill, the placeholder fades in with an offset, and the field folds back when empty — 100% CSS.

Tag field: Enter or comma pops a chip with a spring, the × ejects it in a rotate-fade while the others close ranks via FLIP, Backspace arms then deletes the last one, limit hit with a shake.

Image reveal on hover: double diagonal curtain (accent panel then surface panel), continuous slow zoom, sliding caption and accent border that draws itself in.

Before/after comparator: draggable vertical handle with a glowing line, the clip follows the pointer in real time and the labels fade out as the divider passes over them.

Image that ripples as if underwater on hover: feTurbulence + feDisplacementMap animated in rAF, intensity ramps up on enter and damps down with inertia on leave, filter active only during the interaction.

Gallery lightbox contained within its area: the clicked thumbnail scales up to the center with FLIP (no teleporting), fading backdrop, sliding caption, directional navigation between images and close with a FLIP return to the thumbnail.

Twitter-style heart: vanishes for a beat, re-pops in a warm gradient with overshoot, ring + 12 star-burst particles, rolling counter.

Copy button: real clipboard copy, the clipboard icon morphs into a stroke-drawn check, spring "Copied!" tooltip and accent halo on the block.

CSS-only 5-star rating: golden wave fill on hover, pop + sparkles on click, ripple across the previous stars and displayed score.

Bell that rings with damped rotation (clapper in counter-phase), counter badge popping in with a spring, rolling digit and circular ripple.

Mechanical reel counter: each digit column rolls vertically with deceleration, the units spin longer, columns and separators appear as needed.

Choreographed 100% CSS day/night toggle: sun rays retracting while rotating, disc morphing into a crescent moon, stars twinkling with staggered timing, track sweeping through a dawn-to-night gradient — and a mini scene that switches via :has().

Value updated in real time like a stock ticker: only the digits that change slide (direction follows up/down), green/red flash, ▲/▼ indicator and delta line.

Chat-style typing indicator: spring bubble with 3 dots in a damped wave that morphs into a real message (crossfade + elastic widening), scripted conversation on a loop.

Items swipeable to the left: archive/delete actions revealed with elastic resistance and detent snapping, hard swipe to delete, height smoothly collapsed and cascading restore.

Drag-to-reorder list: the grabbed item lifts up (scale + shadow), the others glide smoothly via FLIP to make room, then it lands with an elastic settle; Alt+arrows on the keyboard.

100% CSS checklist: box that pops + stroke-drawn check, text struck through progressively left to right (scaleX origin left), grayed out + slight slide, and "n / 4 done" counter with CSS counters + :has(). Unchecking removes the strike in reverse.

Exclusive 3-section 100% CSS accordion (hidden radios): smooth grid-template-rows 0fr↔1fr opening animated in both directions, chevron with overshoot, content fading in with delayed translate, accent edge on the active section.

Animated table: header sorting with FLIP row sliding (pivoting arrow), and smooth expansion of a detail panel on row click (one at a time, rotating chevron).

List ↔ detail toggle with a directional cross-fade: the outgoing view pulls back while the incoming one slides in from the opposite side, via the View Transitions API with an identical class-based fallback.

Shared element morph: the clicked thumbnail travels and scales up to become the hero of the detail view, via a shared view-transition-name with an identical manual FLIP fallback.

Curtain transition: an accent panel sweeps across the area left to right, swaps the views at full coverage then pulls away decelerating, with the new content staggering in behind it.

Mobile-style stacked navigation: the new page slides in on top from the right with a drop shadow while the previous one recedes (scale 0.94 + dimming), and going back unstacks in reverse across 3 levels.

Small open book whose pages turn in 3D around the spine: the edge lifts as the pointer approaches, a light sweep and drop shadow hit the page below during rotation, distinct front/back faces, backward turning and a discreet indicator.

Vertical bar chart: bars grow from the baseline in a cascade with a slight overshoot, value count-ups synchronized, and the top bar highlighted.

SVG line that draws itself progressively: the area reveals in its wake, points pop as the stroke passes, and the last one pulses with its value pill.

Progress ring with a decelerating fill: the percentage counts up in the center in exact sync with the arc, a glowing dot rides the leading edge, and milestones are marked with a pulse.

Row of KPI cards: SVG sparklines traced in a quick cascade, delta sliding in with a fade and semantic color (up/down), and the last point pulsing.

Trio of round buttons whose SVG icons morph on toggle — play→pause, plus→cross, magnifier→arrow — through rotation, scale and opacity of segments with a light bounce.

Line-art scene (sun, mountains, waves, bird) that draws itself stroke by stroke as you scroll — stroke-dashoffset driven by animation-timeline: scroll(), with fills fading in at the end.

“ML” monogram reveal: outlines traced with stroke-dashoffset, gradient ink melting in on top as the stroke fades out, final breathing glow — loops with a long pause, usable as a brand splash.

Rounded-stroke SVG digits whose paths morph: the 10 digits are resampled to a constant point count then interpolated in rAF with easing, with a wave along the stroke and an accent glow during the morph.

A token you fling around a zone: spring follow while dragging, inertia on release, damped bounces off the walls with squash on impact, friction until it stops.

Tinder-style card stack: drag with rotation and direction-based badges revealed, ejection carrying the throw velocity past the threshold, spring snap-back otherwise, the stack rising one step and recycling.

Elastic pendant: a bob hangs from an anchor by an SVG elastic band that stretches and curves, damped 2D spring oscillations on release, and an anchor that slowly follows the cursor (two springs in cascade).

Eight paired enter/exit presets as pure CSS classes, with an optional orchestrator: staggered entrance on viewport entry and animated dismiss (exit played, then height collapse).

SVG world map (179 countries, ISO3 ids) with tracking pings placed by lat/lon: choreographed map entrance then staggered pins, pulsing halos, country tooltip on hover, active countries highlighted, live point additions via an event.

Stylized world map generator from the SVG asset: triangulated low-poly (Delaunay), halftone dot grid, concentric radial dots, plexus network, binary digits, or countries. Style menu with wave reveal, SVG export of the current render.

3D world map scenes in canvas from the SVG asset: a rotating, draggable dot globe (orthographic projection, dimmed back hemisphere), and a pseudo-3D flyover — the map rolled into a cylinder with the north receding, perspective and depth haze, horizon glow, arcs between hubs traveled by lights, looping ken-burns camera.

World flows in canvas from the SVG asset, on a flat Natural Earth map: day/night (terminator sweeping across the continents, twilight band, twinkling city lights), traffic (comets on arcs between 12 capitals, pulsing hubs) and pulse (circular waves emitted from the capitals).