Anillo elástico

Un anillo que sigue al cursor con retraso elástico, se estira con la velocidad y, sobre lo clicable, se transforma en su silueta como un imán suave.

Vista previa en vivo

Todo lo clicable
se reconoce.

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { RingCursor } from "furin";

También con pnpm add furin, yarn add furin o bun add furin. Cada componente trae su CSS y lo importa por ti.

Prop	Tipo	Por defecto	Descripción
size	number	38	Diámetro del anillo en reposo, en px.
color	string	"#FFFFFF"	Color del anillo y del punto.
stiffness	number	260	Rigidez del resorte: más alto sigue más pegado al cursor.
damping	number	0.62	Rebote del resorte: 0.3 se pasa y regresa, 1 llega sin rebotar.
snap	boolean	true	Sobre un elemento clicable, el anillo se vuelve su silueta (si no, solo se agranda).
grow	number	1.9	Cuánto se agranda sobre un clicable cuando no se ajusta a su silueta.
dot	boolean	true	Muestra el punto central que sigue al cursor sin retraso.
hideCursor	boolean	true	Oculta el cursor del sistema dentro del contenedor.
global	boolean	false	Sigue al cursor en toda la ventana en vez de solo en el contenedor.
autoplay	boolean	false	Se pasea solo, visitando lo clicable, cuando nadie mueve el cursor.

Cursor gelatina
Gratis
Un cursor de gelatina translúcida con brillo especular: arrastra gotas que lo siguen, se estiran en la estela y se funden con él cuando te detienes.
Cursores
Estela de chispas
Gratis
El cursor suelta chispas con física: heredan su impulso, caen por gravedad, rebotan en el piso y se apagan de blanco a brasa.
Cursores
Estela de tinta
Gratis
Una estela de tinta brillante que sigue al cursor, se ensancha como si sangrara en el papel y se deshace en hebras hasta desvanecerse.
Cursores