Plasma Button
A glowing button with animated plasma-like particles. Perfect for sci-fi, gaming, and creative UIs.
Demo
Interactive Demo
Hover to see the animated plasma particles.
tsx
Loading...
Installation
Install the required dependencies to get started:
bash
Loading...
Type Integration
Important: Create a lib folder at the root of your project (not inside app/). Add a types.ts file with the following interface for consistent props and TypeScript support.
typescript
Loading...
Usage
Import and use the PlasmaButton 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. |
type | "button" | "submit" | "reset" | "button" | Button type attribute. |
Features
- Animated plasma-like particles in the background
- Orange glow and soft glassy effect
- Framer Motion-powered transitions
- Customizable label and style
- TypeScript support
- Accessible and production-ready
Dependencies
Next.js 15+
Framer Motion
Tailwind CSS (recommended)
TypeScript (recommended)