음악 파일을 올리면 소리에 반응해서 Lottie 애니메이션이 동적으로 움직이는 웹을 만듭니다. 렌더링은 ThorVG WebCanvas를 사용합니다.
곡의 에너지에 따라 재생 속도가 변하고, 저음 피크에서 Lottie 전체가 펄스처럼 튀고, 고음에 따라 글로우와 색조가 바뀌는 효과를 기획하고 있습니다. (변동 가능)
같은 Lottie 애니메이션에서도 곡을 바꾸면 다르게 동작하도록 하는게 목표입니다.
목표
- 오디오 파일 업로드 및 주파수 분석
- 음악 에너지에 따른 Lottie 재생 속도 변화
- 저음 피크 감지 후 전체 펄스
- 고음·에너지 기반 글로우·색조 반응 (opt)
- 파라미터 조절 슬라이더
- (도전… 검토 필요) Lottie 레이어별로 다른 주파수 대역에 반응
(도전) 리듬게임?
기술 스택
@thorvg/webcanvas · TypeScript · Web Audio API · Next.js 을 생각중입니다.
엔진 보다는 웹 작업(애니메이션 조절)이 많을 것으로 예상됩니다.
웹개발자 분들의 많은 관심 부탁드립니다ㅎㅎ (어느 분야든 환영입니다!!!)
사용해보고싶으셨던 thorvg, lottie 의 다양한 효과/기능 등등 여러방향으로 충분히 논의 가능하니 편하게 연락주세요 👍
댓글
이슈 원문