React 눈 내리는 효과와 물리

Source: Dev.to

저는 @hdcodedev/snowfall 라는 오픈소스 라이브러리를 출시했습니다. 이 라이브러리는 눈이 페이지 내용과 상호작용하도록 React 애플리케이션에 눈 내림 효과를 추가합니다. 일반적인 오버레이와 달리, 물리 엔진을 사용해 눈송이가 HTML 요소(헤더, 카드, 버튼 등) 위에 착지하고 쌓입니다.

기능

• 물리 – 바람, 중력, 충돌 감지.
• 쌓임 – 눈이 요소 위에 쌓이고 결국 녹습니다.
• 스마트 감지 – data-snowfall 속성을 사용하거나 라이브러리가 의미론적 태그를 자동으로 감지하도록 할 수 있습니다.

설치

npm install @hdcodedev/snowfall

사용법

import { Snowfall, SnowfallProvider } from '@hdcodedev/snowfall';

export default function App() {
  return (
    
      

      {/* Snow will accumulate on this element */}
      
        
## Winter Mode

      
    
  );
}

소스 및 데모

• GitHub:
• 실시간 데모: