Components / Motion / Beam border
Beam border beta
A single point of light travels the edge of a card. The beam is the core color — the one accent, in motion.
FEATURED
Studio plan
Every component, every block, and the motion line — cast from the same mold.
<div class="k-beam" style="max-width:400px">
<div class="k-beam-in">
<p style="font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--k-accent-ink)">FEATURED</p>
<p style="font-size:16.5px;font-weight:600;margin-top:7px">Studio plan</p>
<p style="font-size:13px;color:var(--k-ink-2);line-height:1.7;margin-top:5px">Every component, every block, and the motion line — cast from the same mold.</p>
</div>
</div>/* KATA Beam border */
@property --k-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.k-beam{position:relative;border-radius:14px;padding:1.5px;background:conic-gradient(from var(--k-angle),transparent 0deg,transparent 255deg,var(--k-core) 305deg,transparent 360deg),linear-gradient(var(--k-line),var(--k-line));animation:k-beam-spin 4.5s linear infinite}
.k-beam-in{border-radius:12.5px;background:var(--k-bg);padding:20px}
@keyframes k-beam-spin{to{--k-angle:360deg}}
@media (prefers-reduced-motion: reduce){.k-beam{animation:none}}
Usage
For the one card on the page that deserves attention — a featured plan, a key upgrade. If two beams are visible at once, both stop working.
Accessibility
Pure decoration: the card's content carries all meaning. The animation is removed under prefers-reduced-motion; in browsers without @property the border rests, still complete.