movimentos/motion-feels

Sensações de Movimento (Motion feels)

A maioria das pessoas não sabe nomear uma curva de easing, mas sabe exatamente como quer que algo se sinta: calmo, enérgico, caro, divertido. Essas palavras se encaixam em dezenas de curvas, então uma IA adivinha, e o trabalho se transforma em rodadas de "muito rápido", "menos saltitante". Esta skill dá a você e à pessoa um conjunto compartilhado de nomes, cada um vinculado a valores exatos. Eles falam em sensações; você cuida dos números.

Foi escrita para sites: marketing, portfólio, conteúdo e lojas. Para UI de aplicativos ou produtos, as mesmas sensações funcionam; use o extremo rápido de cada velocidade.

Três partes:

• Sensação (Feel): como se move. Uma velocidade mais uma curva de easing. As 14 sensações estão abaixo.
• Efeito: o que se move. Revelação de máscara, parallax, marquee e assim por diante. Veja references/feels.md.
• Botões de Ajuste (Dials) modificam uma sensação: velocidade, parada, overshoot, espaçamento (stagger), distância, atraso, gatilho, intensidade.

Fale em sensações, não em curvas

A pessoa pode não conhecer nenhum termo de movimento, e não deveria precisar.

• Nunca peça para eles escolherem um easing, uma curva, uma bezier ou um número de milissegundos. Pergunte sobre a sensação, com uma imagem da vida cotidiana: "Deve pousar suavemente, como colocar um copo, ou ultrapassar um pouco e se estabilizar, como uma mola?"
• Descreva as sensações pelo que elas parecem, não como são feitas: "começa rápido e desliza até parar", não "power4.out".
• Os nomes das sensações são um atalho opcional. Mencione um de passagem ("Vou chamar essa sensação de Luxuoso") para que eles possam reutilizá-lo. Nunca exija e nunca corrija as palavras deles.
• Os números vão no código, mais uma linha curta para quem construir ou revisar: "Para desenvolvedores: 1.2 s, cubic-bezier(0.22, 1, 0.36, 1)." Deixe essa linha de fora quando ninguém for construir a partir dela, por exemplo, quando a pessoa está apenas escolhendo uma direção.
• As palavras neste arquivo são para você, não para eles. Nomes de botões de ajuste e termos CSS ficam fora de suas respostas. Diga "o pequeno pulo no final" (overshoot), "um após o outro" (stagger), "o quão longe ele se move" (distância), "o quão suavemente ele para" (parada), "quanto se move de uma vez" (intensidade), "de onde ele cresce" (origem), "para pessoas que desligam animações" (movimento reduzido).
• Uma linha de tradução, depois construa. Não dê uma palestra e não atrase o trabalho. A única exceção é uma palavra que as tabelas abaixo marcam como "perguntar", onde uma pergunta simples vem primeiro.
• Ver é melhor que descrever. Quando eles não conseguirem colocar em palavras, ofereça a página de demonstração (assets/feels-demo.html, abra em qualquer navegador) ou construa uma alternância A/B rápida e deixe-os escolher.

As 14 sensações

Sensação	Aparência	Velocidade	CSS	GSAP
Crocante	um interruptor de luz: parada instantânea e limpa	150 ms	cubic-bezier(0.33, 1, 0.68, 1)	power2.out
Estalante	dispara e pousa firmemente	300 ms	cubic-bezier(0.16, 1, 0.3, 1)	expo.out
Mola	rápido, um pequeno overshoot, depois se estabiliza	600 ms	spring, bounce 0.3 (linear() em CSS)	sem spring; mais próximo back.out(1.2)
Suave	uma porta de correr: início suave, parada suave	500 ms	cubic-bezier(0.65, 0, 0.35, 1)	power2.inOut
Gentil	flutua e desaparece até parar	700 ms	cubic-bezier(0.61, 1, 0.88, 1)	sine.out
Luxuoso	início rápido, um longo deslize lento até o repouso	1.2 s	cubic-bezier(0.22, 1, 0.36, 1)	power4.out
Flutuante	uma pena: lento e uniforme, sem início ou fim claros	2 s	cubic-bezier(0.37, 0, 0.63, 1)	sine.inOut
Dramático	uma cortina de teatro: aumenta, corre, se estabiliza	1.2 s	cubic-bezier(0.87, 0, 0.13, 1)	expo.inOut
Estilingue	um estilingue: puxa para trás primeiro, ultrapassa o final	800 ms	cubic-bezier(0.68, -0.6, 0.32, 1.6)	back.inOut(1.7)
Pop	pula além do final e volta uma vez	450 ms	cubic-bezier(0.34, 1.56, 0.64, 1)	back.out(1.7)
Elástico	gelatina: balança algumas vezes, depois se estabiliza	1 s	linear() de elastic.out	elastic.out(1, 0.3)
Quicar	uma bola caindo	900 ms	linear() de bounce.out	bounce.out
Mecânico	uma esteira rolante: mesma velocidade do início ao fim	1 s	linear	none
Quadros	um flipbook: pula quadro a quadro	900 ms	steps(6)	steps(6)

Uma sensação mantém sua curva em qualquer velocidade: "Mola a 400 ms" é a forma Mola, apenas mais rápida. Molas (springs), elástico e quicar em CSS puro são uma lista linear() amostrada da curva; valores prontos para colar estão em references/feels.md ("Código Pronto para Colar"). O "bounce" da mola é o valor 0–1 usado pelo SwiftUI e Motion (taxa de amortecimento = 1 − bounce).

Como trabalhar

1. Verifique o elemento primeiro: com que frequência é visto e se é uma parte da interface ou um movimento de vitrine ("Antes de escolher uma sensação" abaixo). Isso pode significar menos movimento, ou nenhum.
2. Traduza as palavras deles em sensação + botões de ajuste + efeito, usando as tabelas em "Palavras do dia a dia" abaixo. Se duas ou três sensações se encaixarem, faça uma pergunta simples (ou mostre uma alternância A/B).
3. Diga o plano em uma linha simples antes de construir, por exemplo, "As linhas do título deslizam para cima e se estabilizam lentamente enquanto você rola até elas, uma vez (sensação: Luxuoso)." Eles podem redirecionar antes que algo seja construído.
4. Construa com duração, atraso e easing em variáveis CSS ou um objeto de configuração (--motion-dur, --motion-ease, --motion-stagger), para que cada ajuste seja uma mudança de um número. Siga as "Regras de construção".
5. Relate em palavras simples, com os valores para desenvolvedores. Para uma mudança, mostre antes → depois: "um pouco mais lento: 1.2 s → 1.8 s". Mantenha os valores anteriores, para que "voltar" os restaure exatamente.
6. Mantenha a consistência: uma vez que as sensações do site estejam claras, sugira salvá-las como sua paleta de movimento (abaixo) nos tokens de design do projeto, para que cada seção se mova da mesma forma.

Uma paleta de movimento para todo o site

Um bom site usa 2 ou 3 sensações, não 14: uma para partes da interface, uma para momentos de vitrine e talvez um acento. Quando alguém não consegue descrever o movimento, peça a marca em três palavras e proponha uma paleta em uma linha.

A marca parece	Vitrine	Interface	Acento
calma, confiável, cuidadosa (saúde, finanças, jurídico)	Gentil	Crocante	—
premium, editorial (moda, arquitetura, hotéis)	Luxuoso	Crocante	Dramático para o primeiro carregamento
ousada, rápida, tecnológica (startups, SaaS, esporte)	Estalante	Crocante	Pop
amigável, divertida (crianças, comida, apps de consumo)	Mola	Estalante	Pop ou Quicar
criativa, expressiva (estúdios, portfólios, agências)	Luxuoso ou Dramático	Estalante	Estilingue
sonhadora, natural (bem-estar, beleza, meditação)	Flutuante para loops, Gentil para conteúdo	Crocante	—
retrô, crua (jogos, música, brutalista)	Quadros	Crocante	Marquee Mecânico

Antes de escolher uma sensação

Com que frequência é visto?

Um movimento que encanta na primeira vez atrapalha na décima. Combine a quantidade de movimento com a frequência com que o visitante encontra o elemento.

Frequência	Exemplos	Movimento
Em toda página, toda visita	links de nav, cabeçalho, botões, links de rodapé, campos de formulário	pequeno e rápido: Crocante, ou apenas uma mudança de cor. O foco do teclado mostra o anel de foco imediatamente, sem movimento. Uma entrada nestes (um nav deslizando ao carregar) é reproduzida apenas na primeira visualização da página.
Em cada clique	transições de página	curto: 600 ms ou menos, mesmo quando a marca é lenta e premium
Uma vez por página	hero, revelações de seção, cartões de estudo de caso, estatísticas contando	a sensação completa. As revelações de rolagem são reproduzidas uma vez, não novamente cada vez que você rola de volta.
Uma vez por visita	loader de introdução, momento hero do primeiro carregamento	espaço para Dramático e encantamento. Execute loaders apenas na primeira visualização da página.

O acento da paleta vai no resultado, não no controle: um pressionar de "adicionar ao carrinho" permanece rápido (Crocante), e a contagem do carrinho é o que faz o Pop.

Quando alguém pedir uma sensação lenta em um elemento de toda página, construa a versão rápida e diga em uma linha como mudar: "Os links de navegação estão em todas as páginas, então os mantive rápidos; a versão lenta é uma troca de um número." Não espere por uma resposta; a decisão é deles.

Parte da interface ou vitrine?

• Partes da interface: o visitante está tentando fazer algo. Dropdowns de nav, menu mobile, abas, acordeões, modais, tooltips, feedback de formulário, filtros. Mantenha-os em 300 ms ou menos, seja qual for a sensação; menus mobile e modais podem ir até 400 ms. As saídas são executadas em cerca de 75% da entrada: coloque a duração mais curta no estado fechado.
• Movimento de vitrine: define o clima. Hero, revelações de seção, revelações de imagem, marquees, loops de fundo, o momento do primeiro carregamento. A velocidade da própria sensação se aplica, e longo é aceitável.

Padrão por elemento (quando nenhuma sensação é dada)

A velocidade aqui substitui a velocidade da própria sensação. Qualquer feedback ("parece barato", "muito saltitante") substitui esses padrões.

Elemento	Sensação	Velocidade
botões, links, alternâncias, hovers, tooltips	Crocante	150 ms
dropdowns de nav, abas, hovers de cartão	Estalante	250 ms
acordeões, FAQs	Suave	300 ms
menu mobile, modais, gavetas, folhas	Mola	400 ms
arrastar e soltar	Mola	600 ms
slides, carrosséis, coisas se movendo pela tela	Suave	500 ms
revelações de texto e imagem (fade up 24 px, espaçamento 60–80 ms)	a sensação de vitrine da paleta; sem pista, Estalante	a própria da sensação
transições de página	Suave	600 ms
momento hero, primeiro carregamento	Dramático	1.2 s
loops de fundo, formas ambientes	Flutuante	2 s
estados de sucesso, badges	Pop	450 ms
loaders, marquees, movimento acionado por rolagem	Mecânico	conforme necessário

Palavras do dia a dia

Use estas para traduzir. A coluna da esquerda é o que as pessoas realmente dizem; nada disso requer conhecimento de movimento. Em uma conversa mais longa, mostre cada tradução uma vez, depois aplique-a silenciosamente.

Palavras → sensações

Eles dizem	Leia como	Pergunte quando
premium, caro, elegante, chique, alto padrão, luxo, "como uma revista", "lento e confiante"	Luxuoso	—
suave, fluido, amanteigado, contínuo, sedoso, "desliza"	Suave (movendo-se através) ou Gentil (aparecendo)	o elemento não torna óbvio: "Deslizar uniformemente do início ao fim, ou chegar suavemente e desaparecer até parar?"
macio, calmo, relaxado, quieto, aconchegante, quente, "não chamativo"	Gentil	—
sutil, quase imperceptível, "não quero que as pessoas notem"	Crocante (interface) ou Gentil (conteúdo)	—
sonhador, arejado, flutuante, sem peso, "como uma pena", "como debaixo d'água"	Flutuante	—
rápido, ligeiro, responsivo, instantâneo, clicável, firme, "como um interruptor de luz"	Crocante (coisas pequenas) ou Estalante (coisas maiores)	o tamanho não está claro
enérgico, vigoroso, ousado, confiante, forte, "pousa com força", "com atitude"	Estalante	—
natural, físico, vivo, "como um aplicativo de telefone", "como um objeto real"	Mola	—
divertido, lúdico, fofo, amigável, insolente, feliz	Pop, Mola ou Elástico	quase sempre: "Um pequeno pulo além do final, uma estabilização suave com mola, ou um balanço de geleia?"
saltitante	Quicar (pousa e quica) ou Pop / Mola (ultrapassa, estabiliza)	sempre: "Quicar como uma bola caindo, ou ultrapassar um pouco e estabilizar?"
gelatinoso, balançante, emborrachado, esponjoso, tremelicante	Elástico	—
cinematográfico, épico, "como um filme", poderoso, pesado, "um momento uau", grande revelação	Dramático	—
cartunesco, "enrola primeiro", "como um estilingue"	Estilingue	—
robótico, constante, estável, "como uma esteira rolante", ticker	Mecânico	—
retrô, irregular, stop-motion, pixel, glitch, "como um videogame antigo", flipbook	Quadros	—
moderno, legal, bonito, limpo, "faça um pop", "faça ficar bonito", "adicione alguma animação", "faça ficar vivo"	nada por si só	sempre: ofereça as 3 sensações que se encaixam no contexto em palavras simples, ou peça a marca em três palavras ("faça um pop" pode significar a sensação Pop, ou apenas "mais perceptível")

Feedback → botões de ajuste

| Eles dizem | Mudança | |---|---|---| | muito rápido, apressado, "piscou e você perdeu", "não consigo ver" | Velocidade × 1.5 | | muito lento, lento, lerdo, "demora uma eternidade", "estou esperando por isso" | Velocidade ÷ 1.5. Em uma parte da interface, verifique também o limite de 300 ms. | | abrupto, áspero, irregular, "se choca no lugar", "para de repente demais" | Parada: mais suave, um passo ao longo de power2.out → power3.out → power4.out → expo.out (valores CSS em references/feels.md) | | mole, "arrasta no final", "rasteja", "demora muito para estabilizar" | Parada: mais firme (cauda mais curta), ou mais rápido | | fraco, sem vida, "precisa de mais força", "não pousa" | Parada mais firme + Velocidade ÷ 1.5, ou mude para Estalante | | muito saltitante, "demais", cafona, infantil, "exagerado" | Overshoot reduzido em um passo: Pop cubic-bezier(0.34, 1.56, 0.64, 1) → um pouco cubic-bezier(0.34, 1.4, 0.64, 1) → nenhum (Estalante) | | parece barato | geralmente movimento demais: Distância reduzida e Overshoot reduzido; se for lento, Velocidade ÷ 1.5 | | irregular, trêmulo, "aparece do nada" | cresce do nada ou overshoot: comece em scale(0.95) (Regras de construção), Overshoot reduzido em um passo, Distância reduzida | | rígido, robótico, morto, "precisa de mais vida" | Overshoot aumentado em um passo, ou mude para Mola | | chato, monótono, "nada acontece", "não percebo" | Espaçamento (Stagger) aumentado, ou Distância aumentada | | ocupado, perturbador, "coisa demais acontecendo", irritante | Intensidade reduzida, Espaçamento reduzido. Irritante geralmente significa que é visto com muita frequência: verifique "Com que frequência é visto?" | | "me deixa tonto", "me faz sentir mal" | remova parallax, escalas grandes e movimentos de longa distância; verifique o fallback de movimento reduzido | | começa muito tarde / cedo demais | Atraso reduzido / aumentado em passos de 100 ms | | parece estranho, "não está certo", "não sei o que está errado" | não adivinhe: pergunte "É a velocidade, a forma como começa, a forma como para, ou o pequeno pulo no final?", ou mostre duas versões lado a lado |

Regras de construção

• Mova com transform, desapareça com opacity. Não anime width, height, top, left ou margin; eles gaguejam ao rolar. Para acordeões, grid-template-rows: 0fr → 1fr é a exceção aceita (o conteúdo fica em um wrapper interno com min-height: 0; overflow: hidden). Nunca transition: all; nomeie as propriedades.
• Nunca cresça a partir do nada. Inicie scale-ins em scale(0.95) com opacity: 0 (0.9 para pops maiores), nunca scale(0).
• Cresça a partir de um canto ou borda com transform-origin. O padrão é center.
• Desempenho: testes de pintura em 60 fps (uma mudança de cor que dispara layout é tão cara quanto uma animação de width); prefira opacity + transform a qualquer outra propriedade; não tenha mais de 8–10 animações ao mesmo tempo. Reduza a contagem para 3–4 em dispositivos de baixo custo (o recurso de mídia prefers-reduced-data e a dica de cliente ECT ajudam).
• Movimento reduzido (prefers-reduced-motion: reduce): defina animation-duration: 0.01 ms e transition-duration: 0.01 ms para qualquer animação decorativa, mas deixe a duração intacta para movimentos que carregam significado (um slider de depoimentos, uma contagem regressiva de envio, um acordeão de FAQ). O estado oculto ainda está oculto (display: none ou opacity: 0). Teste.
• Parallax, escala e zoom: cuidado com enjoo. Nunca aplique parallax sem will-change: transform no elemento e overflow-x: hidden; overflow-y: auto; (no wrapper de rolagem, não no body) e presuma que uma em cada 5 pessoas vai desativá-lo.
• Toque: nunca aplique uma animação acionada por hover a toque sem verificar a largura (window.innerWidth > 768 ou consulta de mídia com hover: hover e pointer: fine).

Sobre este arquivo

• Estrutura do projeto: coloque references/ e assets/ dentro de skills/ no repositório. references/feels.md contém as tabelas completas com código pronto para colar (curvas CSS linear(), todos os 14 feels em uma folha de estilos, consultas de mídia de movimento reduzido, GSAP). assets/feels-demo.html é auto-contido, abre em qualquer navegador.
• Licença: MIT.
• Manutenção: atualizações vão para nusakutnjak/motion-feels; envie uma issue para sugestões de novas sensações, ajustes de curva ou palavras que estão faltando.
• Limitações: giros 3D e animações SVG ainda são casos especiais que esta skill não cobre diretamente (o efeito de revelação de máscara com clip-path é o mais próximo).

---

Traduzido do arquivo original em inglês. Consulte o original para a lista de verificação de revisão e exemplos de código completos.