Cursify transforma o cursor familiar em uma ferramenta interativa para sites

Quando você abre mais um site estiloso de um estúdio ou agência de design no Awwwards, as microinterfaces imediatamente chamam sua atenção. O cursor aumenta suavemente sobre os links, deixa um rastro de luz atrás de si, estica textos ou destaca cards com um gradiente suave. Parece fresco, mas quando você se senta para replicar isso em seu próprio projeto React, você rapidamente encontra uma barreira de trabalho rotineiro. Você precisa calcular manualmente as coordenadas do mouse, rastrear re-renderizações, configurar animações com molas e lutar contra atrasos em dispositivos móveis.

Recentemente, a equipe UI-Layout lançou o repositório cursify. Essencialmente, é uma coleção pronta de componentes e um template de documentação para qualquer pessoa que queira adicionar rapidamente efeitos de cursor incomuns, botões iluminados e animações cinéticas a uma aplicação React ou Next.js.

O que tem dentro do projeto

O repositório é estruturado como um template starter Next.js com suporte a MDX. A arquitetura segue o princípio do shadcn/ui: em vez de puxar um pacote npm monolítico cheio de código desnecessário, você simplesmente copia os componentes que precisa diretamente para o seu projeto.

O repositório contém vários grupos de componentes:

• Cursor e texto interativos. Componentes como cursor-follow-text vinculam texto ou cards ao movimento do mouse com easing suave graças à física de molas.
• Efeitos em botões. As opções incluem um destaque que percorre o botão (btn-bg-shine), um holofote que segue o cursor (btn-bg-spotlight) e estados pressionados suaves.
• Desfoque e vinhetas. O conjunto blur-vignette aplica máscaras de gradiente desfocadas a cards, imagens e vídeos de fundo.
• Animações de scroll e números. Rolagem horizontal com Framer Motion e contadores de números animados (numbersuffle).

Como a stack é configurada

A base do projeto é mínima. Ele usa React, Tailwind CSS e a biblioteca motion (um pacote moderno independente dos criadores do Framer Motion).

Para instalar as dependências base em um projeto existente, basta executar:

npm install motion clsx tailwind-merge

Para combinar classes do Tailwind, o helper padrão cn é usado, familiar para qualquer pessoa que tenha trabalhado com uma stack React moderna:

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

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

Animações de cursor em smartphones e tablets geralmente só atrapalham e quebram a rolagem nativa. Os desenvolvedores do Cursify moveram a detecção de tela touch para um hook separado useMediaQuery. Com ele, você pode desativar sem dor efeitos complexos de cursor em telas touch:

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

Onde isso é útil na prática

Animações especializadas de cursor não são necessárias em todo lugar. Em um sistema CRM pesado ou painel de analytics, um círculo voando atrás do mouse provavelmente irritaria o usuário. Mas existem cenários onde o polimento visual impacta diretamente a conversão e a percepção do produto:

1. Portfólios e páginas promocionais. Quando você precisa mostrar atenção aos detalhes e se destacar de centenas de landing pages de template.
2. Cards de produtos em lojas online. Efeitos de vinheta e destaque no hover chamam a atenção para produtos-chave.
3. Apresentações de startups. Micro-interações incomuns ajudam a tornar um site de serviço tech mais memorável.
4. Showcases interativos e galerias. Blocos com scroll complexo e formas geométricas em clip-path dão vida a páginas longas.

Prós e pontos a melhorar

A principal vantagem do repositório é a disponibilidade open source. Cada componente vive na pasta registry/components como um arquivo TypeScript isolado. Você pode dar uma olhada dentro de btn-bg-spotlight.tsx, ver como os deslocamentos de clientX e clientY são calculados, ajustar a fórmula de decaimento ou mudar as cores para combinar com seu sistema de design.

O ponto negativo que se destaca é o README mínimo. Falta tabelas detalhadas com as props de cada componente individual, então você precisará explorar as opções executando o servidor de documentação local (pnpm dev) ou lendo o código diretamente nos diretórios registry/ e components/. Dito isso, o código é escrito de forma limpa e lê facilmente.

Se você está construindo um site promocional, uma landing page para seu side project ou renovando seu portfólio pessoal, o Cursify vai te economizar algumas noites de codificação manual de animações. O projeto fornece um conjunto sólido de técnicas visuais prontas para usar que você pode integrar na sua stack existente de Tailwind e Next.js em poucos minutos. Você pode conferir o repositório e fazer um fork do template no GitHub.