nilbuild/page-mascot

해결하는 문제

웹사이트에 인터랙티브한 커서 추적 캐릭터(마스코트)를 추가하는 방법을 제공하여, 개발자가 사용자의 마우스를 보고 클릭에 반응하는 캐릭터를 쉽게 구현할 수 있도록 합니다.

작동 방식

이 시스템은 3x3 스프라이트 시트를 두 개 사용합니다: 하나는 머리 방향용, 다른 하나는 표정용입니다. 컴포넌트는 포인터의 각도를 계산하여 방향 시트의 적절한 셀을 선택합니다. 사용자가 마스코트를 클릭하면 반응 시트의 셀이 짧은 시간 동안 표시됩니다. 또한, AI 에이전트가 9가지 방향과 9가지 표정을 다양한 스타일(컬러, 잉크, 스케치, 리소, 페이퍼, 픽셀)로 그리고 정렬된 시트로 조립하는 자동 생성 프로세스도 지원합니다.

대상 사용자

React 컴포넌트를 사용하여 페이지에 재미있고 인터랙티브한 요소를 추가하고 싶은 웹 개발자를 위한 것입니다.

하이라이트

• 포인터 각도 기반의 커서 추적 머리 움직임.
• 클릭으로 트리거되는 반응(깜빡임/찡그림).
• 스킬 설치를 통한 AI 기반 커스텀 마스코트 생성.
• 리소 및 픽셀 아트를 포함한 다양한 예술 스타일 지원.
• 스크린 리더 및 prefers-reduced-motion을 위한 접근성 고려.