SYSLED — Motion & Animacoes

01 — Principios

Filosofia de Movimento

O motion da SYSLED e preciso, suave e proposital. Cada animacao tem uma funcao — guiar o olhar, confirmar uma acao ou revelar conteudo. Nunca animar por estetica pura.

Intencional

Toda animacao deve ter um proposito claro: feedback, orientacao ou hierarquia.

Natural

Movimentos baseados em fisica real. Ease-out para entradas, ease-in para saidas.

Rapido

A interface nunca deve parecer lenta. Duracoes curtas (150-400ms) sao o padrao.

02 — Curvas de Easing

Timing Functions

A SYSLED usa 4 curvas de easing padrao. Cada uma tem um contexto de uso especifico. Clique no codigo para copiar.

Standard

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

Curva padrao para a maioria das transicoes. Comeca rapido, desacelera suave.

Uso Principal

Enter (Decelerate)

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

Elementos entrando na tela. Comeca com velocidade maxima, desacelera ate parar.

Fade In / Slide In

Exit (Accelerate)

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

Elementos saindo da tela. Comeca devagar, acelera ate desaparecer.

Fade Out / Slide Out

Spring (Overshoot)

cubic-bezier(0.34, 1.56, 0.64, 1)

Leve overshoot para toasts, badges e notificacoes. Sensacao elastica e divertida.

Toasts / Notificacoes

/* Design Tokens — Easing SYSLED */
:root {
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);   /* Padrao geral */
  --ease-enter:     cubic-bezier(0, 0, 0.2, 1);      /* Entrada na tela */
  --ease-exit:      cubic-bezier(0.4, 0, 1, 1);      /* Saida da tela */
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1); /* Elastico */
}

Passe o mouse sobre os cards acima para ver as animacoes ao vivo.

03 — Duracoes

Escala de Tempo

Duracoes padronizadas em 5 niveis. Nunca use valores fora desta escala para manter consistencia.

Token	Valor	Uso	Exemplo
`--duration-instant`	`100ms`	Feedback imediato	Hover em botao, focus ring, toggle
`--duration-fast`	`200ms`	Transicoes pequenas	Tooltip, dropdown abrir, icon swap
`--duration-normal`	`300ms`	Transicoes padrao	Modal, sidebar, card expand
`--duration-slow`	`400ms`	Transicoes grandes	Page transition, skeleton reveal
`--duration-slower`	`600ms`	Animacoes decorativas	Scroll reveal, hero entrance

/* Design Tokens — Duracoes SYSLED */
:root {
  --duration-instant: 100ms;
  --duration-fast:    200ms;
  --duration-normal:  300ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
}

Regra: Nenhuma animacao de interface pode ultrapassar 600ms. Animacoes mais longas sao percebidas como travamento. Excecao: loading infinito (spinners, progress).

04 — Micro-Interacoes

Feedback Visual

Micro-interacoes confirmam acoes do usuario. Cada elemento interativo deve ter feedback visual imediato. Interaja com os exemplos abaixo.

Button Hover

translateY(-2px) + shadow
100ms standard

Outline Hover

background-color + translateY(-2px)
100ms standard

Toggle Switch

translateX + bg color
300ms standard

Hover Card

Card Lift

translateY(-6px) + shadow
350ms standard

Fade + Slide

opacity + translateY
400ms enter

Press Scale

scale(0.9) on press
200ms spring

05 — Loading States

Estados de Carregamento

4 padroes de loading para diferentes contextos. Use o mais apropriado conforme o tempo de espera e o tipo de conteudo.

Spinner

Dots

Skeleton

Progress

Padrao	Quando Usar	Duracao Tipica	Easing
Spinner	Acoes do usuario (submit, save)	Indeterminado	`standard`
Dots	Mensagens, chat, typing indicator	Indeterminado	`standard`
Skeleton	Carregamento de listas, cards, paginas	300-800ms	`ease-in-out`
Progress	Upload, download, processos longos	Determinado	`standard`

/* Spinner SYSLED */
.sysled-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--blue-primary);
  border-radius: 50%;
  animation: spin 0.8s var(--ease-standard) infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton Shimmer */
.sysled-skeleton {
  background: linear-gradient(90deg,
    var(--gray-200) 25%,
    var(--gray-100) 50%,
    var(--gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

06 — Transicoes de Tela

Page Transitions

Regras para transicoes entre paginas, abertura de modais e troca de conteudo.

Transicao	Animacao	Duracao	Easing
Navegacao entre paginas	Fade + Slide Up	`400ms`	`--ease-enter`
Abertura de Modal	Scale(0.95→1) + Fade	`300ms`	`--ease-enter`
Fechamento de Modal	Scale(1→0.95) + Fade Out	`200ms`	`--ease-exit`
Sidebar abrir	SlideX(-100%→0)	`300ms`	`--ease-standard`
Sidebar fechar	SlideX(0→-100%)	`200ms`	`--ease-exit`
Toast entrada	SlideY(100%→0)	`300ms`	`--ease-spring`
Toast saida	SlideY(0→100%)	`200ms`	`--ease-exit`
Dropdown	ScaleY(0→1) + Fade	`200ms`	`--ease-enter`
Scroll Reveal	Fade + SlideY(20px→0)	`600ms`	`--ease-enter`

/* Modal Enter */
.modal-enter {
  animation: modalIn 300ms var(--ease-enter) forwards;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Modal Exit */
.modal-exit {
  animation: modalOut 200ms var(--ease-exit) forwards;
}
@keyframes modalOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

/* Scroll Reveal */
.scroll-reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity 600ms var(--ease-enter),
              transform 600ms var(--ease-enter);
}
.scroll-reveal.visible {
  opacity: 1; transform: translateY(0);
}

07 — Acessibilidade

Reduced Motion

Respeitar a preferencia do usuario por movimento reduzido e obrigatorio. Toda animacao deve ter fallback.

/* Obrigatorio em todo projeto SYSLED */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Regra WCAG 2.3.3: Nenhuma animacao pode piscar mais de 3 vezes por segundo. Loading spinners e progress bars estao isentos pois sao movimento continuo, nao piscante.

Cenario	Com Motion	Reduced Motion
Card hover	translateY + shadow transition	Apenas mudanca de cor
Modal	Scale + fade (300ms)	Aparece instantaneo
Scroll reveal	Fade + slide (600ms)	Conteudo visivel direto
Spinner	Rotacao continua	Texto "Carregando..."
Skeleton	Shimmer animado	Cor solida estatica

08 — Do's & Don'ts

Uso Correto vs Incorreto

Correto

Animacao sutil e rapida (300ms), com proposito claro

Incorreto

Animacao em loop infinito sem motivo funcional

Correto

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

Usar curvas de easing padrao da SYSLED

Incorreto

transition: all 0.5s linear

Easing "linear" em transicoes de interface — parece mecanico

Correto

200ms

Fechar modal mais rapido (200ms) que abrir (300ms)

Incorreto

2000ms

Animacoes longas (>600ms) em transicoes de UI

09 — Design Tokens

Referencia Completa

Copie este bloco de tokens CSS para incluir em qualquer projeto SYSLED. Contem todas as variaveis de motion.

/* ==========================================
   SYSLED Motion Design Tokens
   v2.0 — Março 2026
   ========================================== */

:root {
  /* Easing */
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:     cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:      cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Duration */
  --duration-instant: 100ms;
  --duration-fast:    200ms;
  --duration-normal:  300ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  /* Common Transitions */
  --transition-button:  all var(--duration-instant) var(--ease-standard);
  --transition-card:    all 350ms var(--ease-standard);
  --transition-modal:   all var(--duration-normal) var(--ease-enter);
  --transition-fade:    opacity var(--duration-normal) var(--ease-standard);
  --transition-slide:   transform var(--duration-normal) var(--ease-enter);
  --transition-color:   color var(--duration-instant) var(--ease-standard),
                        background-color var(--duration-instant) var(--ease-standard);
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}