스파클

<div class="stage" id="st"><h1>Magic ✦ Text</h1></div>

.stage{position:relative;display:grid;place-items:center;width:100%;height:100%}
.stage h1{position:relative;margin:0;color:#fff;font-size:clamp(22px,6vmin,32px);font-weight:700}
.spark{position:absolute;width:12px;height:12px;pointer-events:none;
  background:radial-gradient(circle,#fff 0%,transparent 70%);
  clip-path:polygon(50% 0%,63% 38%,100% 50%,63% 62%,50% 100%,37% 62%,0% 50%,37% 38%)}

const stage = document.getElementById('st');
function spawn() {
  const s = document.createElement('div');
  s.className = 'spark';
  const size = 6 + Math.random() * 10;
  s.style.width = s.style.height = size + 'px';
  s.style.left = (Math.random() * 90 + 2) + '%';
  s.style.top = (Math.random() * 80 + 5) + '%';
  s.style.background = Math.random() > 0.5 ? 'radial-gradient(circle,#fff 0%,transparent 70%)' : 'radial-gradient(circle,#ffd27a 0%,transparent 70%)';
  stage.appendChild(s);
  const anim = s.animate(
    [
      { transform: 'scale(0) rotate(0deg)', opacity: 0 },
      { transform: 'scale(1) rotate(45deg)', opacity: 1, offset: 0.4 },
      { transform: 'scale(0) rotate(90deg)', opacity: 0 },
    ],
    { duration: 900 + Math.random() * 500 },
  );
  anim.onfinish = () => s.remove();
}
setInterval(spawn, 260);
spawn();