Repolode
Enviar
ui-layouts

ui-layouts/cursify

Biblioteca de animaciones del cursor para React y Next.js, con efectos reutilizables basados en Tailwind CSS y motion.

Ver en GitHubSitio web
Estrellas
2,116
Forks
102
Issues abiertos
9
Último commit
hace 7 meses

¿Qué es?

Cursify es una colección de componentes de animación del cursor para proyectos de React y Next.js. Está diseñado como un registro de componentes para copiar e integrar: el código de cada efecto se encuentra en el repositorio y está pensado para añadirse a un proyecto y adaptarse allí.

El repositorio está organizado como un sitio web de documentación con una sección de componentes interactivos, una carpeta de registro con los archivos fuente de los componentes y una carpeta de contenido con páginas MDX. Los componentes usan Tailwind CSS para los estilos y la biblioteca motion para las animaciones, por lo que ambos son necesarios para instalarlos. El código también utiliza un pequeño helper cn basado en clsx y tailwind-merge, además de un hook para consultas de medios.

El proyecto está dirigido a desarrolladores frontend que quieran añadir efectos de cursor interactivos a páginas de destino o sitios de productos sin tener que escribir la lógica de animación desde cero.

Funciones clave

  • 01Ofrece componentes reutilizables de animación que siguen el cursor para React y Next.js.
  • 02Usa Tailwind CSS para los estilos y la biblioteca motion para las animaciones.
  • 03Distribuye los componentes como código fuente que se puede copiar a un proyecto.
  • 04Incluye un sitio de documentación con vistas previas interactivas de los componentes.

Casos de uso

  • Añadir un efecto de cursor interactivo a una página de marketing o de destino.
  • Crear prototipos de interacciones de hover y cursor en un sitio de Next.js.
  • Usar código de animación del cursor como punto de partida para crear un efecto personalizado.

Inicio rápido

  1. 1

    Instala Tailwind CSS (necesario para la mayoría de los componentes).

  2. 2

    Instala motion, clsx y tailwind-merge.

    npm install motion clsx tailwind-merge
  3. 3

    Añade el helper cn a utils.ts y el hook useMediaQuery del README.

Antes de usarlo

  • No se especifica ninguna licencia, por lo que los derechos de uso no están claros.
  • El README no incluye instrucciones para ejecutar el proyecto; los componentes se copian en tu propio proyecto en lugar de ejecutarse de forma independiente.
  • La mayoría de los componentes requieren configurar Tailwind CSS y motion previamente.

Temas

#react#nextjs#cursor-animation#tailwindcss#framer-motion#ui-components#typescript

Preguntas frecuentes

¿Qué es cursify?
Biblioteca de animaciones del cursor para React y Next.js, con efectos reutilizables basados en Tailwind CSS y motion. Cursify es una colección de componentes de animación del cursor para proyectos de React y Next.js. Está diseñado como un registro de componentes para copiar e integrar: el código de cada efecto se encuentra en el repositorio y está pensado para añadirse a un proyecto y adaptarse allí.
¿cursify es gratuito? ¿Qué licencia tiene?
cursify no declara ninguna licencia. Su código es público, pero sin licencia no tienes permiso explícito para reutilizarlo; consulta al autor antes de depender de él.
¿cursify sigue mantenido?
Sin commits en más de 6 meses. El último commit de cursify fue el 31 mar 2026.
¿Para qué puedo usar cursify?
Añadir un efecto de cursor interactivo a una página de marketing o de destino. Crear prototipos de interacciones de hover y cursor en un sitio de Next.js. Usar código de animación del cursor como punto de partida para crear un efecto personalizado.
¿Cómo se instala cursify?
Instala Tailwind CSS (necesario para la mayoría de los componentes). Instala motion, clsx y tailwind-merge.: npm install motion clsx tailwind-merge Añade el helper cn a utils.ts y el hook useMediaQuery del README.
¿Dónde consigo cursify?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/ui-layouts/cursify

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados