TextAnimated Button
A playful button with animated swapping effect for each character and a highlight bar, powered by Framer Motion.
Demo
Interactive Demo
Hover to see animated letter transition and visual feedback.
Loading...
Installation
Install the required dependencies to get started:
bash
Loading...
Type Integration
Create a lib folder at the root of your project and add a types.ts file with the following interface. This interface is used by all button components for consistent props and TypeScript support.
typescript
Loading...
Usage
Import and use the SplitButton component in your Next.js application:
tsx
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Button content (usually text or icon). |
onClick | () => void | undefined | Click handler for the button. |
className | string | "" | Additional CSS classes for the button. |
disabled | boolean | false | Disables the button if true. |
type | "button" | "submit" | "reset" | "button" | Button type attribute. |
Features
- Smooth animated transition of text on hover using Framer Motion
- Customizable with Tailwind utility classes via `className` prop
- Built-in hover state for dynamic effects
- TypeScript support with strict prop types
- Lightweight and easy to integrate
- Supports `button`, `submit`, and `reset` types
Dependencies
Next.js 15+
Framer Motion
Tailwind CSS (recommended)
TypeScript (recommended)