# スタイル · 動き

共有する光がポインターに追従するか、方向を固定するかを選びます。

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

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

## 動きの設定を選ぶ

`system` は動きを減らす設定に従います。タッチで画面基準の照明位置を更新します。スクロール中や指を離した後も最後の位置を保ち、その下を移動するサーフェスが反応します。再びタッチすると位置を更新します。`dynamic` は動きを減らす設定を上書きするため、ユーザーが明示的に選べるようにしてください。詳しくは[動き](https://edge.bolerish.com/ja/docs/motion/)を参照してください。

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

## 動きの設定を選ぶ

各モードを試してください。選択はサンプルカードを含む、サイト全体の共有するライトに反映されます。

動きを比較

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

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

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

## ポインター照明

toward はポインター側、away は反対側の境界を強調します。range はサーフェスの外で光が減衰する距離です。例えば range: 40 では、ポインターがカードの外側で 40 CSS ピクセル離れると効果が消えます。ポインターの周囲 40 ピクセルだけを照らす設定ではありません。ポインターをカードの外へ動かして値の違いを確認してください。固定ライトには適用されません。

ポインター照明

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

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

## 動きの値

| 値 | 動作 |
| --- | --- |
| `system` | 動きを減らす設定と入力設定に従います。ライブラリーのデフォルトです。 |
| `dynamic` | 動きを減らす設定でも、マウス・ペンの入力やタッチ接触に追従します。 |
| `static` | 方向を固定し、ポインターの動きを無視します。 |

その他のオプションは[API リファレンス](https://edge.bolerish.com/ja/docs/react/provider/#lighting)を参照してください。

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

## System

精密なホバー入力がない場合は固定ライトで開始します。動きを減らす設定がオフなら、マウスやペンの入力で追跡を開始できます。タッチで画面基準の照明位置を更新します。スクロール中や指を離した後も最後の位置を保ち、その下を移動するサーフェスが反応します。再びタッチすると位置を更新します。

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

## Dynamic

このモードは動きを減らす設定を上書きするため、明示的な選択肢にしてください。マウス・ペンの入力やタッチ接触があるまで効果は表示されません。

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

## Static

`staticDirection` に有限の角度（度単位）または `"random"` を指定します。デモでは 0°、90°、180°、270°、315° を選べます。random はマウント時に共有方向を選び、再レンダリングや外観変更でも維持します。方向を選び直すには再マウントしてください。

Static

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

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

## ユーザー設定を尊重する

フォーカス、選択状態、検証結果は照明がなくても分かるようにしてください。入力方法と強制カラーでの動作は[アクセシビリティ](https://edge.bolerish.com/ja/docs/integration/#preserve-native-interactions)を参照してください。