# 스타일 · 움직임

공유 조명이 포인터를 따라갈지 고정 방향을 유지할지 선택하세요.

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

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

## 움직임 방식 선택하기

`system`을 사용하면 동작 줄이기 설정을 따릅니다. 터치하면 화면 기준 조명 위치를 갱신합니다. 스크롤하거나 손가락을 떼도 마지막 위치를 유지하고, 그 아래로 이동하는 서피스가 반응합니다. 다시 터치하면 위치를 갱신합니다. `dynamic`은 동작 줄이기 설정을 무시하므로 사용자가 직접 선택할 수 있게 제공하세요. 자세한 내용은 [움직임](https://edge.bolerish.com/ko/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/ko/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/ko/docs/integration/#preserve-native-interactions)을 참고하세요.