jeremy-prt/bloub

어떤 프로젝트인가요?

핵심 기능

• 01애니메이션 라이브러리 없이 SVG 몸체 도형 하나를 14개 상태로 변형합니다.
• 02흰색 눈 두 개를 몸체와 독립적으로 애니메이션합니다.
• 03몸체 모양 8개, 색상 12개, 기본 표정 16개를 제공합니다.
• 04상태별 유지 시간을 설정해 순서를 구성할 수 있는 타임라인 편집기를 포함합니다.
• 05SVG, PNG, 애니메이션 GIF 및 타임라인용 MP4로 내보낼 수 있습니다.
• 06언제든 재현 가능한 프레임을 렌더링하며, 테스트와 썸네일에 활용할 수 있습니다.

활용 사례

• 애니메이션 라이브러리를 추가하지 않고 Vue 앱에 애니메이션 봇 아바타를 넣는 경우.
• 측정값을 기반으로 한 도형 변형을 순수 SVG로 구현하는 방법을 살펴보는 경우.
• 발표 자료나 소셜 게시물에 사용할 아바타 애니메이션 GIF 또는 MP4 클립을 만드는 경우.
• 아바타 상태를 디자인 검토용 정지 이미지 갤러리로 구성하는 경우.

빠른 시작

1. 1

   pnpm으로 종속 항목을 설치합니다

   pnpm install
2. 2

   개발 서버를 시작한 다음 localhost:5190을 엽니다

   pnpm dev

사용 전 알아둘 점

• !x.ai 봇 아바타 디자인을 모방했으므로, x.ai와는 관련이 없습니다.
• !코드는 MIT 라이선스가 적용되지만, 모방한 디자인은 해당 라이선스의 적용을 받지 않습니다.

토픽

자주 묻는 질문

bloub은(는) 무엇인가요?

SVG와 Vue로 x.ai 봇 아바타를 재현합니다. 하나의 검은 도형이 14개 상태로 변형되고, 흰색 눈은 각각 독립적으로 애니메이션됩니다. bloub는 SVG 도형으로 x.ai 봇 아바타를 재현합니다. 하나의 검은색 실루엣이 14개 상태 사이에서 변형되고, 흰색 눈 두 개는 몸체와 독립적으로 움직입니다. Vue 3, Vite, TypeScript, Tailwind 4로 만들었으며 애니메이션 라이브러리는 사용하지 않습니다.

bloub은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

bloub은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

bloub은(는) 아직 유지보수되고 있나요?

6개월 이내 업데이트. bloub의 마지막 커밋은 2026년 8월 17일입니다.

bloub은(는) 어디에 사용할 수 있나요?

애니메이션 라이브러리를 추가하지 않고 Vue 앱에 애니메이션 봇 아바타를 넣는 경우. 측정값을 기반으로 한 도형 변형을 순수 SVG로 구현하는 방법을 살펴보는 경우. 발표 자료나 소셜 게시물에 사용할 아바타 애니메이션 GIF 또는 MP4 클립을 만드는 경우. 아바타 상태를 디자인 검토용 정지 이미지 갤러리로 구성하는 경우.

bloub는 어떻게 설치하나요?

pnpm으로 종속 항목을 설치합니다: pnpm install 개발 서버를 시작한 다음 localhost:5190을 엽니다: pnpm dev

bloub은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/jeremy-prt/bloub