pmndrs/react-spring

Última atividade de origem registrada: 21 de maio de 2026 às 15:38

Catálogo do SkillsMP atualizado: 12 de novembro de 2026 às 12:52

skills coletadas: 14

Estrelas no GitHub: 29.273
Forks no GitHub: 1.237

Instalar com um assistente de IA

Copie este prompt para o assistente de IA que você usa.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/pmndrs/react-spring.

README do repositório

Arquivo de origem do README: README.md

Ler o README original

Expandir README completo

<p align="center"> <img src="https://i.imgur.com/QZownhg.png" width="240" /> </p> <br /> <h1 align="center">react-spring</h1> <h3 align="center">A spring-physics first animation library <br>giving you flexible tools to confidently cast your ideas</h3> <br> <p align="center"> <a href="https://www.npmjs.com/package/@react-spring/web" target="_blank"> <img src="https://img.shields.io/npm/v/@react-spring/web.svg?style=flat&colorA=000000&colorB=000000" /> </a> <a href="https://www.npmjs.com/package/@react-spring/web" target="_blank"> <img src="https://img.shields.io/npm/dm/@react-spring/web.svg?style=flat&colorA=000000&colorB=000000" /> </a> <a href="https://discord.gg/AXfNsGx64f" target="_blank"> <img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff" alt="Chat on Discord"> </a> </p> <br> `react-spring` is a cross-platform spring-physics first animation library. It's as simple as: ```jsx const styles = useSpring({ from: { opacity: 0 }, to: { opacity: 1 } }) <animated.div style={styles} /> ``` Just a small bit about us: - **Cross-Platform**: We support `react-dom` and `react-three-fiber`. - **Versatile**: Be declarative with your animations or if you prefer, imperative. - **Spring-Physics First**: By default animation use springs for fluid interactivity, but we support durations with easings as well. There's a lot more to be had! Give it a try and find out. ## Getting Started ### ⚡️ Jump Start ```shell # Install the target you need npm install @react-spring/web # or, for react-three-fiber npm install @react-spring/three ``` ```jsx import { animated, useSpring } from '@react-spring/web' const FadeIn = ({ isVisible, children }) => { const styles = useSpring({ opacity: isVisible ? 1 : 0, y: isVisible ? 0 : 24, }) return <animated.div style={styles}>{children}</animated.div> } ``` It's as simple as that to create scroll-in animations when value of `isVisible` is toggled. ### 📖 Documentation and Examples More documentation on the project can be found [here](https://www.react-spring.dev). Pages contain their own [examples](https://react-spring.dev/hooks/use-spring#demos) which you can check out there, or [open in codesandbox](https://codesandbox.io/s/github/pmndrs/react-spring/tree/main/demo/src/sandboxes/card) for a more in-depth view! --- ## 📣 What others say <p align="middle"> <img src="assets/testimonies.jpg" /> </p> ## Used by <p align="middle"> <a href="https://nextjs.org/"><img width="285" src="assets/projects/next.png"></a> <a href="https://codesandbox.io/"><img width="285" src="assets/projects/csb.png"></a> <a href="https://aragon.org/"><img width="285" src="assets/projects/aragon.png"></a> </p> And [many others...](https://github.com/pmndrs/react-spring/network/dependents) ## Backers Thank you to all our backers! 🙏 If you want to join them here, then consider contributing to our [Opencollective](https://opencollective.com/pmndrs). <a href="https://opencollective.com/pmndrs#backers" target="_blank"> <img src="https://opencollective.com/pmndrs/backers.svg?width=890"/> </a> ## Contributors This project exists thanks to all the people who contribute. <a href="https://github.com/react-spring/react-spring/graphs/contributors"> <img src="https://opencollective.com/pmndrs/contributors.svg?width=890" /> </a>

Carregando o README do repositório…

Skills neste repositório

Desenvolvedores de software

1 categorias ocupacionais · 100% classificado

Desenvolvedores de software

Validate current branch follows feature branch naming conventions

Idioma do texto original: inglês

2026-05-21

Mostrando 14 de 14 skills coletadas.