Repolode
Enviar
ui-layouts

ui-layouts/cursify

Biblioteca de animações de cursor para React e Next.js, com efeitos reutilizáveis que acompanham o cursor, feita com Tailwind CSS e motion.

Ver no GitHubSite
Estrelas
2,116
Forks
102
Issues abertas
9
Último commit
há 7 meses

O que é?

Cursify é uma coleção de componentes de animação de cursor para projetos React e Next.js. Ela funciona como um registro de componentes para copiar e colar: o código de cada efeito fica no repositório e deve ser adicionado e ajustado no próprio projeto.

O repositório é estruturado como um site de documentação, com uma seção de componentes interativos, uma pasta registry com os arquivos-fonte dos componentes e uma pasta content com páginas MDX. Os componentes usam Tailwind CSS para estilização e a biblioteca motion para animações; por isso, ambos são necessários para instalá-los. O código também usa um pequeno helper cn, baseado em clsx e tailwind-merge, e um hook de media query.

O projeto é voltado a desenvolvedores frontend que querem adicionar efeitos de cursor interativos a landing pages ou sites de produtos sem precisar escrever a lógica das animações do zero.

Recursos principais

  • 01Oferece componentes reutilizáveis de animação que acompanham o cursor em projetos React e Next.js.
  • 02Usa Tailwind CSS para estilização e a biblioteca motion para animações.
  • 03Disponibiliza os componentes como código-fonte para copiar para um projeto.
  • 04Inclui um site de documentação com prévias interativas dos componentes.

Casos de uso

  • Adicionar um efeito de cursor interativo a uma página de marketing ou landing page.
  • Prototipar interações de hover e cursor em um site Next.js.
  • Usar o código de animação de cursor como ponto de partida para criar um efeito personalizado.

Início rápido

  1. 1

    Instale o Tailwind CSS (necessário para a maioria dos componentes).

  2. 2

    Instale motion, clsx e tailwind-merge.

    npm install motion clsx tailwind-merge
  3. 3

    Adicione o helper cn ao utils.ts e o hook useMediaQuery do README.

Antes de usar

  • Nenhuma licença é especificada, então os direitos de uso não estão claros.
  • O README não inclui instruções de execução; os componentes são copiados para o seu próprio projeto, em vez de serem executados de forma independente.
  • A maioria dos componentes exige que o Tailwind CSS e o motion sejam configurados primeiro.

Tópicos

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

Perguntas frequentes

O que é cursify?
Biblioteca de animações de cursor para React e Next.js, com efeitos reutilizáveis que acompanham o cursor, feita com Tailwind CSS e motion. Cursify é uma coleção de componentes de animação de cursor para projetos React e Next.js. Ela funciona como um registro de componentes para copiar e colar: o código de cada efeito fica no repositório e deve ser adicionado e ajustado no próprio projeto.
cursify é gratuito? Qual é a licença?
cursify não declara licença. O código é público, mas sem licença você não tem permissão explícita para reutilizá-lo; fale com o autor antes de depender dele.
cursify ainda é mantido?
Sem commits há mais de 6 meses. O último commit de cursify foi em 31 de mar. de 2026.
Para que posso usar cursify?
Adicionar um efeito de cursor interativo a uma página de marketing ou landing page. Prototipar interações de hover e cursor em um site Next.js. Usar o código de animação de cursor como ponto de partida para criar um efeito personalizado.
Como instalar cursify?
Instale o Tailwind CSS (necessário para a maioria dos componentes). Instale motion, clsx e tailwind-merge.: npm install motion clsx tailwind-merge Adicione o helper cn ao utils.ts e o hook useMediaQuery do README.
Onde consigo cursify?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/ui-layouts/cursify

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados