# Estilos · Movimiento

Elige si la luz compartida sigue al puntero o mantiene una dirección fija.

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/es/docs/motion/

<a id="choose-an-input-mode"></a>

## 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](https://edge.bolerish.com/es/docs/motion/).

<a id="compare-motion"></a>

## Elegir el comportamiento del movimiento

Prueba cada modo. La selección actualiza la luz compartida de todo el sitio, incluida la tarjeta de ejemplo.

Comparar movimiento

```tsx
const light = useLight({ motion: "dynamic" });
const surface = useSurface(light, { edgeStyle: "raised" });

<Card ref={surface}>
  Your component
</Card>
```

<a id="pointer-lighting"></a>

## 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.

Iluminación del puntero

```tsx
const light = useLight({ motion: 'dynamic', direction: "toward", range: 480 });
```

<a id="options"></a>

## 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](https://edge.bolerish.com/es/docs/react/provider/#lighting).

<a id="system"></a>

## 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.

<a id="dynamic"></a>

## 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.

<a id="static"></a>

## 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

```tsx
const light = useLight({ motion: 'static', staticDirection: "random" });
```

<a id="accessibility"></a>

## Respetar las preferencias del usuario

El foco, la selección y la validación deben distinguirse sin depender de la luz. Consulta [Accesibilidad](https://edge.bolerish.com/es/docs/integration/#preserve-native-interactions) para los modos de entrada y colores forzados.