Spring Motion

Physics-based spring animations using CSS linear() easing — the same natural feel as Framer Motion or iOS UIKit springs, but entirely in CSS. Zero JS. Requires Chrome 113+, Firefox 112+, Safari 17+.

motion="spring" — snappy

Stiff spring with ~5% overshoot. Fast settle — great for buttons and interactive elements.

Hover this card

~5% overshoot

<button surface="solid" tone="primary" density="default" radius="md" motion="spring">
  Hover me
</button>

motion="spring-bouncy"

Lower damping — visible oscillation. Great for cards, FABs, or fun UI moments.

Hover me

~18% overshoot

<button surface="solid" tone="accent" density="default" radius="full" motion="spring-bouncy">
  Bounce!
</button>

motion="spring-gentle"

Highly damped — barely perceptible overshoot. Refined feel for sidebars, modals, or editorial cards.

Soft hover

<2% overshoot

<div surface="glass" density="spacious" radius="xl" motion="spring-gentle">
  Gentle spring hover
</div>

Side-by-side comparison

Hover each card and notice the difference in character.

Snappy

580ms

Bouncy

700ms

Gentle

500ms

<div motion="spring">        Snappy</div>
<div motion="spring-bouncy"> Bouncy</div>
<div motion="spring-gentle"> Gentle</div>

Custom tokens

/* Override spring durations */
--aura-spring-duration:        580ms;
--aura-spring-bouncy-duration: 700ms;
--aura-spring-gentle-duration: 500ms;

/* Override the easing curves entirely */
--aura-ease-spring:         linear(0, ...);
--aura-ease-spring-bouncy:  linear(0, ...);
--aura-ease-spring-gentle:  linear(0, ...);