Pulse Particle Button
A button with a circular animated pulse particle effect, powered by Framer Motion. Perfect for attention-grabbing actions and modern UIs.
Demo
Interactive Demo
Hover or tap the button to see the animated pulse particle effect.
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 interfaces. These interfaces are used by all button components for consistent props and TypeScript support.
typescript
Loading...
Usage
Import and use the PulseParticleButton 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
- Animated pulse particle effect in a circular arrangement
- Customizable button label and style
- Framer Motion-powered transitions
- TypeScript support
- Production-ready and accessible
Dependencies
Next.js 15+
Framer Motion
Tailwind CSS (recommended)
TypeScript (recommended)