Motion & Easing Design Hub
Design interactive cubic-bezier easing curves, simulate spring physics, test UI micro-animations on real components, and export production code snippets.
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
High-energy spring overshoot for achievement unlocks and reward moments.
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.