text: import React, { Component } from 'react';
  import styled from 'styled-components';
  
  class Puffer extends Component {
    // Root element.
    element = null;
  
    // Timeout to start next puff animations.
    puffTimeout = null;
  
    // Timeout to remove current puff animations.
    puffElementsTimeout = null;
  
    componentDidMount() {
      this.startAnimations();
    }
  
    componentWillUnmount() {
      this.stopAnimations();
    }
  
    render() {
      const { children, ...etc } = this.props;
  
      return (
        <div className={'puffs'} ref={el => (this.element = el)} {...etc}></div>
      );
    }
  
    startAnimations() {
      this.onPuffs();
  
      this.puffTimeout = setInterval(this.onPuffs, 5000);
    }
  
    stopAnimations() {
      clearInterval(this.puffTimeout);
  
      clearTimeout(this.puffElementsTimeout);
    }
  
    /**
     * Create a random set of puffs on the back of the container.
     */
  
    onPuffs = () => {
      let puffs = [];
  
      for (let i = 0; i < 8; i++) puffs.push(this.createPuff());
  
      puffs.forEach(puff => this.element.appendChild(puff));
  
      this.puffElementsTimeout = setTimeout(
        () => puffs.forEach(puff => puff.remove()),
  
        5000 - 100
      );
    };
  
    /**
     * Create a puff with random valid properties.
     * u/return {HTMLElement}
     */
  
    createPuff() {
      const puff = document.createElement('div');
      const isLong = Math.round(Math.random());
      const cls = 'puff' + (isLong ? ' ' + 'puff-long' : '');
  
      puff.setAttribute('class', cls);
  
      const duration = 1000 + Math.round(Math.random() * 3000);
  
      puff.style.animationDuration = duration + 'ms';
  
      const width = this.element.offsetWidth;
      const height = this.element.offsetHeight;
  
      puff.style.left = 50 + Math.round(Math.random() * (width - 100)) + 'px';
      puff.style.top = 100 + Math.round(Math.random() * (height - 200)) + 'px';
  
      return puff;
    }
  }
  
  const Puffs = () => (
    <Wrapper>
      <Puffer />
    </Wrapper>
  );
  
  export default Puffs;
  
  const Wrapper = styled.div`
    height: 100vh;
    width: 100%;
    background-color: silver;
  
    .puffs {
      background-color: green;
    }
  
    .puff {
      background-color: blue;
      height: 10px;
      width: 10px;
    }
  
    .puff-long {
      background-color: red;
      height: 10px;
      width: 10px;
    }
  `;
  