{"id":14461807,"url":"https://github.com/codse/animata","last_synced_at":"2025-05-14T07:08:15.965Z","repository":{"id":246505375,"uuid":"812866687","full_name":"codse/animata","owner":"codse","description":"Bring your site to life with easy to use animation \u0026 interaction code. Copy. Paste. Animate. ","archived":false,"fork":false,"pushed_at":"2025-04-25T09:59:06.000Z","size":3987,"stargazers_count":1858,"open_issues_count":12,"forks_count":166,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-07T01:24:23.523Z","etag":null,"topics":["animation","css-animations","hacktober","hacktoberfest","hacktoberfest-accepted","interaction","nextjs","react","tailwindcss"],"latest_commit_sha":null,"homepage":"https://animata.design","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-10T03:46:56.000Z","updated_at":"2025-05-06T11:49:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"550c6ef6-f4a8-45c8-80c9-881c4223ce3c","html_url":"https://github.com/codse/animata","commit_stats":{"total_commits":270,"total_committers":41,"mean_commits":6.585365853658536,"dds":0.5740740740740741,"last_synced_commit":"1c0c1ddc9f0161dbf8dd9038c27ac35bd5b6ab0f"},"previous_names":["codse/animata"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codse%2Fanimata","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codse%2Fanimata/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codse%2Fanimata/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codse%2Fanimata/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codse","download_url":"https://codeload.github.com/codse/animata/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253550346,"owners_count":21926095,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css-animations","hacktober","hacktoberfest","hacktoberfest-accepted","interaction","nextjs","react","tailwindcss"],"created_at":"2024-09-01T22:01:15.369Z","updated_at":"2025-05-14T07:08:15.908Z","avatar_url":"https://github.com/codse.png","language":"TypeScript","readme":"\u003csection id=\"logo\" align=\"center\"\u003e\n  \u003ca href=\"https://animata.design/\"\u003e\n    \u003cpicture\u003e\n        \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://github.com/user-attachments/assets/8d3da830-d1b0-4327-8695-edcea3534743\"\u003e\n        \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://github.com/user-attachments/assets/44be7a44-2e1f-4b90-a238-5cd10a376748\"\u003e\n        \u003cimg alt=\"Animata Logo\" src=\"https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png\" width=\"512\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n  \u003csection\u003e\n    \u003ca href=\"https://discord.gg/STYEh3UW\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/discord-join-7289DA.svg?logo=discord\u0026longCache=true\u0026style=flat\" /\u003e\n    \u003c/a\u003e\n  \u003c/section\u003e\n  \u003cp\u003eHandcrafted ✍️ interaction animations and visual effects sourced from across the internet 🛜, ready for you to copy and paste into your project seamlessly.\u003c/p\u003e\n  \u003csection id=\"padges\" margin=\"50\"\u003e\n    \u003ch3\u003eBuilt with\u003c/h3\u003e\n    \u003ca href=\"https://nextjs.org/?ref=animata.design\"\u003e\n      \u003cimg alt=\"Next.js\" src=\"https://img.shields.io/badge/Next.js-000?logo=nextdotjs\u0026logoColor=fff\u0026style=for-the-badge\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://reactjs.org/?ref=animata.design\"\u003e\n      \u003cimg alt=\"React.js\" src=\"https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://tailwindcss.com/?ref=animata.design\"\u003e\n      \u003cimg alt=\"Tailwind\" src=\"https://img.shields.io/badge/Tailwind_CSS-0b1120?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=38bdf8\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.framer.com/motion/?ref=animata.design\"\u003e\n      \u003cimg alt=\"Framer Motion\" src=\"https://img.shields.io/badge/Framer-1a1a1a?style=for-the-badge\u0026logo=framer\u0026logoColor=white\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.typescriptlang.org/?ref=animata.design\"\u003e\n      \u003cimg alt=\"Typescript\" src=\"https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://vercel.com/?ref=animata.design\"\u003e\n      \u003cimg alt=\"Vercel\" src=\"https://img.shields.io/badge/Vercel-000000?style=for-the-badge\u0026logo=vercel\u0026logoColor=white\"/\u003e\n    \u003c/a\u003e\n  \u003c/section\u003e\n\u003c/section\u003e\n\u003cbr\u003e\n\n### Table of Contents\n1. [Introduction](#introduction)\n   - [What is Animata?](#what-is-animata)\n   - [What is not Animata?](#what-is-not-animata)\n2. [Getting Started](#getting-started)\n   - [Requirements](#requirements)\n   - [Setup Instructions](#setup-instructions)\n     - [Folder Structure (Recommended)](#folder-structure-recommended)\n     - [Install Dependencies](#install-dependencies)\n     - [Create Utility Functions](#create-utility-functions)\n3. [Contributing](#contributing)\n4. [Authors](#authors)\n5. [License](#license)\n   \n## Introduction\n\n### What is Animata?\nWelcome to Animata, a free and open-source collection of hand-crafted animations, effects, and interactions that you can seamlessly integrate into your project with a simple copy and paste. The animations are built using TailwindCSS and React.js, so they can be easily customized to fit your project's design.\n\n### What is not Animata?\nAnimata is not a full-fledged UI library like Material-UI or Chakra-UI. It is a collection of animations and effects that you can use to enhance your project's design. You can also use Animata alongside other UI libraries or design systems (you will need to set up TailwindCSS for this).\n\n## Getting Started\nYou don't need to install it as a dependency instead you can simply copy and paste the code, as shadcn/ui, into your project. However, you still need to install the other dependency that the code needs.\n\n### Requirements\n- [TailwindCSS](https://tailwindcss.com/docs/installation): For styling.\n- [Framer Motion](https://www.framer.com/motion/) (Optional): For complex animations.\n- [Lucide Icons](https://lucide.dev/) or [Radix Icons](https://www.radix-ui.com/icons) (Optional): Use for icons, or replace with any other icon library or SVGs.\n\n### Setup Instructions\n#### Folder Structure (Recommended)\n\n```bash\n/\n  /components\n  /ui\n```\n\nwhere `/` is the root of your project, `/components` is where you keep your components and the project has been set up using paths in the `tsconfig.json` file.\n\n```json\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@/*\": [\"./*\"]\n    }\n  }\n}\n```\n#### Install Dependencies\nInstall the required dependencies, if you haven't already:\n\n```sh\nnpm install tailwind-merge clsx lucide-react tailwindcss-animate\n```\n\nAdd `tailwindcss-animate` to plugins in `tailwind.config.js` file:\n\n```js\nmodule.exports = {\n  plugins: [require(\"tailwindcss-animate\")],\n};\n```\n\n### Create Utility Functions\nCreate utils.ts file in the libs folder and paste the following code:\n\n```ts\nimport { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n \nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n```\n\n#### NOTE\n1. If you see something that has been imported but not mentioned in the documentation, then it is a dependency you need to install. If it starts with @/ then it is Animata's component else it is an external dependency. In such a case, you can submit a PR to update the documentation.\n2. If something is not working, the docs probably miss the tailwind.config.js updates. You can look for the entries that have been added to the tailwind.config.js in Animata's source code. You can create an issue or submit a PR to update the documentation.\n\n## Contributing\n\nContributions to Animata are always welcome!\n\n- 📥 Pull requests and 🌟 Stars are always welcome.\n- Read our [contributing guide](https://animata.design/docs/contributing) to get started,\n  or find us on [Discord](https://discord.gg/STYEh3UW), we will take the time to guide you.\n\n## Authors\nHeartfelt gratitude goes to each of you for your amazing contributions to this project. Your hard work, creativity, and dedication have been nothing short of incredible. Whether it was coding, debugging, testing, or sharing ideas, every effort made a significant difference.\n\n\u003csection id=\"#Authors\"\n  \u003ca href=\"https://github.com/codse/animata/graphs/contributors\"\u003e\n    \u003cimg src=\"https://contrib.rocks/image?repo=codse/animata\u0026max=100\"/\u003e\n  \u003c/a\u003e\n\u003c/section\u003e\n\n## License\n\nThis project is licensed under the MIT License. see the [LICENSE](https://github.com/codse/animata/blob/main/LICENSE.md) file for details.\n","funding_links":[],"categories":["TypeScript","Animations"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodse%2Fanimata","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodse%2Fanimata","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodse%2Fanimata/lists"}