Bring your site to life with easy to use animation & interaction code. Copy. Paste. Animate.
MIT License
Welcome 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.
Animata 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).
You 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.
/
/components
/ui
where /
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.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}
Install the required dependencies, if you haven't already:
npm install tailwind-merge clsx lucide-react tailwindcss-animate
Add tailwindcss-animate
to plugins in tailwind.config.js
file:
module.exports = {
plugins: [require("tailwindcss-animate")],
};
Create utils.ts file in the libs folder and paste the following code:
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Contributions to Animata are always welcome!
Heartfelt 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.
This project is licensed under the MIT License. see the LICENSE file for details.