Motion & easing design hub
Drag the handles until the movement feels honest. Check it on real UI, compare spring versus bezier, then copy what you liked.
Interactive motion studio
Customize bezier handles, spring mass/stiffness/damping, and evaluate curve performance across live UI surfaces.
Cubic-Bezier Easing Editor
Adjust physics parameters, curve handles, and animation timing.
Live Test Bench & Code Export
Real-time micro-interaction preview & multi-format code snippets.
Live UI Test Bench
Evaluate micro-animations on real UI components. Click any card to re-trigger motion.
:root {
--ease-brand: cubic-bezier(0.4, 0, 0.2, 1);
--dur-brand: 280ms;
}Curated Motion Preset Gallery
Explore 40+ production-ready motion curves and spring physics presets. Click any preset to test the curve or load into the studio.
Snappy Toggle Flip
Snappy & Micro • cubic-bezier
Ultra-fast acceleration for toggle switches, checkboxes, and active state indicators.
Tactile Button Click
Snappy & Micro • spring
Tight spring response giving tactile physical click feedback on CTA buttons.
Chip Badge Pulse
Snappy & Micro • cubic-bezier
Crisp scale pop for filter chips, tags, and multi-select option badges.
Instant Tooltip Fade
Snappy & Micro • cubic-bezier
Immediate opacity fade for tooltips and contextual helper popovers.
Fluid Tab Indicator
Snappy & Micro • cubic-bezier
Smooth sliding motion for active navigation tab underlines and pills.
Refresh Icon Whir
Snappy & Micro • cubic-bezier
Rotational acceleration curve for sync buttons and refresh triggers.
Menu Chevron Rotate
Snappy & Micro • cubic-bezier
Decisive 180-degree rotation for dropdown arrows and accordion headers.
Heart Like Bounce
Snappy & Micro • spring
Playful overshoot scale effect for favoriting and liking content items.
Confident Sheet Slide
Modals & Sheets • cubic-bezier
Smooth bottom sheet entrance curve with natural deceleration at rest.
Dim Backdrop Fade
Modals & Sheets • cubic-bezier
Linear-ease backdrop overlay darkener accompanying dialog entrances.
Scale Dialog Entrance
Modals & Sheets • cubic-bezier
Slight initial scale-up for confirmation popups and prompt dialogs.
Side Drawer Entrance
Modals & Sheets • cubic-bezier
Subtle ease-out slide for right-hand admin panels and detail viewports.
iOS Rubberband Sheet
Modals & Sheets • spring
Authentic iOS spring physics sheet pull-down and snap-back behavior.
Command K Palette
Modals & Sheets • cubic-bezier
Snappy drop-in motion tailored for Command+K search overlays.
Lightbox Zoom Expand
Modals & Sheets • cubic-bezier
Smooth expansion curve from thumbnail to full-screen lightbox preview.
Sticky Cookie Slide-In
Modals & Sheets • cubic-bezier
Unobtrusive bottom notification slide-in for cookie and privacy notices.
Celebratory Bouncy Pop
Delight & Springs • spring
Spring with a quick overshoot that lands with a bounce. We use it for rewards and milestone unlocks. Keep damping at 12 or it feels loose on slower devices.
Toast Slide & Rebound
Delight & Springs • spring
Bouncy entrance for top/bottom toast messages that catches the eye.
Fluid Card Lift
Delight & Springs • cubic-bezier
Gentle elevation-on-hover curve providing responsive physical feedback.
Elastic Pull Snap
Delight & Springs • spring
Elastic rubberband effect for pull-to-refresh and canvas drag-release.
Sticker Stamp Drop
Delight & Springs • spring
Heavy impact stamp effect for placing badges, stickers, and approved marks.
Confetti Pop Dispersion
Delight & Springs • cubic-bezier
Explosive initial velocity decaying rapidly for celebratory confetti particles.
Floating Bob Motion
Delight & Springs • cubic-bezier
Continuous sinusoidal float curve for ambient background decorative orbs.
Error Wiggle Shake
Delight & Springs • spring
Horizontal shake curve for password entry errors and invalid form fields.
Editorial Page Transition
Page & Hero • cubic-bezier
Subtle upward fade-in for full-page route changes and article loading.
Hero Headline Reveal
Page & Hero • cubic-bezier
Cinematic mask reveal curve for landing page hero headlines.
Parallax Depth Inertia
Page & Hero • cubic-bezier
Heavy inertia curve for smooth scroll parallax layers and background video.
Cascading Card Grid
Page & Hero • cubic-bezier
Progressive delay curve for staggered grid items loading into view.
Linear Brand Marquee
Page & Hero • cubic-bezier
Constant linear speed for continuous logo tickers and testimonial marquees.
Accordion Height Expand
Page & Hero • cubic-bezier
Natural height expansion curve for FAQ items and collapsible sections.
Skeleton Loading Wave
Feedback & Loader • cubic-bezier
Smooth gradient wave sweep for content placeholder skeleton cards.
Live Signal Pulse
Feedback & Loader • cubic-bezier
Rhythmic expand-and-fade ring pulse for active status indicators.
Upload Progress Fill
Feedback & Loader • cubic-bezier
Decelerating fill line curve for step progress bars and file uploads.
Material Orbit Spinner
Feedback & Loader • cubic-bezier
Material Design 3 arc contraction and expansion spinner curve.