Fireworks Background š
A vibrant fireworks animation background component for celebrations and special occasions, with colorful bursts and effects.
Massive Fireworks
Get your background heavily populated with fireworks.
Pumki UIClick the background to trigger a spectacular fireworks display.
Installation
Usage
1import { FireworksBackground } from '@/components/pumki-ui/backgrounds/bg-fireworks';1<FireworksBackground />Example
Basic Fireworks
The simplest fireworks background with default styling.
Pumki UIFaster and larger Fireworks
Pumki UICircular effect with uniform dimensions and velocity.
Pumki UIProps
| Prop | Type | Default | Description |
|---|---|---|---|
particleSize? | { min: number; max: number } | number | { min: 1, max: 5 } | Size of each particle (range or fixed). |
particleSpeed? | { min: number; max: number } | number | { min: 2, max: 7 } | Speed of each particle (range or fixed). |
fireworkSize? | { min: number; max: number } | number | { min: 2, max: 5 } | Size of the firework burst (range or fixed). |
fireworkSpeed? | { min: number; max: number } | number | { min: 4, max: 8 } | Speed of the firework burst (range or fixed). |
population? | number | 1 | Number of fireworks on screen. |
color? | string | string[] | randColor() | Color(s) of the fireworks. |
canvasProps? | React.HTMLAttributes<HTMLCanvasElement> | - | Props passed to the canvas element. |
className? | string | - | Custom class names for the container. |
children? | React.ReactNode | - | Custom children to render inside. |
Last updated on