Motion
Motion in Velon should feel alive but invisible. Things that animate communicate state changes. they should never call attention to themselves at the expense of the change they’re announcing.
That restraint is Verdade: motion is here to orient the user toward what actually changed, never to distract or dress up the moment.
Duration tokens
| Token | Value | Use |
|---|---|---|
duration.instant | 100ms | Hover/press feedback |
duration.fast | 150ms | Tooltips, simple fades |
duration.base | 200ms | Default transitions |
duration.slow | 300ms | Dialog / drawer enter |
duration.slower | 500ms | Hero / brand intros |
Easing
| Token | Value | Use |
|---|---|---|
easing.standard | cubic-bezier(0.4, 0, 0.2, 1) | Default. most transitions |
easing.decelerate | cubic-bezier(0, 0, 0.2, 1) | Enter. element appears |
easing.accelerate | cubic-bezier(0.4, 0, 1, 1) | Exit. element leaves |
Brand intro
The Velon symbol intro animation (the wireframe tetrahedron’s edges drawing in, used in this site’s hero) takes ~2s and uses cubic-bezier(0.65, 0, 0.35, 1) for the stroke draw. a slightly more dramatic curve appropriate for brand moments. It honors prefers-reduced-motion.
import { VelonLogoIntro } from '@velon-finance/ui'
<VelonLogoIntro duration={2} strokeColor="#FFFFFF" />Don’t
- Don’t use durations longer than
slower(500ms) for UI transitions. After ~500ms, motion stops feeling like feedback and starts feeling like waiting. - Don’t animate properties that cause layout (top, left, width, height). Use
transformandopacity. - Don’t ignore
prefers-reduced-motion. Components in this system honor it; consumer code should too.