153 animações com prompt pronto pra colar na IA

Movimento com peso de verdade, feito com física de mola em vez de tempo fixo. Cada efeito vem em CSS, React e um prompt já com a curva exata, e com as proibições que impedem a IA de inventar.

Tem uma coisa que separa site que parece caro de site que parece template: como as coisas se movem. E quase ninguém acerta isso, porque a gente pede animação pra IA e ela devolve aquele movimento duro, de robô, que começa e para no mesmo lugar.

O kinetics.colorion.co ataca exatamente isso. E o jeito como ele entrega o material é o motivo desse post existir.

O que é, em português

São 153 animações de interface construídas com física de mola em vez de tempo fixo.

O site diz isso com todas as letras: molas respondem à interrupção de um jeito que o tempo fixo não consegue.

São 3 categorias com 51 efeitos cada:

• Interação e entrada: botão magnético, contador que estica, arrastar pra dispensar, segurar pra confirmar, slider elástico. É o que a pessoa faz com o dedo ou o mouse.
• Retorno e estado: o que a tela faz pra te dizer que deu certo. Confirmação, erro, item que entra na lista. Sem isso, o clique parece morto.
• Superfície e movimento: como painel, cartão e camada se movem. A gaveta que sobe, o card que empilha, a camada que empurra a outra.

A regra de escolha é o inverso do que a IA faz. A IA anima o título. Você anima a resposta do clique. Se a pessoa apertou um botão, aquele botão precisa ter peso. Se nada foi clicado, a página pode ficar quieta. Movimento sem causa é o que deixa o site com cara de template.

A parte que me fez escrever isso: cada efeito vem com o prompt pronto

Todo efeito ali tem três abas: CSS, React e Prompt.

A terceira é uma instrução pronta pra você colar na sua IA. E ela não é genérica, vem com os números exatos da física daquele efeito. Olha o que está escrito na aba do primeiro cartão:

Build a card that expands and collapses its height when clicked.
Animate only the height with a single spring-like
cubic-bezier(0.34, 1.56, 0.64, 1) over ~0.5s so it gently overshoots
before settling, and fade in secondary text with a small delay once
expanded. Pure CSS transitions, no JS height measurement,
no max-height hacks.

Repara em duas coisas. Primeiro: a curva cubic-bezier(0.34, 1.56, 0.64, 1) está no prompt. Aquele 1.56 é o que faz a animação passar do ponto e voltar, é o segredo do movimento com peso, e você não teria como adivinhar.

Segundo, e mais importante: o prompt termina com proibições. "Puro CSS, sem medir altura no JS, sem gambiarra de max-height." Ele não só diz o que fazer, diz o que não aceitar.

Como usar, na prática

• Abrir o site e rolar até achar o efeito que você quer (são 153, todos rodando ao vivo)
• Clicar em View code no cartão do efeito
• Se você programa: pegar a aba CSS ou React e colar no projeto
• Se você usa IA: pegar a aba Prompt e colar no Claude, no Cursor ou no v0
• Ajustar rigidez e amortecimento no topo da página até o movimento ficar do jeito que você quer, e só então copiar

Esse último passo é o que quase ninguém faz. Os controles no alto da página mudam a mola de todos os efeitos ao mesmo tempo. Você calibra o movimento uma vez e copia já ajustado, em vez de copiar o padrão e ficar chutando depois.

Rigidez é o quão rápido a mola puxa. Amortecimento é o quão rápido ela para de oscilar. Se você sobe os dois, o movimento fica nervoso. Se você desce os dois, fica mole, de aplicativo barato. O número que já vem no prompt de cada cartão é o ponto de partida calibrado por quem fez o efeito. Por isso a regra do prompt que eu monto embaixo: não troque a curva. A curva é o efeito.

O prompt que eu montaria por cima

Se você vai pedir várias animações de uma vez, use o prompt deles dentro deste aqui:

Aplica esta animação no elemento <X> do meu projeto.

<cola o prompt do Kinetics>

Não troca a curva cubic-bezier. Ela é o efeito.
Se der pra fazer em CSS puro, faz. Sem biblioteca extra.
Quem pediu menos movimento recebe a troca na hora.
Me mostra o CSS final antes de repetir em outro lugar.

Quem pediu menos movimento recebe a troca na hora. É acessibilidade, e quase todo mundo esquece. Tem gente que sente enjoo com movimento na tela, e o navegador avisa quando a pessoa pediu pra reduzir isso.

Antes de sair copiando

• Não tem licença declarada. O repositório é público e tem 515 estrelas, mas não achei arquivo de licença. Pra projeto interno e teste, sem problema. Pra página de cliente, eu perguntaria antes.
• É animação, não componente. Não espere botão pronto nem formulário. É o movimento, que você aplica no que já tem.
• A última atualização do repositório foi em agosto. É projeto vivo, mas novo, nasceu em junho deste ano.

Por que isso importa

Movimento é a coisa que mais separa interface cara de interface barata, e é a que menos gente sabe pedir. Você não precisa aprender física de mola. Precisa de alguém que já calibrou e te entregou o número.

É isso que esse site faz. Bora testar.