index.jsx

const clock = F.stream();
const resize = F.stream();
const mouseMove = F.stream();

const mousePosition = mouseMove.map((e) => ({
  x: (e.clientX / window.innerWidth) * 2 - 1,
  y: - (e.clientY / window.innerHeight) * 2 + 1
}));

const cameraToPosition = mousePosition.map((m) => ({
  x: m.x,
  y: m.y - 5
}));
cameraToPosition({x: 0, y: -5});

const lightToPosition = mousePosition.map((m) => ({
  x: 5 * -m.x,
  y: 5 * -m.y
}));
lightToPosition({x: 0, y: 0});

const enteredTile = F.transduce(
  R.compose(R.map(getTileUnderMouse), R.dropRepeats),
  mousePosition
);

const exitedTile = F.transduce(R.dropLast(1), enteredTile);

const stepToward = (pos, to, step) => {
  if(pos > to) {
    return step >= pos - to ? to : pos - step;
  } else {
    return step >= to - pos ? to : pos + step;
  }
};

const steppedPositionStream = (clock, toPosition, step) =>
  F.combine(
    (t, to, self) => {
      const o = to();
      const {x, y} = self();

      if(x !== o.x || y !== o.y) {
        self({
          x: stepToward(x, o.x, step),
          y: stepToward(y, o.y, step)
        });
      }
    },
    [clock, toPosition]
  );

const lightPosition = steppedPositionStream(clock, lightToPosition, 0.5);
lightPosition({x: 0, y: 0});

const cameraPosition = steppedPositionStream(clock, cameraToPosition, 0.5);
cameraPosition({x: 0, y: -5});

window.addEventListener('resize', resize, false);
window.addEventListener('mousemove', mouseMove, false);
renderer.domElement.addEventListener('mouseout', () => exitedTile(enteredTile()), false);

const tick = (t) => {
  clock(t);
  requestAnimationFrame(tick);
};
requestAnimationFrame(tick);

F.on(() => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}, resize);

F.on((t) => {
  t.userData.tween && t.userData.tween.stop();
  t.userData.tween = new W.Tween(t.scale)
                          .easing(W.Easing.Quadratic.Out)
                          .to({x: 0.02, y: 0.02}, 600)
                          .onComplete(() => t.visible = false)
                          .start();
}, exitedTile);

F.on((t) => {
  t.scale.set(0.6, 0.6, 1);
  t.userData.tween && t.userData.tween.stop();
  t.userData.tween = new W.Tween(t.scale)
                          .to({x: [0.8, 0.6], y: [0.8, 0.6]}, 600)
                          .easing(W.Easing.Quadratic.Out)
                          .repeat(Infinity)
                          .yoyo()
                          .onStart(() => t.visible = true)
                          .start();
}, enteredTile);

F.on(({x, y}) => {
  light.position.x = x;
  light.position.y = y;
}, lightPosition);

F.on(({x, y}) => {
  camera.position.x = x;
  camera.position.y = y;
  camera.lookAt(scene.position);
}, cameraPosition);

F.on((t) => {
  W.update(t);
  renderer.render(scene, camera);
}, clock);