Motion

Tokens e padrões de animação para toda UI Koder — 5 curvas de easing, 5 durações canônicas, padrões de transição e o contrato de reduced-motion.

Ler a spec de Motion →

Curvas de easing

Toda transição determinística usa uma das cinco curvas canônicas. O SVG traça a curva; a caixa ao lado reproduz o movimento ao clicar.

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

Default para mudança on-screen — cor, posição, tamanho.

--ease-decelerate cubic-bezier(0, 0, 0, 1)

Entrada — elemento chegando à tela (modal, drawer entrando).

--ease-accelerate cubic-bezier(0.3, 0, 1, 1)

Saída — elemento deixando a tela (modal fechando, drawer saindo).

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

Movimento de alta atenção — container transform, coreografia hero.

--linear linear

Apenas para movimento indefinido — loaders, progresso, looping.

Curvas conforme specs/themes/motion/easing-duration.kmd §R2. Clique em qualquer caixa para reproduzir.

Tokens de duração

Cinco durações canônicas cobrindo de acknowledgment (instant) até coreografia hero de marketing (long). Defaults mostrados batem com o preset material3; presets como terminal_classic sobrescrevem para 0 ms.

--motion-instant 50 ms

0–50 ms

Focus ring, início de ripple, ack imediato.

--motion-fast 150 ms

100–200 ms

Hover, toggle de switch, press de botão.

--motion-medium 250 ms

200–300 ms

Entrada/saída de modal, slide de drawer.

--motion-slow 400 ms

300–500 ms

Multi-elemento coordenado (FAB morph), transição de página.

--motion-long 600 ms

500–700 ms

Coreografia de onboarding, animação hero (só em landings).

Tokens conforme specs/themes/motion/easing-duration.kmd §R1. Clique em qualquer barra para reproduzir.

Padrões de transição

Sete padrões com previews CSS-only — paridade completa Material a partir de transitions.kmd §R1. Gestos stateful (interrupção mid-flight, drag-to-dismiss) seguem no track de embed Flutter Web.

Fade

fast · standard

Aparecer/desaparecer sem implicação espacial. Default para mudanças só de opacidade.

Scale

medium · decelerate

Elemento crescendo para a tela — modal, FAB expandindo, badge.

Slide

medium · decelerate

Drawer, bottom sheet, transição de página. Decelerate na entrada, accelerate na saída.

Container transform

slow · emphasize

Card ou thumbnail se transforma na página de detalhe — transição shared-element característica do Material.

Shared axis

medium · standard

Navegação por etapas (onboarding, wizard, step indicator). Saída desliza+fade out; entrada desliza+fade in no mesmo eixo.

Push / Pop

medium · decelerate

Navegação por pilha (back gesture mobile). Pane de entrada desliza sobre o anterior, que escurece e recua levemente.

Cross-fade

fast · standard

Troca de tab dentro do mesmo contexto. Velho e novo sobrepõem brevemente.

Amostragem de specs/themes/motion/transitions.kmd §R1. Catálogo completo de padrões →

Estados de interação

Coreografia por estado de transitions.kmd §R2 — duração + easing quando o usuário interage com o elemento. Cada demo replaya a animação definida na spec ao clique.

Hover

fast · standard

Ponteiro entra/sai. Cor ou elevação varia rapidamente; sem mudança espacial.

Foco

instant · standard

Foco do teclado chega. Anel fade-in em 50 ms — instantâneo, nunca atrasado.

Press

fast in · medium out

Toque ou clique. Scale 0.97 no entry rápido; volta a 1 no medium — o rebote é sentido.

Arraste

medium · standard

Início do arraste — elevação +2 com leve rotação. Final do arraste espelha de volta.

Seleção

fast · standard

Item escolhido. Fundo tinge no fast — overlay accent em mix 28%.

Disabled

medium · standard

Opacidade fade a 0.38 — valor padrão Material para disabled. Pointer-events seguem ativos no demo pra você poder replay.

Fonte: specs/themes/motion/transitions.kmd §R2.

Spring physics

Tokens de spring aproximam movimento físico via `linear()` keyframes do CSS. Overshoot e assentamento são visíveis comparado às transições cubic-bezier acima. Browsers sem suporte a linear() degradam pra ease-out.

Spatial · fast

--kds-motion-spring-spatial-fast

Settle preciso, ~700 ms. Use em movimentos pequenos: slide de chip, deslocamento de thumb de switch.

Spatial · default

--kds-motion-spring-spatial-default

Overshoot visível. Use em movimentos de card ou panel inteiro onde o rebote ler como fisicalidade.

Effect · default

--kds-motion-spring-effect-default

Para efeitos não-espaciais (fade, scale, mudança de cor). Curva mais apertada; sem overshoot.

3 de 6 tokens mostrados — catálogo completo e bindings Compose/Flutter em physics.kmd §springs →

Animação orientada por scroll

`animation-timeline: scroll()` / `view()` ligam o progresso da animação à posição do scroll. A blob abaixo morfa conforme entra e sai da viewport — sem loop temporal, o usuário no controle.

Chromium/Safari/Firefox modernos; browsers antigos veem blob estática via fallback @supports.

Reduced motion

Quando o sistema operacional reporta `prefers-reduced-motion: reduce`, toda animação colapsa para instantâneo. Segurança vestibular não é opcional — o mesmo conteúdo deve continuar comunicando mudança de estado sem movimento.

Default (motion habilitado)

Bola pulsa em 600 ms com curva ease-standard.

Com preferência reduced-motion

Mesmo conteúdo, zero animação — duração colapsa para 0 ms.

Contrato: spec/themes/motion/physics.kmd §R1. Ler o contrato reduced-motion →

Motion de widgets

Motion canônico aplicado a formas concretas de UI — como cada tipo de widget anima num produto Koder. Previews CSS-only; implementações em produção vivem em `engines/sdk/koder_kit`.

Relógio

Face analógica com varredura de ponteiro segundos/minutos/horas. Timing linear pra cada ponteiro.

Calendário

May

Grid do mês vira na entrada da página. RotateY + tween de opacidade.

Contador

9 9 9

Dígitos rolam pra cima com stagger pra o olho ler o número montando.

Form (foco)

Name
Email
Phone

Ring de foco propaga pelos campos quando o tab navega linha a linha.

Linha de tabela

NameStatus
AlphaOK
BetaOK
GammaOK

Highlight de linha varre top-to-bottom no final de filter / sort.

Card flip

Aa
★

Card pivota 180° em rotateY pra revelar verso. Use pra troca de contexto.

Galeria de fotos

Slide horizontal entre fotos. Para no slide ativo.

Vídeo (play)

Ícone de play pulsa em idle pra convidar interação sem competir por atenção.

Date picker

15/05/2026
May 2026

Popup cai do campo com pequeno overshoot, depois assenta.

Barra de progresso

Determinada preenche end-to-end; indeterminada varre segmento de 30% infinitamente.

Carrossel

Auto-avança entre slides em cadência fixa; dots rastreiam o ativo.

Slider

Thumb cresce no press, desliza pela track, fill acompanha.

Reordenar cards

≡
≡
≡

Drag-and-drop pra reordenar. Card erguido escala + ganha sombra; o vizinho desliza pra preencher o vão. Padrão Material 3.

Progresso circular

Anel determinado preenche 0→75% com timing easing; anel indeterminado gira infinitamente com arco de 25%.

Clique em qualquer demo pra replay da animação.

Motion criativo

Composições multicolor elaboradas — bandas de aurora, roda de cores, lava lamp, confete, equalizer, glitch RGB-split, anel neon, mosaico. Vai além de widgets utilitários.

Aurora

3 bandas de gradiente coloridas ondulando em ciclos defasados. Atmosfera de hero / fundo de empty-state.

Roda de cores

Spinner conic-gradient mostrando o ciclo de 10 matizes. Loading / theme picker.

Lava lamp

4 blobs coloridos morfam + flutuam; blur + filtro de contraste mistura tudo numa massa orgânica.

Confete

18 partículas coloridas caindo com rotação + stagger. Sucesso / celebração.

Equalizer

12 barras coloridas pulando em cadências desincronizadas. Playback de áudio / indicador de atividade.

Glitch

KDS KDS KDS KDS

Camadas RGB-split oscilando em stepped timing. Estética cyber / erro / redacted.

Anel neon

Halo conic-gradient girando em volta de núcleo escuro. Avatar / brand mark / indicador de foco.

Mosaico

Células coloridas 5×5 flipando em stagger. Splash de loading / refresh de dados / transição.

Clique em qualquer demo pra começar. Tudo CSS-only; reduced-motion desabilita.

Reveal effect

Highlight radial seguindo o cursor. Passe o mouse em qualquer tile abaixo e o highlight acompanha o ponteiro. Signature pointer-only — desabilitado por reduced-motion + ignorado em touch.

Fonte: specs/themes/motion/reveal.kmd.