디자인 아틀라스
EN
✦ 시각 효과

텍스트 시머

Text shimmer

무채색 글자 위로 밝은 빛 한 줄이 반복해서 스쳐 지나가며 반짝이는 효과. 스켈레톤 로딩의 시머를 텍스트 자체에 적용한 버전입니다.

다른 이름: Shimmering headingText loading shine
···
html
<h1 class="shimmer-text">Generating your summary</h1>
css
.shimmer-text{margin:0;text-align:center;font-size:clamp(20px,5.6vmin,32px);font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(100deg,var(--muted) 32%,#fff 50%,var(--muted) 68%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 2.2s linear infinite}
@keyframes shimmer{0%{background-position:0% 0}100%{background-position:100% 0}}

무채색(회색 계열) 텍스트 색과 밝은 흰색이 짧게 섞인 그라데이션을 만들고, background-clip: text로 글자 모양 안에만 채웁니다. background-size를 실제 글자 너비보다 훨씬 크게 두고 background-position만 반복해서 이동시키면, 밝은 띠 하나가 글자 위를 스치듯 지나갑니다.

그라데이션 텍스트가 알록달록한 브랜드 색 자체를 주인공으로 삼는다면, 텍스트 시머는 글자 색을 무채색 그대로 두고 그 위를 스치는 빛 한 줄만 강조합니다. 그래서 "지금 이 텍스트가 갱신 중이다"라는 로딩 신호로 자연스럽게 읽힙니다 — 실제 스켈레톤 UI에서 회색 막대 위로 빛이 흐르는 것과 같은 문법입니다.

같은 트릭을 shine-sweep과 비교하면, shine-sweep은 카드 같은 불투명한 표면 전체에 띠를 겹치는 것이고 텍스트 시머는 그 띠를 글자 모양으로 마스킹한다는 차이가 있습니다.

언제 쓰나

AI가 답을 생성하는 동안의 제목, 데이터를 불러오는 중인 헤드라인에 씁니다. 로딩이 끝나면 애니메이션을 멈추고 일반 텍스트 색으로 되돌리세요 — 계속 반짝이면 오히려 완료 신호를 못 믿게 됩니다.