GitHubCreative Dev & WebGLidea-techcode
catdad/canvas-confetti
catdad·@catdad·Jul 29, 2024
개요 브라우저 Canvas API를 이용한 고성능 컨페티(색종이 조각) 애니메이션 라이브러리다. 12,000+ stars를 보유한 웹 UI 이펙트 분야의 인기 라이브러리다.
핵심 내용 Canvas 기반으로 DOM 조작 없이 파티클 애니메이션을 렌더링해 성능이 뛰어나다. 불꽃놀이, 눈, 버스트 등 다양한 파티클 효과를 지원하며 색상, 모양, 퍼짐 각도 등 세밀한 커스터마이징이 가능하다. 외부 의존성 없는 단일 파일 라이브러리로 CDN으로도 바로 사용할 수 있다.
기존 대비 차별점 CSS 애니메이션이나 DOM 기반 접근 방식 대비 Canvas 렌더링으로 수천 개의 파티클을 부드럽게 처리한다. 간단한 API (`confetti()` 호출 하나)로 즉시 사용 가능하면서도 세밀한 제어도 지원한다.
활용 가능성 이벤트 완료, 게임 승리, 기념일 등 사용자에게 축하 피드백을 줄 때 활용할 수 있다. 온보딩 완료, 목표 달성, 결제 완료 화면 등 앱의 감동적인 순간에 적용하면 사용자 경험을 크게 향상시킬 수 있다.
참고 자료 - 원본
JavaScript⭐ 12,473animationburstcanvascanvas-confetticonfettifireworkshacktoberfestjsdelivrparticlessnow
#canvas#confetti#browser#animation