493 Academy

TreeGRADE 04◇ EXIT

◇ STUDIO

TREE

can you make a thing where you have caricter following your mous

BUDDY

How fun! Here's a little character that follows your mouse around the screen! 🐾 Move your mouse and watch them go!

TREE

can you make it in my home screen and every ware .it should also follow your mouse not be it and be a cat

BUDDY

That's such a cool idea, Tree! I made a cute little cat that follows your mouse everywhere on the screen with sparkle trails! 🐱✨ Move your mouse around and watch the kitty chase it!

TREE

no in my home screen

BUDDY

The cat is already there on your home screen! It follows your mouse everywhere — try moving your mouse around and watch the kitty chase it! 🐱✨

TREE

but not just in the box

BUDDY

Oops, something went wrong making that. Try again, or ask for something a little simpler!

CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Cat Follower</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: linear-gradient(135deg, #c9f0ff, #ffe0f7);
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      font-family: 'Comic Sans MS', cursive;
    }

    /* Home screen icons */
    .home-screen {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 30px;
      padding: 60px 80px;
    }

    .icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;
    }

    .icon-img {
      width: 70px;
      height: 70px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      transition: transform 0.1s;
    }
    .icon-img:active { transform: scale(0.9); }

    .icon-label {
      font-size: 13px;
      color: #333;
      text-shadow: 0 1px 3px rgba(255,255,255,0.8);
    }

    /* Taskbar */
    #taskbar {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      height: 70px;
      background: rgba(255,255,255,0.45);
      backdrop-filter: blur(10px);
      border-top: 1px solid rgba(255,255,255,0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding: 0 20px;
    }

    .dock-icon {
      width: 55px;
      height: 55px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      cursor: pointer;
      transition: transform 0.15s;
    }
    .dock-icon:hover { transform: scale(1.2) translateY(-6px); }

    /* Clock */
    #clock {
      position: fixed;
      top: 16px;
      right: 24px;
      font-size: 20px;
      font-weight: bold;
      color: #444;
      text-shadow: 0 1px 3px rgba(255,255,255,0.9);
    }

    /* ---- CAT CURSOR ---- */
    #cat {
      position: fixed;
      width: 70px;
      height: 70px;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
    }

    /* tiny red mouse target dot */
    #mouse-dot {
      position: fixed;
      width: 10px;
      height: 10px;
      background: #ff4466;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9998;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 6px #ff4466;
    }

    .cat-wrap {
      position: relative;
      width: 70px;
      height: 70px;
    }

    /* Ears */
    .cat-ear {
      position: absolute;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 18px solid #f4a0c0;
      z-index: 2;
    }
    .cat-ear.left  { top: 2px; left: 10px; transform: rotate(-10deg); }
    .cat-ear.right { top: 2px; left: 38px; transform: rotate(10deg); }

    /* inner ear */
    .cat-ear::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 12px solid #ffcce0;
      top: 4px;
      left: -6px;
    }

    /* Head */
    .cat-head {
      position: absolute;
      width: 50px;
      height: 48px;
      background: #f4a0c0;
      border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
      top: 14px;
      left: 10px;
      border: 2.5px solid #d06090;
      z-index: 2;
    }

    /* Eyes */
    .cat-eye {
      position: absolute;
      width: 11px;
      height: 13px;
      background: #66dd88;
      border-radius: 50%;
      top: 13px;
      border: 2px solid #333;
      overflow: hidden;
    }
    .cat-eye.left  { left: 8px; }
    .cat-eye.right { left: 27px; }

    .cat-pupil {
      position: absolute;
      width: 4px;
      height: 10px;
      background: #111;
      border-radius: 4px;
      top: 1px;
      left: 3px;
    }

    /* Nose */
    .cat-nose {
      position: absolute;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid #ff88aa;
      top: 28px;
      left: 20px;
    }

    /* Mouth */
    .cat-mouth {
      position: absolute;
      top: 33px;
      left: 17px;
      width: 16px;
      height: 7px;
      border: 2.5px solid #c0507a;
      border-top: none;
      border-radius: 0 0 10px 10px;
    }

    /* Whiskers */
    .whisker {
      position: absolute;
      height: 2px;
      background: #aaa;
      border-radius: 1px;
      top: 30px;
    }
    .whisker.l1 { width: 18px; left: -10px; transform: rotate(-10deg); }
    .whisker.l2 { width: 18px; left: -10px; top: 34px; transform: rotate(10deg); }
    .whisker.r1 { width: 18px; left: 40px; transform: rotate(10deg); }
    .whisker.r2 { width: 18px; left: 40px; top: 34px; transform: rotate(-10deg); }

    /* Tail */
    .cat-tail {
      position: absolute;
      width: 16px;
      height: 30px;
      border: 3px solid #d06090;
      border-radius: 50%;
      border-right-color: transparent;
      border-bottom-color: transparent;
      top: 28px;
      left: -10px;
      z-index: 1;
      animation: tailWag 0.5s infinite alternate ease-in-out;
      transform-origin: bottom right;
    }

    @keyframes tailWag {
      from { transform: rotate(-20deg); }
      to   { transform: rotate(20deg); }
    }

    /* Paws */
    .paws {
      position: absolute;
      bottom: 0;
      left: 12px;
      display: flex;
      gap: 10px;
      z-index: 3;
    }
    .paw {
      width: 12px;
      height: 10px;
      background: #f4a0c0;
      border: 2px solid #d06090;
      border-radius: 50% 50% 40% 40%;
      animation: pawStep 0.4s infinite alternate;
    }
    .paw:nth-child(2) { animation-delay: 0.2s; }

    @keyframes pawStep {
      from { transform: translateY(0px); }
      to   { transform: translateY(4px); }
    }

    /* Sparkles */
    .sparkle {
      position: fixed;
      pointer-events: none;
      font-size: 15px;
      animation: fadeUp 0.8s ease forwards;
      z-index: 9990;
    }

    @keyframes fadeUp {
      0%   { opacity: 1; transform: translateY(0) scale(1); }
      100% { opacity: 0; transform: translateY(-35px) scale(0.3); }
    }

    /* Hint */
    #hint {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255,255,255,0.7);
      padding: 8px 20px;
      border-radius: 20px;
      font-size: 15px;
      color: #555;
      pointer-events: none;
      z-index: 100;
    }
  </style>
</head>
<body>

  <!-- Home Screen Icons -->
  <div class="home-screen">
    <div class="icon"><div class="icon-img" style="background:#aee4ff;">🌤️</div><div class="icon-label">Weather</div></div>
    <div class="icon"><div class="icon-img" style="background:#ffe4b5;">📷</div><div class="icon-label">Photos</div></div>
    <div class="icon"><div class="icon-img" style="background:#d4f5d4;">🎵</div><div class="icon-label">Music</div></div>
    <div class="icon"><div class="icon-img" style="background:#ffd6f0;">🎮</div><div class="icon-label">Games</div></div>
    <div class="icon"><div class="icon-img" style="background:#ffecc0;">📚</div><div class="icon-label">Books</div></div>
    <div class="icon"><div class="icon-img" style="background:#e0d4ff;">🗺️</div><div class="icon-label">Maps</div></div>
    <div class="icon"><div class="icon-img" style="background:#ffd4d4;">❤️</div><div class="icon-label">Health</div></div>
    <div class="icon"><div class="icon-img" style="background:#c4f0ff;">💬</div><div class="icon-label">Chat</div></div>
    <div class="icon"><div class="icon-img" style="background:#fff0c0;">⭐</div><div class="icon-label">Stars</div></div>
    <div class="icon"><div class="icon-img" style="background:#d4ffd4;">🌿</div><div class="icon-label">Nature</div></div>
    <div class="icon"><div class="icon-img" style="background:#ffd4e8;">🎨</div><div class="icon-label">Draw</div></div>
    <div class="icon"><div class="icon-img" style="background:#e4e4ff;">🔭</div><div class="icon-label">Space</div></div>
    <div class="icon"><div class="icon-img" style="background:#ffe8c0;">🍕</div><div class="icon-label">Food</div></div>
    <div class="icon"><div class="icon-img" style="background:#d0f8ff;">🐠</div><div class="icon-label">Pets</div></div>
    <div class="icon"><div class="icon-img" style="background:#fce4ff;">🎬</div><div class="icon-label">Movies</div></div>
  </div>

  <!-- Taskbar / Dock -->
  <div id="taskbar">
    <div class="dock-icon" style="background:#aee4ff;">🌐</div>
    <div class="dock-icon" style="background:#ffd6c0;">📧</div>
    <div class="dock-icon" style="background:#d4f5d4;">🎵</div>
    <div class="dock-icon" style="background:#ffd6f0;">📸</div>
    <div class="dock-icon" style="background:#fffac0;">📝</div>
    <div class="dock-icon" style="background:#e0d4ff;">⚙️</div>
  </div>

  <!-- Clock -->
  <div id="clock">🕐 00:00</div>

  <!-- Hint -->
  <div id="hint">🐱 The cat is chasing your mouse!</div>

  <!-- Mouse target dot -->
  <div id="mouse-dot"></div>

  <!-- Cat character -->
  <div id="cat">
    <div class="cat-wrap">
      <div class="cat-tail"></div>
      <div class="cat-ear left"></div>
      <div class="cat-ear right"></div>
      <div class="cat-head">
        <div class="cat-eye left"><div class="cat-pupil"></div></div>
        <div class="cat-eye right"><div class="cat-pupil"></div></div>
        <div class="cat-nose"></div>
        <div class="cat-mouth"></div>
        <div class="whisker l1"></div>
        <div class="whisker l2"></div>
        <div class="whisker r1"></div>
        <div class="whisker r2"></div>
      </div>
      <div class="paws">
        <div class="paw"></div>
        <div class="paw"></div>
      </div>
    </div>
  </div>

  <script>
    const cat      = document.getElementById('cat');
    const mouseDot = document.getElementById('mouse-dot');
    const clockEl  = document.getElementById('clock');
    const hint     = document.getElementById('hint');

    const emojis = ['🐾','✨','💗','⭐','💫','🌸'];

    let mouseX = window.innerWidth / 2;
    let mouseY = window.innerHeight / 2;
    let catX   = mouseX - 80;
    let catY   = mouseY;

    // Hide hint after 4 seconds
    setTimeout(() => { hint.style.display = 'none'; }, 4000);

    // Clock
    function updateClock() {
      const now = new Date();
      let h = now.getHours(), m = now.getMinutes();
      const ampm = h >= 12 ? 'PM' : 'AM';
      h = h % 12 || 12;
      m = m < 10 ? '0' + m : m;
      clockEl.textContent = `🕐 ${h}:${m} ${ampm}`;
    }
    updateClock();
    setInterval(updateClock, 1000);

    // Track mouse
    document.addEventListener('mousemove', (e) => {
      mouseX = e.clientX;
      mouseY = e.clientY;
      mouseDot.style.left = mouseX + 'px';
      mouseDot.style.top  = mouseY + 'px';
    });

    function lerp(a, b, t) { return a + (b - a) * t; }

    let lastSparkle = 0;

    function animate(ts) {
      // Cat chases mouse but stays a little behind
      catX = lerp(catX, mouseX, 0.08);
      catY = lerp(catY, mouseY, 0.08);

      cat.style.left = catX + 'px';
      cat.style.top  = catY + 'px';

      // Flip to face direction
      const dx = mouseX - catX;
      cat.style.transform = `translate(-50%, -50%) scaleX(${dx < -3 ? -1 : 1})`;

      // Sparkle trail
      if (ts - lastSparkle > 220) {
        lastSparkle = ts;
        spawnSparkle(catX, catY);
      }

      requestAnimationFrame(animate);
    }

    requestAnimationFrame(animate);

    function spawnSparkle(x, y) {
      const s = document.createElement('div');
      s.className = 'sparkle';
      s.textContent = emojis[Math.floor(Math.random() * emojis.length)];
      s.style.left = (x + (Math.random() * 30 - 15)) + 'px';
      s.style.top  = (y + 25 + Math.random() * 10)   + 'px';
      document.body.appendChild(s);
      setTimeout(() => s.remove(), 800);
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Cat Follower</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: linear-gradient(135deg, #c9f0ff, #ffe0f7);
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      font-family: 'Comic Sans MS', cursive;
    }

    /* Home screen icons */
    .home-screen {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 30px;
      padding: 60px 80px;
    }

    .icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;
    }

    .icon-img {
      width: 70px;
      height: 70px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      transition: transform 0.1s;
    }
    .icon-img:active { transform: scale(0.9); }

    .icon-label {
      font-size: 13px;
      color: #333;
      text-shadow: 0 1px 3px rgba(255,255,255,0.8);
    }

    /* Taskbar */
    #taskbar {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      height: 70px;
      background: rgba(255,255,255,0.45);
      backdrop-filter: blur(10px);
      border-top: 1px solid rgba(255,255,255,0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding: 0 20px;
    }

    .dock-icon {
      width: 55px;
      height: 55px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      cursor: pointer;
      transition: transform 0.15s;
    }
    .dock-icon:hover { transform: scale(1.2) translateY(-6px); }

    /* Clock */
    #clock {
      position: fixed;
      top: 16px;
      right: 24px;
      font-size: 20px;
      font-weight: bold;
      color: #444;
      text-shadow: 0 1px 3px rgba(255,255,255,0.9);
    }

    /* ---- CAT CURSOR ---- */
    #cat {
      position: fixed;
      width: 70px;
      height: 70px;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
    }

    /* tiny red mouse target dot */
    #mouse-dot {
      position: fixed;
      width: 10px;
      height: 10px;
      background: #ff4466;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9998;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 6px #ff4466;
    }

    .cat-wrap {
      position: relative;
      width: 70px;
      height: 70px;
    }

    /* Ears */
    .cat-ear {
      position: absolute;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 18px solid #f4a0c0;
      z-index: 2;
    }
    .cat-ear.left  { top: 2px; left: 10px; transform: rotate(-10deg); }
    .cat-ear.right { top: 2px; left: 38px; transform: rotate(10deg); }

    /* inner ear */
    .cat-ear::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 12px solid #ffcce0;
      top: 4px;
      left: -6px;
    }

    /* Head */
    .cat-head {
      position: absolute;
      width: 50px;
      height: 48px;
      background: #f4a0c0;
      border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
      top: 14px;
      left: 10px;
      border: 2.5px solid #d06090;
      z-index: 2;
    }

    /* Eyes */
    .cat-eye {
      position: absolute;
      width: 11px;
      height: 13px;
      background: #66dd88;
      border-radius: 50%;
      top: 13px;
      border: 2px solid #333;
      overflow: hidden;
    }
    .cat-eye.left  { left: 8px; }
    .cat-eye.right { left: 27px; }

    .cat-pupil {
      position: absolute;
      width: 4px;
      height: 10px;
      background: #111;
      border-radius: 4px;
      top: 1px;
      left: 3px;
    }

    /* Nose */
    .cat-nose {
      position: absolute;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid #ff88aa;
      top: 28px;
      left: 20px;
    }

    /* Mouth */
    .cat-mouth {
      position: absolute;
      top: 33px;
      left: 17px;
      width: 16px;
      height: 7px;
      border: 2.5px solid #c0507a;
      border-top: none;
      border-radius: 0 0 10px 10px;
    }

    /* Whiskers */
    .whisker {
      position: absolute;
      height: 2px;
      background: #aaa;
      border-radius: 1px;
      top: 30px;
    }
    .whisker.l1 { width: 18px; left: -10px; transform: rotate(-10deg); }
    .whisker.l2 { width: 18px; left: -10px; top: 34px; transform: rotate(10deg); }
    .whisker.r1 { width: 18px; left: 40px; transform: rotate(10deg); }
    .whisker.r2 { width: 18px; left: 40px; top: 34px; transform: rotate(-10deg); }

    /* Tail */
    .cat-tail {
      position: absolute;
      width: 16px;
      height: 30px;
      border: 3px solid #d06090;
      border-radius: 50%;
      border-right-color: transparent;
      border-bottom-color: transparent;
      top: 28px;
      left: -10px;
      z-index: 1;
      animation: tailWag 0.5s infinite alternate ease-in-out;
      transform-origin: bottom right;
    }

    @keyframes tailWag {
      from { transform: rotate(-20deg); }
      to   { transform: rotate(20deg); }
    }

    /* Paws */
    .paws {
      position: absolute;
      bottom: 0;
      left: 12px;
      display: flex;
      gap: 10px;
      z-index: 3;
    }
    .paw {
      width: 12px;
      height: 10px;
      background: #f4a0c0;
      border: 2px solid #d06090;
      border-radius: 50% 50% 40% 40%;
      animation: pawStep 0.4s infinite alternate;
    }
    .paw:nth-child(2) { animation-delay: 0.2s; }

    @keyframes pawStep {
      from { transform: translateY(0px); }
      to   { transform: translateY(4px); }
    }

    /* Sparkles */
    .sparkle {
      position: fixed;
      pointer-events: none;
      font-size: 15px;
      animation: fadeUp 0.8s ease forwards;
      z-index: 9990;
    }

    @keyframes fadeUp {
      0%   { opacity: 1; transform: translateY(0) scale(1); }
      100% { opacity: 0; transform: translateY(-35px) scale(0.3); }
    }

    /* Hint */
    #hint {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255,255,255,0.7);
      padding: 8px 20px;
      border-radius: 20px;
      font-size: 15px;
      color: #555;
      pointer-events: none;
      z-index: 100;
    }
  </style>
</head>
<body>

  <!-- Home Screen Icons -->
  <div class="home-screen">
    <div class="icon"><div class="icon-img" style="background:#aee4ff;">🌤️</div><div class="icon-label">Weather</div></div>
    <div class="icon"><div class="icon-img" style="background:#ffe4b5;">📷</div><div class="icon-label">Photos</div></div>
    <div class="icon"><div class="icon-img" style="background:#d4f5d4;">🎵</div><div class="icon-label">Music</div></div>
    <div class="icon"><div class="icon-img" style="background:#ffd6f0;">🎮</div><div class="icon-label">Games</div></div>
    <div class="icon"><div class="icon-img" style="background:#ffecc0;">📚</div><div class="icon-label">Books</div></div>
    <div class="icon"><div class="icon-img" style="background:#e0d4ff;">🗺️</div><div class="icon-label">Maps</div></div>
    <div class="icon"><div class="icon-img" style="background:#ffd4d4;">❤️</div><div class="icon-label">Health</div></div>
    <div class="icon"><div class="icon-img" style="background:#c4f0ff;">💬</div><div class="icon-label">Chat</div></div>
    <div class="icon"><div class="icon-img" style="background:#fff0c0;">⭐</div><div class="icon-label">Stars</div></div>
    <div class="icon"><div class="icon-img" style="background:#d4ffd4;">🌿</div><div class="icon-label">Nature</div></div>
    <div class="icon"><div class="icon-img" style="background:#ffd4e8;">🎨</div><div class="icon-label">Draw</div></div>
    <div class="icon"><div class="icon-img" style="background:#e4e4ff;">🔭</div><div class="icon-label">Space</div></div>
    <div class="icon"><div class="icon-img" style="background:#ffe8c0;">🍕</div><div class="icon-label">Food</div></div>
    <div class="icon"><div class="icon-img" style="background:#d0f8ff;">🐠</div><div class="icon-label">Pets</div></div>
    <div class="icon"><div class="icon-img" style="background:#fce4ff;">🎬</div><div class="icon-label">Movies</div></div>
  </div>

  <!-- Taskbar / Dock -->
  <div id="taskbar">
    <div class="dock-icon" style="background:#aee4ff;">🌐</div>
    <div class="dock-icon" style="background:#ffd6c0;">📧</div>
    <div class="dock-icon" style="background:#d4f5d4;">🎵</div>
    <div class="dock-icon" style="background:#ffd6f0;">📸</div>
    <div class="dock-icon" style="background:#fffac0;">📝</div>
    <div class="dock-icon" style="background:#e0d4ff;">⚙️</div>
  </div>

  <!-- Clock -->
  <div id="clock">🕐 00:00</div>

  <!-- Hint -->
  <div id="hint">🐱 The cat is chasing your mouse!</div>

  <!-- Mouse target dot -->
  <div id="mouse-dot"></div>

  <!-- Cat character -->
  <div id="cat">
    <div class="cat-wrap">
      <div class="cat-tail"></div>
      <div class="cat-ear left"></div>
      <div class="cat-ear right"></div>
      <div class="cat-head">
        <div class="cat-eye left"><div class="cat-pupil"></div></div>
        <div class="cat-eye right"><div class="cat-pupil"></div></div>
        <div class="cat-nose"></div>
        <div class="cat-mouth"></div>
        <div class="whisker l1"></div>
        <div class="whisker l2"></div>
        <div class="whisker r1"></div>
        <div class="whisker r2"></div>
      </div>
      <div class="paws">
        <div class="paw"></div>
        <div class="paw"></div>
      </div>
    </div>
  </div>

  <script>
    const cat      = document.getElementById('cat');
    const mouseDot = document.getElementById('mouse-dot');
    const clockEl  = document.getElementById('clock');
    const hint     = document.getElementById('hint');

    const emojis = ['🐾','✨','💗','⭐','💫','🌸'];

    let mouseX = window.innerWidth / 2;
    let mouseY = window.innerHeight / 2;
    let catX   = mouseX - 80;
    let catY   = mouseY;

    // Hide hint after 4 seconds
    setTimeout(() => { hint.style.display = 'none'; }, 4000);

    // Clock
    function updateClock() {
      const now = new Date();
      let h = now.getHours(), m = now.getMinutes();
      const ampm = h >= 12 ? 'PM' : 'AM';
      h = h % 12 || 12;
      m = m < 10 ? '0' + m : m;
      clockEl.textContent = `🕐 ${h}:${m} ${ampm}`;
    }
    updateClock();
    setInterval(updateClock, 1000);

    // Track mouse
    document.addEventListener('mousemove', (e) => {
      mouseX = e.clientX;
      mouseY = e.clientY;
      mouseDot.style.left = mouseX + 'px';
      mouseDot.style.top  = mouseY + 'px';
    });

    function lerp(a, b, t) { return a + (b - a) * t; }

    let lastSparkle = 0;

    function animate(ts) {
      // Cat chases mouse but stays a little behind
      catX = lerp(catX, mouseX, 0.08);
      catY = lerp(catY, mouseY, 0.08);

      cat.style.left = catX + 'px';
      cat.style.top  = catY + 'px';

      // Flip to face direction
      const dx = mouseX - catX;
      cat.style.transform = `translate(-50%, -50%) scaleX(${dx < -3 ? -1 : 1})`;

      // Sparkle trail
      if (ts - lastSparkle > 220) {
        lastSparkle = ts;
        spawnSparkle(catX, catY);
      }

      requestAnimationFrame(animate);
    }

    requestAnimationFrame(animate);

    function spawnSparkle(x, y) {
      const s = document.createElement('div');
      s.className = 'sparkle';
      s.textContent = emojis[Math.floor(Math.random() * emojis.length)];
      s.style.left = (x + (Math.random() * 30 - 15)) + 'px';
      s.style.top  = (y + 25 + Math.random() * 10)   + 'px';
      document.body.appendChild(s);
      setTimeout(() => s.remove(), 800);
    }
  </script>
</body>
</html>

PREVIEW

PICTURES0/50

No pictures yet. Add one, then ask your buddy to put it in your app!