컴포넌트

Hexagon Loader

정삼각형 6조각이 바깥에서 중심으로 순차 조립되어 육각형을 이루고 사이클마다 60도 회전하는 순수 SVG/CSS 로더입니다.

설치

npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/HexagonLoader-TS-TW

이름	타입	기본값	설명
size	number	96	로더 전체 크기(px). 정사각형 뷰박스 한 변 길이 (24~400로 클램프).
pieces	number	6	육각형을 채우는 조각(wedge) 개수. 1~6 사이 정수.
duration	number	2.4	한 번의 조립 사이클에 걸리는 시간(초). 작을수록 빠르게 채워짐.
colors	string[]	["#C084FC","#EC4899","#5EEAD4"]	조각에 순환 적용되는 색상 팔레트. 미지정 시 브랜드 3색 사용.
gap	number	3	조각 사이 간격(px). 클수록 조각이 또렷이 분리됨 (0~12로 클램프).