efecto activo — mueve el cursor por la página
efecto actual: sparkle
mueve el cursor por cualquier parte de la página para ver el efecto.
en dispositivos táctiles este componente no hace nada — el cursor táctil nativo se respeta.
effect="sparkle" (default)
<r-cursor effect="sparkle"></r-cursor>
deja chispas ✦ ✺ ✜ ◌ ★ al mover el cursor. se animan y desaparecen.
effect="trail"
<r-cursor effect="trail"></r-cursor>
deja una estela de puntos decrecientes. ring buffer de 14 elementos — sin crear DOM en cada movimiento.
effect="dot" + hide-native
<r-cursor effect="dot" hide-native></r-cursor>
reemplaza el cursor nativo con un punto estilizado. hide-native oculta el cursor del SO.
el cursor nativo se restaura al quitar el elemento del DOM.
effect="emoji"
<r-cursor effect="emoji" emoji="🐱"></r-cursor>
un emoji sigue al cursor. acepta cualquier carácter o emoji como atributo emoji.
override de CSS vars
<r-cursor effect="sparkle" color="#f5b840" size="18"></r-cursor>
el atributo color acepta cualquier valor CSS. size en píxeles.
también puedes usar las variables: --r-cursor-color, --r-cursor-size.