VelinStyle Motion tokens
Duration and easing variables that drive every animation, transition, and Web Component motion in VelinStyle 0.8.0.
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 new 0.8.0 | Sparkline area fade-in |
--velin-duration-cinematic | 1200ms new 0.8.0 | 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) new | Strong overshoot, used by FLIP filter |
--velin-ease-elastic | cubic-bezier(0.68, -0.6, 0.32, 1.6) new | Anticipatory snap |
--velin-ease-expo-out | cubic-bezier(0.16, 1, 0.3, 1) new | Cinematic decel — sparkline & counters |
--velin-ease-back-out | cubic-bezier(0.34, 1.4, 0.64, 1) new | Soft overshoot for value bumps |
--velin-ease-snappy | cubic-bezier(0.2, 0.8, 0.2, 1) new | 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.