Animata is live
FREEOpen source
animata
Hand-crafted ✍️ interaction animations and effects from around the internet 🛜 to copy and paste into your project.
Get startedStar us on GitHub
Awesomeness
Awesomeness
Awesomeness
Awesomeness
Bring your site to life with these ready to use animated components & interaction built using React, Framer Motion, and Tailwind CSS. 

Built with

import BoldCopy from "@/components/animata/text/bold-copy"
<|
Copy. Paste. Animate.

Regular updates

We are constantly adding new animations and effects to the library. You can subscribe to our newsletter to get notified.
Free &Open source

Light weight

Most of the effects are lightweight, single file, and built with TailwindCSS.
No longer wasting hours 🕕 looking for the inspiration or trying to write everything from scratch 📝.
time.saved = true;
frustration--;happiness++;productivity++;
Widgets2h 30m

Goal
15km4.5km

188 BPM

130 AVG

FAQ
FAQ

1
1
What is Animata?

Animata is a curated collection of hand-crafted animations, effects, and interactions that you can seamlessly integrate into your project with a simple copy and paste.

2
2
Who is this for?

Animata is designed for developers of all skill levels, from beginners to professionals, who want to enhance their websites with animations without spending extensive time on development.

3
3
How much does it cost?

Animata is completely free and open-source. You can use it in both personal and commercial projects.

4
4
Why should I care?

Small animations can significantly enhance the user experience by making websites more engaging and enjoyable. Animata offers a diverse collection of animations, effects, and interactions to elevate your projects effortlessly.

5
5
I can make these myself. Why should I use this?

While you certainly can create animations yourself, using Animata saves you time and effort. Plus, you can learn from our implementations and even contribute to improving them.

6
6
Sounds amazing, how do I use it?

Simply copy the code snippets provided on the Animata website and paste them into your project. It's that easy! Check out the documentation for more details.
Copy
Paste
animata~ bring your site to life ~