컴포넌트 익스플로러
토리북 컴포넌트 라이브러리 (Module 24) · 재사용 UI 기반
버튼
배지 · 텍스트
주요부기 보상완료주의오류 내레이션아웃라인
디스플레이 텍스트
큰 본문 — 우리 아이가 주인공이 되는 이야기
본문 — 토리북은 따뜻하고 안전한 동화 세계입니다.
캡션 — 부가 설명 텍스트
카드
📖
내레이션
이번 주 읽은 책
12
+8%
생성한 이야기
5
-3%
즐겨찾기가 없어요
마음에 드는 이야기를 하트로 저장해 보세요.
로딩 · 생성 진행
부기가 문장을 천천히 살펴보고 있어요.
40% · 3/5 단계
인터랙션 · 애니메이션
마이크로 인터랙션
플로트 스파클
애니메이션 패턴
- fade · 150 · Subtle enter/exit
- slide · 240 · Navigation, page transition
- scale · 150 · Pop, modal enter
- bounce · 600 · Playful feedback
- float · 4000ms · Ambient character/idle
- sparkle · 2400ms · Reward/success accent
컴포넌트 상태
defaulthoverfocuspressedselectedloadingdisabledsuccesswarningerrorempty
모션 규칙
- · Use shared animation tokens only.
- · Never hardcode animation duration.
- · Respect prefers-reduced-motion.
- · Motion explains state, not decoration.
캐릭터 모션
토리 🐹
wavejumpreaddrawcelebratemagicpointblinksmile
부기 🐢
readthinkpageTurnsmilenodexplaincelebrate