Skip to content

Fireworks API

Fireworks

Extends Effect.

Factory Function

typescript
createFireworks(config?: FireworksConfig)

Methods

See Effect for the full method reference: mount(), start(), pause(), resume(), configure(), withFade(), and destroy().

launch(variant, position?): void

Fires a single explosion of the given variant.

typescript
sim.launch(variant: FireworkVariant, position?: Point): void
ParameterTypeRequiredDescription
variantFireworkVariantYesThe explosion type to fire.
positionPointNoScreen position in pixels. Defaults to center at 40% height.

FireworksConfig

typescript
interface FireworksConfig {
    scale?: number;
    readonly variants?: FireworkVariant[];
    autoSpawn?: boolean;
}
PropertyTypeDefaultDescription
scalenumber1Scales all particle sizes, trail widths, and glow proportionally.
variantsFireworkVariant[]All 16 variantsSubset of variants to use for auto-spawning. When empty or omitted, all variants are used.
autoSpawnbooleantrueWhen false, no fireworks are launched automatically. Use launch() for manual control.

FireworkVariant

Union type of all available explosion variants.

typescript
type FireworkVariant =
    | 'peony' | 'chrysanthemum' | 'willow' | 'ring'
    | 'palm' | 'crackle' | 'crossette' | 'dahlia'
    | 'brocade' | 'horsetail' | 'strobe' | 'heart'
    | 'spiral' | 'flower' | 'saturn' | 'concentric';

Variant Details

Classic

VariantParticlesShape3DGravityNotes
peony50-70CircleYes0.8Standard spherical burst.
chrysanthemum80-120LineYes0.5Dense, long trails, sparkle.
willow50-70LineNo1.5Long drooping trails.
palm20-30LineNo1.2Narrow upward cone.
brocade60-80LineNo1.3Golden shimmer, sparkle. Forced hue 35-50.
horsetail30-40LineNo2.0Extreme gravity fountain cascade.

Geometric

VariantParticlesShapeNotes
ring40-60DiamondEvenly distributed angles forming a circle.
concentric60-85DiamondComposite: outer ring (speed 7-10) + inner ring (speed 3-5), hue +120.
saturn90-150MixedComposite: outer shell + filled sphere + rotated elliptical ring (hue +60) with z-depth.

Shapes

VariantParticlesShapeGravityNotes
heart60-80Circle0.3Parametric heart curve with slight random tilt.
flower70-90Circle0.3Rose curve r = |cos(nθ)| with 2-4 petals.
spiral45-60Circle0.43-5 arms with increasing angle/speed offset.
dahlia48-108Circle0.76-9 petal groups with alternating hue (±25).

Effects

VariantParticlesShapeNotes
crackle40-55Star8 sparks emitted when each particle dies.
crossette16-20CircleSplits into 4 peony sub-bursts at alpha 0.5.
strobe40-55CircleBlinks on/off (3 frames each) at ~10Hz.

ExplosionType

A subset of FireworkVariant — all variants except composites.

typescript
type ExplosionType =
    | 'peony' | 'chrysanthemum' | 'willow' | 'ring'
    | 'palm' | 'crackle' | 'crossette' | 'dahlia'
    | 'brocade' | 'horsetail' | 'strobe' | 'heart'
    | 'spiral' | 'flower';

ParticleShape

The visual shape drawn at the head of a particle.

typescript
type ParticleShape = 'line' | 'circle' | 'star' | 'diamond';

FIREWORK_VARIANTS

typescript
const FIREWORK_VARIANTS: FireworkVariant[]

Array containing all 16 variant names. Useful for building UIs.


Point

typescript
type Point = {
    x: number;
    y: number;
};