텍스트 애니메이션
Slide Reveal
가림막(오버레이 바)이 좌→우로 지나가며 텍스트가 클립되어 순차적으로 드러나는 공개 효과. clip-path inset과 이동하는 컬러 바로 구현하며, 뷰포트 진입 시 1회 재생을 지원한다.
- 분류
- 텍스트 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SlideReveal-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | (필수) | 애니메이션할 텍스트. 원문 그대로 aria-label로 접근성 제공. |
| duration | number | 0.9 | 텍스트가 완전히 드러나는 데 걸리는 시간(초). |
| delay | number | 0 | 애니메이션 시작 전 지연(초). |
| color | string | #C084FC | 텍스트 색상. 기본값은 Vivid Kit 바이올렛. |
| barColor | string | #EC4899 | 좌→우로 지나가는 가림막(오버레이 바) 색상. 기본값은 Vivid Kit 핑크. |
| easing | string | cubic-bezier(0.65, 0, 0.35, 1) | clip과 바 이동에 적용되는 이징 함수. |
| playOnView | boolean | true | 뷰포트 진입 시 재생할지 여부. false면 마운트 즉시 재생. |
| threshold | number | 0.3 | playOnView일 때 요소가 이 비율(0~1)만큼 보이면 재생. |
| className | string | "" | 추가 className (폰트 크기/굵기 등). |