Tilt Card

설계 철학

정적인 카드 그리드에서 "눌러볼 수 있는 것"임을 커서 반응만으로 전달하는 패턴입니다. 물리적 판이 손끝을 따라 기우는 은유로 어포던스를 만들고, difference 블렌드 스포트라이트가 시선을 커서 주변에 고정합니다. 서비스 카드·요금제·프로젝트 쇼케이스에 적합합니다.

동작 원칙

• 3D 틸트 — 커서의 카드 내 상대 위치(-0.5~0.5)를 rotateX/Y ±11°로 매핑, 스프링으로 부드럽게 따라옵니다.

• 스포트라이트 반전 — 커서를 따라다니는 원이 mix-blend-mode: difference로 카드 색을 국소 반전시킵니다.

• 기울어진 프리뷰 — 우하단에 -5° 기울어 걸친 이미지가 hover 시 -3°로 살짝 일어섭니다.

• 분할 뱃지 — 좌(값)/우(상태) 반반으로 나뉜 pill — 상태 색상은 success/warning 변형.

• 이탈 복귀 — 커서가 떠나면 회전값이 0으로 스프링 복귀하고 스포트라이트가 사라집니다.

적용 가능 개발언어