리플 배경 — 디자인 아틀라스

<div class="rip"> <span class="ring" style="animation-delay:0s"></span> <span class="ring" style="animation-delay:.9s"></span> <span class="ring" style="animation-delay:1.8s"></span> <span class="ring" style="animation-delay:2.7s"></span> <div class="core"></div> </div>

.rip{position:relative;width:min(220px,80%);aspect-ratio:1;display:grid;place-items:center} .ring{position:absolute;width:44px;height:44px;border-radius:50%;border:2px solid var(--accent); animation:ripple 3.6s cubic-bezier(.2,.6,.35,1) infinite} .core{width:20px;height:20px;border-radius:50%;background:var(--accent); box-shadow:0 0 30px 6px color-mix(in srgb,var(--accent) 65%,transparent)} @keyframes ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(5.2);opacity:0}}

테두리만 있는 원 하나에 transform: scale과 opacity를 동시에 줄이는 애니메이션을 걸면 잔물결 하나가 됩니다. 커질수록 테두리 두께(border-width)는 그대로인데 원 전체가 커지니 상대적으로 얇아져 보이는 게, 실제 물결이 퍼질수록 옅어지는 감쇠와 비슷한 자연스러움을 만듭니다.

같은 원을 여러 개 겹쳐 두고 animation-delay만 서로 다르게 주면, 연못에 물방울이 계속 떨어지는 것처럼 새 물결이 끊임없이 태어나는 것처럼 보입니다. 중심에는 발광하는 점 하나를 고정해 두면 "여기서 신호가 나가고 있다"는 인상이 더해집니다.

인터랙션 카테고리의 리플 이펙트가 클릭한 지점에서 1회 터지는 피드백이라면, 리플 배경은 사용자 입력과 무관하게 배경 전체에서 자동으로 계속 반복되는 장식이라는 점이 다릅니다.

언제 쓰나

실시간 연결·라이브 방송 상태 표시, "지금 신호를 보내는 중"을 나타내는 아이콘 뒤 배경에 씁니다. 콘텐츠와 겹치면 산만하니 단독 배경 요소로 쓰세요.