Cursify convierte el cursor familiar en una herramienta interactiva para sitios web

Cuando abres otro sitio web elegante de un estudio o agencia de diseño en Awwwards, las microinterfaces inmediatamente llaman tu atención. El cursor se agranda suavemente sobre los enlaces, deja un rastro de luz detrás de él, estira el texto o destaca las tarjetas con un gradiente suave. Se ve fresco, pero cuando te sientas a replicar esto en tu propio proyecto React, rápidamente te encuentras con una pared de trabajo rutinario. Tienes que calcular manualmente las coordenadas del mouse, rastrear los re-renders, configurar animaciones de resorte y luchar contra el retraso en dispositivos móviles.

最近，UI-Layout 团队发布了 cursify 仓库。从本质上讲，它是一个现成的组件集合和文档模板，适用于任何想要快速为 React 或 Next.js 应用程序添加不寻常的光标效果、发光按钮和动态动画的人。

Qué hay dentro del proyecto

El repositorio está estructurado como una plantilla inicial de Next.js con soporte para MDX. La arquitectura sigue el principio de shadcn/ui: en lugar de instalar un paquete npm monolítico lleno de código innecesario, simplemente copias los componentes que necesitas directamente en tu proyecto.

El repositorio contiene varios grupos de componentes:

• Curso interactivo y texto. Componentes como cursor-follow-text vinculan texto o tarjetas al movimiento del mouse con suavizado fluido gracias a la física de resortes.
• Efectos de botones. Las opciones incluyen un destacado en movimiento (btn-bg-shine), un foco que sigue al cursor (btn-bg-spotlight) y estados de presión suaves.
• Desenfoque y viñetas. El conjunto blur-vignette aplica máscaras de gradiente difuminado a tarjetas, imágenes y videos de fondo.
• Animaciones de desplazamiento y números. Desplazamiento horizontal con Framer Motion y contadores de números en movimiento (numbersuffle).

Cómo está configurado el stack

La base del proyecto es mínima. Utiliza React, Tailwind CSS y la biblioteca motion (un paquete moderno independiente de los creadores de Framer Motion).

Para instalar las dependencias base en un proyecto existente, simplemente ejecuta:

npm install motion clsx tailwind-merge

Para combinar clases de Tailwind, se utiliza el helper estándar cn, familiar para cualquiera que haya trabajado con un stack moderno de React:

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

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

Las animaciones de cursor en smartphones y tablets generalmente solo estorban y rompen el desplazamiento nativo. Los desarrolladores de Cursify movieron la detección de pantalla táctil a un hook separado useMediaQuery. Con él, puedes deshabilitar sin dolor los efectos de cursor complejos en pantallas táctiles:

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

Dónde resulta útil en la práctica

Las animaciones de cursor especializadas no son necesarias en todas partes. En un sistema CRM pesado o un panel de análisis, un círculo volando detrás del mouse probablemente molestaría más al usuario. Pero hay escenarios donde el pulido visual impacta directamente la conversión y la percepción del producto:

1. Portfolios y páginas promocionales. Cuando necesitas mostrar atención al detalle y destacar entre cientos de páginas de destino con plantillas.
2. Tarjetas de productos en tiendas en línea. Los efectos de viñeta y el destacado al pasar el mouse atraen la atención hacia productos clave.
3. Presentaciones de startups. Las microinteracciones inusuales ayudan a hacer que un sitio web de servicio tecnológico sea más memorable.
4. Escaparates y galerías interactivas. Bloques con desplazamiento complejo y formas geométricas en clip-path dan vida a páginas largas.

Ventajas y aspectos a mejorar

La principal ventaja del repositorio es la disponibilidad de código abierto. Cada componente vive en la carpeta registry/components como un archivo TypeScript aislado. Puedes覗き見る dentro de btn-bg-spotlight.tsx, ver cómo se calculan los desplazamientos de clientX y clientY, ajustar la fórmula de decaimiento o cambiar los colores para que coincidan con tu sistema de diseño.

El inconveniente que destaca es el README mínimo. Carece de tablas detalladas con las props de cada componente individual, por lo que tendrás que explorar las opciones ejecutando el servidor de documentación local (pnpm dev) o leyendo el código directamente en los directorios registry/ y components/. Dicho esto, el código está escrito limpiamente y se lee fácilmente.

Si estás construyendo un sitio promocional, una página de destino para tu proyecto paralelo o renovando tu portafolio personal, Cursify te ahorrará un par de noches de codificación manual de animaciones. El proyecto proporciona un sólido conjunto de técnicas visuales listas para usar que puedes integrar en tu stack existente de Tailwind y Next.js en un par de minutos. Puedes revisar el repositorio y hacer fork de la plantilla en GitHub.