애니메이션
Floating Shapes
기하 도형들이 서로 다른 속도로 부유하며 마우스 이동에 미세하게 시차 반응하는 장식 레이어입니다. rAF 루프로 도형별 위상·주파수의 사인/코사인 부유 운동을 만들고, 포인터 위치를 정규화한 뒤 도형별 depth(깊이 계수)로 곱해 관성 있는 parallax를 적용합니다. 모든 도형(원·사각·삼각·링·마름모)은 SVG/CSS로 생성되며 외부 이미지를 쓰지 않습니다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/FloatingShapes-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| count | number | 9 | 부유할 도형 개수 |
| amplitude | number | 18 | 부유 진폭(px). 클수록 크게 떠다님 |
| speed | number | 1 | 전체 부유 속도 배수 |
| parallax | number | 24 | 마우스 시차 강도(px) |
| color | string | #C084FC | 주 색상 (Vivid Kit 브랜드 컬러) |
| accentColor | string | #EC4899 | 보조 색상 (Vivid Kit 브랜드 컬러) |
| minSize | number | 20 | 도형 최소 크기(px) |
| maxSize | number | 64 | 도형 최대 크기(px) |
| className | string | "" | 추가 클래스 |