아이 컴포트 모션

<div class="cols">
  <div class="col"><span class="lbl bad">Avoid</span><div class="chip bad" id="badc">Notice</div></div>
  <div class="col"><span class="lbl good">Prefer</span><div class="chip good" id="goodc">Notice</div></div>
</div>

body{background:radial-gradient(circle at 50% 30%,#191c30,#0a0a12 72%)}
.cols{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(20px,8vmin,48px)}
.col{display:grid;justify-items:center;gap:10px}
.lbl{font-size:clamp(9px,2.6vmin,11px);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.lbl.bad{color:#ff8a8a}.lbl.good{color:#7be0a8}
.chip{padding:clamp(10px,3vmin,16px) clamp(16px,4vmin,24px);border-radius:12px;font-weight:700;color:#fff;
  font-size:clamp(11px,3vmin,14px)}
.chip.bad{background:linear-gradient(135deg,#c23a3a,#7a1f1f);animation:jitter .12s infinite}
.chip.good{background:linear-gradient(135deg,#1e9e64,#136b46);animation:drift 4.5s ease-in-out infinite}
@keyframes jitter{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(3px,-2px) rotate(-2deg)}
  50%{transform:translate(-3px,2px) rotate(2deg)}75%{transform:translate(2px,2px) rotate(-1deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}