Cursify trasforma il familiare cursore in uno strumento interattivo per i siti web

Quando apri un altro sito elegante di uno studio o di un'agenzia di design su Awwwards, le microinterfacce ti colpiscono immediatamente. Il cursore si ingrandisce dolcemente sui link, lascia una scia luminosa dietro di sé, allunga il testo o evidenzia le card con un gradiente morbido. Sembra fresco, ma quando ti siedi per replicarlo nel tuo progetto React, ti scontri subito con una montagna di lavoro routinario. Devi calcolare manualmente le coordinate del mouse, tracciare i re-render, configurare le animazioni spring e combattere il lag sui dispositivi mobili.

Recentemente, il team UI-Layout ha rilasciato il repository cursify. In sostanza, è una raccolta pronta all'uso di componenti e un template di documentazione per chiunque voglia aggiungere rapidamente effetti cursore insoliti, pulsanti illuminati e animazioni cinetiche a un'applicazione React o Next.js.

Cosa c'è dentro il progetto

Il repository è strutturato come un template starter Next.js con supporto MDX. L'architettura segue il principio di shadcn/ui: invece di installare un pacchetto npm monolitico pieno di codice non necessario, copi semplicemente i componenti che ti servono direttamente nel tuo progetto.

Il repository contiene diversi gruppi di componenti:

• Cursore interattivo e testo. Componenti come cursor-follow-text collegano il testo o le card al movimento del mouse con un easing fluido grazie alla fisica delle molle.
• Effetti pulsante. Le opzioni includono un'evidenziazione che scorre (btn-bg-shine), un riflettore che segue il cursore (btn-bg-spotlight) e stati premuti fluidi.
• Blur e vignette. Il set blur-vignette applica maschere di gradiente sfocate a card, immagini e video di sfondo.
• Animazioni di scroll e numeri. Scroll orizzontale con Framer Motion e contatori di numeri in movimento (numbersuffle).

Come è configurato lo stack

Le fondamenta del progetto sono minimali. Utilizza React, Tailwind CSS e la libreria motion (un pacchetto standalone moderno dai creatori di Framer Motion).

Per installare le dipendenze base in un progetto esistente, basta eseguire:

npm install motion clsx tailwind-merge

Per combinare le classi Tailwind, viene utilizzato l'helper standard cn, familiare a chiunque abbia lavorato con uno stack React moderno:

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

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

Le animazioni del cursore su smartphone e tablet di solito intralciano e rompono lo scroll nativo. Gli sviluppatori di Cursify hanno spostato il rilevamento del touch screen in un hook separato useMediaQuery. Con esso, puoi disabilitare senza problemi gli effetti cursore complessi sui touch screen:

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;
}

Dove torna utile in pratica

Le animazioni cursore specializzate non servono ovunque. In un sistema CRM pesante o in una dashboard di analisi, un cerchio che vola dietro il mouse disturberebbe più che altro l'utente. Ma ci sono scenari in cui la cura visiva impatta direttamente sulla conversione e sulla percezione del prodotto:

1. Portfolio e pagine promozionali. Quando devi mostrare attenzione ai dettagli e distinguerti da centinaia di landing page template.
2. Card prodotto nei negozi online. Gli effetti vignette e l'evidenziazione al passaggio del mouse attirano l'attenzione sui prodotti chiave.
3. Presentazioni di startup. Le micro-interazioni insolite aiutano a rendere più memorabile il sito di un servizio tech.
4. Showcase interattivi e gallerie. Blocchi con scroll complesso e forme geometriche su clip-path danno vita a pagine lunghe.

Pro e lati da limare

Il principale vantaggio del repository è la disponibilità open source. Ogni componente vive nella cartella registry/components come file TypeScript isolato. Puoi sbirciare dentro btn-bg-spotlight.tsx, vedere come vengono calcolati gli offset di clientX e clientY, regolare la formula di decay o cambiare i colori per adattarli al tuo sistema di design.

Lo svantaggio che risalta è il README minimale. Mancano tabelle dettagliate con le props per ogni singolo componente, quindi dovrai esplorare le opzioni eseguendo il server di documentazione locale (pnpm dev) o leggendo il codice direttamente nelle directory registry/ e components/. Detto questo, il codice è scritto in modo pulito e si legge facilmente.

Se stai costruendo un sito promozionale, una landing page per il tuo side project o rinnovando il tuo portfolio personale, Cursify ti farà risparmiare un paio di sere di codifica manuale delle animazioni. Il progetto fornisce un solido set di tecniche visive pronte all'uso che puoi integrare nel tuo stack Tailwind e Next.js esistente in un paio di minuti. Puoi controllare il repository e fare fork del template su GitHub.