ts-particle 입자 색상 변경 || 입자 종류 변경

미리보기

 

설치

npm install @tsparticles/react @tsparticles/engine @tsparticles/preset-confetti @tsparticles/shape-text

 

코드

1) 입자 색상 변경

"use client";

import { useEffect, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import { IOptions, RecursivePartial, type Container } from "@tsparticles/engine";
import { loadConfettiPreset } from "@tsparticles/preset-confetti";
import { loadTextShape } from "@tsparticles/shape-text";
const TsParticleInit = () => {
  const [init, setInit] = useState(false);

  // this should be run only once per application lifetime
  useEffect(() => {
    initParticlesEngine(async (engine) => {
      await loadTextShape(engine); // ✅ 문자(shape: character) 지원 추가
      await loadConfettiPreset(engine);
    }).then(() => {
      setInit(true);
    });
  }, []);

  // 파티클 로드 시 실행
  const particlesLoaded = async (container?: Container): Promise<void> => {
    console.log(container);
  };

  // 파티클 입자 색상
  const particleColors = [
    "#000000",
    "#FFFFFF",
    "#FFB6B9",
    "#FF9E7A",
    "#FFDC5E",
    "#A3E048",
    "#62D2FA",
    "#6C91F2",
    "#BFA2FF",
    "#FF9CE6",
    "#C2C2C2",
    "#FF7F50",
    "#7FC8A9",
  ];

  // 입자 관련 설정
  const particlesOptions = {
    color: {
      value: particleColors,
    },
  };

  // 에미터 관련 설정
  const emittersOptions = {
    direction: "bottom",
    life: {
      count: 3, // 반복 횟수(0.1초 마다 생성 10번 반복)
      duration: 0.1, // 에미터 지속 시간
      delay: 1,
    },
    position: {
      x: 50,
      y: 50,
    },
    size: {
      width: 0,
      height: 0,
    },
    rate: {
      delay: 0,
      quantity: 100,
    },
  };

  // 옵션 정의
  const customOptions = {
    preset: "confetti",
    particles: particlesOptions,
    emitters: emittersOptions,
  } as RecursivePartial<IOptions>;

  if (init) {
    return (
      <div
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          zIndex: 100,
          pointerEvents: "none", // 이벤트 통과 설정
        }}
      >
        <Particles id="tsparticles" particlesLoaded={particlesLoaded} options={customOptions} />
      </div>
    );
  }

  return <></>;
};

export default TsParticleInit;

 

2) 입자 종류를 이모지로 변경 

"use client";

import { useEffect, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import { IOptions, RecursivePartial, type Container } from "@tsparticles/engine";
import { loadConfettiPreset } from "@tsparticles/preset-confetti";
import { loadTextShape } from "@tsparticles/shape-text";
const TsParticleInit = () => {
  const [init, setInit] = useState(false);

  // this should be run only once per application lifetime
  useEffect(() => {
    initParticlesEngine(async (engine) => {
      await loadTextShape(engine); // ✅ 문자(shape: character) 지원 추가
      await loadConfettiPreset(engine);
    }).then(() => {
      setInit(true);
    });
  }, []);

  // 파티클 로드 시 실행
  const particlesLoaded = async (container?: Container): Promise<void> => {
    console.log(container);
  };

  // 입자 관련 설정
  const particlesOptions = {
    shape: {
      type: "character",
      options: {
        character: [
          {
            value: "✨",
            font: "Verdana",
            style: "",
            weight: "",
          },
        ],
      },
    },
  };

  // 에미터 관련 설정
  const emittersOptions = {
    direction: "bottom",
    life: {
      count: 3, // 반복 횟수(0.1초 마다 생성 10번 반복)
      duration: 0.1, // 에미터 지속 시간
      delay: 1,
    },
    position: {
      x: 50,
      y: 50,
    },
    size: {
      width: 0,
      height: 0,
    },
    rate: {
      delay: 0,
      quantity: 100,
    },
  };

  // 옵션 정의
  const customOptions = {
    preset: "confetti",
    particles: particlesOptions,
    emitters: emittersOptions,
  } as RecursivePartial<IOptions>;

  if (init) {
    return (
      <div
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          zIndex: 100,
          pointerEvents: "none", // 이벤트 통과 설정
        }}
      >
        <Particles id="tsparticles" particlesLoaded={particlesLoaded} options={customOptions} />
      </div>
    );
  }

  return <></>;
};

export default TsParticleInit;