Tilt Card.

마우스 움직임에 따라 3D 기울기 효과를 적용하는 인터랙티브 카드입니다. 마우스 위치에 따라 카드가 자연스럽게 기울어지며, 패럴럭스 효과와 스프링 애니메이션을 통해 부드러운 사용자 경험을 제공합니다.

Tilt Card Example

이 카드는 마우스 위치에 따라 3D 기울기 효과를 보여줍니다.

컨트롤 패널

최대 기울기 각도 (도)

패럴럭스 깊이 강도

카드 너비 (px)

카드 높이 (px)

카드 배경색

카드 내부 여백

모서리 둥글기

그림자 강도

카드 제목

1

인터렉션 아이디어

언제:사용자가 카드 위에서 마우스를 움직일 때
무엇을:카드를
어떻게:마우스 위치에 따라 3D 회전과 패럴럭스 효과를 적용하여 입체감 있는 인터랙션으로 표현
2

바이브 프롬프트

TiltCard 컴포넌트를 만들어주세요. 이 컴포넌트는 마우스 움직임에 따라 3D 기울기 효과를 적용하는 인터랙티브 카드를 보여줍니다. children prop으로 카드 내용을, maxTilt prop으로 최대 기울기 각도를, parallaxFactor prop으로 패럴럭스 깊이 강도를 설정할 수 있게 해주세요. style과 className prop으로 추가 스타일링을 지원해주세요. framer-motion의 useMotionValue, useTransform, useSpring을 활용하여 마우스 위치를 감지하고, 카드의 회전 각도를 계산해주세요. 마우스가 카드 중앙에서 멀어질수록 더 큰 각도로 기울어지도록 구현하고, 스프링 애니메이션으로 부드러운 전환을 적용해주세요. perspective와 transform-style을 활용하여 3D 효과를 구현해주세요.