Documentation
Everything you need to know about using Clover animations in your Next.js projects.
Introduction
Clover is a collection of copy-paste text animations built with Framer Motion and Tailwind CSS. They are designed to be lightweight, performant, and easily customizable directly from your codebase.
Unlike typical libraries, Clover doesn't require you to install a heavy npm package. You simply copy the component code you need and drop it into your project.
Getting Started
1. Install Dependencies
Clover relies on Framer Motion for animations. Make sure you have it installed.
2. Configure Tailwind
Ensure your tailwind.config.js is set up correctly. Most Next.js projects are ready out of the box.
How to Use
Browse & Choose
Explore the Presets page to find an animation that fits your vibe. Use the new search feature to find specific styles like 'Glitch' or 'System'.
Install via Terminal
The fastest way to get started. Copy the command from the 'Install' section of any preset (e.g. `npx shadcn@latest add ...`) and run it. This maps the component directly to your project using the shadcn CLI.
Customize & Preview
Want to tweak it first? Click 'Try' on any preset to open the Playground. Adjust parameters like Duration, Stagger, and Blur in real-time.
Manual Integration
For full control, head to the Playground's 'Code Preview'. Copy the raw React code and paste it into your codebase (e.g., `components/TextAnim.tsx`). Just ensure `framer-motion` is installed in your project.
Common Questions
Can I use this with plain React?
Yes! While the examples use Next.js, the core components are standard React + Framer Motion. Just remove any Next.js specific imports like 'next/font'.
Is it free?
100%. Clover is open source and free to use in personal and commercial projects.