Docs
Firework

Firework

Displays a beautiful Firework using canvas.

Loading...

Installation

Copy and paste the Event Calendar code into your project.

API Reference

FireworksProvider Context

Context provider for fireworks configuration and state management.

Props

PropTypeDescription
childrenReactNodeChild components, typically includes FireworksCanvas
initialConfigFireworksConfigInitial configuration object, optional

useFireworks Hook

Provides methods and state for controlling fireworks effects.

const { paused, setPaused, config, updateConfig } = useFireworks();

Return Values

PropertyTypeDescription
pausedbooleanWhether the fireworks effect is currently paused
setPaused(paused: boolean) => voidSet pause/resume state
configFireworksConfigCurrent configuration parameters
updateConfig(newConfig: Partial<FireworksConfig>) => voidUpdate configuration parameters

Configuration Options (FireworksConfig)

Options that can be configured through the useFireworks hook or initialConfig.

Options

PropTypeDescription
qualitynumberFireworks quality (1-3), affects particle count and effect complexity
shellSizenumberFireworks size (1-4), affects explosion range and particle count
autoLaunchbooleanWhether to automatically launch fireworks, defaults to true
effectDensitynumberEffect density (0.5-2), affects the number of effect particles

Firework Types (FireworkType)

Available firework explosion effect types.

Types

TypeDescription
NORMALStandard firework, expands evenly in all directions
CHRYSANTHEMUMChrysanthemum firework, large explosion effect with flickering
PEONYPeony firework, densely and evenly distributed particles, forming a sphere
WILLOWWillow firework, with drooping effect and gold sparkles
RINGRing firework, forms distinct concentric rings
MULTI_COLORMulti-color firework, each particle has a different color
CRACKLINGCrackling firework, with short-lived flickering small particles
DOUBLE_BURSTDouble burst firework, produces secondary explosions after the main one
BROCADEBrocade firework, with falling trails and golden center particles
KAMUROJapanese 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 NameValueDescription
Red#ff3232Bright red
DeepRed#ff0043Deep red
Green#4aff68Natural green
Blue#4a88ffSoft blue
Yellow#ffee33Bright yellow
Purple#b967ffSoft purple
Gold#ffbf36Gold
Silver#e0e0e0Silver white
White#ffffffPure white
Cyan#67e8ffSky blue
Orange#ff7b00Vibrant orange
Pink#ff69b4Pink
Peach#ffcc99Peach

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