Curseur personnalise : magnetique, trail et spotlight

Introduction

Le curseur personnalise est devenu un element signature du web design moderne. Des sites comme Apple, Stripe ou Awwwards l'utilisent pour creer une experience immersive et memorable.

Dans ce tutoriel, nous allons explorer 5 variations de curseurs custom, du plus simple au plus complexe. Chaque demo est interactive - deplacez votre souris dans les zones prevues pour voir l'effet en action.

💡

Bon a savoir

Les curseurs personnalises fonctionnent uniquement sur desktop. Sur mobile, pensez a prevoir un fallback ou a desactiver l'effet.

1. Curseur custom simple (dot + circle)

La base de tout curseur personnalise : un petit point central qui suit exactement la souris, entoure d'un cercle plus grand avec un leger retard (easing). C'est elegant et non intrusif.

Demo interactive - Bougez votre souris

Deplacez votre souris dans cette zone

cursor-simple.js

// HTML: Ajoutez ces elements dans votre body
// <div class="cursor-dot"></div>
// <div class="cursor-circle"></div>

const dot = document.querySelector('.cursor-dot');
const circle = document.querySelector('.cursor-circle');

let mouseX = 0, mouseY = 0;
let circleX = 0, circleY = 0;

document.addEventListener('mousemove', (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;

    // Le dot suit instantanement
    dot.style.left = mouseX + 'px';
    dot.style.top = mouseY + 'px';
});

// Animation du cercle avec easing
function animate() {
    const ease = 0.15;

    circleX += (mouseX - circleX) * ease;
    circleY += (mouseY - circleY) * ease;

    circle.style.left = circleX + 'px';
    circle.style.top = circleY + 'px';

    requestAnimationFrame(animate);
}
animate();
                        

cursor-simple.css

/* Masquer le curseur natif */
body {
    cursor: none;
}

.cursor-dot {
    position: fixed;
    width: 8px;
    height: 8px;
    background: #6366f1;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
}

.cursor-circle {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(99, 102, 241, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, border-color 0.2s;
}
                        

2. Effet trail / trainee

L'effet trail cree une trainee de particules qui suivent le curseur. Chaque particule disparait progressivement, creant un effet de comete elegant. Parfait pour les sites creatifs.

Demo interactive - Bougez votre souris

Deplacez rapidement votre souris pour voir la trainee

cursor-trail.js

const trailLength = 20;
const trails = [];

// Creer les elements de la trainee
for (let i = 0; i < trailLength; i++) {
    const trail = document.createElement('div');
    trail.className = 'trail-particle';
    trail.style.opacity = 1 - (i / trailLength);
    trail.style.width = (12 - (i * 0.5)) + 'px';
    trail.style.height = trail.style.width;
    document.body.appendChild(trail);
    trails.push({ el: trail, x: 0, y: 0 });
}

let mouseX = 0, mouseY = 0;

document.addEventListener('mousemove', (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
});

function animateTrail() {
    let x = mouseX, y = mouseY;

    trails.forEach((trail, i) => {
        const nextX = x;
        const nextY = y;

        trail.el.style.left = trail.x + 'px';
        trail.el.style.top = trail.y + 'px';

        x = trail.x;
        y = trail.y;

        trail.x += (nextX - trail.x) * 0.35;
        trail.y += (nextY - trail.y) * 0.35;
    });

    requestAnimationFrame(animateTrail);
}
animateTrail();
                        

cursor-trail.css

.trail-particle {
    position: fixed;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
}
                        

3. Curseur magnetique

Le curseur magnetique est attire par les elements interactifs (boutons, liens). Quand la souris approche, l'element semble "aimante" vers le curseur. C'est une technique tres utilisee par les agences creatives.

Demo interactive - Approchez votre souris du bouton

Approchez votre souris sans cliquer

cursor-magnetic.js

const magneticElements = document.querySelectorAll('.magnetic');
const magnetStrength = 0.4; // Force de l'aimantation

magneticElements.forEach(elem => {
    elem.addEventListener('mousemove', (e) => {
        const rect = elem.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;

        const deltaX = (e.clientX - centerX) * magnetStrength;
        const deltaY = (e.clientY - centerY) * magnetStrength;

        elem.style.transform =
            `translate(${deltaX}px, ${deltaY}px)`;
    });

    elem.addEventListener('mouseleave', () => {
        elem.style.transform = 'translate(0, 0)';
    });
});

// Version avec zone d'attraction elargie
function initMagneticAdvanced(selector, options = {}) {
    const { strength = 0.3, range = 100 } = options;
    const elements = document.querySelectorAll(selector);

    document.addEventListener('mousemove', (e) => {
        elements.forEach(elem => {
            const rect = elem.getBoundingClientRect();
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;

            const distance = Math.hypot(
                e.clientX - centerX,
                e.clientY - centerY
            );

            if (distance < range) {
                const factor = 1 - (distance / range);
                const deltaX = (e.clientX - centerX) * strength * factor;
                const deltaY = (e.clientY - centerY) * strength * factor;
                elem.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
            } else {
                elem.style.transform = 'translate(0, 0)';
            }
        });
    });
}
                        

4. Effet Spotlight / Torch

L'effet spotlight revele le contenu comme si l'utilisateur tenait une lampe torche. Ideal pour les landing pages mysterieuses ou les reveals de produits.

Demo interactive - Deplacez votre souris pour reveler

Contenu cache

Deplacez la lumiere pour decouvrir ce texte secret!

cursor-spotlight.js

const spotlight = document.querySelector('.spotlight-overlay');
const container = document.querySelector('.spotlight-container');

container.addEventListener('mousemove', (e) => {
    const rect = container.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    spotlight.style.background = `
        radial-gradient(
            circle 150px at ${x}px ${y}px,
            transparent 0%,
            rgba(10, 10, 15, 0.95) 100%
        )
    `;
});

container.addEventListener('mouseleave', () => {
    spotlight.style.background = 'rgba(10, 10, 15, 0.95)';
});
                        

cursor-spotlight.css

.spotlight-container {
    position: relative;
    overflow: hidden;
}

.spotlight-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 15, 0.95);
    pointer-events: none;
    transition: background 0.1s;
}
                        

5. Curseur avec blend mode

Le blend mode permet au curseur d'interagir avec les couleurs de la page. Avec mix-blend-mode: difference, le curseur inverse les couleurs sous lui, creant un effet visuel saisissant.

Demo interactive - Le curseur inverse les couleurs

Observez comment le curseur s'adapte au fond

cursor-blend.js

const cursor = document.querySelector('.cursor-blend');
let cursorX = 0, cursorY = 0;
let targetX = 0, targetY = 0;

document.addEventListener('mousemove', (e) => {
    targetX = e.clientX;
    targetY = e.clientY;
});

function animateCursor() {
    cursorX += (targetX - cursorX) * 0.1;
    cursorY += (targetY - cursorY) * 0.1;

    cursor.style.left = cursorX + 'px';
    cursor.style.top = cursorY + 'px';

    requestAnimationFrame(animateCursor);
}
animateCursor();

// Agrandir au hover sur les liens
document.querySelectorAll('a, button').forEach(el => {
    el.addEventListener('mouseenter', () => {
        cursor.style.transform = 'translate(-50%, -50%) scale(2)';
    });
    el.addEventListener('mouseleave', () => {
        cursor.style.transform = 'translate(-50%, -50%) scale(1)';
    });
});
                        

cursor-blend.css

.cursor-blend {
    position: fixed;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition: transform 0.2s ease;
}
                        

Bonnes pratiques et accessibilite

Les curseurs personnalises ajoutent du style, mais peuvent nuire a l'experience si mal implementes. Voici les regles essentielles.

Performance

Utilisez requestAnimationFrame au lieu de setInterval pour les animations fluides
Preferez transform a left/top pour les animations (GPU accelere)
Limitez le nombre de particules pour l'effet trail (15-25 max)
Utilisez will-change: transform avec parcimonie

Accessibilite

Ne cachez jamais completement le curseur sur les zones de texte selectionnable
Gardez un contraste suffisant entre le curseur et le fond
Respectez prefers-reduced-motion pour les animations

accessibility.css

/* Desactiver sur mobile */
@media (hover: none) {
    .cursor-dot,
    .cursor-circle,
    .cursor-blend {
        display: none;
    }
    body {
        cursor: auto;
    }
}

/* Respecter les preferences utilisateur */
@media (prefers-reduced-motion: reduce) {
    .cursor-dot,
    .cursor-circle {
        transition: none;
    }
    .trail-particle {
        display: none;
    }
}
                        

⚠️

Attention UX

Un curseur trop volumineux ou trop lent peut frustrer l'utilisateur. Testez toujours avec de vrais utilisateurs et gardez l'effet subtil.

Conclusion

Les curseurs personnalises sont un excellent moyen de differencier votre site et de creer une experience memorable. Avec ces 5 techniques, vous avez une base solide pour experimenter.

Commencez par le curseur simple (dot + circle), puis explorez les variations plus avancees selon le style de votre projet. Et n'oubliez pas : la subtilite est la cle d'un bon effet de curseur.

🎨

Allez plus loin

Retrouvez des templates complets avec curseurs integres dans notre bibliotheque d'effets.

Fondamentaux

Design & Visuels

Animations & Scroll

Galerie & Plus

Curseur personnalise : magnetique, trail et spotlight

Introduction

1. Curseur custom simple (dot + circle)

2. Effet trail / trainee

3. Curseur magnetique

4. Effet Spotlight / Torch

Contenu cache

5. Curseur avec blend mode

Bonnes pratiques et accessibilite

Performance

Accessibilite

Conclusion

Fondamentaux

Design & Visuels

Animations & Scroll

Galerie & Plus

Introduction

1. Curseur custom simple (dot + circle)

2. Effet trail / trainee

3. Curseur magnetique

4. Effet Spotlight / Torch

Contenu cache

5. Curseur avec blend mode

Bonnes pratiques et accessibilite

Performance

Accessibilite

Conclusion

Articles similaires

Creer un bouton glow avec CSS pur

Scroll-driven animations : le guide complet

Micro-interactions qui font la difference