Build a Cuddle Creature Adoption Center (Source Code)

A mini virtual pet that reacts to mouse proximity, follows the cursor, purrs, and falls asleep when idle.

CC CodesCompiler 📅 April 18, 2026

#javascript#game#interactive#animation

Let’s build a tiny virtual pet! The pet will read mouse coordinates to face and gently follow the cursor. If the mouse doesn’t move for 5 seconds, the pet falls asleep and emits “Zzz” bubbles.

Mouse Awareness

By calculating the Math.atan2 between the center of the pet and the mouse cursor, we can elegantly transition the pet’s rotation to face the mouse.

JAVASCRIPT CODE

let isSleeping = false;
let idleTimer;

window.addEventListener('mousemove', (e) =&gt; {
  clearTimeout(idleTimer);
  wakeUpPet();
  
  // Calculate angle for eyes to look at mouse
  const rect = pet.getBoundingClientRect();
  const angle = Math.atan2(e.clientY - rect.top, e.clientX - rect.left);
  pupils.forEach(p =&gt; p.style.transform = `rotate(${angle}rad) translateX(3px)`);
  
  idleTimer = setTimeout(() =&gt; {
    isSleeping = true;
    fallAsleep();
  }, 5000);
});