Movimento

Nada muda num salto, e nada se mexe sem ninguém pedir. Ligado à energia (o que acontece se vê acontecendo) e ao "nunca barulhento".

Toda mudança de estado é uma transição

Cores de dia para noite, espaço na troca de densidade, tamanho quando o conteúdo cresce, o mouse por cima. Uma duração só e uma curva que começa macia e pousa macia. O CSS base do Feitio já faz isso em todo elemento.

Papel colocado

É como chega o que flutua: um recorte assentando na mesa, com um leve giro e a sombra se formando, com um quique pequeno. Só quando alguém age.

Um papel por vez

Quando uma ação faz várias coisas aparecerem, só uma chega como papel colocado: a que fala com a pessoa, como o aviso de que deu certo. As outras entram deslizando, como uma linha nova numa lista, que abre espaço e empurra as de baixo. Dois papéis caindo juntos disputam o olho e parecem bagunça.

Movimento reduzido

Quando o sistema pede menos movimento, não há nenhum. Nem transição, nem papel colocado.

Nada se mexe sem ninguém pedir

Onde a transição desliga

Coisas que se mexem a cada instante, como arrastar, desenhar, redimensionar ou rolar uma lista enorme, não podem esperar 320ms: a peça ficaria atrás do dedo. Nessas áreas, data-motion="direct" desliga a transição. Fora delas, a regra continua.