Cursify verwandelt den vertrauten Cursor in ein interaktives Werkzeug für Websites

Wenn man eine weitere stilvolle Website von einem Studio oder einer Designagentur auf Awwwards öffnet, fallen einem sofort die Mikrointerfaces auf. Der Cursor vergrößert sich sanft über Links, hinterlässt eine leichte Spur, dehnt Text oder hebt Karten mit einem sanften Gradienten hervor. Das sieht frisch aus, aber wenn man sich hinsetzt, um dies in seinem eigenen React-Projekt zu replizieren, stößt man schnell auf eine Mauer routinemäßiger Arbeit. Man muss manuell Mauskoordinaten berechnen, Re-Renders verfolgen, Federanimationen konfigurieren und gegen Verzögerungen auf mobilen Geräten kämpfen.

Kürzlich hat das UI-Layout-Team das cursify-Repository veröffentlicht. Im Wesentlichen handelt es sich um eine fertige Sammlung von Komponenten und eine Dokumentationsvorlage für alle, die ungewöhnliche Cursor-Effekte, beleuchtete Buttons und kinetische Animationen schnell zu einer React- oder Next.js-Anwendung hinzufügen möchten.

Was steckt im Projekt

Das Repository ist als Next.js-Starter-Template mit MDX-Unterstützung strukturiert. Die Architektur folgt dem shadcn/ui-Prinzip: Anstatt ein monolithisches npm-Paket mit unnötigem Code zu installieren, kopiert man die benötigten Komponenten einfach direkt in sein Projekt.

Das Repository enthält mehrere Gruppen von Komponenten:

• Interaktiver Cursor und Text. Komponenten wie cursor-follow-text binden Text oder Karten mit sanftem Easing an die Mausbewegung, dank Federphysik.
• Button-Effekte. Zu den Optionen gehören ein laufendes Leuchten (btn-bg-shine), ein Spotlight, das dem Cursor folgt (btn-bg-spotlight), und sanfte gedrückte Zustände.
• Blur und Vignetten. Der blur-vignette-Satz bringt unscharfe Gradientenmasken auf Karten, Bilder und Hintergrundvideos an.
• Scroll- und Zahlenanimationen. Horizontales Scrollen mit Framer Motion und laufende Zahlenzähler (numbersuffle).

Wie der Stack aufgebaut ist

Die Basis des Projekts ist minimal. Es verwendet React, Tailwind CSS und die motion-Bibliothek (ein modernes eigenständiges Paket von den Machern von Framer Motion).

Um die Basis-Abhängigkeiten in einem bestehenden Projekt zu installieren, führt man einfach aus:

npm install motion clsx tailwind-merge

Für das Kombinieren von Tailwind-Klassen wird der Standard-cn-Helfer verwendet, der jedem vertraut ist, der mit einem modernen React-Stack gearbeitet hat:

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

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

Cursor-Animationen auf Smartphones und Tablets sind normalerweise eher hinderlich und brechen natives Scrollen. Die Cursify-Entwickler haben die Touchscreen-Erkennung in einen separaten Hook useMediaQuery ausgelagert. Damit kann man komplexe Cursor-Effekte auf Touchscreens schmerzlos deaktivieren:

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

Wo das in der Praxis nützlich ist

Spezialisierte Cursor-Animationen sind nicht überall nötig. In einem schweren CRM-System oder Analytics-Dashboard würde ein Kreis, der hinter der Maus herfliegt, den Benutzer eher nerven. Aber es gibt Szenarien, in denen visuelle Polierung die Konversion und die Produktwahrnehmung direkt beeinflusst:

1. Portfolios und Promo-Seiten. Wenn man Aufmerksamkeit für Details zeigen und sich von Hunderten von Template-Landingpages abheben muss.
2. Produktkarten in Online-Shops. Vignetten-Effekte und Hover-Hervorhebungen ziehen die Aufmerksamkeit auf wichtige Produkte.
3. Startup-Präsentationen. Ungewöhnliche Mikrointeraktionen helfen, eine Tech-Service-Website einprägsamer zu machen.
4. Interaktive Showcases und Galerien. Blöcke mit komplexem Scrollen und geometrischen Formen auf clip-path bringen lange Seiten zum Leben.

Vorteile und Schwächen

Der Hauptvorteil des Repositories ist die Open-Source-Verfügbarkeit. Jede Komponente befindet sich im registry/components-Ordner als isolierte TypeScript-Datei. Man kann einen Blick in btn-bg-spotlight.tsx werfen, sehen, wie clientX und clientY-Offsets berechnet werden, die Abklingformel anpassen oder Farben ändern, um sie an sein Design-System anzupassen.

Der auffällige Nachteil ist die minimale README. Es fehlen detaillierte Tabellen mit Props für jede einzelne Komponente, also muss man Optionen entweder durch Ausführen des lokalen Dokumentationsservers erkunden (pnpm dev) oder den Code direkt in den registry/- und components/-Verzeichnissen lesen. Das heißt aber, der Code ist sauber geschrieben und lässt sich leicht lesen.

Wenn man eine Promo-Site, eine Landingpage für sein Side-Project erstellt oder sein persönliches Portfolio auffrischt, spart Cursify einem ein paar Abende manuelle Animationsprogrammierung. Das Projekt bietet einen soliden Satz gebrauchsfertiger visueller Techniken, die man in wenigen Minuten in seinen bestehenden Tailwind- und Next.js-Stack integrieren kann. Man kann das Repository ansehen und das Template auf GitHub forken.