애니메이션
Tilted Orbit
기울여 눕힌 타원 궤도면 위를 아이템이 공전하는 3D 쇼케이스. 궤도판에 rotateZ/rotateX를 걸어 정원을 타원으로 눕히고 각 아이템은 역회전으로 정면을 유지하며, 궤도 위상 sin값으로 스케일(0.7~1.1)·블러(0~3px)·투명도·z-index를 함께 계산해 뒤로 돌 때 실제로 작아지고 흐려지며 앞 아이템에 가려진다. 각속도는 반경에 반비례(ω∝r^-1.5)해 링마다 주기가 달라 배치가 반복되지 않고, 포인터를 따라 궤도판 전체가 스프링으로 기울어 시점이 이동한다. 아이템에 호버하거나 Tab으로 포커스하면 그 아이템만 공전을 멈추고 중앙 앞으로 떠오르며 나머지는 후퇴하고 하단 캡션이 열린다(클릭하면 고정). 링 인덱스마다 브랜드 3색을 점선 궤도선과 아이템 테두리에 매핑하며, 감속 모드에서는 정적 그리드로 폴백한다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/TiltedOrbit-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| itemCount | number | 12 | 궤도에 배치할 아이템 개수(3~16으로 클램프). |
| ringCount | number | 3 | 궤도 링 개수(1~3). 링마다 반경·브랜드 색·공전 주기가 다르다. |
| radius | number | 150 | 가장 바깥 궤도의 반경(px). 컨테이너가 좁으면 자동으로 축소된다. |
| tilt | number | 58 | 궤도면을 눕히는 각도(deg). 0이면 정면 원, 클수록 납작한 타원. |
| speed | number | 1 | 공전 속도 배율. 클수록 빠르게 돌고 0이면 멈춘다. |
| parallaxTilt | number | 8 | 포인터를 따라 궤도판이 기우는 최대 각도(deg). 0이면 시점 이동을 끈다. |
| showOrbitLines | boolean | true | 링별 점선 conic-gradient 궤도선 표시 여부. |