Movi- mento

Durações, curvas e as animações de IA. Toda animação respeita prefers-reduced-motion.

Animações de IA

Gradiente âmbar → roxo só enquanto a IA trabalha ou acabou de entregar.

Pensando…

animate-shimmer-text

Gerando

animate-border-spin

Entregue

shadow-ai-glow

animate-border-spinborder-spin 2.8s linear infinite

Borda cônica girando durante geração

animate-shimmer-textshimmer-text 2.4s ease-in-out infinite

Texto 'pensando'

animate-delivered-pulsedelivered-pulse 2s cubic-bezier(0.45, 0, 0.55, 1) forwards

Pulso âmbar/roxo ao concluir

animate-bubble-inbubble-in 0.55s ease-out forwards

Entrada de mensagem de chat

Passe o mouse para ver cada duração.

duration-(--duration-instant)100ms

Hover, press

duration-(--duration-fast)150ms

duration-(--duration-base)200ms

Transições de estado

duration-(--duration-moderate)300ms

duration-(--duration-slow)500ms

Entradas de painel

duration-(--duration-slower)700ms

Reveals de landing

ease-incubic-bezier(0.4, 0, 1, 1)

ease-outcubic-bezier(0, 0, 0.2, 1)

Entradas

ease-emphasizedcubic-bezier(0.22, 1, 0.36, 1)

Movimentos grandes que precisam parecer macios: painel entrando, altura do chat, texto da IA chegando. Sai rápido e assenta devagar

ease-in-outcubic-bezier(0.4, 0, 0.2, 1)

Padrão (mais usado)

ease-smoothcubic-bezier(0.25, 0.46, 0.45, 0.94)

ease-springcubic-bezier(0.34, 1.56, 0.64, 1)

Leve overshoot — pop de elementos

ease-pulsecubic-bezier(0.45, 0, 0.55, 1)

Pulsos e respiração