클릭하는 곳마다,
피어나는 불꽃.

01 / 설치

패키지 설치

npm으로 프로젝트에 패키지를 추가합니다.

npm

npm install shoka-fireworks

02 / 커스텀 및 미리보기

나만의 불꽃 팔레트 만들기

자유롭게 색상을 추가·조정하고 바로 터뜨려 보세요. 아래 적용 코드도 자동으로 함께 바뀝니다.

색상 목록

색상칩을 고르거나 유효한 CSS 색상 값을 입력하세요. 다음 불꽃부터 바로 적용됩니다.

인터랙티브 미리보기

실시간 미리보기

아래 캔버스를 클릭해 현재 색상 조합을 시험해 보세요.

03 / 프로젝트 적용

웹사이트에 추가하기

브라우저에서 document.body가 준비된 뒤(예: 컴포넌트의 마운트 훅) 아래 코드를 실행하세요. 위에서 고른 색상이 자동으로 반영되어 있습니다.

import { fireworks } from "shoka-fireworks";

const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
const cleanup = fireworks({
  shouldPlayAnimation: () => !reducedMotion.matches,
});

// 컴포넌트 언마운트 또는 효과 해제 시 cleanup()을 호출해 애니메이션과 이벤트 리스너를 정리합니다.

shouldPlayAnimation은 매 클릭마다 reducedMotion.matches를 확인하며, ‘동작 줄이기’가 켜져 있으면 false를 반환해 새 불꽃이 터지지 않도록 합니다.

이미 피어난 불꽃은 자연스럽게 끝까지 재생됩니다. 모든 애니메이션을 즉시 멈추고 효과를 제거하려면(예: 컴포넌트 언마운트 시) cleanup()을 호출하세요.

04 / API 레퍼런스

`fireworks(config?: FireworkConfig): () => void`

브라우저에서 document.body가 준비된 뒤 호출합니다. 호출할 때마다 해당 효과를 정리하는 함수를 반환합니다.

`FireworkConfig`

항목	타입	기본값	설명
`colors?`	`string[]`	아래의 기본 파스텔 색상 4종	불꽃 입자에 사용할 CSS 색상 배열입니다. 최소 1개 이상의 색상이 필요합니다.
`shouldPlayAnimation?`	`(event: MouseEvent) => boolean`	`() => true`	매 클릭 시 호출됩니다. `false`를 반환하면 해당 클릭의 불꽃만 건너뛰며, 재생 중인 애니메이션에는 영향을 주지 않습니다.

라이브러리는 ‘동작 줄이기’ 설정을 자동으로 감지하지 않습니다. 위 예제처럼 shouldPlayAnimation 안에서 확인하는 것을 권장합니다.

기본 팔레트

[
  "rgba(255,182,185,.9)",
  "rgba(250,227,217,.9)",
  "rgba(187,222,214,.9)",
  "rgba(138,198,209,.9)"
]

정리 및 해제

컴포넌트가 언마운트되거나 효과를 끌 때 fireworks()가 반환한 정리 함수를 호출하면, 모든 애니메이션을 멈추고 캔버스와 클릭·리사이즈 이벤트 리스너를 해제합니다.

cleanup();

크레딧

이 라이브러리의 불꽃 효과는 Hexo Theme Shoka를 바탕으로 수정했습니다. 원작자 霜月琉璃 님께 감사드립니다.