Brand Guidelines

Motion & Micro-Interactions

Ghiduri pentru animații subtile, naturale și accesibile

Principii Generale

DO:

  • Animații subtile și naturale
  • Easing consistent
  • Respectă preferințele de reduce-motion
  • Durată scurte (120-300ms)

DON'T:

  • Nu anima totul
  • Nu folosi mișcări mari
  • Nu perturba fluxul de citire
  • Nu folosi bounce/spring pentru UI serios

Durată Recomandate

Fast: 120-140ms

Pentru hover states, micro-interacțiuni

Medium: 180-220ms

Pentru butoane, carduri, transitions standard

Slow: 250-300ms

Pentru modals, dropdowns, page transitions

Easing Curves

ease-out

cubic-bezier(0.16, 1, 0.3, 1)

Pentru elemente care apar

ease-in

cubic-bezier(0.32, 0, 0.67, 0)

Pentru elemente care dispar

ease-in-out

cubic-bezier(0.4, 0, 0.2, 1)

Pentru transitions bidirecționale

Animații pentru Componente

Card Hover

Hover over this card to see the effect

hover:scale-[1.01] transition-all duration-200

Button Hover

hover:opacity-90 active:scale-[0.98] transition-all duration-200