포트폴리오 사이트를 만들면서 마우스 이벤트에 따른 인터랙티브한 요소를 많이 구현해보고 싶었다. 특히 단순한 정보를 표시하는 부분에 단조롭게 보이지 않도록, 배경 부분에 그런 요소를 넣어보면 어떨까 싶었다.결국 결정한 건, “볼풀” 느낌으로 공들이 서로 튕기며 계속 움직이는 효과를 만들어보자!였다. 정말 공처럼 보여지도록 matter.js라는 라이브러리를 사용했다. matter.js는 웹 브라우저 환경에서의 2D 물리엔진 구현을 위한 라이브러리이다. 1. 컴포넌트 만들기우선 Matter.js를 사용할 컴포넌트를 만들어준다. 해당 컴포넌트는 컨테이너와 실제 그려질 canvas로 구성된다.const DroppingBalls = ({ ballColor, backgroundColor }: DroppingBalls..