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.
Personalizável
Controle tamanho, cor, opacidade, velocidade 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
Múltiplos modos: outline mode, interactive-only, center dot customizável. Funciona com React, HTML/JavaScript e TypeScript.
Instalação
npm install aura-cursorOu usando yarn:
yarn add aura-cursorOu usando pnpm:
pnpm add aura-cursorComo 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}
hideDefaultCursor={true}
hoverColor="#3c096c"
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
});
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,
hideDefaultCursor: true,
hoverColor: "#3c096c",
hoverEffect: {
scale: 1.8,
color: "#3c096c",
opacity: 0.5,
},
});
// Initialize the cursor
cursor.init();Referência da API
Todas as props disponíveis para personalizar o Aura Cursor:
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
size | number | 30 | Tamanho do cursor em pixels |
color | string | "#3b82f6" | Cor principal do cursor (hex, rgb, etc) |
opacity | number | 0.5 | Opacidade do cursor (0-1) |
speed | number | 0.2 | Velocidade de animação (0-1) |
hideDefaultCursor | boolean | true | Ocultar o cursor padrão do navegador |
outlineMode | boolean | false | Habilita o modo outline (apenas contorno) |
outlineWidth | number | 2 | Largura do outline em pixels |
centerDotColor | string | "#3b82f6" | Cor do ponto central |
centerDotSize | number | 10 | Tamanho do ponto central em pixels |
hoverColor | string | "#3c096c" | Cor quando hover em elementos interativos |
centerDotHoverColor | string | "#3c096c" | Cor do ponto central no hover |
hoverEffect | object | - | Efeitos aplicados no hover |
hoverEffect.scale | number | 1.8 | Escala do cursor no hover |
hoverEffect.color | string | "#3c096c" | Cor do cursor no hover |
hoverEffect.opacity | number | 0.5 | Opacidade do cursor no hover |