중심 노드 주위를 작은 원 여러 개가 서로 다른 반지름·속도로 도는 장식. 통합 로고·아이콘을 흩어 놓을 때 씁니다.
디자인 아틀라스<div class="orbit-scene">
<div class="center">HUB</div>
<div class="ring r1"><div class="dot d1">UI</div></div>
<div class="ring r2"><div class="dot d2">AI</div></div>
<div class="ring r3"><div class="dot d3">3D</div></div>
</div>.orbit-scene{position:relative;width:min(280px,88%);aspect-ratio:1}
.center{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;
background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;
box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 45%,transparent)}
.ring{position:absolute;border-radius:50%;border:1px dashed var(--line)}
.r1{inset:20%;animation:spin 6s linear infinite}
.r2{inset:6%;animation:spin-rev 9.5s linear infinite}
.r3{inset:-8%;animation:spin 14s linear infinite}
.dot{position:absolute;top:-14px;left:50%;translate:-50% 0;width:28px;height:28px;border-radius:50%;
background:var(--surface);border:1px solid var(--line);color:var(--fg);
display:grid;place-items:center;font-size:10px;font-weight:700}
.d1{animation:spin-rev 6s linear infinite}
.d2{animation:spin 9.5s linear infinite}
.d3{animation:spin-rev 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-rev{to{transform:rotate(-360deg)}}핵심 트릭은 이중 회전 상쇄입니다. 바깥쪽 궤도(부모)를 rotate로 계속 돌리면 안의 점도 같이 돌아 원을 그리며 이동하지만, 점의 내용(아이콘·글자)까지 함께 기울어져 버립니다. 그래서 점 자신에게 부모와 정확히 반대 방향·같은 속도로 다시 rotate를 걸면, 위치는 궤도를 따라 이동하면서도 내용물은 항상 똑바로 서 있게 됩니다.
궤도마다 반지름·회전 방향·속도를 다르게 주면 여러 겹의 궤도가 서로 다른 리듬으로 돌아 기계적으로 보이지 않습니다. 궤도 선 자체는 옅은 점선으로 남겨 두면 "이것들이 하나의 시스템 안에 있다"는 구조를 함께 전달합니다.
중심 노드는 대표 제품·브랜드를, 궤도를 도는 점들은 연동된 도구·파트너를 나타내는 구성이 가장 흔합니다.
연동 파트너 로고 모음, 기술 스택 소개, 플랫폼 생태계 다이어그램에 씁니다. 궤도가 3개를 넘어가면 화면이 복잡해지니 적당히 절제하세요.