Border Beam Card
Overview
A beam of light loops around the card border while the content stays calm. The beam is a rotating conic gradient that only animates transform.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Border Beam Card to your project in your colors.
Where to use it
Sections that present information in groups: features, case studies and work, team members, article lists.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add border-beam-card
mcp › Use 8pt MCP to call get_component("border-beam-card")
Code
Source for Border Beam Card. Motion uses only transform and opacity and respects the Reduce motion setting.
<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>File changes sync live across three devices.</p>
<div class="x-beam__foot"><span>Latency <b>38ms</b></span><button type="button">Connect</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 ? 'Connected' : 'Connect'; clearInterval(timer);
if (on) timer = setInterval(() => { lat.textContent = (30 + Math.round(Math.random() * 18)) + 'ms'; }, 900); });
return () => clearInterval(timer);
};Subscribe to Builder to see the full source.See pricing