Pulsing Badge
A dot ripples outward in rings — the universal 'live right now' signal
Live preview (drag the parameters, watch it change)
Code
<span class="live"><span class="dot"></span>正在直播</span>
<style>
.live { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
.dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #141414; }
.dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #141414;
animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { from { transform: scale(.55); opacity: .7; } to { transform: scale(1.3); opacity: 0; } }
</style><span class="relative flex h-2.5 w-2.5"><span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-neutral-900 opacity-60"></span><span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-neutral-900"></span></span>
<!-- Tailwind 自带 animate-ping 就是这个效果 -->export function LiveBadge({ children }) {
return (<span style={{ display: "inline-flex", alignItems: "center", gap: 9, fontWeight: 600 }}>
<span className="live-dot" />{children}
<style>{`.live-dot{position:relative;width:10px;height:10px;border-radius:50%;background:#141414}
.live-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #141414;animation:pl 1.8s ease-out infinite}
@keyframes pl{from{transform:scale(.55);opacity:.7}to{transform:scale(1.3);opacity:0}}`}</style></span>);
}Code snippets are MIT-licensed — copy and adapt freely.
How this effect works
它是怎么工作的（中文）
一个实心圆点，加一个伪元素圆环：圆环从 0.5 倍放大到 1.3 倍的同时淡出，循环播放就是波纹。Tailwind 的 animate-ping 就是现成实现。它只适合真正的实时状态（直播、录制中、定位中），滥用会变成视觉噪音。
How it works (English)
A solid dot plus a pseudo-element ring: the ring scales from 0.5× to 1.3× while fading out, looped. Tailwind's animate-ping is this exact effect built in. Reserve it for genuinely live states (streaming, recording, locating) — overuse turns it into visual noise.
参考与来源 Sources
本条为「批次 1（重建）」成果（2026-11-10 用户决定：原 妞妞老师 素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与 妞妞老师 原始素材无关。