fireworks
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.7 • Public • Published

    Demo GIF of fireworks being rendered


    🎆 fireworks

    Simple, zero-dependency library for
    rendering fireworks in JavaScript and React



    import fx from 'fireworks'
    
    fx({
      x: number // required
      y: number // required
    
      // optional
      count?: number
      colors?: string[]
      canvasWidth?: number
      canvasHeight?: number
      canvasTopOffset?: number
      canvasLeftOffset?: number
      bubbleSizeMinimum?: number
      bubbleSizeMaximum?: number
      bubbleSpeedMinimum?: number
      bubbleSpeedMaximum?: number
      particleTimeout?: number
      parentNode?: HTMLElement
    })

    Installation

    Install with npm:

    $ npm install fireworks --save
    

    Or with yarn:

    $ yarn add fireworks
    

    Usage

    Each time you call the fireworks() function, a canvas gets rendered with fireworks at position (x,y) like this:

    const fireworks = require('fireworks')
    
    fireworks({
      x: window.innerWidth / 2,
      y: window.innerHeight / 2,
      colors: ['#cc3333', '#4CAF50', '#81C784']
    })

    If you want render multiple, you can loop through randomly:

    import fx from 'fireworks'
    
    let range = n => [...new Array(n)]
    
    range(6).map(() =>
      fx({
        x: Math.random(window.innerWidth / 2) + window.innerWidth / 4,
        y: Math.random(window.innerWidth / 2) + window.innerWidth / 4,
        colors: ['#cc3333', '#4CAF50', '#81C784']
      })
    )

    For React apps, you can optionally use the component:

    // You need to install React/React-DOM
    import { Fireworks } from 'fireworks/lib/react'
    
    function App() {
      let fxProps = {
        count: 3,
        interval: 200,
        colors: ['#cc3333', '#4CAF50', '#81C784'],
        calc: (props, i) => ({
          ...props,
          x: (i + 1) * (window.innerWidth / 3) - (i + 1) * 100,
          y: 200 + Math.random() * 100 - 50 + (i === 2 ? -80 : 0)
        })
      }
    
      return (
        <div>
          <Fireworks {...fxProps} />
          <h1>Congrats!</h1>
        </div>
      )
    }

    NodeConf Fireworks

    Looking for Eran Hammer's fireworks from NodeConf? Check out https://github.com/hueniverse/fireworks

    Keywords

    none

    Install

    npm i fireworks

    DownloadsWeekly Downloads

    331

    Version

    2.2.7

    License

    MIT

    Unpacked Size

    11.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar