A 'nudge-y' animation for Blue Limes

  • JavaScript
  • CSS
  • Design
Tetris blocks can be gathered to form a new rectangle shape.

This simple animation re-uses the same Tetris-like shapes as the Blue Limes logo.

The Blue Limes logo looks like a heart, built by assembling two simple shapes made of smaller cubes.

To assemble the bricks and have them snap to place, the user needs to position their cursor over the call-to-action button. 

function calculateDistance(elem, mouseX, mouseY) {
  let a = mouseX - (elem.offsetLeft + elem.offsetWidth / 2);
  let b = mouseY - 94 - (elem.offsetTop + elem.offsetHeight / 2);
  return Math.floor(Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)));
}

window.addEventListener("DOMContentLoaded", (event) => {
  const target = document.getElementById("solutionButton");
  const brickA = document.querySelectorAll(".js-cube-a");
  const brickB = document.querySelectorAll(".js-cube-b");
  const brickC = document.querySelectorAll(".js-cube-c");
  const brickD = document.querySelectorAll(".js-cube-d");

  document.addEventListener("mousemove", function (e) {
    mX = e.pageX;
    mY = e.pageY;
    distance = calculateDistance(target, mX, mY);
    if (distance < 20) {
      distance = 0;
    }

    brickA.forEach((e) => {
      e.style.transform = `translate(${-0.3 * distance}px, ${0.2 * distance}px)`;
    });

    brickB.forEach((e) => {
      e.style.transform = `translate(${-0.1 * distance}px, ${-0.5 * distance}px)`;
    });

    brickC.forEach((e) => {
      e.style.transform = `translate(${0.3 * distance}px, ${-0.2 * distance}px)`;
    });

    brickD.forEach((e) => {
      e.style.transform = `translate(${0.2 * distance}px, ${0.2 * distance}px)`;
    });
  });
});