gkurt/tegaki
어떤 글꼴이든 획을 하나씩 그려 나가는 손글씨 애니메이션으로 변환합니다. React, Vue, Svelte, Solid, Astro 및 vanilla JS를 지원합니다.
- 스타
- 3,244
- 포크
- 123
- 열린 이슈
- 0
- 마지막 커밋
- 9일 전
어떤 프로젝트인가요?
Tegaki는 어떤 글꼴이든 획을 하나씩 그려 나가는 텍스트로 변환하는 손글씨 애니메이션 라이브러리입니다. 개발자는 경로를 직접 작성하거나 네이티브 종속성을 설치할 필요 없이, 글꼴을 선택하고 컴포넌트로 텍스트를 렌더링하면 됩니다.
핵심 패키지는 React, Svelte, Vue, SolidJS, Astro용 래퍼와 vanilla JavaScript 엔진, Web Components 지원을 제공합니다. 라틴 문자, 아랍어, 히브리어, 데바나가리, 벵골어, 일본어, 한국어, 중국어 간체를 포함한 여러 손글씨 글꼴이 번들로 제공되며, 온라인 스튜디오에서 다른 글꼴도 변환할 수 있습니다.
CLI 도구를 사용하면 별도의 설치 없이 텍스트 문자열로 반복 재생, 1회 재생 또는 정적 애니메이션 SVG를 생성할 수 있습니다. 셰이핑에는 WASM으로 컴파일된 harfbuzz를 사용하므로 합자, 아랍어 연결 문자, 오른쪽에서 왼쪽으로 쓰는 텍스트를 처리합니다.
핵심 기능
- 01자연스러운 타이밍으로 어떤 글꼴이든 획을 하나씩 애니메이션으로 그립니다.
- 02React, Svelte, Vue, SolidJS, Astro 및 Web Components용 래퍼를 제공합니다.
- 03라틴 문자, 아랍어, 히브리어, 데바나가리, 일본어, 한국어, 중국어용 손글씨 글꼴을 번들로 제공합니다.
- 04npx를 통해 글자가 스스로 그려지는 SVG 파일을 생성하는 CLI 도구를 제공합니다.
- 05harfbuzz를 통해 합자, 아랍어 연결 문자, 오른쪽에서 왼쪽으로 쓰는 텍스트를 처리합니다.
활용 사례
- 마케팅 페이지나 랜딩 페이지에 손글씨 애니메이션 제목을 추가합니다.
- README나 슬라이드 자료에 사용할 애니메이션 SVG 로고 또는 배너를 생성합니다.
- Remotion으로 만든 동영상에 손글씨 텍스트 애니메이션을 넣습니다.
빠른 시작
- 1
패키지를 설치합니다
npm install tegaki - 2
번들된 폰트를 사용해 React 렌더러를 사용합니다
토픽
자주 묻는 질문
- tegaki은(는) 무엇인가요?
- 어떤 글꼴이든 획을 하나씩 그려 나가는 손글씨 애니메이션으로 변환합니다. React, Vue, Svelte, Solid, Astro 및 vanilla JS를 지원합니다. Tegaki는 어떤 글꼴이든 획을 하나씩 그려 나가는 텍스트로 변환하는 손글씨 애니메이션 라이브러리입니다. 개발자는 경로를 직접 작성하거나 네이티브 종속성을 설치할 필요 없이, 글꼴을 선택하고 컴포넌트로 텍스트를 렌더링하면 됩니다.
- tegaki은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- tegaki은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- tegaki은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. tegaki의 마지막 커밋은 2026년 10월 11일입니다.
- tegaki은(는) 어디에 사용할 수 있나요?
- 마케팅 페이지나 랜딩 페이지에 손글씨 애니메이션 제목을 추가합니다. README나 슬라이드 자료에 사용할 애니메이션 SVG 로고 또는 배너를 생성합니다. Remotion으로 만든 동영상에 손글씨 텍스트 애니메이션을 넣습니다.
- tegaki는 어떻게 설치하나요?
- 패키지를 설치합니다: npm install tegaki 번들된 폰트를 사용해 React 렌더러를 사용합니다
- tegaki은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/gkurt/tegaki
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
React 컴포넌트 npm 패키지로 제공되는, 최적화 및 커스터마이징 가능한 개발자용 SVG 기술 로고 모음입니다.
React, Next.js, Astro, 일반 HTML 태그, SVG와 터미널에서 사용할 수 있는 애니메이션 ASCII 아트 240종
AI 에이전트 스킬도 제공하는 손그림 민속화 스타일의 React·TypeScript SVG 아이콘 라이브러리입니다.
기술 개념을 설명하는 실물 시스템의 인터랙티브 등각 SVG 일러스트를 만드는 Claude 에이전트 스킬입니다.