Если устал собирать анимации вручную — есть готовое решение. Animata — open-source коллекция из 154+ анимированных React-компонентов, которые работают по принципу «скопировал и забыл».
Как это устроено
Никакого npm install. Никаких зависимостей, которые нужно обновлять. Ты просто берёшь нужный файл, кладёшь в репозиторий — и дальше это твой код, твои правила.
Что внутри
- Проверено в реальных продуктах — каждый компонент прошёл через живое приложение, прежде чем попасть в библиотеку. Никаких демо-ради-демо.
- Доступность из коробки — фокус с клавиатуры, лейблы для скринридеров и фолбэки для
prefers-reduced-motionуже вшиты до того, как ты скопировал хоть строчку. - Open source, community-driven — проект набрал 2 700+ звёзд на GitHub и продолжает развиваться силами сообщества.
Когда это пригодится
Если нужно быстро добавить жизни в интерфейс — загрузочные состояния, hover-эффекты, переходы — и не хочется тратить время на велосипед. Особенно актуально для небольших команд, где дизайн-система ещё не выросла до собственной библиотеки компонентов.
Посмотреть все компоненты и исходники можно на animata.design.