Interfaces you can feel.

Motion kit

One shape, never cut

Button, loader, check, island, player, slider, toggle, tabs, chart, ⌘K and toast are one element. Every frame is a pure function of time with closed-form springs, so you can scrub it and the loop has no seam.

Loading components…

The demos and filters need JavaScript. Each component links to its official demo:

Magnetic select — Choose a chip and watch its neighbours make room. (MIT (block code only))

Checklist — Toggle tasks with coordinated checkbox, tick and text animations. (MIT (block code only))

Liquid toggle — Switch states with an elastic, liquid-style thumb. (MIT (block code only))

Drag stepper — Tap for precise changes or hold and drag for larger adjustments. (MIT (block code only))

Palette — Generate coordinated colour swatches with perceptual lightness control. (MIT (block code only))

Slosh slider — Adjust a slider with a liquid fill that carries momentum. (MIT (block code only))

Now playing — Expand a compact music control into a larger player. (MIT (block code only))

Radial menu — Open a configurable arc of tools around a central button. (MIT (block code only))

Magnifying dock — Magnify navigation icons as the pointer approaches. (MIT (block code only))

Todo tower — Check off tasks and watch their cards fall into a movable pile. (MIT (block code only))

Image accordion — Explore an image strip whose panels expand around the pointer. (MIT (block code only))

Card stack — Fan out a stack of cards with adjustable spread and spring motion. (MIT (block code only))

Glass bubble — Drag a refractive glass lens across an image. (MIT (block code only))

Folding frame — Open and close a dimensional frame with a flexible glass hinge. (MIT (block code only))

Browser tabs — Rearrange browser-style tabs with a sliding active surface. (MIT (block code only))

Action node — Reveal a fan of contextual actions from the corner of a card. (MIT (block code only))

Slide to confirm — Complete a deliberate action by dragging a handle along its track. (MIT (block code only))

Assignees — Select people from a picker that grows an overlapping avatar group. (MIT (block code only))

Carousel — Swipe a circular image carousel with depth and momentum. (MIT (block code only))

Aspect ratio — Switch image proportions while preserving the visible frame area. (MIT (block code only))

Tilt card — Press a card surface inward through pointer-driven perspective. (MIT (block code only))

Dragging ball — Grab a soft ball that stretches during movement and rounds on release. (MIT (block code only))

Search — Expand a search control through a continuous shape transition. (MIT (block code only))

Pull to refresh — Pull content until the loading indicator signals that refresh is ready. (MIT (block code only))

Escape button — Explore a playful button that dodges the pointer before settling. (MIT (block code only))

Create menu — Transform a compact create button into an action menu. (MIT (block code only))

Reorder list — Reorder a list with freely dragged rows and elastic movement. (MIT (block code only))

Canvas toolbar — Select drawing tools from a compact toolbar that remembers its shape choice. (MIT (block code only))

Inline confirm — Confirm an action inside its button, with a temporary undo state. (MIT (block code only))

Notify — Toggle a notification button with an animated bell and lasting confirmation. (MIT (block code only))

Icon bar — Move a fluid selection indicator between navigation icons. (MIT (block code only))

Progress ticks — Explore a compact progress display made from interactive ticks. (MIT (block code only))

Wheel — Adjust a circular value gauge with configurable ticks and liquid motion. (MIT (block code only))

Command bar — Type into a command field with a fluid action-button transition. (MIT (block code only))

Selection list — Choose people from a list while retaining a stable display order. (MIT (block code only))

Range dial — Set a time range with two handles on a circular dial. (MIT (block code only))

Playground — A collection of interactive UI experiments, including a compact navigation control that expands into nested pages. (Not published)

Bloom — A spring-driven button that grows into a menu, with configurable opening direction and nested submenu transitions. (MIT)

Morphing Dialog — A card or image expands into a focused dialog while shared elements keep their visual continuity. (MIT)

React Live Island — A compact island expands on click or hover; a render prop supplies content for each size. (MIT)

Dock — A macOS-inspired icon dock magnifies neighboring items as the pointer approaches; size and magnification are configurable. (MIT)

morphicons — Spring-based path morphing between stroke icons, with framework bindings and a plain-JavaScript driver. (MIT)

Likes and upvotes are saved per browser on this host. Totals are shared across both software addresses; rapid repeat opens count once.

Interfaces you can feel.

Motion kit

One shape, never cut

No components match

The library could not be loaded