How to recreate Telegram’s “dissolve into particles” effect using React?

I’m trying to replicate a “dissolve” effect similar to what Telegram uses when a message is deleted, shown in this short video.

The animation looks like the content dissolves — fading, blurring, and then scattering into particles.

I’m trying to achieve a React component that wraps any children (or a className) On trigger (e.g., button click), the child content animates to:

  1. Fade out
  2. Blur
  3. Then transition into a particle effect
  4. After a short time, the particles disappear

I’ve tried combining:

  • react-tsparticles for the particle effect
  • gsap for animating fade and blur

It works okay, but it’s far from the smooth and natural transition Telegram has — especially how the particles seem to originate from the content itself and not just overlay the area.

const { useRef } = React;
    
function DisintegrateEffect() {
  const divRef = useRef(null);

  const handleDelete = () => {
    if (!divRef.current) return;

    gsap.to(divRef.current, {
      duration: 0.8,
      opacity: 0,
      scale: 1.2,
      filter: 'blur(15px)',
      y: -10,
      ease: 'power2.out',
      onComplete: () => {
        divRef.current.style.display = 'none';
      }
    });
  };

  return (
    <div
      ref={divRef}
      onClick={handleDelete}
      style={{
        padding: '16px',
        background: 'red',
        color: 'white',
        fontWeight: 'bold',
        cursor: 'pointer',
        display: 'inline-block'
      }}
    >
      Apagar
    </div>
  );
}

ReactDOM.render(<DisintegrateEffect />, document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
<div id="container"></div>

JSFiddle