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

난류 왜곡Turbulent Displace

Turbulent Displace

난류 왜곡

다른 이름Also known as · Heat haze · 열 아지랑이 · SVG filter distortion · SVG 필터 왜곡 · 터뷸런트 변위 · Displacement Map · 변위 맵 · SVG Turbulence Displacement · SVG 난류 왜곡 · Turbulence filter warp · SVG 난류 변위

490

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

도판Fig. 490. 난류 왜곡 · Turbulent Displace · sine.inOut

저주파 노이즈에 따라 화면 픽셀과 윤곽이 출렁였다가 원래대로 복원되는 효과Pixels and outlines slosh along a flowing irregular pattern, then restore.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

열기나 물속처럼 공기가 일렁이는 느낌과 불안정한 순간을 표현한다Expresses air rippling like heat haze or being underwater, and an unstable moment.

언제 쓰나Use whenUSE WHEN

꿈, 회상, 열기, 수중 장면으로 넘어가는 전환에 쓸 때
제목이 나타나기 전이나 사라질 때 윤곽을 일렁이게 할 때

For transitions into dream, memory, heat, or underwater scenes
To make outlines waver before a title appears or as it disappears

과용 주의AvoidAVOID

변위 8px 초과 금지
노이즈 속도 0.5 초과 금지

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

이미지가 3초 동안 변위 4px로 은은히 일렁이다가 마지막 0.5초에 0으로 복원된다

과용 · 나쁜 사례OVERUSE

변위를 20px 이상 주어 화면이 무너지거나, 노이즈 속도를 높여 멀미가 난다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	3000ms	2000~4500ms	복원 포함
변위	4px	2~8px	feDisplacementMap scale
노이즈 속도	0.3	0.15~0.5	baseFrequency 이동 속도
주파수	0.008	0.005~0.015	저주파
복원 구간	500ms	300~800ms	마지막에 scale 0

GSAP

/* <feTurbulence id=t baseFrequency='0.008 0.012' seed=3/><feDisplacementMap in=SourceGraphic scale=4/> */
const o={f:.008};
tl.to('#disp',{attr:{scale:4},duration:.6,ease:'sine.inOut'},t)
 .to('#t',{attr:{baseFrequency:'0.010 0.014'},duration:3,ease:'none'},t)
 .to('#disp',{attr:{scale:0},duration:.5,ease:'sine.inOut'},t+2.5);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<이미지>에 난류 왜곡을 넣어줘. SVG feTurbulence(baseFrequency 0.008 0.012, seed 3)와 feDisplacementMap을 쓰고 scale을 0에서 4px로 0.6초 sine.inOut으로 올려. 3초 동안 baseFrequency를 선형으로 천천히 이동시키고 마지막 0.5초에 scale을 0으로 내려 복원해. paused 타임라인으로 구동해.

Add turbulent displacement to <image>. Use SVG feTurbulence (baseFrequency 0.008 0.012, seed 3) with feDisplacementMap, raising scale from 0 to 4px over 0.6s with sine.inOut. Slowly shift baseFrequency linearly over 3s and drop scale to 0 in the last 0.5s to restore. Drive from a paused timeline.

Codex

<파일>의 <이미지>에 turbulent-displace를 구현해. scale 4px, 지속 3000ms, 복원 500ms, baseFrequency 0.008에서 0.010, seed 3. 0.6초, 1.5초, 3.2초를 캡처해 윤곽이 일렁이는지, 3.2초에 원본과 픽셀 일치하는지 확인해.

Implement turbulent-displace on <image> in <file>: scale 4px, duration 3000ms, restore 500ms, baseFrequency 0.008 to 0.010, seed 3. Capture at 0.6s, 1.5s, and 3.2s to verify outlines waver and that 3.2s matches the original pixel for pixel.