색 덩어리 세 개가 겹쳐 도는 AI 작업 중 로딩

import { useEffect, useState } from "react";

const COLORS = ["#3182f6", "#64a8ff", "#a9d1ff"];

const CSS = `
.mlb-blob{position:absolute;top:50%;left:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:42% 58% 55% 45%/48% 42% 58% 52%;filter:blur(17.6px);mix-blend-mode:multiply;opacity:.85}
@media (max-width:480px){.mlb-blob{width:160px;height:160px;margin:-80px 0 0 -80px;filter:blur(12.8px)}}
@media (prefers-reduced-motion:no-preference){
.mlb-a{animation:mlb-orbit-a 5.2s ease-in-out infinite,mlb-morph 7s ease-in-out infinite}
.mlb-b{animation:mlb-orbit-b 6.1s ease-in-out infinite,mlb-morph 8s ease-in-out infinite reverse}
.mlb-c{animation:mlb-orbit-c 4.6s ease-in-out infinite,mlb-morph 6s ease-in-out infinite}
.mlb-dot{animation:mlb-bounce 1.1s ease-in-out infinite}
}
@keyframes mlb-orbit-a{0%,100%{transform:translate(-28%,-10%) scale(1) rotate(0)}50%{transform:translate(22%,14%) scale(.82) rotate(160deg)}}
@keyframes mlb-orbit-b{0%,100%{transform:translate(26%,-14%) scale(.86) rotate(0)}50%{transform:translate(-20%,18%) scale(1.08) rotate(-140deg)}}
@keyframes mlb-orbit-c{0%,100%{transform:translate(0,22%) scale(.74) rotate(0)}50%{transform:translate(4%,-24%) scale(.96) rotate(120deg)}}
@keyframes mlb-morph{0%,100%{border-radius:42% 58% 55% 45%/48% 42% 58% 52%}33%{border-radius:60% 40% 38% 62%/55% 60% 40% 45%}66%{border-radius:48% 52% 64% 36%/38% 54% 46% 62%}}
@keyframes mlb-bounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}
`;

export default function BlobMotionLoader() {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const started = Date.now();
    const timer = setInterval(() => setSeconds(Math.floor((Date.now() - started) / 1000)), 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <section className="w-full bg-[#f2f4f6] px-4 py-20 sm:py-28">
      <style>{CSS}</style>
      <div role="status" aria-live="polite" className="mx-auto flex max-w-xl flex-col items-center gap-8 text-[#191f28]">
        <div className="relative h-[200px] w-[256px] shrink-0 sm:h-[275px] sm:w-[352px]" aria-hidden>
          <span className="mlb-blob mlb-a" style={{ background: COLORS[0] }} />
          <span className="mlb-blob mlb-b" style={{ background: COLORS[1] }} />
          <span className="mlb-blob mlb-c" style={{ background: COLORS[2] }} />
        </div>
        <div className="text-center">
          <p className="text-[19px] font-bold tracking-[-0.01em]">AI가 작업하는 중입니다</p>
          <div className="mt-2 flex items-center justify-center gap-2">
            <span className="flex gap-1" aria-hidden>
              {COLORS.map((c, i) => (
                <span key={c} className="mlb-dot h-1.5 w-1.5 rounded-full" style={{ background: c, animationDelay: `${i * 0.15}s` }} />
              ))}
            </span>
            <span className="font-mono text-[13px] text-[#8b95a1]">
              {Math.floor(seconds / 60)}:{String(seconds % 60).padStart(2, "0")}
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}