AIPM

# hover-reveal — 커서를 올리면 인물이 바뀌는 히어로

생성: 2026-08-11 | 출처: `커서를 올리면 인물이 바뀌는 웹사이트 만들기.pdf`

## 무엇인가

히어로 배경에 같은 인물의 사진 두 장(평상시 / AI 에이전트)을 겹쳐 두고,
커서가 지나간 자리에만 두 번째 사진이 **붓으로 칠한 것처럼** 드러난다.
손을 떼면 자국이 서서히 사라진다.

커서를 따라다니는 원형 스포트라이트가 아니다. **움직인 궤적이 곧 형태**가 되고,
붓 자국은 시간이 지나면 옅어진다. 그래서 빠르게 그으면 길게 늘어지고,
한자리에 머물면 뭉쳐서 진해진다.

## 파일

```
hover-reveal/
├── index.html      마크업 + 3.5초 페일세이프
├── style.css       레이아웃 · 인트로 연출
├── main.js         인트로 발동 · 네비 · 리빌 엔진
└── assets/
    ├── hero-before.webp    1600px  57KB   평상시
    ├── hero-after.webp     1600px  66KB   AI 에이전트
    ├── hero-before-m.webp   900px  25KB   모바일
    ├── hero-after-m.webp    900px  30KB   모바일
    └── hero-mask.png       인물 실루엣 (다이얼을 인물 뒤로 보내는 데 씀)
```

전체 396KB. 서버 없이 `index.html` 을 파일로 열어도 동작한다.

## 원리

### 리빌 (main.js)

버퍼 캔버스(`trail`)에 커서 자국을 누적하고, 그 자국을 마스크 삼아
after 이미지를 오려 그린다. 매 프레임 세 가지 일이 순서대로 일어난다.

| 단계 | 합성 모드 | 하는 일 |