텍스트 애니메이션
Arc Warp Text
헤드라인의 베이스라인 자체를 파라메트릭 워프 필드로 휘는 텍스트입니다. 글자별 정규화 좌표에서 필드를 평가한 뒤 중앙차분으로 뽑은 접선 기울기로 rotate와 skewX를, 변위와 곡률 절댓값으로 scaleY와 색을 동시에 부여해 '휘어진 판'처럼 보이게 합니다. 아치·깃발·볼록·오목 4가지 프리셋을 같은 파이프라인으로 처리하며, 기본 모드인 스크롤 스크럽에서는 헤드라인이 화면 아래에 있을 때 최대 곡률이었다가 중앙에 닿을수록 0으로 펴집니다. 포인터 x는 워프 중심을 끌고 다니고, 휨이 큰 글자일수록 보라에서 마젠타로 물듭니다. SVG textPath 없이 실제 텍스트 노드를 유지해 선택·복사가 되며, min-height 예약으로 레이아웃 밀림을 막고 진폭을 줄 폭에 비례해 제한합니다.
- 분류
- 텍스트 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ArcWarpText-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | "휘어진 헤드라인" | 휘어질 헤드라인 텍스트. 글자별 span으로 분해되지만 실제 텍스트 노드라 선택·복사가 됩니다. |
| preset | "arch" | "flag" | "bulge" | "valley" | "arch" | 워프 필드 종류. arch=아치, flag=깃발(S자), bulge=볼록(피시아이), valley=오목. |
| amplitude | number | 46 | 최대 휨 진폭(px). 줄 폭에 비례해 자동으로 상한이 걸립니다. |
| depth | number | 0.5 | 솟아오른 글자의 세로 확대 강도. 클수록 휘어진 판의 깊이감이 강해집니다. |
| skew | number | 16 | 접선 기울기로 주는 최대 skewX 각도(도). 0이면 기울임 없음. |
| scrollFlatten | boolean | true | true면 스크롤 스크럽으로 동작합니다. 화면 아래에 있을 때 최대 휨, 중앙에 닿을수록 곡률 0으로 펴집니다. false면 곡률을 항상 최대로 고정합니다. |
| pointerAnchor | boolean | true | true면 포인터 x가 워프 중심을 이동시켜 볼록 지점이 커서를 따라옵니다. |
| className | string | undefined | 추가 CSS 클래스. |