[Conic Gradient Border] 빙글빙글 도는 그라데이션 보더

한 줄 요약

@property로 angle 변수를 등록해 conic-gradient를 회전시키는 카드 보더 효과 — Vercel·Linear가 쓰는 그 패턴.

이럴 때 필요해요

Vercel 대시보드의 hover 카드, Linear의 강조 패널 — 요즘 모던 SaaS가 한 번씩은 쓰는 패턴이다. 막상 처음 시도하면 "conic을 어떻게 회전시키지?"에서 막힌다. 답은 transform: rotate가 아니라 gradient 안의 from angle 자체를 애니메이션하는 것.

어떻게 동작하나

1. @property --angle로 CSS 변수를 angle 타입으로 등록 — keyframe이 0deg→360deg를 보간할 수 있게 된다. 미등록 시 변수가 문자열이라 점프.
2. 보더는 padding 트릭 — 바깥 div에 conic 그라데이션 + p-[2px], 안쪽 div에 흰 배경. 가장자리 2px만 그라데이션 노출.
3. 각 카드의 회전 속도는 --dur CSS 변수로 외부 주입 — 변형 3종(4s/3s/6s)을 동일 키프레임으로 처리.
4. Hover 시 animation-duration: 1s로 단축 — 갑자기 빨라지는 가속감.

놓치기 쉬운 것

• 팔레트 첫 색을 마지막에 한 번 더 넣어야 360 지점에서 색이 자연스럽게 닫힌다 — 안 그러면 한 바퀴마다 살짝 끊김.
• @property는 Chrome 85+ / Safari 16.4+ / Firefox 128+. 미지원 환경은 정적 그라데이션으로 보이고 회전만 멈춤 — progressive enhancement.
• 인라인 style로 CSS 변수 주입 시 TS는 --dur를 모르므로 as CSSProperties 캐스팅 필요.
• 그라데이션 페인트는 매 프레임 발생 — 한 페이지에 수십 개 깔면 GPU 비용 누적. hero·featured 카드 정도로 절제.

이런 곳에 써요

• Pro·Enterprise 플랜 카드 강조 (가격표)
• "AI Beta" 같은 신기능 배너
• 다크 모드 대시보드의 hero 통계 카드