goodies / motion ui lab

Motion UI Lab

19 springy components built with Motion, themed with the site's design tokens. Every tile names its source file under components/goodies/motion-ui — grab the export you want, any time.

buttons

Buttons

Press-me physics: hard shadows, springs, and a little mischief.

SpringButton

buttons.tsx

The house button — lifts and tilts on hover, squashes on press.

MagneticButton

buttons.tsx

Sticks to your cursor while hovered, springs home on leave.

JellyButton

buttons.tsx

Squishes like jelly — a high-stiffness, low-damping spring.

cards

Cards

Sticker cards you can tilt, flip, and throw around.

TiltCard

cards.tsx

3D tilt that follows the cursor with springy easing.

🛠️Tilt me

FlipCard

cards.tsx

Click to flip — 3D rotation with two faces.

DragCard

cards.tsx

Grab and throw it — drag physics with a spring return.

🧲Drag me

text

Text effects

Type that moves: waves, counters, and cycling words.

WavyText

text.tsx

Characters take turns bouncing in an endless wave.

CountUp

text.tsx

A number that springs up from zero when scrolled into view.

0lines shipped

WordCycle

text.tsx

Cycles words with the springy pop from the homepage hero.

Ibuilddaily.

loaders

Loaders

Waiting, but make it fun.

DotsLoader

loaders.tsx

Three dots hopping in sequence.

MorphLoader

loaders.tsx

A spinning square that melts into a circle and back.

SpringProgress

loaders.tsx

A progress bar that springs to each new value.

18% built

controls

Controls

Inputs with instant, tactile feedback.

SpringToggle

controls.tsx

A switch whose knob glides across with a layout spring.

LikeButton

controls.tsx

Pops on click and bursts confetti particles outward.

overlays

Overlays

Modals and toasts that enter with intent and leave politely.

SpringModal

overlays.tsx

Springs up from below over a dimmed backdrop. Click outside to close.

ToastStack

overlays.tsx

Toasts slide in bottom-right, restack, and auto-dismiss.

lists

Lists & layout

Shared-layout magic: reordering, gliding pills, and cascades.

ReorderList

lists.tsx

Drag rows to reorder — Motion’s Reorder primitives.

Design it
Build it
Break it
Ship it

LayoutTabs

lists.tsx

A shared-layout pill that glides between tabs.

Sketch, scaffold, and make the thing exist.

StaggerList

lists.tsx

Rows reveal one after another — press replay to rewatch.

1. Clone the repo
2. Break something
3. Fix it better
4. Push to prod