index.html

<!-- Single Smooth Tail Cursor -->
<style>
  html, body, * {
    cursor: none !important;
  }

  input[type="text"], input[type="search"], input[type="email"],
  input[type="password"], textarea, [contenteditable="true"] {
    cursor: text !important;
  }

  .cursor-dot, .cursor-tail {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    transition: background 0.3s ease;
  }

  .cursor-dot {
    width: 12px;
    height: 12px;
    background-color: #4164b6;
    box-shadow: 0 0 10px rgba(65,100,182,0.45);
  }

  .cursor-tail {
    width: 20px;
    height: 20px;
    background-color: #ffdb58;
    opacity: 0.8;
  }

  @media (max-width: 768px) {
    html, body { cursor: default !important; }
    .cursor-dot, .cursor-tail { display: none !important; }
  }
</style>

<script>
(function() {
  const COLORS = ['#ffdb58', '#154360', '#4164b6', '#e74c3c', '#2ecc71']; // random color choices
  const cursor = document.createElement('div');
  const tail = document.createElement('div');
  cursor.classList.add('cursor-dot');
  tail.classList.add('cursor-tail');
  document.body.append(cursor, tail);

  let mouseX = window.innerWidth / 2;
  let mouseY = window.innerHeight / 2;
  let tailX = mouseX;
  let tailY = mouseY;

  function randomColor() {
    return COLORS[Math.floor(Math.random() * COLORS.length)];
  }

  window.addEventListener('mousemove', e => {
    mouseX = e.clientX;
    mouseY = e.clientY;
    cursor.style.backgroundColor = randomColor();
  });

  function animate() {
    // Smooth tail movement (lerp)
    tailX += (mouseX - tailX) * 0.1;
    tailY += (mouseY - tailY) * 0.1;

    cursor.style.transform = `translate(${mouseX}px, ${mouseY}px)`;
    tail.style.transform = `translate(${tailX}px, ${tailY}px)`;

    requestAnimationFrame(animate);
  }

  animate();
})();
</script>