Uranus® Design System

Movimento

Princípios de duração, easing e reduced-motion com Motion.

Movimento na Uranus é funcional: ele comunica continuidade, hierarquia e feedback — nunca decoração. Toda animação passa pela biblioteca motion (sucessora do Framer Motion), usando variantes compartilhadas exportadas pelo @uranus-workspace/design-system:

import { fadeVariants, slideUpVariants, scaleInVariants } from '@uranus-workspace/design-system';

Durações

TokenValorUse para
instant0msTrocas de estado instantâneas
fast120msHover, foco, pequenas mudanças de tint
base200msA maioria das transições de UI
slow320msDiálogos, bottom sheets
slower480msMomentos de celebração ou onboarding

Easings

  • standard — curva padrão, cubic-bezier(0.2, 0, 0, 1)
  • emphasizedcubic-bezier(0.3, 0, 0, 1)
  • decelerate, accelerate — transições direcionais

Reduced motion

Toda animação precisa respeitar prefers-reduced-motion. Use respectReducedMotion() do @uranus-workspace/design-system para envelopar variantes, e confie na media query CSS declarada no preset do Tailwind para o que não é dirigido pelo Motion.