[[[https://codepen.io/inlet/pen/2b7da2053276c634928a7eca450648c8]]]

html,
body {
  height: 100vh;
}

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

canvas {
  box-shadow: 3px 3px 0 #ccc;
}

console.clear();

const { Stage, PixiComponent } = ReactPixi;

const img = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/693612/IaUrttj.png";

const emitterConfig = {
  alpha: {
    start: 0.5,
    end: 0.5
  },
  scale: {
    start: 1,
    end: 1
  },
  color: {
    start: "ffffff",
    end: "ffffff"
  },
  speed: {
    start: 3000,
    end: 3000
  },
  startRotation: {
    min: 65,
    max: 65
  },
  rotationSpeed: {
    min: 0,
    max: 0
  },
  lifetime: {
    min: 0.81,
    max: 0.81
  },
  blendMode: "normal",
  frequency: 0.004,
  emitterLifetime: 0,
  maxParticles: 1000,
  pos: {
    x: 0,
    y: 0
  },
  addAtBack: false,
  spawnType: "rect",
  spawnRect: {
    x: -600,
    y: -460,
    w: 900,
    h: 20
  }
};

const Emitter = PixiComponent("Emitter", {
  create() {
    return new PIXI.Container();
  },
  applyProps(instance, oldProps, newProps) {
    const { image, config } = newProps;

    if (!this._emitter) {
      this._emitter = new PIXI.particles.Emitter(
        instance,
        [PIXI.Texture.from(image)],
        config
      );

      let elapsed = Date.now();

      const t = () => {
        this._emitter.raf = requestAnimationFrame(t);
        const now = Date.now();

        this._emitter.update((now - elapsed) * 0.001);

        elapsed = now;
      };

      this._emitter.emit = true;
      t();
    }
  },
  willUnmount() {
    if (this._emitter) {
      this._emitter.emit = false;
      cancelAnimationFrame(this._emitter.raf);
    }
  }
});

const App = () => (
  <Stage width={500} height={500} options={{ autoDensity: true, backgroundColor: 0xefefef }}>
    <Emitter image={img} config={emitterConfig} />
  </Stage>
);

ReactDOM.render(<App />, document.body);