Pulse

Rhythmic scaling/opacity drawing attention.

html

<div class="mot-pul-stage">
  <span class="mot-pul-ring mot-pul-ring--on" style="--pulse-scale:40%; border-color:#F5C2E0;"></span>
  <span class="mot-pul-dot" style="background:#F5C2E0;"></span>
  <p class="mot-pul-caption">Pulsing &middot; 1200ms &middot; draws attention to a live indicator</p>
</div>
<style>
.mot-pul-stage { position: relative; width: 100%; max-width: 320px; padding: 26px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; text-align: center; }
.mot-pul-ring, .mot-pul-dot { display: inline-block; border-radius: 999px; }
.mot-pul-ring { position: absolute; top: 26px; left: calc(50% - 12px); width: 24px; height: 24px; border: 2px solid; opacity: 0; }
.mot-pul-dot { position: relative; width: 24px; height: 24px; }
.mot-pul-caption { margin: 12px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .mot-pul-ring--on { animation: mot-pul-ring 1200ms ease-out infinite; }
  @keyframes mot-pul-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(calc(1 + var(--pulse-scale) / 100)); opacity: 0; } }
}
</style>

tailwind

<div class="relative w-full max-w-[320px] p-[26px] bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70 text-center">
  <span class="tw-pul-ring tw-pul-ring-on absolute top-[26px] left-[calc(50%-12px)] w-6 h-6 rounded-full border-2 opacity-0" style="--pulse-scale:40%; border-color:#F5C2E0;"></span>
  <span class="relative inline-block w-6 h-6 rounded-full" style="background:#F5C2E0;"></span>
  <p class="mt-3">Pulsing &middot; 1200ms &middot; draws attention to a live indicator</p>
</div>
<style>
@media (prefers-reduced-motion: no-preference) {
  .tw-pul-ring-on { animation: mot-pul-tw-ring 1200ms ease-out infinite; }
  @keyframes mot-pul-tw-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(calc(1 + var(--pulse-scale) / 100)); opacity: 0; } }
}
</style>

react

export function Pulse({
  enabled = true,
  duration = 1200,
  scaleAmount = 40,
  accent = "#F5C2E0",
}) {
  return (
    <div style={{ position: "relative", width: "100%", maxWidth: 320, padding: 26, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430aa", textAlign: "center" }}>
      <span className={enabled ? "ring on" : "ring"} style={{ position: "absolute", top: 26, left: "calc(50% - 12px)", width: 24, height: 24, borderRadius: 999, border: `2px solid ${accent}`, opacity: 0, "--pulse-scale": `${scaleAmount}%` }} />
      <span style={{ position: "relative", display: "inline-block", width: 24, height: 24, borderRadius: 999, background: accent }} />
      <p style={{ margin: "12px 0 0" }}>{enabled ? "Pulsing" : "Static"} &middot; {duration}ms &middot; draws attention to a live indicator</p>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .ring.on { animation: mot-pul-ring ${duration}ms ease-out infinite; }
          @keyframes mot-pul-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(calc(1 + var(--pulse-scale) / 100)); opacity: 0; } }
        }
      `}</style>
    </div>
  );
}