VelinStyle Motion tokens 1.2.2
Duration and easing CSS variables for animations, transitions, and Web Component motion — stable in 1.2.0. Deutsch: Motion-Tokens
Maturity: Documented as stable in VelinStyle 1.2.0.
Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under
@layer utilities, not a full variant generator.
When to use
- Reference motion duration/easing tokens for custom CSS animations.
When not
- Prefer the Motion runtime / attributes guides for scroll-driven or JS-orchestrated motion.
Durations
| Token | Value | Use case |
|---|---|---|
--velin-duration-instant | 50ms | Tap feedback, hover state flip |
--velin-duration-fast | 100ms | Toggles, popovers |
--velin-duration-normal | 200ms | Default transitions |
--velin-duration-slow | 300ms | Modals, drawers |
--velin-duration-slower | 500ms | Section reveals |
--velin-duration-slowest | 800ms | Sparkline area fade-in |
--velin-duration-cinematic | 1200ms | Hero reveals, sparkline draw-in |
Easings
| Token | Curve | Notes |
|---|---|---|
--velin-ease-default | cubic-bezier(0.4, 0, 0.2, 1) | Material-style smooth |
--velin-ease-in | cubic-bezier(0.4, 0, 1, 1) | Accelerate |
--velin-ease-out | cubic-bezier(0, 0, 0.2, 1) | Decelerate |
--velin-ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) | Smooth start & end |
--velin-ease-bounce | cubic-bezier(0.34, 1.56, 0.64, 1) | Subtle overshoot |
--velin-ease-spring | cubic-bezier(0.34, 1.56, 0.64, 1.4) | Strong overshoot, used by FLIP filter |
--velin-ease-elastic | cubic-bezier(0.68, -0.6, 0.32, 1.6) | Anticipatory snap |
--velin-ease-expo-out | cubic-bezier(0.16, 1, 0.3, 1) | Cinematic decel — sparkline & counters |
--velin-ease-back-out | cubic-bezier(0.34, 1.4, 0.64, 1) | Soft overshoot for value bumps |
--velin-ease-snappy | cubic-bezier(0.2, 0.8, 0.2, 1) | Quick UI affordance, dropdowns |
Usage
.card {
transition: transform var(--velin-duration-slow) var(--velin-ease-expo-out);
}
.card:hover { transform: translateY(-4px); }Reduced motion
The base reset honours prefers-reduced-motion: reduce by capping animation durations to 1ms and disabling all chart/filter motion globally. You don't need to gate token usage manually — utilities under Chart animation and Filter effects already include the override.
Runtime bridge
Attribute-driven motion (velin-reveal, stagger, smooth scroll) uses these tokens via CSS classes applied by @birdapi/velinstyle/motion. See Motion & attributes.