Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
Motion Tokens
Expanding the motion system with theme-driven animation presets, hover effects, enter/exit animations, and View Transitions API integration.
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) |
Easing presets
/* 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
Border
Border appears
Tilt
3D perspective
Hover lift effect
.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
Staggered animation delay
.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