Docs
Firework
Firework
Displays a beautiful Firework using canvas.
Installation
Copy and paste the Event Calendar code into your project.
API Reference
FireworksProvider Context
Context provider for fireworks configuration and state management.
Props
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | Child components, typically includes FireworksCanvas |
| initialConfig | FireworksConfig | Initial configuration object, optional |
useFireworks Hook
Provides methods and state for controlling fireworks effects.
const { paused, setPaused, config, updateConfig } = useFireworks();Return Values
| Property | Type | Description |
|---|---|---|
| paused | boolean | Whether the fireworks effect is currently paused |
| setPaused | (paused: boolean) => void | Set pause/resume state |
| config | FireworksConfig | Current configuration parameters |
| updateConfig | (newConfig: Partial<FireworksConfig>) => void | Update configuration parameters |
Configuration Options (FireworksConfig)
Options that can be configured through the useFireworks hook or initialConfig.
Options
| Prop | Type | Description |
|---|---|---|
| quality | number | Fireworks quality (1-3), affects particle count and effect complexity |
| shellSize | number | Fireworks size (1-4), affects explosion range and particle count |
| autoLaunch | boolean | Whether to automatically launch fireworks, defaults to true |
| effectDensity | number | Effect density (0.5-2), affects the number of effect particles |
Firework Types (FireworkType)
Available firework explosion effect types.
Types
| Type | Description |
|---|---|
| NORMAL | Standard firework, expands evenly in all directions |
| CHRYSANTHEMUM | Chrysanthemum firework, large explosion effect with flickering |
| PEONY | Peony firework, densely and evenly distributed particles, forming a sphere |
| WILLOW | Willow firework, with drooping effect and gold sparkles |
| RING | Ring firework, forms distinct concentric rings |
| MULTI_COLOR | Multi-color firework, each particle has a different color |
| CRACKLING | Crackling firework, with short-lived flickering small particles |
| DOUBLE_BURST | Double burst firework, produces secondary explosions after the main one |
| BROCADE | Brocade firework, with falling trails and golden center particles |
| KAMURO | Japanese crown-type firework, upward radiating crown effect |
Color Options
The component includes a variety of predefined colors to provide rich visual effects for fireworks.
| Color Name | Value | Description |
|---|---|---|
| Red | #ff3232 | Bright red |
| DeepRed | #ff0043 | Deep red |
| Green | #4aff68 | Natural green |
| Blue | #4a88ff | Soft blue |
| Yellow | #ffee33 | Bright yellow |
| Purple | #b967ff | Soft purple |
| Gold | #ffbf36 | Gold |
| Silver | #e0e0e0 | Silver white |
| White | #ffffff | Pure white |
| Cyan | #67e8ff | Sky blue |
| Orange | #ff7b00 | Vibrant orange |
| Pink | #ff69b4 | Pink |
| Peach | #ffcc99 | Peach |
Usage
export default function Demo() {
return (
<FireworksProvider>
<div className="relative h-[800px] w-full bg-black text-white overflow-hidden font-mono">
<FireworksCanvas />
</div>
</FireworksProvider>
)
}