Comment ajouter un curseur personnalisé en React (gratuit)
Découvrez comment intégrer un curseur personnalisé dans votre application React gratuitement, avec des exemples de code et les composants prêts à l'emploi d'Empire UI.
Pourquoi un curseur personnalisé change tout
Le curseur personnalisé est l'un des détails les plus efficaces pour renforcer l'identité visuelle d'une interface. Là où la plupart des développeurs se contentent du curseur système par défaut, les équipes qui soignent l'expérience utilisateur comprennent que chaque pixel compte — y compris celui qui suit le mouvement de la souris.
Un curseur sur-mesure crée immédiatement une impression de soin et de maîtrise. Il peut refléter le style graphique de votre application : fluide et translucide pour le glassmorphism, massif et contrasté pour le neobrutalism, ou encore doux et arrondi pour le claymorphism. Empire UI propose une bibliothèque complète de curseurs prêts à l'emploi sur la page /cursors.
Sur le plan technique, remplacer le curseur natif en React est plus simple qu'on ne le croit. Il suffit de masquer le curseur CSS par défaut et d'afficher un élément HTML qui suit les coordonnées de la souris via useState et useEffect. Le résultat est immédiat et entièrement personnalisable.
La méthode de base : hook et position souris
La technique fondamentale repose sur trois étapes : masquer le curseur natif avec cursor: none sur l'élément racine, écouter l'événement `mousemove` pour récupérer les coordonnées clientX / clientY, et positionner un élément personnalisé en position: fixed en synchronisation parfaite.
Voici une implémentation minimale en React avec TypeScript :
``tsx
import { useEffect, useState } from 'react';
export function CustomCursor() {
const [pos, setPos] = useState({ x: -100, y: -100 });
useEffect(() => {
const move = (e: MouseEvent) => setPos({ x: e.clientX, y: e.clientY });
window.addEventListener('mousemove', move);
return () => window.removeEventListener('mousemove', move);
}, []);
return (
<div
style={{
position: 'fixed',
top: pos.y - 10,
left: pos.x - 10,
width: 20,
height: 20,
borderRadius: '50%',
background: 'rgba(255,255,255,0.8)',
backdropFilter: 'blur(4px)',
border: '1.5px solid rgba(255,255,255,0.5)',
pointerEvents: 'none',
zIndex: 9999,
transform: 'translate(-50%, -50%)',
transition: 'transform 0.1s ease',
}}
/>
);
}
``
Notez l'utilisation de pointerEvents: none — indispensable pour que le curseur personnalisé ne bloque pas les clics sur les éléments sous-jacents. On initialise la position à { x: -100, y: -100 } pour que le curseur soit invisible au chargement, avant que l'utilisateur ne déplace sa souris.
Aller plus loin : effet de traînée et états interactifs
Un curseur statique qui suit simplement la souris reste basique. Pour un rendu vraiment soigné, on ajoute un effet de traînée (trailing) : un second cercle plus grand qui suit le curseur avec un léger décalage temporel, créant une sensation de fluidité et de profondeur. Cette technique est particulièrement efficace avec les styles glassmorphism et aurora.
On peut également faire réagir le curseur au contexte : agrandir l'anneau au survol des liens et boutons, changer sa couleur au-dessus des images, ou afficher une icône différente selon l'action disponible. Pour cela, on écoute les événements mouseenter et mouseleave sur les éléments interactifs, puis on met à jour un état cursorVariant dans le contexte global.
// Exemple d'état étendu avec variant
const [variant, setVariant] = useState<'default' | 'hover'>('default');
// Sur chaque bouton / lien
<button
onMouseEnter={() => setVariant('hover')}
onMouseLeave={() => setVariant('default')}
>
Survole-moi
</button>
// Style conditionnel dans le composant curseur
const size = variant === 'hover' ? 40 : 20;Pour éviter de propager cet état manuellement dans toute l'arborescence, encapsulez la logique dans un CursorContext avec React.createContext. Le composant curseur consomme le contexte ; chaque élément interactif dispatche simplement un changement de variant. Cela garde le code découplé et facile à maintenir.
Utiliser les curseurs prêts à l'emploi d'Empire UI
Développer un curseur personnalisé from scratch est enrichissant, mais Empire UI met à disposition une collection gratuite de curseurs thématiques directement sur /cursors. Chaque curseur est disponible sous forme de composant React autonome, entièrement stylisé selon les grandes tendances visuelles : glassmorphism, neumorphism, neobrutalism, y2k, cyberpunk et bien d'autres.
L'intégration est immédiate. Copiez le composant depuis /cursors, ajoutez-le à la racine de votre _app.tsx ou layout.tsx, et le curseur est actif sur toute l'application. Aucune dépendance externe, aucune configuration requise — juste du React pur.
// Dans app/layout.tsx (Next.js App Router)
import { GlassCursor } from '@/components/cursors/GlassCursor';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="fr">
<body style={{ cursor: 'none' }}>
<GlassCursor />
{children}
</body>
</html>
);
}Si vous cherchez à générer automatiquement un curseur adapté à votre charte graphique, le serveur MCP d'Empire UI permet à des agents IA comme Claude de produire des composants curseurs sur mesure en quelques secondes, en respectant vos tokens de design (couleurs, rayons, opacités).
Accessibilité et compatibilité mobile
Avant de déployer un curseur personnalisé en production, veillez à deux points essentiels. Sur mobile et tablette, les événements mousemove n'existent pas : le composant doit être conditionné à l'existence d'un dispositif de pointage. Utilisez la media query @media (pointer: fine) en CSS ou détectez le type de pointeur en JavaScript avec window.matchMedia('(pointer: fine)').matches.
Sur le plan de l'accessibilité, certains utilisateurs ont besoin du curseur système pour des raisons de motricité ou d'adaptations spécifiques à leur OS. Prévoyez une option de désactivation dans les préférences utilisateur et respectez prefers-reduced-motion pour les animations de traînée. Un curseur personnalisé doit améliorer l'expérience, jamais la détériorer.
Enfin, testez votre curseur sur différentes résolutions et densités de pixels (HiDPI / Retina). L'utilisation de transform: translate(-50%, -50%) centré sur la position exacte de la souris évite les décalages visuels, et will-change: transform peut être ajouté pour optimiser le rendu sur GPU lors des animations fluides.
Combiner curseur et style visuel pour un résultat cohérent
Un curseur personnalisé atteint son plein potentiel quand il s'intègre harmonieusement dans le style graphique global de l'interface. Consultez les templates par industrie d'Empire UI pour voir comment les curseurs sont adaptés à chaque univers visuel : un curseur néon pour un portfolio créatif, un curseur minimaliste pour un SaaS B2B, un curseur animé pour une landing page gaming.
L'exploration des outils de génération disponibles sur Empire UI vous permettra également de créer des variantes en quelques clics, en ajustant couleur, taille, opacité et effet de flou directement dans l'interface. Le résultat est exporté en code React propre, prêt à être intégré.
Pour aller encore plus loin dans la personnalisation de l'expérience utilisateur, explorez les autres composants d'animation proposés sur le blog Empire UI — effets de particules, arrière-plans aurora, boutons animés — qui se combinent naturellement avec un curseur sur-mesure pour créer une interface vraiment mémorable.
FAQ
Appliquez cursor: none sur l'élément body ou sur le conteneur racine via un style CSS global ou du style inline. En React, vous pouvez le faire dans votre fichier globals.css avec body { cursor: none; } ou directement sur la balise <body> dans votre layout.
Non, les appareils tactiles n'émettent pas d'événements mousemove. Il faut conditionner le rendu du composant avec window.matchMedia('(pointer: fine)').matches pour l'activer uniquement sur les appareils dotés d'un pointeur précis comme une souris.
Oui, tous les composants curseurs disponibles sur /cursors sont entièrement gratuits et open source. Vous pouvez les copier, les modifier et les utiliser dans vos projets personnels comme commerciaux sans aucune restriction.
Ajoutez pointer-events: none au style de l'élément du curseur personnalisé. Cela rend l'élément transparent aux événements de pointeur, ce qui permet aux clics de passer au travers jusqu'aux éléments sous-jacents.
Absolument. Placez le composant curseur dans votre app/layout.tsx à l'intérieur de la balise <body>, avec le style cursor: none sur celle-ci. Il sera ainsi présent sur toutes les pages de votre application sans configuration supplémentaire.