JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div class="custom-cursor"></div>

CSS

:root {
            --color: 255, 71, 84;
            --cursor-size: 30px;
        }
 
        * {
            cursor: none;
        }
 
        html,
        body {
            height: 100%;
        }
 
        body {
            margin: 0;
            overflow: hidden;
 
            background: #fff;
        }
 
        .custom-cursor {
            position: absolute;
            z-index: 99;
            top: 0;
            left: 0;
 
            width: var(--cursor-size);
            height: var(--cursor-size);
 
            border: calc(var(--cursor-size)
                        / 30) solid #fff;
   
 
            animation: cursor 800ms infinite
                    alternate ease-in-out;
        }
 
        .custom-cursor::before {
            content: "";
            display: block;
            width: calc(var(--cursor-size) / 2);
            height: calc(var(--cursor-size) / 2);
 
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
 
            border: calc(var(--cursor-size) / 6)
                    solid rgba(var(--color), 0.5);
 

 
            animation: cursor-before 800ms
                infinite alternate ease-in-out;
        }
 
        .custom-cursor.click {
            animation: cursor-click 800ms
                normal ease-in-out;
        }
 
 
        @keyframes cursor {
            from {
                transform: scale(1);
                border-color: #fff;
            }
 
            to {
                transform: scale(1.5);
                border-color: rgb(var(--color));
            }
        }
 
        @keyframes cursor-before {
            from {
                transform: translate(-50%, -50%) scale(1);
                border-color: rgba(var(--color), 0.5);
            }
 
            to {
                transform: translate(-50%, -50%) scale(1.5);
                border-color: rgba(var(--color), 0.75);
            }
        }
 
        @keyframes...

JavaScript

const cursor = document
            .querySelector(".custom-cursor");
 
        // Adding the animations when the
        // mouse button is clicked
 
        window.addEventListener("mousedown", (event) => {
            if (!cursor.classList.contains("click")) {
                cursor.classList.add("click");
 
                setTimeout(() => {
                    cursor.classList.remove("click");
                }, 800);
            }
        });
 
        // Getting the position of the cursor
        window.addEventListener("mousemove", (event) => {
            let x = event.pageX - cursor.offsetWidth / 2,
                y = event.pageY - cursor.offsetHeight / 2;
 
            cursor.style.left = `${x}px`;
            cursor.style.top = `${y}px`;
        });