3D Confetti Animation Button
A futuristic, interactive button with 3D confetti, quantum field, and holographic effects. Powered by Framer Motion and Lucide React for stunning micro-interactions.
Demo
Interactive Demo
Hover or click the button to see the 3D confetti and quantum effects.
tsx
Loading...
Installation
Install the required dependencies to get started:
bash
Loading...
Usage
Import and use the ThreeDConfettiAnimation component in your Next.js application:
tsx
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Button label or content to display inside the animated button. |
className | string | "" | Additional CSS classes for the button. |
type | "button" | "submit" | "reset" | "button" | Button type attribute. |
onClick | () => void | undefined | Callback fired when the button is clicked. |
Features
- 3D confetti burst animation on hover
- Quantum field and holographic background layers
- Animated orbital rings and particles
- Prismatic, multi-layered button with glowing effects
- Customizable icon and label
- Framer Motion-powered transitions
- TypeScript support
- Dark mode compatible
- Production-ready and accessible
Dependencies
Next.js 15+
Framer Motion
Lucide React
Tailwind CSS (recommended)
TypeScript (recommended)