변형 파동 전달Traveling Deformation Wave

Traveling Deformation Wave

변형 파동 전달

다른 이름Also known as · Traveling deformation wave · 전파되는 변형 파동 · ApplyWave

437

렌더 추가 예정CLIP COMING변형 파동 전달Traveling Deformation Wave정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 437. 변형 파동 전달 · Traveling Deformation Wave · none

대상의 한쪽에서 시작한 굴곡이 반대쪽으로 이동하고 원래 형태로 돌아온다A bend that starts on one side of an object travels to the other side and returns it to its original shape.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

교란이나 반응이 전달되는 것을 보여 준다. 접촉이나 신호가 물체를 따라 퍼진다는 느낌을 준다Shows a disturbance or reaction being transmitted. It feels like a touch or signal spreading along the object.

언제 쓰나Use whenUSE WHEN

선이나 리본에 신호가 지나가는 모습을 보여 줄 때
버튼을 누르면 옆으로 파동이 전달되는 반응을 줄 때

Show a signal passing along a line or ribbon.
Give a button press a wave that passes to its neighbors.

과용 주의AvoidAVOID

진폭 24px 초과 금지
끝 상태는 원형과 정확히 같아야 한다

분류TagsTAGS

도형·패스Shape & Path 피드백Feedback 설명Explain 웹 UIWeb UI 설명 영상Explainer video 숏폼Short-form 난이도 중급Intermediatesvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

1000ms 동안 폭의 60% 파장, 진폭 12px의 사인 굴곡이 왼쪽에서 오른쪽으로 지나가고 끝나면 완전히 평평해진다

과용 · 나쁜 사례OVERUSE

진폭 60px에 파장이 짧아 선이 꼬이고, 굴곡이 지나간 뒤 형태가 원래대로 돌아오지 않는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	1000ms	700~1400ms
진폭	12px	6~24px	최대 변위
파장	대상 폭의 60%	40~80%
이징	sine	none~sine	파동 형태 사인

GSAP

const pts = 40, u = { p: 0 };
tl.to(u, { p: 1, duration: 1, ease: 'none', onUpdate() {
  for (let i = 0; i < pts; i++) { const x = i / (pts - 1), d = (x - u.p * 1.6 + 0.3) / 0.6;
    const y = Math.abs(d) < 0.5 ? Math.sin(d * 2 * Math.PI) * 12 * Math.cos(d * Math.PI) : 0; path.setY(i, y); } } }, 0.3);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 선에 변형 파동 전달을 넣어줘. 점 40개의 y를 사인으로 변위시켜 진폭 12px, 파장 폭의 60%의 굴곡이 1초 동안 왼쪽에서 오른쪽으로 지나가게 하고 양 끝에서는 코사인 포락선으로 변위 0이 되게 해. 끝나면 완전히 직선.

Add a traveling deformation wave to the line in <target>. Displace 40 points in y with a sine of amplitude 12px and wavelength 60% of the width, traveling left to right over 1 second, with a cosine envelope so both ends have zero displacement. It must end perfectly straight.

Codex

<파일>에 traveling deformation wave를 구현해. 점 40개, 진폭 12px, 파장 폭 60%, 1s, ease none, 시작 0.3초. 0.5초, 0.8초, 1.3초를 캡처해 굴곡이 왼쪽에서 오른쪽으로 이동하는지, 1.3초에 모든 점의 y가 0인지 확인해.

Implement a traveling deformation wave in <file>: 40 points, amplitude 12px, wavelength 60% of width, 1s, ease none, start 0.3s. Capture at 0.5s, 0.8s and 1.3s and verify the bend moves left to right and every point y is 0 at 1.3s.