효과Effects / 전환·컷Transitions / Nº 212

지그재그 와이프Zigzag Wipe

Zigzag Wipe

지그재그 와이프

다른 이름Also known as · Zigzag block wipe · 지그재그 블록 와이프

212

렌더 추가 예정CLIP COMING지그재그 와이프Zigzag Wipe정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 212. 지그재그 와이프 · Zigzag Wipe · none

지그재그로 맞물린 블록 경계가 움직이며 새 장면이 드러난다Interlocking zigzag block boundaries move to reveal the new scene.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

톱니 모양으로 맞물린 경계가 움직이며 새 장면을 드러낸다. 각지고 역동적인 진행이다Produces a dynamic, sawtooth progression.

언제 쓰나Use whenUSE WHEN

스포츠, 테크, 스트리트 톤의 각진 그래픽 영상에서 화면을 넘길 때
목록형 슬라이드 전환에서 방향성 있는 와이프를 쓸 때

To swap scenes in sporty, techy, or street-style angular graphic videos
For directional wipes in list-style slide transitions

과용 주의AvoidAVOID

톱니 수는 8~16개, 깊이는 화면 폭의 6% 이하
경계가 화면 밖에서 시작해 밖에서 끝나게 한다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

톱니 12개짜리 경계가 왼쪽에서 오른쪽으로 0.7초 동안 linear로 밀려가며 새 장면을 드러낸다

과용 · 나쁜 사례OVERUSE

톱니가 2~3개라 삼각형 두어 개로 보이거나, 톱니 깊이가 너무 커서 경계가 화면의 절반 이상에 걸쳐 산만하다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	700ms	500~900ms	linear
톱니 수	12	8~16	90px 높이
톱니 깊이	화면 폭 5%	3~6%	약 96px
방향	왼쪽에서 오른쪽	상하좌우
경계 시작 위치	-깊이		화면 밖

GSAP

const N = 12, H = 1080 / N, D = 96;
const pts = p => { let s = []; for (let i = 0; i <= N; i++) s.push(`${p + (i % 2 ? D : 0)}px ${i * H}px`); return `polygon(0 0, ${s.join(',')}, 0 1080px)`; };
const s = { p: -D };
tl.to(s, { p: 1920, duration: 0.7, ease: 'none', onUpdate: () => gsap.set('.next', { clipPath: pts(s.p) }) }, 0);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 장면 전환에 지그재그 와이프를 넣어줘. .next의 clipPath를 톱니 12개, 깊이 96px인 polygon으로 만들어 경계가 x -96에서 1920까지 0.7초 linear로 이동하게 해. p만 보간하는 함수로 만들고 paused 타임라인에서 seek해도 같은 프레임이 나오게 해.

Add a Zigzag Wipe to <target>. Build .next's clipPath as a polygon with 12 teeth, 96px deep, and move its boundary from x -96 to 1920 over 0.7s with linear ease. Write it as a function of p only so a paused timeline seeks to identical frames.

Codex

<파일>에 지그재그 와이프를 구현해. N=12, D=96, p -96에서 1920, 0.7초 ease none, onUpdate에서 .next clipPath polygon 갱신. 0.15초, 0.35초, 0.55초, 0.7초 시점을 캡처해 톱니 모양이 12개로 유지되는지, 0.7초에 .next가 전체를 덮는지 확인해.

Implement Zigzag Wipe in <file>. N=12, D=96, p from -96 to 1920 over 0.7s ease none, updating .next clipPath polygon in onUpdate. Capture at 0.15s, 0.35s, 0.55s, and 0.7s to confirm 12 teeth stay intact and that .next fully covers the frame at 0.7s.