Índice do artigofaltam 7 min de leitura
Animar por duração é dizer quanto tempo o movimento leva. Animar por física é dizer como o objeto se comporta e deixar o tempo ser consequência. A escolha entre os dois modelos decide mais sobre a sensação da interface do que a biblioteca escolhida.
Quase toda biblioteca de animação pede duas coisas: quanto tempo dura e qual a curva de aceleração. O react-spring não pergunta nenhuma das duas. Ele pergunta qual a tensão da mola, quanto atrito existe e qual a massa do objeto, e o tempo do movimento nasce daí.
Este artigo explica o que essa diferença muda na prática, onde ela ganha, onde ela atrapalha, quais plataformas a biblioteca cobre e como interpretar o histórico de manutenção do projeto antes de colocá-lo em um produto que precisa durar.
Resumo do artigo
- O react-spring define movimento por tensão, atrito e massa, e não por duração, o que o torna forte em interação interrompível como arrastar e soltar.
- A biblioteca é MIT e mantida pelo coletivo Poimandres, o mesmo grupo por trás do react-three-fiber e do zustand.
- A mesma API de hooks atende navegador, React Native, three.js, Konva e Zdog, o que é raro entre bibliotecas de animação.
- A manutenção é em rajadas: entre outubro de 2025 e abril de 2026 o repositório recebeu três commits, e só em maio de 2026 recebeu 98.
O react-spring anima por física, não por duração
O react-spring é uma biblioteca de animação para React descrita pelo próprio repositório como uma biblioteca multiplataforma que coloca a física de molas em primeiro lugar. Na prática, você declara de onde e para onde o valor vai, e a biblioteca calcula cada quadro simulando uma mola presa entre os dois pontos.
O código mais simples possível deixa a diferença clara: useSpring({ from: { opacity: 0 }, to: { opacity: 1 } }) devolve um objeto de estilos que você aplica em um animated.div. Não há duração nenhuma nessa declaração. O movimento termina quando a mola para de oscilar.
Duração e mola resolvem problemas diferentes
A vantagem real da física aparece quando a animação é interrompida no meio. Se o usuário arrasta um cartão e solta antes do fim, uma animação por duração precisa decidir o que fazer com o tempo restante, e a solução costuma ser reiniciar uma nova animação a partir da posição atual, o que produz um salto perceptível. A mola não tem esse problema: ela já carrega a velocidade do gesto e continua dali, porque velocidade é parte do estado do sistema.
A desvantagem é simétrica e igualmente concreta. Se o requisito é que três elementos entrem em cena com 200 ms de diferença entre eles e a sequência termine em exatamente 1,2 segundo, física é a ferramenta errada. Você vai ficar ajustando tensão e atrito até chegar perto do tempo desejado, quando poderia ter escrito o tempo.
| Situação | Física de molas | Duração e easing |
|---|---|---|
| Arrastar e soltar | Continua com a velocidade do gesto | Precisa recalcular a partir da posição |
| Interrupção no meio | Redireciona sem salto | Encadeia uma nova animação |
| Sequência com tempo fechado | Tempo é consequência, não parâmetro | Tempo é declarado direto |
| Sincronizar com áudio ou vídeo | Difícil de garantir | Previsível por construção |
| Ajuste fino por designer | Requer entender três parâmetros | Curva e tempo são familiares |
Comparação conceitual entre os dois modelos de animação, com base na documentação do react-spring.
Física de molas perde em três das cinco linhas, e é isso que define o seu domínio. Ela não é um modelo superior ao de duração: é o modelo certo para interface manipulável por gesto, e o modelo errado para tudo que precisa de relógio.
A adoção real está no pacote por alvo
Existe uma armadilha de leitura nos números do react-spring, e ela vale para quem compara bibliotecas por download. O pacote chamado react-spring é um guarda-chuva que instala tudo, e a própria documentação recomenda instalar apenas o alvo desejado. Por isso, olhar só o nome principal subestima a biblioteca em quase cinco vezes.
Fonte: registro npm, downloads da semana de 18 a 24/08/2026, e API do GitHub para o repositório pmndrs/react-spring.
Com 5,5 milhões de downloads semanais no pacote web, o react-spring está entre as bibliotecas de animação mais usadas do ecossistema React. Isso importa por uma razão prática: quando algo quebra em produção, existe massa crítica de gente que já passou pelo mesmo problema.
A mesma API atravessa navegador, React Native e three.js
O react-spring é a única das bibliotecas de animação mais adotadas que trata React Native e renderização 3D como alvos de primeira classe, com a mesma API de hooks. O README lista cinco alvos suportados, cada um em seu pacote.
| Alvo | Para que serve |
|---|---|
| @react-spring/web | Navegador, animando estilos de elementos do DOM. É o pacote da maioria dos projetos. |
| @react-spring/native | Aplicativos React Native, com a mesma escrita de hooks usada na web. |
| @react-spring/three | Cenas 3D via react-three-fiber, animando posição, rotação e escala de objetos. |
| @react-spring/konva | Gráficos em canvas 2D via react-konva. |
| @react-spring/zdog | Ilustração pseudo-3D via react-zdog. |
Fonte: README oficial do repositório pmndrs/react-spring, leitura de 28/08/2026.
Para um time que mantém produto web e aplicativo com o mesmo código de domínio, isso reduz uma categoria inteira de retrabalho: a lógica de animação vira portável junto com o resto. Não é um caso comum, mas quando é o seu caso, nenhuma outra biblioteca dessa lista oferece o mesmo.
A cadência de versões é em rajadas, e isso precisa entrar na conta
O react-spring não é abandonado e não é continuamente mantido. Ele é mantido em rajadas, e essa é a característica que mais deveria pesar na decisão de adotá-lo em produto de longa vida. O histórico público do repositório mostra o padrão com clareza.
-
Última versão antes da pausa
Publicada em 18 de setembro de 2025, no fim de um mês com cinco commits no repositório.
-
Sete meses com três commits
Um commit em dezembro, um em fevereiro, um em março. Nenhuma versão publicada no npm em todo o período.
-
A rajada
98 commits em um único mês e duas versões publicadas em dias consecutivos, 21 e 22 de maio de 2026.
-
Estabilização e próxima major
A versão estável atual sai em 24 de junho de 2026, três dias depois do primeiro beta da 11.
A leitura correta dessa linha do tempo não é medo, é planejamento. Se o seu projeto depende de correção rápida de bug em dependência, ou se você precisa de compatibilidade garantida com a próxima versão do React no dia em que ela sair, a rajada é um risco a mitigar, seja fixando versão, seja mantendo um fork interno. Se a animação do produto é estável e você não precisa de recurso novo, o padrão é irrelevante: código que funciona não para de funcionar porque ninguém commitou em fevereiro.
Quem mantém: o coletivo Poimandres
O react-spring pertence à Poimandres, coletivo de código aberto que aparece no GitHub como pmndrs e mantém alguns dos projetos mais usados do ecossistema React, incluindo o react-three-fiber, para 3D, e o zustand, para gerenciamento de estado. Isso é diferente de um projeto de mantenedor único, tanto no bom quanto no mau sentido.
No bom sentido, o projeto não morre se uma pessoa mudar de emprego, e a lista de contribuidores mostra três nomes com volume relevante de trabalho acumulado em vez de um só. No mau sentido, projeto de coletivo raramente tem alguém contratualmente responsável por responder issue em prazo, e o trabalho acontece quando algum mantenedor tem disponibilidade. O padrão em rajadas da seção anterior combina com esse arranjo.
react-spring ou uma biblioteca de estado: onde cada uma cai
A comparação mais frequente é com bibliotecas de animação declarativas ligadas ao estado do componente. Elas se sobrepõem bastante, e o critério que separa de verdade tem dois eixos: quanto o tempo exato importa e quanto o usuário interfere no movimento.
O quadrante inferior direito é o território natural do react-spring: cartão que se arrasta, folha que se puxa de baixo para cima, item que se solta no meio do caminho e continua com a inércia do gesto. Fora dele, existem opções mais diretas, e o quadrante inferior esquerdo é o lembrete mais barato de todos: nem toda animação precisa de biblioteca.
Quando o react-spring não é a escolha certa
Três casos pedem outra coisa.
Equipe sem familiaridade com física. Ajustar tensão, atrito e massa até a interface parecer certa é um trabalho de tentativa e erro que não se resolve lendo documentação, e designers acostumados a curvas de easing não t êm vocabulário para pedir ajuste nesse modelo.
Animação de layout automática. Fazer um elemento animar suavemente entre duas posições calculadas pelo navegador, sem você declarar as coordenadas, é recurso pronto em outras bibliotecas e trabalho manual aqui.
Projeto que não é React. A biblioteca é construída em torno de hooks, e não existe caminho de uso fora do React.
Como decidir
- A interface tem gesto de arrastar, puxar ou soltar? Esse é o caso em que a física paga por si.
- Alguma animação precisa terminar em um tempo exato? Se sim, esse pedaço não deve usar mola.
- O produto tem versão em React Native ou cena 3D? Só aqui a mesma API atravessa as três.
- Seu processo aguenta uma dependência que fica meses sem publicar versão? Se não, fixe a versão e planeje a manutenção.
Se você respondeu sim para gesto e não precisa de tempo fechado, o react-spring é a escolha mais alinhada ao problema. Se a animação do seu produto é entrada, saída e transição de tela, existem caminhos com menos parâmetros para calibrar.
Precisa estruturar a interface do seu produto?
Solicite um orçamento e avance com arquitetura, escopo e entrega definidos.
Fontes e método
A apuração deste artigo foi feita em 28 de agosto de 2026, em fonte primária. Versões, datas de publicação e licença vêm do registro npm e do repositório pmndrs/react-spring. Estrelas, contribuidores e histórico de commits vêm da API do GitHub, com a contagem por mês feita sobre todos os commits desde 1 de junho de 2025. Alvos suportados e forma de instalação vêm do README oficial. Downloads referem-se à semana de 18 a 24 de agosto de 2026.
Nenhum teste de performance foi executado pela X-Apps para este artigo. O react-spring e os demais projetos citados são externos, sem relação comercial com a X-Apps.
Perguntas frequentes
É uma biblioteca de animação para React baseada em física de molas, em que o movimento é definido por tensão, atrito e massa em vez de duração e curva de easing.
Sim. O repositório pmndrs/react-spring está sob licença MIT, que permite uso comercial, modificação e redistribuição sem pagamento.
O recomendado é instalar o pacote do alvo, como @react-spring/web para navegador. O pacote guarda-chuva react-spring instala a biblioteca inteira.
Sim. A documentação oficial cobre react-dom, react-native, react-three-fiber, react-konva e react-zdog, com a mesma API de hooks.
O coletivo Poimandres, conhecido pelo identificador pmndrs, que também mantém o react-three-fiber e o zustand.
Não é melhor, é diferente. Física responde bem a interação que pode ser interrompida no meio, como arrastar; duração é mais previsível quando o tempo exato importa, como em uma sequência coreografada.
