디자인 아틀라스
EN
✦ 시각 효과

보더 빔

Border beam

테두리 전체가 아니라 짧은 빛줄기 하나가 카드 테두리를 따라 계속 도는 효과.

다른 이름: Animated border lightBorder glow trail
···
html
<div class="beam-border" id="bb"><div class="inner"><strong>Pro plan</strong><span>border beam</span></div></div>
css
.beam-border{--a:0deg;position:relative;width:min(240px,80%);border-radius:16px;padding:2px;
  background:conic-gradient(from var(--a),transparent 0 78%,var(--accent-2) 88%,var(--accent) 94%,transparent 100%)}
.inner{border-radius:14px;background:var(--surface);padding:28px 22px;display:grid;gap:5px;
  border:1px solid var(--line);text-align:center}
.inner strong{color:var(--fg);font-size:17px}
.inner span{color:var(--muted);font-size:12px;letter-spacing:.02em}
js
const el = document.getElementById('bb');
let a = 0;
(function loop(){ a = (a + 1.6) % 360; el.style.setProperty('--a', a + 'deg'); requestAnimationFrame(loop); })();

그라데이션 보더가 테두리 전체를 항상 색칠한다면, 보더 빔은 둘레의 극히 일부(꼬리가 있는 짧은 호)만 밝고 나머지는 평범한 테두리로 남습니다. 그 짧은 호가 원을 그리며 돌면 "빛이 지나간다"는 인상을 줍니다.

만드는 방법은 그라데이션 보더와 같은 이중 배경 트릭입니다. 바깥 요소에 conic-gradient를 깔되 대부분을 투명하게 두고 일부 구간(예: 85~100%)만 accent 색으로 채워 짧은 호를 만듭니다. 안쪽에 padding만큼 surface 색 배경을 덮어 테두리 두께만 그라데이션이 드러나게 하고, JS로 conic-gradient의 from 각도를 매 프레임 조금씩 늘립니다.

호의 길이(투명 구간의 비율)를 좁히면 빔이 더 또렷해지고, 넓히면 그라데이션 보더에 가까워집니다. 회전 속도는 너무 빠르면 산만하니 한 바퀴에 3~5초 정도가 적당합니다.

언제 쓰나

"AI" 배지, 활성 요금제 카드, 지금 진행 중인 작업을 나타내는 카드에 씁니다. 여러 카드에 동시에 쓰면 어디를 봐야 할지 모호해지니 강조할 대상 하나에만 쓰세요.