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

회전 타일 디졸브Rotating Tile Dissolve

Rotating Tile Dissolve

회전 타일 디졸브

다른 이름Also known as · Rotating tiled dissolve · 회전 반복 타일 전환

141

렌더 추가 예정CLIP COMING회전 타일 디졸브Rotating Tile Dissolve정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 141. 회전 타일 디졸브 · Rotating Tile Dissolve · none

반복된 영상 타일이 원점 주변으로 회전하며 다음 장면으로 섞인다Tiled copies of the frame rotate around the origin while the next scene blends in.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

반복 패턴이 원점을 중심으로 돌며 다음 화면에 섞인다. 리듬 있는 디지털 전환이다Adds rotation and a flowing pattern that crosses the frame edge.

언제 쓰나Use whenUSE WHEN

패턴이나 타일이 반복되는 그래픽 톤의 영상에서 장면을 섞어 넘길 때
음악 비트에 맞춰 화면이 돌며 바뀌는 숏폼 컷에 쓴다

When blending scenes in a pattern-driven, graphic-heavy video
On beat-driven short-form cuts where the frame spins into the next shot

과용 주의AvoidAVOID

타일 경계가 원본 콘텐츠 글자를 가로지르지 않게 정보 장면 위에는 쓰지 않는다
회전각은 90도의 배수로 둔다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

화면이 8x8 타일로 반복되며 0.7초 동안 90도 회전하고, 절반쯤에서 다음 장면 타일이 교차한다

과용 · 나쁜 사례OVERUSE

타일이 너무 작아 노이즈로 보이거나, 회전 후 화면 가장자리가 비어 검은 틈이 보인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	700ms	500~900ms	linear
회전각	90deg	90 또는 180deg	원점 기준
타일 반복	2x2	2~4	UV 반복
교차 구간	진행 35~65%	30~70%	한 구간에서만 섞임
확대	1.25	1.2~1.5	빈틈 방지

GSAP

const s = { p: 0 };
tl.to(s, { p: 1, duration: 0.7, ease: 'none', onUpdate: () => {
  gsap.set('.tiles', { rotation: 90 * s.p, scale: 1 + 0.25 * Math.sin(Math.PI * s.p) });
  gsap.set('.next', { opacity: gsap.utils.clamp(0, 1, (s.p - 0.35) / 0.3) });
} }, 0);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 장면 전환에 회전 타일 디졸브를 넣어줘. 화면을 2x2 반복 타일로 만들고 0.7초 동안 linear로 90도 회전시키면서 scale을 1에서 1.25까지 갔다 돌아오게 해. 진행 35%에서 65% 사이에 다음 장면 opacity를 0에서 1로 올려. 빈 가장자리가 보이지 않는지 확인하고, GSAP 타임라인 하나로 seek 가능하게 해.

Add a Rotating Tile Dissolve to <target>. Repeat the frame as 2x2 tiles, rotate it 90deg over 0.7s with linear ease while scale goes 1 to 1.25 and back. Fade the next scene in from 0 to 1 between 35% and 65% of progress. Make sure no empty edges show and keep it on one seekable GSAP timeline.

Codex

<파일>에 회전 타일 디졸브를 구현해. p 0에서 1, 0.7초 linear, .tiles rotation 90*p, scale 1+0.25*sin(pi*p), .next opacity clamp((p-0.35)/0.3). 0.2초, 0.35초, 0.5초, 0.7초 시점을 캡처해 회전 중 가장자리에 빈 틈이 없는지, 0.7초에 다음 장면만 남는지 확인해.

Implement Rotating Tile Dissolve in <file>. Progress p 0 to 1 over 0.7s linear; .tiles rotation 90*p, scale 1+0.25*sin(pi*p); .next opacity clamp((p-0.35)/0.3). Capture at 0.2s, 0.35s, 0.5s, and 0.7s to confirm there are no gaps at the edges during rotation and only the next scene remains at 0.7s.