Magnetic Cursor
마우스 커서가 자석처럼 끌리는 효과를 구현합니다. framer-motion을 활용하여 마우스 위치를 감지하고, 타겟 요소에 가까워질수록 커서가 자연스럽게 끌리는 애니메이션을 제공합니다.
HOVER ME
HOVER
INTERACT
컨트롤 패널
박스에 표시될 텍스트
박스 너비 (px)
박스 높이 (px)
박스 배경 색상
텍스트 색상
테두리 스타일
테두리 색상
텍스트 크기
글꼴 두께
1
인터렉션 아이디어
언제:사용자가 마우스를 타겟 요소 위에 올렸을 때
무엇을:커서를
어떻게:framer-motion의 useMotionValue와 useSpring을 활용하여 마우스 위치에 따라 자석처럼 끌리는 애니메이션으로 표현하고, 스프링 물리 효과를 적용하여 자연스러운 움직임 구현
2
바이브 프롬프트
MagneticCursor와 MagneticTargetBox 컴포넌트를 만들어주세요. MagneticCursor는 커스텀 커서를 생성하고, MagneticTargetBox는 자석 효과가 적용되는 타겟 요소입니다. MagneticCursor는 framer-motion의 useMotionValue와 useSpring을 활용하여 마우스 위치를 감지하고, 커스텀 커서가 마우스를 따라 움직이도록 구현해주세요. MagneticTargetBox는 마우스가 가까워질수록 커서가 끌리는 효과를 구현하고, hover 시 스케일과 위치 변화 애니메이션을 적용해주세요. 스프링 물리 효과를 적용하여 자연스러운 애니메이션을 구현하고, mix-blend-difference를 활용하여 커서의 가시성을 확보해주세요.