Border Beam Card
介绍
一道光束沿卡片边框循环流动，内容区保持安静。光束是旋转的锥形渐变，只动 transform。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Border Beam Card 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add border-beam-card
mcp › 使用 8pt MCP 调用 get_component("border-beam-card")
代码
Border Beam Card 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<article class="x-beam">
<span class="x-beam__ray" aria-hidden="true"></span>
<div class="x-beam__in">
<div class="x-beam__head"><span class="x-beam__ic" aria-hidden="true"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6.3 6.3l2.8 2.8M14.9 14.9l2.8 2.8M6.3 17.7l2.8-2.8M14.9 9.1l2.8-2.8"/></svg></span><span class="x-beam__badge">Beta</span></div>
<h3>Northwind Sync</h3>
<p>文件改动在三台设备间实时同步。</p>
<div class="x-beam__foot"><span>延迟 <b>38ms</b></span><button type="button">连接</button></div>
</div>
</article>.x-beam{position:relative;overflow:hidden;isolation:isolate;width:min(300px,100%);padding:1.5px;border-radius:18px;background:var(--d-line,rgba(255,255,255,.1));color:var(--d-fg,#fff)}
.x-beam__ray{position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;z-index:-1;background:conic-gradient(from 0deg,transparent 0 70%,color-mix(in srgb,var(--d-accent,#4D74FF) 30%,transparent) 80%,var(--d-accent,#4D74FF) 90%,#9ef0ff 94%,transparent 97%);transform:translate(-50%,-50%) rotate(0);animation:x-beam 4s linear infinite}
@keyframes x-beam{to{transform:translate(-50%,-50%) rotate(1turn)}}
.x-beam__in{position:relative;padding:20px;border-radius:16.5px;background:var(--d-card,#14141c)}
.x-beam__head{display:flex;justify-content:space-between;align-items:center}
.x-beam__ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--d-accent,#4D74FF) 18%,transparent);color:var(--d-accent,#4D74FF);font-size:15px}
.x-beam__badge{padding:4px 8px;border-radius:999px;border:1px solid var(--d-line,rgba(255,255,255,.12));font:600 11px/1 var(--d-font,system-ui,sans-serif);color:var(--d-muted,#9b9ba8)}
.x-beam h3{margin:14px 0 6px;font:650 17px/1.25 var(--d-font,system-ui,sans-serif);letter-spacing:-.01em}
.x-beam p{margin:0;font:13px/1.55 var(--d-font,system-ui,sans-serif);color:var(--d-muted,#9b9ba8)}
.x-beam__foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font:12px/1 var(--d-font,system-ui,sans-serif);color:var(--d-muted,#9b9ba8)}
.x-beam__foot b{color:var(--d-fg,#fff);font-variant-numeric:tabular-nums}
.x-beam__foot button{height:30px;padding:0 14px;border:0;border-radius:9px;background:var(--d-fg,#fff);color:var(--d-bg,#000);font:600 12px/1 var(--d-font,system-ui,sans-serif);cursor:pointer;transition:transform .2s}
…const init = (root) => {
const b = root.querySelector('.x-beam__foot button'), lat = root.querySelector('.x-beam__foot b');
let on = false, timer;
b.addEventListener('click', () => { on = !on; b.textContent = on ? '已连接' : '连接'; clearInterval(timer);
if (on) timer = setInterval(() => { lat.textContent = (30 + Math.round(Math.random() * 18)) + 'ms'; }, 900); });
return () => clearInterval(timer);
};订阅 Builder 查看完整源码。查看价格