Aura Cursor

Uma biblioteca leve e personalizável para criar cursors customizados em aplicações web modernas. Crie cursors bonitos que seguem o mouse com animações suaves e efeitos interativos de hover. Experimente os controles ao lado para ver as diferentes configurações em tempo real.

ReactTypeScriptNext.js

Ver no GitHub Ver no NPM

Personalizável

Controle tamanho, cor, opacidade, velocidade, lag, forma e muito mais através de props simples. Suporte completo a TypeScript.

Performance

Otimizado para performance com animações suaves usando requestAnimationFrame. Bundle pequeno e zero dependências.

Detecção Inteligente

Detecta automaticamente elementos interativos (links, botões, etc.) e aplica efeitos especiais de hover. Esconde automaticamente quando o mouse sai da janela.

Flexível

Trail, snap magnético, pulso no clique, outline mode, interactive-only e formas customizadas. Funciona com React, HTML/JavaScript e TypeScript.

Instalação

npm install aura-cursor

Ou usando yarn:

yarn add aura-cursor

Ou usando pnpm:

pnpm add aura-cursor

Como Usar

Exemplo básico com React:

import { AuraCursor } from "aura-cursor/react";

function App() {
  return (
    <>
      <AuraCursor
        size={30}
        color="#3b82f6"
        opacity={0.5}
        speed={0.2}
        lag={1.4}
        easing="easeOut"
        hideDefaultCursor
        shape="rounded"
        hoverColor="#3c096c"
        trail={{ length: 6, fade: 0.55, scale: 0.92 }}
        clickEffect={{ scale: 0.7, duration: 160 }}
        magnetic={{ strength: 0.4, padding: 48 }}
        hoverEffect={{
          scale: 1.8,
          color: "#3c096c",
          opacity: 0.5,
        }}
      />
      <YourApp />
    </>
  );
}

Ou usando o hook:

import { useAuraCursor } from "aura-cursor/react";

function App() {
  useAuraCursor({
    size: 30,
    color: "#3b82f6",
    opacity: 0.5,
    speed: 0.2,
    trail: { length: 4 },
    clickEffect: true,
  });

  return <div>Your app content</div>;
}

Ou usando JavaScript:

import { AuraCursor } from "aura-cursor";

const cursor = new AuraCursor({
  size: 30,
  color: "#3b82f6",
  opacity: 0.5,
  speed: 0.2,
  lag: 1.8,
  easing: "easeOut",
  hideDefaultCursor: true,
  shape: "rounded",
  hoverColor: "#3c096c",
  trail: { length: 6, fade: 0.55, scale: 0.92 },
  clickEffect: { scale: 0.7, duration: 160 },
  magnetic: { strength: 0.4, padding: 48 },
  hoverEffect: {
    scale: 1.8,
    color: "#3c096c",
    opacity: 0.5,
  },
});

cursor.init();

Referência da API

Todas as props disponíveis para personalizar o Aura Cursor:

Prop	Tipo	Padrão	Descrição
`size`	number	`20`	Tamanho do cursor em pixels
`color`	string	`"#000000"`	Cor principal do cursor (hex, rgb, etc)
`opacity`	number	`0.5`	Opacidade do cursor (0-1)
`speed`	number	`0.3`	Velocidade de acompanhamento do mouse (0-1)
`lag`	number	`1`	Multiplicador de atraso (maior = mais lag)
`easing`	string	`"linear"`	Interpolação até o alvo (linear \| easeOut)
`hideDefaultCursor`	boolean	`false`	Ocultar o cursor padrão do navegador
`interactiveOnly`	boolean	`false`	Mostrar o cursor apenas em elementos interativos
`outlineMode`	boolean	`false`	Habilita o modo outline (apenas contorno)
`outlineWidth`	number	`2`	Largura do outline em pixels
`centerDotColor`	string	`-`	Cor do ponto central
`centerDotSize`	number	`3`	Tamanho do ponto central em pixels
`hoverColor`	string	`-`	Cor quando hover em elementos interativos
`centerDotHoverColor`	string	`-`	Cor do ponto central no hover
`shape`	string	`"circle"`	Forma do cursor (circle \| square \| rounded)
`blur`	number	`-`	Blur CSS em pixels
`mixBlendMode`	string	`-`	CSS mix-blend-mode (ex.: difference)
`zIndex`	number	`9999`	z-index do cursor
`borderRadius`	string \| number	`-`	Sobrescreve o border-radius da forma
`customCursor`	HTMLElement \| string	`-`	Conteúdo HTML customizado dentro do cursor
`trail`	object	`-`	Rastro fantasma atrás do cursor
`trail.length`	number	`0`	Número de elementos fantasma (0 desativa)
`trail.fade`	number	`0.6`	Multiplicador de opacidade dos fantasmas
`trail.scale`	number	`0.95`	Queda de escala por fantasma
`clickEffect`	boolean \| object	`-`	Pulso de escala no clique
`clickEffect.scale`	number	`0.75`	Escala enquanto pressiona
`clickEffect.duration`	number	`150`	Duração da restauração em ms
`magnetic`	boolean \| object	`-`	Atração para o centro de elementos interativos
`magnetic.strength`	number	`0.35`	Força da atração (0-1)
`magnetic.padding`	number	`40`	Área extra ao redor do elemento em px
`interactiveSelector`	string	`-`	Seletor CSS extra/override para elementos interativos
`excludeSelector`	string	`-`	Elementos com este seletor nunca são interativos
`hoverEffect`	object	`-`	Efeitos aplicados no hover
`hoverEffect.scale`	number	`1.5`	Escala do cursor no hover
`hoverEffect.color`	string	`-`	Cor do cursor no hover
`hoverEffect.opacity`	number	`-`	Opacidade do cursor no hover
`onHoverInteractive`	function	`-`	Dispara quando o estado de hover interativo muda
`onClick`	function	`-`	Dispara no mouse down

Elementos Interativos

Passe o mouse sobre os elementos abaixo para ver os efeitos do cursor:

Link

Voltar para projetos