Motion Tokens

Expanding the motion system with theme-driven animation presets, hover effects, enter/exit animations, and View Transitions API integration.

Token Reference: See Themes > Extensions for token documentation. Source: src/tokens/extensions/motion-fx.css
Reduced Motion Enabled: Animations are minimized based on your system preference.

Proposed Motion Tokens

New tokens to add to the existing motion.css system.

Token Value
--motion-hover-transform translateY(-2px)
--motion-stagger-delay 50ms
--motion-bounce cubic-bezier(0.34, 1.56, 0.64, 1)
--motion-snappy cubic-bezier(0.4, 0, 0.2, 1)
--motion-smooth cubic-bezier(0.25, 0.1, 0.25, 1)
--motion-elastic cubic-bezier(0.68, -0.55, 0.265, 1.55)
/* Motion easing presets */ --motion-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --motion-snappy: cubic-bezier(0.4, 0, 0.2, 1); --motion-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); --motion-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

Hover Effects

Reusable hover patterns that can be applied to cards, buttons, and interactive elements.

Lift

Raises with shadow

Glow

Subtle ring glow

Scale

Bouncy scale up

Slide

Color slide-in

Border

Border appears

Tilt

3D perspective

 .hover-lift { transition: transform 200ms ease-out, box-shadow 200ms ease-out; } .hover-lift:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }

Transition Presets

Different easing curves create different motion personalities. Hover each box to compare.

Snappy
Smooth
Bouncy
Elastic
150ms 300ms 400ms 500ms

Enter/Exit Animations

Reusable keyframe animations for elements appearing and disappearing.

Fade In

Slide Up

Slide Down

Scale In

Pop In

Staggered Animations

Child elements animate in sequence using CSS custom properties for delay calculation.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
 .stagger-item { animation: slide-in-up 300ms ease-out backwards; } .stagger-item:nth-child(1) { animation-delay: calc(var(--motion-stagger-delay) * 0); } .stagger-item:nth-child(2) { animation-delay: calc(var(--motion-stagger-delay) * 1); } .stagger-item:nth-child(3) { animation-delay: calc(var(--motion-stagger-delay) * 2); } /* ... etc */

Theme Motion Personalities

Each theme can have its own motion character. Hover the boxes to see different personalities.

Default

Smooth lift

Swiss

Linear, precise

Organic

Flowing, natural

Brutalist

Instant, raw

Cyber

Stepped, glitchy