← Back to Lab

Lab / Motion & Audio Interaction · TypeScript · React · Canvas 2D · Web Audio API · Pointer Events

Wave Line — 소리와 손끝에 반응하는 선

가볍게 스치고, 잡아당기고, 음악을 더해 보세요. 잔잔하게 흐르던 하나의 선이 손끝과 소리에 반응하는 인터랙션 실험입니다.

하나의 선을 건드려 보세요

Wave Line은 손끝과 소리를 하나의 움직임으로 연결하는 실험입니다. 화면 가운데 흐르는 선 위로 마우스를 움직이면 작은 파문이 생깁니다. 선을 잡아당기면 정해진 범위까지 늘어나고, 놓으면 부드럽게 돌아옵니다. 모바일에서는 선을 터치하고 움직여 볼 수 있습니다.

내 음악으로 움직이게 하기

노래를 첨부하고 재생하면 선이 음악의 주파수와 음량에 반응합니다. 음악이 흐르는 동안에도 선을 건드릴 수 있습니다. 선택한 음악은 브라우저 안에서만 재생·분석하며 서버로 전송하지 않습니다.

실험한 것

  • 스침과 드래그를 구분하는 포인터 인터랙션
  • 최대 끌림 범위를 가진 탄성과 부드러운 복원
  • 하나의 곡선에 합성한 주파수 시각화
  • 모바일 터치와 움직임 감소 설정

데모에서 노래를 첨부한 뒤 재생을 눌러 보세요.