효과Effects / 반복·앰비언트Loop & Ambient / Nº 587

리플 링Ripple Rings

Ripple Rings

리플 링

다른 이름Also known as · Expanding ripple rings · 확산 파문 링 · Ripple Ring · 퍼지는 원형 파문 · Ping · Expanding Ring

587

도판Fig. 587. 리플 링 · Ripple Rings · power2.out

재생 속도Speed

중심에서 생긴 원들이 커지고 흐려지며 사라진다.Concentric rings expand and fade from a shared center.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

신호 확산과 호출을 표현한다.Communicates a spreading signal or a call for attention.

언제 쓰나Use whenUSE WHEN

신호가 퍼지는 위치를 보여줄 때
호출 버튼의 피드백을 표현할 때

Use when presenting ripple rings in a waiting or ambient scene.
Use for a compact status indicator with a stable surrounding layout.

과용 주의AvoidAVOID

여러 지점에서 큰 링이 동시에 번져 초점이 사라진다.
정보를 읽는 동안 반복 진폭을 키우지 않는다.

분류TagsTAGS

반복·앰비언트Loop & Ambient 피드백Feedback 분위기Mood 설명 영상Explainer video 웹 UIWeb UI 숏폼Short-form 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

세 링이 0.4초 차이로 커지고 사라져 호출 위치를 알린다.

과용 · 나쁜 사례OVERUSE

여러 지점에서 큰 링이 동시에 번져 초점이 사라진다.

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	1.6s	1.12~2.24s	유한 구간을 호스트 시간으로 반복
링 수	3	2~4	동심원 레이어
링 시간차	0.4s	0.3~0.5s	전체 구간은 2.4초
크기 범위	0.2~1.5	0.1~1.8	중심 앵커
이징	power2.out	power2.out, power3.out, sine.inOut	움직임의 가속과 감속

GSAP

const rings = gsap.utils.toArray('.ring');
gsap.set(rings, {transformOrigin:'50% 50%'});
tl.fromTo(rings, {scale:0.2, opacity:1}, {scale:1.5, opacity:0, duration:1.6, stagger:0.4, ease:'power2.out'}, 0);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 리플 링을 적용해. 1.6초, 링 수 3; 링 시간차 0.4s; 크기 범위 0.2~1.5, 이징 power2.out로 구현해. paused 타임라인으로 seek 가능하게 하고 반복은 유한 구간의 지역 시간으로 계산해.

Apply Ripple Rings to <target> in <file>. Use a 1.6s segment with power2.out; implement these explicit settings: Ring count: 3, Ring delay: 0.4s, Scale range: 0.2~1.5. Use a paused, seekable timeline and repeat through local timeline time.

Codex

<파일>의 <대상> 레이어에 리플 링을 적용해. 1.6초, 링 수 3; 링 시간차 0.4s; 크기 범위 0.2~1.5, power2.out를 사용하고 0초, 0.8초, 1.6초 캡처로 시작값, 중간 변화, 완료 자세를 확인해. 동일 시점을 두 번 seek해 같은 결과인지 검증해.

Apply Ripple Rings to the <target> layer in <file> with Ring count: 3, Ring delay: 0.4s, Scale range: 0.2~1.5, using the supplied core snippet and a 1.6s segment with power2.out. Capture at 0s, 0.8s, and 1.6s to verify the initial pose, intermediate change, and final pose. Seek to the same timestamp twice and confirm identical output.