# codse/animata

Bring your site to life with easy to use animation & interaction code. Copy. Paste. Animate.

Repository: https://github.com/codse/animata
Canonical: https://ross.abutalabs.com/products/animata
Homepage: https://animata.design
Language: TypeScript
License: MIT
License Family: permissive
Topics: animation, interaction, nextjs, react, tailwindcss, css-animations, hacktoberfest, hacktoberfest-accepted, hacktober
Last push: 2026-08-05T05:28:15+00:00

## Health v2 (maintenance only)
Score: 88/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 96, release rhythm 95, longevity 58
- inputs: {"age_days": 814, "days_push": 28, "days_rel": 35, "gap_med": 2.5, "n_releases_24m": 11}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 2778, forks 231 (observed 2026-08-28T04:07:21.512781+00:00)

## What it is
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
- artifact type: library
- maturity: active
- function: animation, ui-components, frontend-framework, css-framework
- domain: web-development, frontend, web-design
- platform: cross-platform
- tags: copy-paste-components, react-components, tailwindcss, framer-motion, nextjs, open-source, animated-components, ui-snippets, hacktoberfest, typescript, web-server, nodejs

## Member repositories
- codse/animata (main) score 88

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:07:21.512781+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T08:16:29.669537+00:00, confidence not recorded.
  - readme: https://github.com/codse/animata (fetched 2026-08-28T04:07:21.512781+00:00, sha c18276fdafc6)
  - homepage: https://animata.design (fetched 2026-08-29T09:55:56.464263+00:00, sha 4128afc7ec19)
  - site_page: https://animata.design/docs/changelog (fetched 2026-08-29T09:55:56.466910+00:00, sha bc2d6aa5ee65)
  - site_page: https://animata.design/docs/text/typing-text (fetched 2026-08-29T09:55:56.468766+00:00, sha 902d5a47802b)
  - site_page: https://animata.design/docs/contributing (fetched 2026-08-29T09:55:56.470691+00:00, sha 12a2afa6f902)
  - site_page: https://animata.design/docs/background (fetched 2026-08-29T09:55:56.472374+00:00, sha 603255db7ddf)
  - site_page: https://animata.design/docs/background/animated-beam (fetched 2026-08-29T09:55:56.474212+00:00, sha 66662391da02)
  - site_page: https://animata.design/docs/background/blurry-blob (fetched 2026-08-29T09:55:56.476092+00:00, sha 3aebae2747e1)
  - site_page: https://animata.design/docs/background/boids-ecosystem (fetched 2026-08-29T09:55:56.477705+00:00, sha 061765cc7f22)
  - site_page: https://animata.design/docs/bento-grid (fetched 2026-08-29T09:55:56.479921+00:00, sha 403f7f61bd3e)
- Data as of 2026-08-30T08:39:29.467469+00:00.