Motion

O movimento no Velon deve parecer vivo, porém invisível. Aquilo que anima comunica mudanças de estado. Nunca deve chamar atenção para si mesmo às custas da mudança que está anunciando.

Essa contenção é Verdade: o movimento existe para orientar a pessoa usuária em direção ao que realmente mudou, nunca para distrair ou enfeitar o momento.

Tokens de duração

Token	Valor	Uso
`duration.instant`	100ms	Feedback de hover/press
`duration.fast`	150ms	Tooltips, fades simples
`duration.base`	200ms	Transições padrão
`duration.slow`	300ms	Entrada de dialog / drawer
`duration.slower`	500ms	Introduções de hero / marca

Easing

Token	Valor	Uso
`easing.standard`	`cubic-bezier(0.4, 0, 0.2, 1)`	Padrão. maioria das transições
`easing.decelerate`	`cubic-bezier(0, 0, 0.2, 1)`	Entrada. o elemento aparece
`easing.accelerate`	`cubic-bezier(0.4, 0, 1, 1)`	Saída. o elemento desaparece

Introdução de marca

A animação de introdução do símbolo Velon (as arestas do tetraedro em wireframe sendo desenhadas, usada no hero deste site) leva cerca de 2s e usa cubic-bezier(0.65, 0, 0.35, 1) para o traçado do stroke. Uma curva um pouco mais dramática, apropriada para momentos de marca. Ela respeita prefers-reduced-motion.

import { VelonLogoIntro } from '@velon-finance/ui'
 
<VelonLogoIntro duration={2} strokeColor="#FFFFFF" />

O que evitar

Não use durações maiores que slower (500ms) para transições de UI. Depois de cerca de 500ms, o movimento deixa de parecer feedback e começa a parecer espera.
Não anime propriedades que causam layout (top, left, width, height). Use transform e opacity.
Não ignore prefers-reduced-motion. Os componentes deste sistema o respeitam; o código consumidor também deveria.

Elevação Ícones