Clover is an open-source library of high-performance text animations. Unlike heavy animation libraries that require complex configuration, Clover provides copy-paste ready components that just work.
Each preset is built with Framer Motion and Tailwind CSS, designed to be dropped directly into your Next.js application.
Most text animations are either too simple (basic fades) or too complex (requiring WebGL or heavy 3rd party scripts). We wanted something in the middle—beautiful, performant, and easy to use.
What you get:
- 7+ Handcrafted presets (Typewriter, Glitch, Stagger, and more)
- Zero-config infrastructure
- Fully typed TypeScript components
- Works with shadcn/ui and Tailwind out of the box
| Typewriter | Modern Fade | System Glitch |
| Classical terminal feel | Clean, blurred entry | Digital artifacting |
| Editorial | Pop In | Cinematic |
| Elegant staggered rise | Spring-loaded scale | Slow, misty reveal |
Browse all presets at clover-kit.vercel.app/presets
If you're building landing pages, portfolios, or storytelling experiences and want your text to feel alive without spending hours on keyframes, Clover is for you.
You can install presets directly using the CLI:
npx shadcn@latest add https://clover-kit.vercel.app/registry/modern-fade.jsonOr just copy the code from the Playground.
Contributions welcome! If you want to add new presets, improve performance, or fix bugs, check out the GitHub repo.
This project is free and open source. If you find it helpful:
- Star the GitHub repo ⭐️
- Share it on X / Twitter
Created by Bharath
MIT License. Use it entirely free in your personal and commercial projects.