Mouse Follower Cat HTML CSS JavaScript

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cat Mouse Follower</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /* Prevents scrollbars if the cat goes slightly out of bounds */
            height: 100vh; /* Ensures the body takes full viewport height */
            background-color: #f0f0f0; /* Light background for contrast */
            cursor: none; /* Hides the default mouse cursor */
        }

#cat-follower {
            /* Cat head */
            width: 45px;
            height: 35px;
            background-color: #4a332a; /* Dark brown color for the cat */
            border-radius: 50% 50% 35% 35%; /* Rounded top, slightly flatter bottom for head shape */
            position: fixed; /* Positions the cat relative to the viewport */
            pointer-events: none; /* Important: Allows mouse events to pass through the cat to elements beneath */
            z-index: 9999; /* Ensures the cat stays on top of other content */
            transform: translate(-50%, -50%); /* Centers the cat element on the mouse cursor */
            box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow for depth */
            transition: left 0.01s linear, top 0.01s linear; /* Very subtle transition for smoother follow */
        }

#cat-follower::before,
        #cat-follower::after {
            /* Cat ears */
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-left: 12px solid transparent; /* Base width of the ear */
            border-right: 12px solid transparent; /* Base width of the ear */
            border-bottom: 18px solid #4a332a; /* Height and color of the ear */
            top: -10px; /* Position above the head */
            z-index: -1; /* Places ears behind the head */
            transform-origin: bottom center; /* Rotate around the bottom center of the ear */
        }

#cat-follower::before {
            left: 0px; /* Position for the left ear */
            transform: rotate(-25deg); /* Angle the left ear */
        }

#cat-follower::after {
            right: 0px; /* Position for the right ear */
            transform: rotate(25deg); /* Angle the right ear */
        }

/* Cat Eyes */
        #cat-follower .eye {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: white;
            border-radius: 50%;
            top: 10px;
            border: 1px solid #333; /* Outline for the eye */
            box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
        }

#cat-follower .eye::before {
            /* Pupil */
            content: '';
            position: absolute;
            width: 4px;
            height: 4px;
            background-color: black;
            border-radius: 50%;
            top: 2px;
            left: 2px;
        }

#cat-follower .eye.left {
            left: 8px; /* Position for the left eye */
        }

#cat-follower .eye.right {
            right: 8px; /* Position for the right eye */
        }

/* Cat Nose */
        #cat-follower .nose {
            position: absolute;
            width: 8px;
            height: 5px;
            background-color: #f7a7b7; /* Pink color for the nose */
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* Oval shape for the nose */
            top: 20px;
            left: 50%;
            transform: translateX(-50%); /* Center the nose horizontally */
        }
    </style>
</head>
<body>
    
    <div id="cat-follower">
        <div class="eye left"></div>
        <div class="eye right"></div>
        <div class="nose"></div>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse-Following Cat</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /* Hide scrollbars if cat goes off-screen */
            cursor: none; /* Hide default cursor to make the cat the primary follower */
            background-color: #f0f0f0; /* Light background for visibility */
        }

#cat {
            position: absolute;
            /* Initial position will be set by JavaScript */
            /* This transform ensures the cat's center is at (catX, catY) */
            transform: translate(-50%, -50%);
            z-index: 1000; /* Ensure the cat is on top of other content */
            pointer-events: none; /* Cat should not block mouse events on elements underneath */
            /* Overall size of the cat container for easier relative positioning of its parts */
            width: 120px;
            height: 80px;
        }

.cat-body {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 60px;
            height: 30px;
            background-color: #555; /* Dark grey cat body */
            border-radius: 15px;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
        }

.cat-head {
            position: absolute;
            top: 15px;
            left: 0px;
            width: 30px;
            height: 30px;
            background-color: #555;
            border-radius: 50%; /* Circular head */
            box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        }

.cat-tail {
            position: absolute;
            top: 25px;
            left: 70px; /* Position relative to the cat container */
            width: 30px;
            height: 10px;
            background-color: #555;
            border-radius: 0 10px 10px 0; /* Rounded tail end */
            transform-origin: 0% 50%; /* Rotate from the base of the tail */
            transform: rotate(15deg); /* Slightly curved tail */
            box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        }

.cat-leg {
            width: 10px;
            height: 25px;
            background-color: #444; /* Slightly darker legs */
            border-radius: 0 0 5px 5px; /* Rounded bottom for paws */
            position: absolute;
            box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        }

/* Position each leg relative to the #cat container */
        .leg1 { top: 45px; left: 25px; } /* Front-left leg */
        .leg2 { top: 45px; left: 55px; } /* Front-right leg */
        .leg3 { top: 45px; left: 75px; } /* Back-left leg */
        .leg4 { top: 45px; left: 105px; } /* Back-right leg */
    </style>
</head>
<body>

const catElement = document.getElementById('cat');

// Update mouse coordinates on mouse movement
        document.addEventListener('mousemove', (e) => {
            mouseX = e.clientX;
            mouseY = e.clientY;
        });

function animateCat() {
            // Calculate the target position for the cat, offset from the mouse cursor
            // The cat will follow to the bottom-right of the mouse cursor
            const targetX = mouseX + offsetDistance;
            const targetY = mouseY + offsetDistance;

// Ease the cat's current position towards the target position for smooth movement
            catX += (targetX - catX) * easingFactor;
            catY += (targetY - catY) * easingFactor;

// Apply the new position using CSS transform for performance and smoothness
            // The translate(-50%, -50%) in CSS centers the cat element on the calculated (catX, catY)
            catElement.style.transform = `translate(${catX}px, ${catY}px) translate(-50%, -50%)`;

// Request the next animation frame to continue the movement
            requestAnimationFrame(animateCat);
        }

// Start the animation loop
        animateCat();
    </script>

</body>
</html>

Mouse Follower Cat HTML CSS JavaScript

Recommended

HTML Contact Buttons Example

Tic Tac Toe Game HTML Structure

Movie Website HTML Template

HTML

CSS

JS

Recommended

HTML Contact Buttons Example

Tic Tac Toe Game HTML Structure

Movie Website HTML Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS