Overlay Mouse Cursor.
마우스 커서가 영역 위에서 부드럽게 변형되는 인터랙션을 구현합니다. framer-motion을 활용하여 커스텀 커서를 생성하고, 마우스 움직임에 따라 자연스럽게 따라가는 애니메이션을 제공합니다.
이 영역에 마우스를 올려보세요!
컨트롤 패널
커서 안에 표시될 텍스트
커서 크기
커서 배경 색상
데모 영역의 텍스트
데모 텍스트 크기
데모 텍스트 색상
데모 영역 배경색
1
인터렉션 아이디어
언제:사용자가 마우스를 움직일 때
무엇을:커스텀 커서를
어떻게:framer-motion의 useMotionValue와 useSpring을 활용하여 마우스 위치에 따라 부드럽게 따라가는 애니메이션으로 표현하고, 스프링 물리 효과를 적용하여 자연스러운 움직임 구현
2
바이브 프롬프트
OverlayCursorProvider 컴포넌트를 만들어주세요. 이 컴포넌트는 마우스 커서가 영역 위에서 부드럽게 변형되는 인터랙션을 보여줍니다. children prop으로 감싸질 콘텐츠를, cursorText prop으로 커서 안에 표시될 텍스트를, cursorSize prop으로 커서 크기를, cursorColor prop으로 커서 배경 색상을 설정할 수 있게 해주세요. framer-motion의 useMotionValue와 useSpring을 활용하여 마우스 위치를 감지하고, 커스텀 커서가 마우스를 따라 움직이도록 구현해주세요. 스프링 물리 효과를 적용하여 자연스러운 애니메이션을 구현하고, 마우스 진입/이탈 시 커서의 표시/숨김 효과도 추가해주세요.