컴포넌트
Bezier Input
SVG 곡선(cubic Bézier)을 따라 입력한 글자가 접선 방향으로 휘어져 배치되는 텍스트 입력 필드로, 투명 input이 키보드·포커스를 담당하고 Canvas2D가 arc-length 기반으로 글자와 캐럿을 곡선 위에 그린다.
- 분류
- 컴포넌트
- 난이도
- hard
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/BezierInput-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| defaultValue | string | "Vivid" | 초기 입력 값 (비제어) |
| placeholder | string | "곡선을 따라 입력" | 값이 없을 때 곡선을 따라 흐릿하게 표시할 안내 문구 |
| maxLength | number | 18 | 입력 가능한 최대 글자 수 |
| fontSize | number | 26 | 곡선 위 글자 크기(px) |
| accentColor | string | "#C084FC" | 곡선과 글자 강조 색 (브랜드 퍼플) |
| onValueChange | (value: string) => void | undefined | 값이 바뀔 때 호출되는 콜백 |