Leaderboard

A work grid you can filter, sort and switch between grid and list. On every change the cards fly from their old spots to the new ones, thumbnails morph between the two views, and filtered-out cards fade in place while the rest close the gap, with an adjustable spring and stagger. Thumbnails are pure CSS gradients.

MotionCSS

Two images stacked with a divider you drag, click or arrow-key across, following on a spring; the Before / After labels step aside as the divider nears them. For photo edits, enhancement results, redesigns and renovation stories.

MotionCanvas

A pill drops in from the top, then stretches like a drop of water into a body with a description and an action, and folds back before leaving. The outline is a morphing SVG path on an overshooting spring. For success, failure and update notices that need one line and one action.

MotionSVG

Several goals as concentric rings, each sweeping to its completion on a spring; a ring past 100% runs a second lap with a shadow at its tip. Hover or focus a legend row to light up one ring and show its percentage in the middle. For habit trackers, daily goals and team targets.

MotionSVG

Icons swell smoothly as the pointer nears them and pull their neighbors along, like the macOS dock. Great for app navigation, toolbars and portfolio link bars.

Motion

Fuzzy filtering as you type with matched letters highlighted, a selection bar that glides between rows on arrow keys, and Enter to run. Groups, shortcut hints and an empty state included. Made for a global ⌘K search and quick jump.

Motion