Vibeset

Mira del cursor

Dos líneas que cruzan la zona por donde está el puntero, con coordenadas, un marco que se cierra sobre lo señalado y un pulso al pulsar. Es decoración sobre el ratón y se comporta como tal: su capa es aria-hidden y no recibe eventos, así que no tapa nada, y lo de debajo es HTML normal con o sin mira. No esconde el cursor del sistema salvo que se pida, porque quien necesita ver bien dónde está lo pierde. Sigue con suavizado y el bucle solo existe mientras hay distancia que recorrer, corregido con el tiempo real entre fotogramas. Para el bloqueo basta marcar un elemento con data-mira y un nombre: la mira se centra en él y la etiqueta lo dice en lugar de las coordenadas. En táctil no hace nada, y por eso nada puede depender de ella.

Y el original de React Bits: Crosshair

Esta pieza está escrita desde cero en Vibeset: no se ha copiado ni portado nada de React Bits. Hace algo parecido a su Crosshair, y esto es lo que vimos del suyo por si prefieres usar el original.

Cuándo sí

Para la portada de una herramienta técnica, de cartografía o de juego, donde apuntar es parte de la experiencia. No para una web de contenido.

Ojo con

Con hideCursor esconde el cursor real, y quien necesita verlo bien lo pierde: déjalo apagado. Solo reacciona al ratón: en táctil no hace nada, así que no puede ser la única forma de llegar a algo.

Accesibilidad

Respeta el movimiento reducido del sistema. Ignora a propósito los punteros que no son ratón. Es decorativo.