Gradient
콘텐츠 끝을 가리는 마스크와 스켈레톤 반짝임
그라디언트는 콘텐츠의 끝을 부드럽게 가리거나, 불러오는 중인 자리를 반짝임으로 보여 줄 때 쓰는 색 토큰이다.
groo 는 두 가지만 둔다 — 가림 마스크와 반짝임. 투명도가 들어 있어 색 토큰(colors)이 아니라 딤과 같은 표 토큰으로 적는다.
그라디언트 토큰
| 토큰 | 미리보기 | 값 | 쓰는 곳 |
|---|---|---|---|
gradient-fade-mask | linear-gradient(#00000000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #00000066 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000000ff 100%) | 가림 마스크 — mask-image 로 써서 스크롤 영역의 끝을 부드럽게(Scroll Fog — specs/components/scroll-fog.yaml, 2026-10-03). 라이트 · 다크 같음 | |
gradient-shimmer-neutral | linear-gradient(90deg, #ffffff00 0%, #ffffffab 46%, #ffffffab 54%, #ffffff00 100%) | 스켈레톤 반짝임 띠 — 라이트 | |
gradient-shimmer-neutral-dark | linear-gradient(90deg, #ffffff00 0%, #ffffff1a 46%, #ffffff1a 54%, #ffffff00 100%) | 스켈레톤 반짝임 띠 — 다크 |
가림 마스크
전체식비교통쇼핑카페구독의료
그냥 자름전체식비교통쇼핑카페구독의료
좌우 20 — to right · to left점심 식사⋯
지하철⋯
스타벅스⋯
관리비⋯
영화⋯
편의점⋯
점심 식사⋯
지하철⋯
스타벅스⋯
관리비⋯
영화⋯
편의점⋯
긴 목록이나 가로로 스크롤되는 줄의 끝을 잘린 듯 끊지 않고 부드럽게 흐린다. 뒤에 더 있다는 것도 알린다.
- 색이 아니라 마스크로 쓴다(
mask-image). 배경색을 덧칠하지 않으므로 어떤 배경 위에서도, 라이트 · 다크 모두 같은 값으로 쓴다. - 토큰은 방향 없이(위 → 아래) 적혀 있다. 쓰는 자리에서 방향을 붙인다 — 오른쪽 끝을 흐리면
to left, 아래 끝을 흐리면to top. - 흐리는 깊이와 그만큼의 여백은 쓰는 자리가 정한다 — Scroll Fog.
반짝임
켜 두면 반짝임 띠가 되풀이해 지나간다.
라이트 — gradient-shimmer-neutral
다크 — gradient-shimmer-neutral-dark
스켈레톤 위를 반짝임 띠가 되풀이해 지나가며 불러오는 중임을 알린다 — Skeleton.
- 반복 시간은
motion-duration-loop, 곡선은motion-ease-easing이다 — 쉬는 틈 없이 되풀이한다(Motion › 반복). - 다크는 띠를 훨씬 옅게 쓴다(
gradient-shimmer-neutral-dark). - 모션 줄이기 모드에서는 멈춘다 — Motion › 모션 줄이기.
구성과 일부 설명은 당근 SEED Design 의 Foundations 문서(Apache-2.0)를 바탕으로 했다. 값과 그림은 groo 것이다.