효과Effects / 질감·스타일Texture & Style / Nº 484

파문 왜곡Ripple Distortion

Ripple Distortion

파문 왜곡

다른 이름Also known as · Distortion ripple overlay · 화면 왜곡 파문 · Radial Ripple Distortion · 방사 물결 왜곡

484

렌더 추가 예정CLIP COMING파문 왜곡Ripple Distortion정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 484. 파문 왜곡 · Ripple Distortion · expo.out

화면 위로 원형 파문이 지나가며 주변 색과 모양이 잠깐 변했다가 가라앉는 효과A circular ripple passes over the screen, briefly changing surrounding color and shape, then settles.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

클릭이나 활성화의 반응을 물질감 있게 보여주고 화면이 물처럼 응답하는 인상을 준다Shows click or activation feedback with material feel, as if the screen responds like water.

언제 쓰나Use whenUSE WHEN

클릭, 활성화, 착지 지점에서 파문으로 반응을 보여줄 때
이미지 전환에서 물결이 화면을 훑고 지나가게 할 때

To show a response as a ripple at a click, activation, or landing point
For an image transition where waves sweep across the screen

과용 주의AvoidAVOID

변위 0.04UV 초과 금지
1.4초 후 변위 0 보장

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

클릭 지점에서 파문이 0.5UV/s로 퍼지며 변위 0.02UV가 지수 감쇠로 1.4초 안에 사라진다

과용 · 나쁜 사례OVERUSE

변위를 0.1UV 이상 주어 화면이 찢어지거나, 파문이 사라지지 않고 계속 남는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	1400ms	1000~2200ms	지수 감쇠
파문 속도	0.5UV/s	0.3~0.8UV/s	원 반경 증가
파장	0.05UV	0.03~0.08UV	링 간격
변위	0.02UV	0.01~0.04UV	샘플 좌표 이동
감쇠	exp(-2.5t)	-2~-4	시간 감쇠

GSAP

// fragment
vec2 d=uv-uCenter; float r=length(d);
float t=uTime;                 // 0..1.4s
float front=t*.5;
float w=sin((r-front)*6.283/.05)*exp(-2.5*t)*smoothstep(.12,0.,abs(r-front));
vec2 u=uv+normalize(d+1e-5)*w*.02;
gl_FragColor=texture2D(tex,u);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<화면>에 파문 왜곡을 넣어줘. WebGL fragment shader에서 클릭 지점을 중심으로 전면이 0.5UV/s로 퍼지고, 파장 0.05UV의 사인 링이 exp(-2.5t)로 감쇠하며 샘플 좌표를 최대 0.02UV 밀어내게 해. 지속은 1.4초, 끝에서 변위 0. uTime은 paused 타임라인이 구동하고 클릭 좌표는 고정값으로 넣어.

Add a ripple distortion to <screen>. In a WebGL fragment shader, expand a wavefront from the click point at 0.5 UV/s, with a sine ring of 0.05 UV wavelength decaying by exp(-2.5t), displacing sample coordinates by up to 0.02 UV. Duration 1.4s, displacement 0 at the end. Drive uTime from a paused timeline and use a fixed click coordinate.

Codex

<파일>에 ripple-distortion 셰이더를 구현해. 지속 1400ms, 파문 속도 0.5UV/s, 파장 0.05UV, 변위 0.02UV, 감쇠 exp(-2.5t). 0.2초, 0.6초, 1.0초, 1.5초를 캡처해 링이 퍼지는지, 진폭이 줄어드는지, 1.5초에 원본과 일치하는지 확인해.

Implement a ripple-distortion shader in <file>: duration 1400ms, wave speed 0.5 UV/s, wavelength 0.05 UV, displacement 0.02 UV, decay exp(-2.5t). Capture at 0.2s, 0.6s, 1.0s, and 1.5s to verify the ring expands, amplitude shrinks, and 1.5s matches the original.