動き

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

動きの設定を選ぶ

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

動きの設定を選ぶ

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

motion

ポインターに追従

動きを比較

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

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

JavaScript を有効にするとサンプルを操作できます。

動きを比較

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

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

ポインター照明

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

direction

range: 480 px

ポインターに追従

ポインター照明

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

JavaScript を有効にするとサンプルを操作できます。

ポインター照明

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

動きの値

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

その他のオプションはAPI リファレンスを参照してください。

System

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

Dynamic

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

Static

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

staticDirection

Static

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

JavaScript を有効にするとサンプルを操作できます。

Static

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

ユーザー設定を尊重する

フォーカス、選択状態、検証結果は照明がなくても分かるようにしてください。入力方法と強制カラーでの動作はアクセシビリティを参照してください。