AWESOME AI MOTION
효과Effects / 질감·스타일Texture & Style / Nº 494

웨이브 워프Wave Warp

Wave Warp
웨이브 워프
다른 이름Also known as · Text Wave Distort · 글자 표면 왜곡 · 웨이브 왜곡
494
렌더 추가 예정CLIP COMING웨이브 워프Wave Warp정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 494. 웨이브 워프 · Wave Warp · sine.inOut

문장의 위치는 유지된 채 글자 윤곽이 사인파처럼 휘고 흔들리는 효과Letter outlines bend and sway like a sine wave while the sentence stays in place.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
물결, 소리, 열기 같은 진동을 글자에 입힌다. 텍스트가 살아 움직이는 인상을 준다Gives text the vibration of water, sound, or heat and makes it feel alive.
언제 쓰나Use whenUSE WHEN
  • 음성이나 소리를 다루는 장면의 제목에 진동감을 줄 때
  • 수면 위 또는 열기 속 글자를 표현할 때
  • For titles in sound or voice scenes that need a sense of vibration
  • To render text on water or in heat haze
과용 주의AvoidAVOID
  • 진폭 8px 초과 금지
  • 끝에서 진폭 0으로 복원
분류TagsTAGS
질감·스타일Texture & Style분위기Mood강조Emphasis숏폼Short-form설명 영상Explainer video웹 UIWeb UI난이도 기본Basicsvg
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

제목 글자가 진폭 4px, 파장 80px의 사인파로 1.8초 동안 물결치고 마지막 0.4초에 진폭이 0으로 줄어든다

과용 · 나쁜 사례OVERUSE

진폭을 15px 이상 주어 글자를 알아볼 수 없거나, 파동 주기가 빨라 어지럽다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
지속1800ms1200~3000ms마지막 400ms는 복원
진폭4px2~8pxdisplacement scale
파장80px50~140pxbaseFrequency로 조절
주기1200ms800~2000ms위상 이동
방향수평수평/수직y 변위 방향
GSAP
/* <feTurbulence type=fractalNoise baseFrequency='0.012 0' seed=2/><feDisplacementMap scale=4 yChannelSelector=G/> */
tl.to('#turb',{attr:{baseFrequency:'0.012 0.02'},duration:1.8,ease:'none'},t)
 .fromTo('#disp',{attr:{scale:0}},{attr:{scale:4},duration:.4,ease:'sine.out'},t)
 .to('#disp',{attr:{scale:0},duration:.4,ease:'sine.inOut'},t+1.4);
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<제목>에 웨이브 워프를 넣어줘. SVG feTurbulence(baseFrequency 0.012 0, seed 2)와 feDisplacementMap으로 글자 윤곽에 진폭 4px, 파장 약 80px의 물결을 주고, 1.8초 동안 위상이 이동하게 해. 처음 0.4초에 진폭을 올리고 마지막 0.4초에 0으로 sine.inOut 복원. paused 타임라인으로 구동해.

Add a wave warp to <title>. Use SVG feTurbulence (baseFrequency 0.012 0, seed 2) with feDisplacementMap to ripple the outlines at 4px amplitude and about 80px wavelength, shifting phase over 1.8s. Raise amplitude in the first 0.4s and restore it to 0 in the last 0.4s with sine.inOut. Drive from a paused timeline.

Codex

<파일>의 <제목>에 wave-warp를 구현해. 진폭 4px, 파장 80px, 지속 1800ms, 복원 400ms. 0.3초, 0.9초, 2.0초를 캡처해 글자 윤곽이 물결치는지, 2.0초에 원래 모양과 일치하는지, 글자가 읽히는지 확인해.

Implement wave-warp on <title> in <file>: amplitude 4px, wavelength 80px, duration 1800ms, restore 400ms. Capture at 0.3s, 0.9s, and 2.0s to verify outlines ripple, 2.0s matches the original shape, and the text stays readable.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
SVG 필터를 텍스트 컨테이너에 걸고 scale attr을 paused 타임라인에서 보간한다. canvas 방식은 글자 표본 좌표에 sin(x/80*2π+phase)*4를 더한다
ReelForgeBRIEF TO VIDEO
브리프에 amplitudePx, wavelengthPx, periodMs, axis를 싣는다. 텍스트는 짧은 제목에 한정한다
Scrolline DeckSCROLL SCRUB
진행률로 위상을 이동시키고 진폭은 시작과 끝에서 0이 되게 sine 봉우리로 준다. 스크롤 정지 시 진폭이 남지 않게 한다
06

잘 맞는 조합Pairs well with

렌더 추가 예정CLIP COMING
난류 왜곡Turbulent Displace
490
Nº 490난류 왜곡Turbulent DisplaceTurbulent Displace
렌더 추가 예정CLIP COMING
오디오 파형Audio Waveform
248
Nº 248오디오 파형Audio WaveformAudio Waveform
렌더 추가 예정CLIP COMING
파문 왜곡Ripple Distortion
484
Nº 484파문 왜곡Ripple DistortionRipple Distortion
스크램블 · Text Scramble
Nº 092스크램블Text ScrambleText Scramble
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo