App.js

import React, { useState, useEffect, useRef } from 'react';

const states = {
  PromptUserToMovePointer: "Move your cursor around",
  PromptUserToHoldStill: "Hold still!",
  DisplayingCat: "Displaying cat..."
}

export default ({ }) => {
  const [uiState, setUiState] = useState(states.PromptUserToMovePointer)
  const [pointerPos, setPointerPos] = useState()

  var waitOnMouseTimeout = null
  const onMouseMove = (e) => {
    e.persist()
    setUiState(states.PromptUserToHoldStill);

    if (waitOnMouseTimeout) clearTimeout(waitOnMouseTimeout)
    waitOnMouseTimeout = setTimeout(() => {
      // the user was still for the necessary duration
      if (uiState == states.PromptUserToHoldStill) {
        setUiState(states.DisplayingCat)

        var rect = e.target.getBoundingClientRect();
        var x = e.clientX - rect.left; //x position within the element.
        var y = e.clientY - rect.top;  //y position within the element.
        setPointerPos([x, y])
      }
    }, 1000)
  }

  const onMouseLeave = () => {
    if (waitOnMouseTimeout) clearTimeout(waitOnMouseTimeout)
    setUiState(states.PromptUserToMovePointer);
  }

  return <div
    className="app"
    onMouseMove={onMouseMove}
    onMouseLeave={onMouseLeave}
  >
    {uiState !== states.DisplayingCat && <span className="instructions">{uiState}</span>}
    {uiState == states.DisplayingCat && pointerPos && <img src={`http://localhost:5000?x=${pointerPos[0]}&y=${pointerPos[1]}`} />}
  </div>;
}