Design System · Motion

Motion.

Animações catalogadas. Cada interação tem duração e curva específicas. Passe o mouse para ver.

Hover lift

Hover

transition-all duration-300 + hover:-translate-y-[6px]

transition-all duration-300 + group-hover:w-[72px]

duration-[1500ms] + group-hover:scale-[1.06]

opacity: 0 → 1

transform: translateY(24px) → translateY(0)

transition: 0.9s cubic-bezier(0.16, 1, 0.3, 1)

trigger: IntersectionObserver (useScrollReveal hook)

stagger: data-reveal="delay-1" através de "delay-5"

Sistema online