Fireworks Background
A background component that displays a fireworks animation.
Click on the background to make it rain fireworks.
Installation
Examples
With a high population
With a high size and speed
Circle effect with a fixed size and speed
Props
| Prop | Type | Default |
|---|---|---|
children? | React.ReactNode | - |
className? | string | - |
canvasProps? | React.HTMLAttributes<HTMLCanvasElement> | - |
color? | string | string[] | randColor() |
population? | number | 1 |
fireworkSpeed? | { min: number; max: number } | number | { min: 4, max: 8 } |
fireworkSize? | { min: number; max: number } | number | { min: 2, max: 5 } |
particleSpeed? | { min: number; max: number } | number | { min: 2, max: 7 } |
particleSize? | { min: number; max: number } | number | { min: 1, max: 5 } |
Credits
- Credits to Matt Cannon for the inspiration
Bubble Background
An interactive background featuring smoothly animated gradient bubbles, creating a playful, dynamic, and visually engaging backdrop.
Gradient Background
A background component featuring a subtle yet engaging animated gradient effect, smoothly transitioning colors to enhance visual depth.