Premium
Tilt me
Move your cursor across the card to see 3D tilt + glare.
Tilt Card
3D perspective tilt on hover with cursor-tracked glare.
Motioncomponentsfor React.
Copy-ready components with clean motion.
Component asset
01 / 3motion/button.tsx
<StatefulButton state="success">
Save changes
</StatefulButton>button.tsx
Stateful button
Success state
asset
button.tsx
asset
switch.tsx
asset
badge.tsx
Components
16 components.
Button
Spring-pressed Button plus StatefulButton (idle → loading → success / error) and MagneticButton.
Vercel
Linear
Stripe
Figma
GitHub
Notion
Loom
Raycast
Marquee
Infinite horizontal or vertical scroll with pause-on-hover.
Pill
High-level summary.
Segment
Underline
Tabs
Pill, segment or underline tabs with a spring layoutId indicator.
Switch
Toggle with a spring-driven thumb and press feedback.
Bottom Sheet
Vaul-inspired draggable bottom sheet with snap points, inertia and glass surface.
Shared Layout Background
A pill that glides between hovered items via motion's shared layout, with blur enter/exit.
Dock
macOS-style dock with grouped actions and a gliding active pill.
Hover or focus each button. Content fades and un-blurs in.
Tooltip
Hover or focus tooltip with blur enter/exit and spring spawn.
Click a row. The modal morphs height to match new content.
Morphing Modal
Family-app-style modal. A single panel that morphs its height as you navigate between inner views, with blur cross-fade on content.
Motion in words.
Text Animation
Animated text primitives for reveal sequences, shimmer loading states and letter-cascade swaps.
Active users
48,273Number Animation
Animated number primitives for count-up values and rolling digit tickers.
Syncing
QueuedLiveIndexingVerifiedPendingBlocked
Animated Badge
Status badge with animated state icons, pulse feedback and compact size variants.
Action Swap
CTA button and slot primitives for swapping text and icons with blur motion.
Open a real toast
Toasts render fixed on the screen. Change position to open a toast from that edge.
Animated Toast Stack
Stacked toasts with status morphs, swipe dismissal, actions and layout-aware motion.
Rectangle
Circle
Circle blur
Theme Toggle
Theme toggle button with a full-page rectangle clip-path reveal via the View Transition API.
Blocks
8 blocks.
Swap
≈ $3,142
1.245· Ethereum
18.702381
≈ $3,142
12.4· Solana
Rate1 ETH ≈ 18.702381 SOLNetwork fee$0.42Slippage0.50%ETA≈ 24s
Multi-chain Swap
Cross-chain swap widget with chain + token selectors, morphing views, animated flip and quote.
9:41
Dynamic Island
iOS-style island pill that morphs between live activity views with bouncy shell resize and blur crossfades.
Press ⌘ J (or Ctrl J) to open.
Command Palette
⌘K palette with fuzzy filter, spring-animated active row and glass surface.
Expandable Action Bar
Compact icon actions that expand into labeled controls on hover or focus with shared layout motion.
Expandable Tabs
Icon tab bar where the active tab expands to a labelled pill, with a panel above that morphs height and slides content direction-aware on switch.
Priority queue
Ready
Launch brief
Finalize the announcement copy
9:41
Client feedback
Three comments need a response
11:08
Design review
Check spacing before handoff
13:20
Flagged run
Retry queue has one failed job
Now
4 openToday
Swipeable List
Mobile-style list rows that swipe left or right to reveal contextual action buttons.
Plan announcements, staging checks, reminders, and quiet periods around the same timeline.
Bouncy Accordion
Single-open accordion with weighted spring layout, icon rows and reduced-motion-safe content reveals.
Enter 123456 to verify.
OTP Input
One-time-code input with a gliding focus ring, digits that roll in per slot, error shake and a success check draw.