/CurserInteraction

CurserInteraction

Curser Interaction is an approach to create a rainbow effect follwing the curser as it moves accross the website. This code is a landing page which I am currently working on for the curser to interact with your mouse

<title>Cursor Interaction</title> <style> body, html { padding: 0; margin: 0; overscroll-behavior: none; background-color: #000; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { position: relative; z-index: 1; } .card { border: none; border-radius: 1rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.85); /* Slightly transparent background for the card */ } .card-body { padding: 2rem; } .btn-primary { background-color: #007bff; border: none; border-radius: 25px; padding: 10px 20px; } .btn-primary:hover { background-color: #0056b3; } .form-control { border-radius: 25px; } .label-text { color: black; } .signup-text { text-align: center; margin-top: 1rem; } .signup-text a { color: #007bff; text-decoration: none; } .signup-text a:hover { text-decoration: underline; } </style>

Create Account

Full Name
Email
Password
Confirm Password
Sign Up

Already have an account? Log in

<!-- Tailwind JS (optional, for interactivity) -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/custom-forms@0.3.4/dist/custom-forms.min.js"></script>

<script>
    let mouseMoved = false;
    const pointer = {
        x: 0.5 * window.innerWidth,
        y: 0.5 * window.innerHeight,
    };

    const params = {
        pointsNumber: 40,
        widthFactor: 0.3,
        mouseThreshold: 0.6,
        spring: 0.4,
        friction: 0.5
    };

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });

    window.addEventListener('mousemove', (e) => {
        pointer.x = e.clientX;
        pointer.y = e.clientY;
        mouseMoved = true;
    });

    function draw() {
        if (mouseMoved) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.5)`;
            ctx.beginPath();
            ctx.arc(pointer.x, pointer.y, 10, 0, Math.PI * 2);
            ctx.fill();
            mouseMoved = false;
        }
        requestAnimationFrame(draw);
    }

    draw();
</script>