Cursify transforme le curseur familier en un outil interactif pour les sites web

Lorsqu'on ouvre un autre site web élégant d'un studio ou d'une agence de design sur Awwwards, les micro-interfaces attirent immédiatement le regard. Le curseur s'agrandit en douceur au-dessus des liens, laisse une traînée lumineuse derrière lui, étire le texte ou met en valeur les cartes avec un dégradé subtil. Cela paraît frais, mais quand on s'assoit pour reproduire cela dans son propre projet React, on se heurte rapidement à un mur de travail fastidieux. Il faut calculer manuellement les coordonnées de la souris, suivre les re-renders, configurer les animations à ressorts et combattre le lag sur les appareils mobiles.

Récemment, l'équipe UI-Layout a publié le dépôt cursify. En essence, c'est une collection prête à l'emploi de composants et un modèle de documentation pour quiconque souhaite ajouter rapidement des effets de curseur inhabituels, des boutons illuminés et des animations cinétiques à une application React ou Next.js.

Ce qu'il y a dans le projet

Le dépôt est structuré comme un modèle de démarrage Next.js avec support MDX. L'architecture suit le principe de shadcn/ui : au lieu de tirer un package npm monolithique plein de code inutile, vous copiez simplement les composants dont vous avez besoin directement dans votre projet.

Le dépôt contient plusieurs groupes de composants :

• Curseur et texte interactifs. Les composants comme cursor-follow-text lient le texte ou les cartes au mouvement de la souris avec un lissage fluide grâce à la physique des ressorts.
• Effets de boutons. Les options incluent un surlignement animé (btn-bg-shine), un projecteur suivant le curseur (btn-bg-spotlight) et des états pressés fluides.
• Flou et vignettes. L'ensemble blur-vignette applique des masques de dégradé flous aux cartes, images et vidéos d'arrière-plan.
• Animations de défilement et de nombres. Défilement horizontal avec Framer Motion et compteurs de nombres animés (numbersuffle).

Comment la stack est configurée

La base du projet est minimale. Il utilise React, Tailwind CSS et la bibliothèque motion (un package moderne autonome des créateurs de Framer Motion).

Pour installer les dépendances de base dans un projet existant, exécutez simplement :

npm install motion clsx tailwind-merge

Pour combiner les classes Tailwind, l'assistant standard cn est utilisé, familier à quiconque a travaillé avec une stack React moderne :

import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Les animations de curseur sur les smartphones et les tablettes ne font généralement que déranger et cassent le défilement natif. Les développeurs de Cursify ont déplacé la détection d'écran tactile dans un hook séparé useMediaQuery. Avec lui, vous pouvez désactiver sans douleur les effets de curseur complexes sur les écrans tactiles :

import { useEffect, useState } from 'react';

export function useMediaQuery(query: string) {
  const [value, setValue] = useState(false);

  useEffect(() => {
    function onChange(event: MediaQueryListEvent) {
      setValue(event.matches);
    }

    const result = matchMedia(query);
    result.addEventListener('change', onChange);
    setValue(result.matches);

    return () => result.removeEventListener('change', onChange);
  }, [query]);

  return value;
}

Où cela s'avère utile en pratique

Les animations de curseur spécialisées ne sont pas nécessaires partout. Dans un système CRM lourd ou un tableau de bord analytique, un cercle qui vole derrière la souris dérangerait plutôt l'utilisateur. Mais il y a des scénarios où la finition visuelle impacte directement la conversion et la perception du produit :

1. Portfolios et pages promotionnelles. Quand vous devez montrer l'attention aux détails et vous démarquer des centaines de pages d'atterrissage sur modèle.
2. Cartes produit dans les boutiques en ligne. Les effets de vignette et le surlignage au survol attirent l'attention sur les produits clés.
3. Présentations de startups. Les micro-interactions inhabituelles aident à rendre un site web de service tech plus mémorable.
4. Vitrines interactives et galeries. Les blocs avec défilement complexe et formes géométriques sur clip-path donnent vie aux longues pages.

Avantages et imperfections

Le principal avantage du dépôt est la disponibilité open source. Chaque composant réside dans le dossier registry/components comme un fichier TypeScript isolé. Vous pouvez regarder à l'intérieur de btn-bg-spotlight.tsx, voir comment les décalages clientX et clientY sont calculés, ajuster la formule de décroissance ou changer les couleurs pour correspondre à votre système de design.

L'inconvénient qui ressort est le README minimal. Il manque des tableaux détaillés avec les props pour chaque composant individuel, donc vous devrez explorer les options soit en exécutant le serveur de documentation local (pnpm dev), soit en lisant le code directement dans les répertoires registry/ et components/. Cela dit, le code est écrit proprement et se lit facilement.

Si vous construisez un site promotionnel, une page d'atterrissage pour votre projet secondaire ou rafraîchissez votre portfolio personnel, Cursify vous fera gagner quelques soirées de codage manuel d'animations. Le projet fournit un ensemble solide de techniques visuelles prêtes à l'emploi que vous pouvez intégrer dans votre stack Tailwind et Next.js existante en quelques minutes. Vous pouvez consulter le dépôt et forker le modèle sur GitHub.