codse/animata
Bring your site to life with easy to use animation & interaction code. Copy. Paste. Animate. observed · 2026-08-28
Health v2 · maintenance only
88/100
- Activity 96
- Release rhythm 95
- Longevity 58
How is this computed?
round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10) — computed 2026-09-03. Adoption (stars, forks) is never an input.
- gap_med: 2.5
- age_days: 814
- days_rel: 35
- days_push: 28
- n_releases_24m: 11
Adoption not part of the score
2778 stars · 231 forks observed · 2026-08-28
What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-30, confidence not recorded
Animata is a free, open-source collection of 155+ hand-crafted animated React components and visual effects built with TailwindCSS, React, and Framer Motion. Components are designed to be copied and pasted directly into any project rather than installed as a dependency, similar to shadcn/ui's approach but focused on animations and interactions.
Use cases
- add animated text effects like typing, glitch, and gradient text to a react site
- copy-paste animated background components for a landing page
- find ready-made animated buttons, cards, and tabs for tailwind projects
- create animated hero sections and bento grids with react and tailwind
- add loading spinners, skeletons, and progress indicators to a website
- browse open source animation snippets to learn framer motion techniques
When to choose
- you use React with TailwindCSS and want full ownership of animation code in your project
- you need polished micro-interactions and visual effects without pulling in a heavy UI library
- you want to customize animations freely since the source code lives in your project
- you're building a marketing site or landing page that needs visual flair
When to avoid
- you need a complete component library with consistent theming like Material-UI or Chakra-UI
- your project doesn't use React or TailwindCSS
- you need accessible, tested components with versioned releases and long-term support guarantees
- you prefer installing animations as an npm package rather than vendoring source code
Facets
library · maturity active
animation ui-components frontend-framework css-framework web-development frontend web-design cross-platform copy-paste-components react-components tailwindcss framer-motion nextjs open-source animated-components ui-snippets hacktoberfest typescript web-server nodejs
10 sources
- readme: https://github.com/codse/animata · fetched 2026-08-28 · c18276fdafc6
- homepage: https://animata.design · fetched 2026-08-29 · 4128afc7ec19
- site_page: https://animata.design/docs/changelog · fetched 2026-08-29 · bc2d6aa5ee65
- site_page: https://animata.design/docs/text/typing-text · fetched 2026-08-29 · 902d5a47802b
- site_page: https://animata.design/docs/contributing · fetched 2026-08-29 · 12a2afa6f902
- site_page: https://animata.design/docs/background · fetched 2026-08-29 · 603255db7ddf
- site_page: https://animata.design/docs/background/animated-beam · fetched 2026-08-29 · 66662391da02
- site_page: https://animata.design/docs/background/blurry-blob · fetched 2026-08-29 · 3aebae2747e1
- site_page: https://animata.design/docs/background/boids-ecosystem · fetched 2026-08-29 · 061765cc7f22
- site_page: https://animata.design/docs/bento-grid · fetched 2026-08-29 · 403f7f61bd3e
Member repositories
| Repository | Role | Health v2 |
|---|---|---|
| codse/animata | main | 88 |
For agents
Data as of 2026-08-30T08:39:29.467469+00:00 · Report a problem