<div id="root"></div>

body {
    background: #222;
}

.blinky {
  color: #FF0000;
  background: #FF0000;
  height: 0vh;
  width: 0vw;
  position:absolute;

}

.pinky {
  color: #febafe;
  background: #febafe;
  height: 0vh;
  width: 0vw;
  position:absolute;
}

.inky {
  color: #2dfffe;
  background: #2dfffe;
  height: 0vh;
  width: 0vw;
  position:absolute;

}

.clyde {
  color: #feb75b;
  background: #feb75b;
  height: 0vh;
  width: 0vw;
  position:absolute;
}


.frozen {
  box-shadow: 0 0 0 1em #202ffb,
  0 3em 0 1em #202ffb,
  0 6em 0 1em #202ffb,
  0 9em 0 1em #202ffb,
  0 12em 0 1em #202ffb,
  0 15em 0 1em #202ffb,
  0 18em 0 1em #202ffb,
  0 21em 0 1em #202ffb,
  0 24em 0 1em #202ffb,

  3em -9em 0 1em #202ffb,
  3em -6em 0 1em #202ffb,
  3em -3em 0 1em #202ffb,
  3em 0 0 1em #202ffb,
  3em 3em 0 1em #202ffb,
  3em 6em 0 1em #202ffb,
  3em 9em 0 1em #202ffb,
  3em 12em 0 1em #202ffb,
  3em 15em 0 1em #ffbbaf,
  3em 18em 0 1em #202ffb,
  3em 21em 0 1em #202ffb,

  6em -12em 0 1em #202ffb,
  6em -9em 0 1em #202ffb,
  6em -6em 0 1em #202ffb,
  6em -3em 0 1em #202ffb,
  6em 0 0 1em #202ffb,
  6em 3em 0 1em #202ffb,
  6em 6em 0 1em #202ffb,
  6em 9em 0 1em #202ffb,
  6em 12em 0 1em #ffbbaf,
  6em 15em 0 1em #202ffb,
  6em 18em 0 1em #202ffb,

  9em -15em 0 1em #202ffb,
  9em -12em 0 1em #202ffb,
  9em -9em 0 1em #202ffb,
  9em -6em 0 1em #202ffb,
  9em -3em 0 1em #202ffb,
  9em 0 0 1em #202ffb,
  9em 3em 0 1em #202ffb,
  9em 6em 0 1em #202ffb,
  9em 9em 0 1em #202ffb,
  9em 12em 0 1em #ffbbaf,
  9em 15em 0 1em #202ffb,
  9em 18em 0 1em #202ffb,
  9em 21em 0 1em #202ffb,

  12em -15em 0 1em #202ffb,
  12em -12em 0 1em #202ffb,
  12em -9em 0 1em #202ffb,
  12em -6em 0 1em #202ffb,
  12em -3em 0 1em #ffbbaf,
  12em 0 0 1em #ffbbaf,
  12em 3em 0 1em #202ffb,
  12em 6em 0 1em #202ffb,
  12em 9em 0 1em #202ffb,
  12em 12em 0 1em #202ffb,
  12em 15em 0 1em #ffbbaf,
  12em 18em 0 1em #202ffb,
  12em 21em 0 1em #202ffb,
  12em 24em 0 1em #202ffb,

  15em -18em 0 1em #202ffb,
  15em -15em 0 1em #202ffb,
  15em -12em 0 1em #202ffb,
  15em -9em 0 1em #202ffb,
  15em -6em 0 1em #202ffb,
  15em -3em 0 1em #ffbbaf,
  15em 0 0 1em #ffbbaf,
  15em 3em 0 1em #202ffb,
  15em 6em 0 1em #202ffb,
  15em 9em 0 1em #202ffb,
  15em 12em 0 1em #202ffb,
  15em 15em 0 1em #ffbbaf,
  15em 18em 0 1em #202ffb,
  15em 21em 0 1em #202ffb,
  15em 24em 0 1em #202ffb,

  18em -18em 0 1em #202ffb,
  18em -15em 0 1em #202ffb,
  18em -12em 0 1em #202ffb,
  18em -9em 0 1em #202ffb,
  18em -6em 0 1em #202ffb,
  18em -3em 0 1em #202ffb,
  18em 0 0 1em #202ffb,
  18em 3em 0 1em #202ffb,
  18em 6em 0 1em #202ffb,
  18em 9em 0 1em #202ffb,
  18em 12em 0 1em #ffbbaf,
  18em 15em 0 1em #202ffb,
  18em 18em 0 1em #202ffb,

  21em -18em 0 1em #202ffb,
  21em -15em 0 1em #202ffb,
  21em -12em 0 1em #202ffb,
  21em -9em 0 1em #202ffb,
  21em -6em 0 1em #202ffb,
  21em -3em 0 1em #202ffb,
  21em 0 0 1em #202ffb,
  21em 3em 0 1em #202ffb,
  21em 6em 0 1em #202ffb,
  21em 9em 0 1em #202ffb,
  21em 12em 0 1em #ffbbaf,
  21em 15em 0 1em #202ffb,
  21em 18em 0 1em #202ffb,

  24em -18em 0 1em #202ffb,
  24em -15em 0 1em #202ffb,
  24em -12em 0 1em #202ffb,
  24em -9em 0 1em #202ffb,
  24em -6em 0 1em #202ffb,
  24em -3em 0 1em #ffbbaf,
  24em 0 0 1em #ffbbaf,
  24em 3em 0 1em #202ffb,
  24em 6em 0 1em #202ffb,
  24em 9em 0 1em #202ffb,
  24em 12em 0 1em #202ffb,
  24em 15em 0 1em #ffbbaf,
  24em 18em 0 1em #202ffb,
  24em 21em 0 1em #202ffb,
  24em 24em 0 1em #202ffb,

  27em -15em 0 1em #202ffb,
  27em -12em 0 1em #202ffb,
  27em -9em 0 1em #202ffb,
  27em -6em 0 1em #202ffb,
  27em -3em 0 1em #ffbbaf,
  27em 0 0 1em #ffbbaf,
  27em 3em 0 1em #202ffb,
  27em 6em 0 1em #202ffb,
  27em 9em 0 1em #202ffb,
  27em 12em 0 1em #202ffb,
  27em 15em 0 1em #ffbbaf,
  27em 18em 0 1em #202ffb,
  27em 21em 0 1em #202ffb,
  27em 24em 0 1em #202ffb,

  30em -15em 0 1em #202ffb,
  30em -12em 0 1em #202ffb,
  30em -9em 0 1em #202ffb,
  30em -6em 0 1em #202ffb,
  30em -3em 0 1em #202ffb,
  30em 0 0 1em #202ffb,
  30em 3em 0 1em #202ffb,
  30em 6em 0 1em #202ffb,
  30em 9em 0 1em #202ffb,
  30em 12em 0 1em #ffbbaf,
  30em 15em 0 1em #202ffb,
  30em 18em 0 1em #202ffb,
  30em 21em 0 1em #202ffb,

  33em -12em 0 1em #202ffb,
  33em -9em 0 1em #202ffb,
  33em -6em 0 1em #202ffb,
  33em -3em 0 1em #202ffb,
  33em 0 0 1em #202ffb,
  33em 3em 0 1em #202ffb,
  33em 6em 0 1em #202ffb,
  33em 9em 0 1em #202ffb,
  33em 12em 0 1em #ffbbaf,
  33em 15em 0 1em #202ffb,
  33em 18em 0 1em #202ffb,

  36em -9em 0 1em #202ffb,
  36em -6em 0 1em #202ffb,
  36em -3em 0 1em #202ffb,
  36em 0 0 1em #202ffb,
  36em 3em 0 1em #202ffb,
  36em 6em 0 1em #202ffb,
  36em 9em 0 1em #202ffb,
  36em 12em 0 1em #202ffb,
  36em 15em 0 1em #ffbbaf,
  36em 18em 0 1em #202ffb,
  36em 21em 0 1em #202ffb,

  39em 0 0 1em #202ffb,
  39em 3em 0 1em #202ffb,
  39em 6em 0 1em #202ffb,
  39em 9em 0 1em #202ffb,
  39em 12em 0 1em #202ffb,
  39em 15em 0 1em #202ffb,
  39em 18em 0 1em #202ffb,
  39em 21em 0 1em #202ffb,
  39em 24em 0 1em #202ffb;

  background: #202ffb;
  width: 1em;
  height: 1em;
}



.ghost {

  position:absolute;
  color: inherit;
  background: inherit;
  width: 1em;
  height: 1em;
  overflow-y: hidden;
  overflow-x: hidden;

  box-shadow: 0 0 0 1em,
  0 3em 0 1em,
  0 6em 0 1em,
  0 9em 0 1em,
  0 12em 0 1em,
  0 15em 0 1em,
  0 18em 0 1em,
  0 21em 0 1em,
  0 24em 0 1em,
  3em -9em 0 1em,
  3em -6em 0 1em #cccccc,
  3em -3em 0 1em #1B1BDF,
  3em 0 0 1em #1B1BDF,
  3em 3em 0 1em,
  3em 6em 0 1em,
  3em 9em 0 1em,
  3em 12em 0 1em,
  3em 15em 0 1em,
  3em 18em 0 1em,
  3em 21em 0 1em,
  6em -12em 0 1em,
  6em -9em 0 1em #cccccc,
  6em -6em 0 1em #cccccc,
  6em -3em 0 1em #1B1BDF,
  6em 0 0 1em #1B1BDF,
  6em 3em 0 1em #cccccc,
  6em 6em 0 1em,
  6em 9em 0 1em,
  6em 12em 0 1em,
  6em 15em 0 1em,
  6em 18em 0 1em,
  9em -15em 0 1em,
  9em -12em 0 1em,
  9em -9em 0 1em #cccccc,
  9em -6em 0 1em #cccccc,
  9em -3em 0 1em #cccccc,
  9em 0 0 1em #cccccc,
  9em 3em 0 1em #cccccc,
  9em 6em 0 1em,
  9em 9em 0 1em,
  9em 12em 0 1em,
  9em 15em 0 1em,
  9em 18em 0 1em,
  9em 21em 0 1em,
  12em -15em 0 1em,
  12em -12em 0 1em,
  12em -9em 0 1em,
  12em -6em 0 1em #cccccc,
  12em -3em 0 1em #cccccc,
  12em 0 0 1em #cccccc,
  12em 3em 0 1em,
  12em 6em 0 1em,
  12em 9em 0 1em,
  12em 12em 0 1em,
  12em 15em 0 1em,
  12em 18em 0 1em,
  12em 21em 0 1em,
  12em 24em 0 1em,
  15em -18em 0 1em,
  15em -15em 0 1em,
  15em -12em 0 1em,
  15em -9em 0 1em,
  15em -6em 0 1em,
  15em -3em 0 1em,
  15em 0 0 1em,
  15em 3em 0 1em,
  15em 6em 0 1em,
  15em 9em 0 1em,
  15em 12em 0 1em,
  15em 15em 0 1em,
  15em 18em 0 1em,
  15em 21em 0 1em,
  15em 24em 0 1em,
  18em -18em 0 1em,
  18em -15em 0 1em,
  18em -12em 0 1em,
  18em -9em 0 1em,
  18em -6em 0 1em,
  18em -3em 0 1em,
  18em 0 0 1em,
  18em 3em 0 1em,
  18em 6em 0 1em,
  18em 9em 0 1em,
  18em 12em 0 1em,
  18em 15em 0 1em,
  18em 18em 0 1em,
  21em -18em 0 1em,
  21em -15em 0 1em,
  21em -12em 0 1em,
  21em -9em 0 1em,
  21em -6em 0 1em #cccccc,
  21em -3em 0 1em #1B1BDF,
  21em 0 0 1em #1B1BDF,
  21em 3em 0 1em,
  21em 6em 0 1em,
  21em 9em 0 1em,
  21em 12em 0 1em,
  21em 15em 0 1em,
  21em 18em 0 1em,
  24em -18em 0 1em,
  24em -15em 0 1em,
  24em -12em 0 1em,
  24em -9em 0 1em #cccccc,
  24em -6em 0 1em #cccccc,
  24em -3em 0 1em #1B1BDF,
  24em 0 0 1em #1B1BDF,
  24em 3em 0 1em #cccccc,
  24em 6em 0 1em,
  24em 9em 0 1em,
  24em 12em 0 1em,
  24em 15em 0 1em,
  24em 18em 0 1em,
  24em 21em 0 1em,
  24em 24em 0 1em,
  27em -15em 0 1em,
  27em -12em 0 1em,
  27em -9em 0 1em #cccccc,
  27em -6em 0 1em #cccccc,
  27em -3em 0 1em #cccccc,
  27em 0 0 1em #cccccc,
  27em 3em 0 1em #cccccc,
  27em 6em 0 1em,
  27em 9em 0 1em,
  27em 12em 0 1em,
  27em 15em 0 1em,
  27em 18em 0 1em,
  27em 21em 0 1em,
  27em 24em 0 1em,
  30em -15em 0 1em,
  30em -12em 0 1em,
  30em -9em 0 1em,
  30em -6em 0 1em #cccccc,
  30em -3em 0 1em #cccccc,
  30em 0 0 1em #cccccc,
  30em 3em 0 1em,
  30em 6em 0 1em,
  30em 9em 0 1em,
  30em 12em 0 1em,
  30em 15em 0 1em,
  30em 18em 0 1em,
  30em 21em 0 1em,
  33em -12em 0 1em,
  33em -9em 0 1em,
  33em -6em 0 1em,
  33em -3em 0 1em,
  33em 0 0 1em,
  33em 3em 0 1em,
  33em 6em 0 1em,
  33em 9em 0 1em,
  33em 12em 0 1em,
  33em 15em 0 1em,
  33em 18em 0 1em,
  36em -9em 0 1em,
  36em -6em 0 1em,
  36em -3em 0 1em,
  36em 0 0 1em,
  36em 3em 0 1em,
  36em 6em 0 1em,
  36em 9em 0 1em,
  36em 12em 0 1em,
  36em 15em 0 1em,
  36em 18em 0 1em,
  36em 21em 0 1em,
  39em 0 0 1em,
  39em 3em 0 1em,
  39em 6em 0 1em,
  39em 9em 0 1em,
  39em 12em 0 1em,
  39em 15em 0 1em,
  39em 18em 0 1em,
  39em 21em 0 1em,
  39em 24em 0 1em;
}

const names = ["blinky", "pinky", "inky", "clyde"];

const presets = {
  gentle: [120, 14]
};

const { StaggeredMotion, spring } = ReactMotion;

class App extends React.Component {
  state = { x: 250, y: 300, frozen: false };

  componentDidMount() {
    window.addEventListener("click", this.handleClick);
    window.addEventListener("mousemove", this.handleMouseMove);
    window.addEventListener("touchmove", this.handleTouchMove);
  }

  handleClick = () => {
    const frozen = !this.state.frozen;
    this.setState({ frozen });
  };

  handleMouseMove = ({ pageX: x, pageY: y }) => {
    this.setState({ x, y });
  };

  handleTouchMove = ({ touches }) => {
    this.handleMouseMove(touches[0]);
  };

  getStyles = prevStyles => {
    const endValue = prevStyles.map((style, i) => {
      return i === 0
        ? this.state
        : {
            x: spring(prevStyles[i - 1].x, presets.gentle),
            y: spring(prevStyles[i - 1].y, presets.gentle)
          };
    });

    return endValue;
  };

  render() {
    const ghostState = this.state.frozen ? "frozen" : "ghost";

    return (
      <StaggeredMotion
        defaultStyles={_.times(names.length, () => ({ x: 0, y: 0 }))}
        styles={this.getStyles}
      >

        {ghosts =>
          <div className="container">
            {ghosts.map(({ x, y }, index) => {
              return (
                <div
                  key={index}
                  className={names[index]}
                  style={{
                    WebkitTransform: `translate(${x - 25}px, ${y -
                      25}px) scale(.2)`,
                    transform: `translate(${x - 25}px, ${y - 25}px) scale(.2)`,
                    zIndex: names.length - index
                  }}
                >
                  <div
                    style={{ zIndex: names.length - index }}
                    className={ghostState}
                  />
                </div>
              );
            })}
          </div>}
      </StaggeredMotion>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));