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>
)
}