Components
Agent Orb
에이전트의 실시간 상태를 나타내는 점묘 오브입니다. TheNoun의 브랜드 모티프입니다.
listening
composing
코드 보기
<canvas class="tn-orb" width="128" height="128"></canvas>
/* 순수 2D canvas 점묘 구(球) — 상태별 속도·호흡만 다르게
listening: 느린 회전 + 큰 호흡 / composing: 빠른 회전 */Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| listening | 느린 회전 + 호흡 — 음성 대기 | |
| composing | 빠른 회전 — 응답 생성 중 | |
| idle | 정지 + 저채도 (미표시 권장) |
Guidelines
✓ Do
- 64px(아바타) / 20px(인라인) 두 크기만
- 오프스크린이면 애니메이션 정지 (IntersectionObserver)
✕ Don't
- WebGL·이미지로 만들지 않는다 (순수 canvas)
- 한 화면에 오브 3개 이상 금지
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
점 | ~140개 / 파랑 앞면 · 회색 뒷면 | |
파랑 | var(--primary) oklch | |
크기 | 64px / 20px |