Movimiento
Elige si la luz compartida sigue al puntero o mantiene una dirección fija.
Elegir el comportamiento del movimiento
Usa system para respetar el movimiento reducido. El toque actualiza la posición de la luz en coordenadas de pantalla. Al desplazarse o levantar el dedo se conserva la última posición; las superficies reaccionan al pasar por debajo. Un nuevo toque actualiza la posición. Ofrece dynamic como una elección explícita, ya que ignora el movimiento reducido. Consulta Movimiento.
Elegir el comportamiento del movimiento
Prueba cada modo. La selección actualiza la luz compartida de todo el sitio, incluida la tarjeta de ejemplo.
Seguir al puntero
const light = useLight({ motion: "dynamic" });const surface = useSurface(light, { edgeStyle: "raised" });
<Card ref={surface}> Your component</Card>Iluminación del puntero
toward ilumina el borde orientado hacia el puntero; away ilumina el opuesto. range es la distancia de atenuación fuera de cada superficie. Por ejemplo, con range: 40 el efecto desaparece cuando el puntero está a 40 píxeles CSS de la tarjeta, fuera de ella; no crea un círculo iluminado de 40 píxeles alrededor del puntero. Mueve el puntero fuera de la tarjeta para comparar los valores. Estos ajustes no afectan a la iluminación fija.
Seguir al puntero
const light = useLight({ motion: 'dynamic', direction: "toward", range: 480 });Valores de movimiento
| Valor | Comportamiento |
|---|---|
system | Respeta las preferencias de movimiento reducido y de entrada. Predeterminado de la biblioteca. |
dynamic | Sigue el ratón, lápiz o contacto táctil incluso con movimiento reducido activado. |
static | Mantiene una dirección fija e ignora el movimiento del puntero. |
Consulta las opciones adicionales en la Referencia de la API.
System
Sin un dispositivo preciso con hover, la luz empieza fija. El ratón o lápiz puede activar el seguimiento si el movimiento reducido está desactivado. El toque actualiza la posición de la luz en coordenadas de pantalla. Al desplazarse o levantar el dedo se conserva la última posición; las superficies reaccionan al pasar por debajo. Un nuevo toque actualiza la posición.
Dynamic
Ofrece este modo como opción explícita porque ignora la reducción de movimiento. El efecto permanece oculto hasta recibir entrada de ratón, lápiz o contacto táctil.
Static
Asigna a staticDirection un ángulo finito en grados o "random". El ejemplo ofrece 0°, 90°, 180°, 270° y 315°. random elige una dirección compartida al montar y la conserva al volver a renderizar o cambiar la apariencia. Vuelve a montar para elegir otra dirección.
Static
const light = useLight({ motion: 'static', staticDirection: "random" });Respetar las preferencias del usuario
El foco, la selección y la validación deben distinguirse sin depender de la luz. Consulta Accesibilidad para los modos de entrada y colores forzados.