Cursify verandert de vertrouwde cursor in een interactief hulpmiddel voor websites

Wanneer je een andere stijlvolle website van een studio of designbureau op Awwwards opent, vallen micro-interfaces meteen op. De cursor vergroot soepel over links, laat een licht spoor achter, rekt tekst uit of markeert kaarten met een zachte gradient. Het ziet er fris uit, maar wanneer je gaat zitten om dit te repliceren in je eigen React-project, loop je snel tegen een muur van routinematig werk aan. Je moet handmatig muiscoördinaten berekenen, re-renders volgen, veeranimaties configureren en vechten tegen vertraging op mobiele apparaten.

Onlangs heeft het UI-Layout team de cursify repository uitgebracht. In essentie is het een kant-en-klare collectie van componenten en een documentatiesjabloon voor iedereen die snel ongewone cursoreffecten, verlichte buttons en kinetische animaties aan een React- of Next.js-applicatie wil toevoegen.

Wat er in het project zit

De repository is gestructureerd als een Next.js starter template met MDX-ondersteuning. De architectuur volgt het shadcn/ui-principe: in plaats van een monolithische npm-package vol onnodige code te installeren, kopieer je de componenten die je nodig hebt simpelweg direct in je project.

De repository bevat verschillende groepen van componenten:

• Interactieve cursor en tekst. Componenten zoals cursor-follow-text binden tekst of kaarten aan muisbeweging met soepele easing dankzij veerfysica.
• Button-effecten. Opties zijn onder andere een lopend hoogtepunt (btn-bg-shine), een spotlight die de cursor volgt (btn-bg-spotlight) en soepele ingedrukte toestanden.
• Blur en vignettes. De blur-vignette set past vervaagde gradient masks toe op kaarten, afbeeldingen en achtergrondvideo's.
• Scroll- en nummeranimaties. Horizontaal scrollen met Framer Motion en lopende nummertellers (numbersuffle).

Hoe de stack is opgezet

De basis van het project is minimaal. Het gebruikt React, Tailwind CSS en de motion library (een modern standalone package van de makers van Framer Motion).

Om de basisafhankelijkheden in een bestaand project te installeren, voer je simpelweg uit:

npm install motion clsx tailwind-merge

Voor het combineren van Tailwind-klassen wordt de standaard cn helper gebruikt, bekend bij iedereen die met een moderne React-stack heeft gewerkt:

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

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

Cursor-animaties op smartphones en tablets zijn meestal gewoon in de weg en verstoren native scrollen. De Cursify-ontwikkelaars hebben de touch screen-detectie verplaatst naar een aparte hook useMediaQuery. Hiermee kun je complexe cursoreffecten pijnloos uitschakelen op touch screens:

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

Waar dit in de praktijk van pas komt

Gespecialiseerde cursor-animaties zijn niet overal nodig. In een zware CRM-systeem of analytics dashboard zou een cirkel die achter de muis aan vliegt de gebruiker eerder irriteren. Maar er zijn scenario's waarin visuele polish direct de conversie en productperceptie beïnvloedt:

1. Portfolios en promo-pagina's. Wanneer je aandacht voor detail wilt tonen en wilt opvallen tussen honderden template landingspagina's.
2. Productkaarten in online winkels. Vignette-effecten en hover-markeringen vestigen de aandacht op belangrijke producten.
3. Startup-presentaties. Ongewone micro-interacties helpen om een tech-service website gedenkwaardiger te maken.
4. Interactieve showcases en galleries. Blokken met complex scrollen en geometrische vormen op clip-path brengen lange pagina's tot leven.

Voordelen en ruwe randjes

Het grootste voordeel van de repository is de open source-beschikbaarheid. Elke component leeft in de registry/components folder als een geïsoleerd TypeScript-bestand. Je kunt btn-bg-spotlight.tsx bekijken, zien hoe clientX en clientY offsets worden berekend, de decay-formule aanpassen of kleuren wijzigen om bij je designsysteem te passen.

Het nadeel dat opvalt is de minimale README. Het bevat geen gedetailleerde tabellen met props voor elke individuele component, dus je zult opties moeten verkennen door ofwel de lokale documentatieserver te draaien (pnpm dev) ofwel de code direct te lezen in de registry/ en components/ directories. Dat gezegd hebbende, de code is netjes geschreven en leest gemakkelijk.

Als je een promo-site bouwt, een landingspagina voor je side project of je persoonlijke portfolio vernieuwt, zal Cursify je een paar avonden handmatige animatiecodering besparen. Het project biedt een solide set kant-en-klare visuele technieken die je in een paar minuten kunt integreren in je bestaande Tailwind- en Next.js-stack. Je kunt de repository bekijken en de template forken op GitHub.