Cursify zamienia znajomy kursor w interaktywne narzędzie dla stron internetowych

Kiedy otwierasz kolejną stylową stronę studia lub agencji projektowej na Awwwards, microinterfejsy natychmiast przyciągają uwagę. Kursor płynnie powiększa się nad linkami, zostawia za sobą lekki ślad, rozciąga tekst lub podświetla karty miękkim gradientem. Wygląda to świeżo, ale kiedy siadasz, żeby odtworzyć to we własnym projekcie React, szybko napotykasz ścianę żmudnej pracy. Musisz ręcznie obliczać współrzędne myszy, śledzić ponowne renderowania, konfigurować animacje sprężynowe i walczyć z opóźnieniami na urządzeniach mobilnych.

Niedawno zespół UI-Layout udostępnił repozytorium cursify. W zasadzie to gotowa kolekcja komponentów i szablon dokumentacji dla każdego, kto chce szybko dodać nietypowe efekty kursora, podświetlone przyciski i animacje kinetyczne do aplikacji React lub Next.js.

Co znajdziesz w projekcie

Repozytorium jest zbudowane jako starter Next.js z obsługą MDX. Architektura podąża za zasadą shadcn/ui: zamiast instalować monolityczny pakiet npm pełen niepotrzebnego kodu, po prostu kopiujesz potrzebne komponenty bezpośrednio do swojego projektu.

Repozytorium zawiera kilka grup komponentów:

• Interaktywny kursor i tekst. Komponenty takie jak cursor-follow-text wiążą tekst lub karty z ruchem myszy dzięki płynnemu wygładzaniu opartemu na fizyce sprężyn.
• Efekty przycisków. Dostępne opcje to biegnące podświetlenie (btn-bg-shine), reflektor podążający za kursorem (btn-bg-spotlight) oraz płynne stany naciśnięcia.
• Rozmycie i winietki. Zestaw blur-vignette nakłada na karty, obrazy i filmy w tle zamazane maski gradientowe.
• Animacje przy przewijaniu i liczniki. Poziome przewijanie z Framer Motion oraz liczniki z uruchomionymi numerami (numbersuffle).

Jak zbudowany jest stos technologiczny

Fundament projektu jest minimalistyczny. Wykorzystuje React, Tailwind CSS i bibliotekę motion (nowoczesny samodzielny pakiet od twórców Framer Motion).

Aby zainstalować podstawowe zależności w istniejącym projekcie, wystarczy uruchomić:

npm install motion clsx tailwind-merge

Do łączenia klas Tailwind używany jest standardowy helper cn, znany każdemu, kto pracował z nowoczesnym stosem React:

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

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

Animacje kursora na smartfonach i tabletach zwykle przeszkadzają i psują natywne przewijanie. Twórcy Cursify przenieśli wykrywanie ekranów dotykowych do osobnego hooka useMediaQuery. Dzięki niemu możesz bezboleśnie wyłączyć złożone efekty kursora na ekranach dotykowych:

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

Gdzie to się przydaje w praktyce

Specjalistyczne animacje kursora nie są potrzebne wszędzie. W ciężkim systemie CRM czy panelu analitycznym, krążek latający za myszą bardziej irytowałby użytkownika. Ale są scenariusze, gdzie wizualny polor bezpośrednio wpływa na konwersję i postrzeganie produktu:

1. Portfolio i strony promocyjne. Kiedy chcesz pokazać dbałość o detale i wyróżnić się spośród setek stron opartych na szablonach.
2. Karty produktów w sklepach internetowych. Efekty winiet i podświetlenie przy najechaniu przyciągają uwagę do kluczowych produktów.
3. Prezentacje startupów. Nietypowe microinterakcje pomagają sprawić, że strona usługi technologicznej staje się bardziej niezapomniana.
4. Interaktywne ekspozycje i galerie. Bloki ze złożonym przewijaniem i kształtami geometrycznymi na clip-path ożywiają długie strony.

Zalety i niedoskonałości

Główną zaletą repozytorium jest dostępność open source. Każdy komponent znajduje się w folderze registry/components jako izolowany plik TypeScript. Możesz zajrzeć do środka btn-bg-spotlight.tsx, zobaczyć jak obliczane są offsety clientX i clientY, dostosować wzór decay lub zmienić kolory, aby pasowały do Twojego systemu projektowego.

Wadą, która się wyróżnia, jest minimalny README. Brakuje w nim szczegółowych tabel z właściwościami dla każdego komponentu, więc będziesz musiał eksplorować opcje albo uruchamiając lokalny serwer dokumentacji (pnpm dev), albo czytając kod bezpośrednio w katalogach registry/ i components/. Niemniej jednak kod jest napisany czysto i czyta się go łatwo.

Jeśli budujesz stronę promocyjną, landing page dla swojego projektu pobocznego lub odświeżasz osobiste portfolio, Cursify zaoszczędzi Ci kilku wieczorów ręcznego kodowania animacji. Projekt dostarcza solidny zestaw gotowych do użycia technik wizualnych, które możesz zintegrować z istniejącym stosem Tailwind i Next.js w kilka minut. Możesz sprawdzić repozytorium i sklonować szablon na GitHub.