🥁 BeatVG

음악으로 애니메이션을 컨트롤한다.

재생 중인 음악을 실시간으로 분석해 Lottie 애니메이션의 동작·속도·크기·색상을 바꾸는 웹 비주얼라이저

ThorVG WebCanvas로 렌더링한다.

ANY MUSIC × ANY LOTTIE × THORVG

✨ 기능

음악에서 세기(energy) 와 저음(bass) 두 값을 뽑아, 네 가지 표현으로 연결한다.

• ⚡ 속도 (TEMPO) — 세기에 따라 재생 속도가 0.6× ~ 2.4×로 바뀐다.
• 💓 펄스 (BASS) — 저음이 튈 때 캐릭터가 최대 1.8배로 순간 확대된다.
• 🎬 동작 단계 (ENERGY) — 세기에 따라 Level 1 → 4로 동작이 격해진다.
• 🌈 색상 (COLOR) — 레벨이 오르면 네온 3색으로 바뀌고, 셀수록 밝아진다.

속도와 펄스는 모든 Lottie에서 동작한다.

동작 단계는 Lottie에 marker가 있을 때, 실시간 색상은 slot이 저작된 파일일 때 동작한다.

🚀 실행

npm install
npm run dev

브라우저에서 화면을 클릭해 Lottie(.json)와 음악 파일을 선택하면 된다. 📁 sample/ 폴더에 예제가 들어 있다.

📦 빌드

npm run build     # 정적 파일 생성 (dist/)
npm run preview   # 빌드 결과 미리보기

🛠 기술 스택

항목	사용 기술
그래픽 엔진	ThorVG WebCanvas (WebGL)
오디오 분석	Web Audio API
빌드	Vite + TypeScript
배포	GitHub Pages

📖 더 알아보기

오디오 분석, marker/frame 재생, slot 색상 교체, 저음 펄스, 안정화·성능 처리 등 내부 동작 기술 문서 →

발표자료