ClipPathCarousel

New

clip-path 마스크로 장면을 전환하는 캐러셀이에요.

사용법

카드 사이를 이동할 때 CSS clip-path 마스크로 장면이 전환돼요.

SCENE 1

외부 이미지 없이 만든 로컬 그라데이션이에요.

SCENE 2

외부 이미지 없이 만든 로컬 그라데이션이에요.

SCENE 3

외부 이미지 없이 만든 로컬 그라데이션이에요.

SCENE 4

외부 이미지 없이 만든 로컬 그라데이션이에요.

1 / 4

속성	타입	기본값	설명
items*	readonly ClipPathCarouselItem[]	—	캐러셀 항목
ariaLabel	string	클립 패스 캐러셀	접근성 라벨
initialIndex	number	—	초기 활성 인덱스
onActiveIndexChange	(index: number) => void	—	활성 인덱스 변경 콜백
className	string	—	루트 클래스
style	CSSProperties	—	인라인 스타일·CSS 변수

모션 CSS는 @goldtreedev/ui/motion.css를 함께 import해요.

@import "@goldtreedev/ui/motion.css";

import { ClipPathCarousel } from "@goldtreedev/ui";