움직임
공유 조명이 포인터를 따라갈지 고정 방향을 유지할지 선택하세요.
움직임 방식 선택하기
system을 사용하면 동작 줄이기 설정을 따릅니다. 터치하면 화면 기준 조명 위치를 갱신합니다. 스크롤하거나 손가락을 떼도 마지막 위치를 유지하고, 그 아래로 이동하는 서피스가 반응합니다. 다시 터치하면 위치를 갱신합니다. dynamic은 동작 줄이기 설정을 무시하므로 사용자가 직접 선택할 수 있게 제공하세요. 자세한 내용은 움직임을 참고하세요.
움직임 방식 선택하기
아래에서 각 모드를 사용해 보세요. 선택한 설정은 예제 카드를 포함한 사이트 전체의 공유 조명에 적용됩니다.
포인터 따라가기
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픽셀만 밝히는 설정은 아닙니다. 포인터를 카드 바깥으로 옮겨 값을 비교해 보세요. 고정 조명에는 적용되지 않습니다.
포인터 따라가기
const light = useLight({ motion: 'dynamic', direction: "toward", range: 480 });움직임 값
| 값 | 동작 |
|---|---|
system | 동작 줄이기와 입력 환경 설정을 따릅니다. 라이브러리 기본값입니다. |
dynamic | 동작 줄이기가 켜져 있어도 마우스·펜 입력이나 터치 접촉을 따라갑니다. |
static | 고정 방향을 유지하며 포인터 움직임을 무시합니다. |
추가 옵션은 API 레퍼런스를 참고하세요.
System
정밀한 호버 장치가 없으면 고정 조명으로 시작합니다. 동작 줄이기가 꺼져 있으면 마우스나 펜 입력으로 추적을 시작할 수 있습니다. 터치하면 화면 기준 조명 위치를 갱신합니다. 스크롤하거나 손가락을 떼도 마지막 위치를 유지하고, 그 아래로 이동하는 서피스가 반응합니다. 다시 터치하면 위치를 갱신합니다.
Dynamic
이 모드는 동작 줄이기를 무시하므로 사용자가 명시적으로 선택하게 하세요. 마우스·펜 입력이나 터치 접촉이 들어오기 전에는 효과가 숨겨집니다.
Static
staticDirection에 유한한 각도 또는 "random"을 지정하세요. 예제에서는 0°, 90°, 180°, 270°, 315°를 선택할 수 있습니다. random은 마운트할 때 공유 방향 하나를 고르고, 재렌더링이나 스타일 변경 시에는 유지합니다. 새 방향을 고르려면 다시 마운트하세요.
Static
const light = useLight({ motion: 'static', staticDirection: "random" });사용자 설정 존중하기
포커스, 선택 상태, 유효성 검사 결과는 조명 없이도 알아볼 수 있어야 합니다. 입력 방식과 강제 색상 모드에서의 동작은 접근성을 참고하세요.