샤터 전환Shatter Transition

Shatter Transition

샤터 전환

다른 이름Also known as · Fragment shatter · 조각 분해 · Chaos collapse transition · 혼돈 붕괴 전환 · Scatter Disintegration · 흩어짐 분해 · Scatter effect · Fracture and Shatter · 균열과 파편 분해

195

렌더 추가 예정CLIP COMING샤터 전환Shatter Transition정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 195. 샤터 전환 · Shatter Transition · power2.in

화면이나 물체가 작은 조각으로 갈라져 흩어지며 다음 장면을 드러내는 전환The frame or object splits into small fragments that scatter and reveal the next scene; in reverse, fragments gather into the new scene.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

붕괴와 확산의 강한 인상. 유리가 깨지듯 앞 장면이 무너진다A strong impression of collapse and dispersal: the old scene falls apart like breaking glass.

언제 쓰나Use whenUSE WHEN

기존 방식의 붕괴나 충격적인 반전을 전할 때
오프닝이나 클라이맥스에서 강한 시각적 사건이 필요할 때

Convey the collapse of an old way or a shocking reversal.
Openers or climaxes that need a strong visual event.

과용 주의AvoidAVOID

파편 수 60개 초과 금지
난수는 시드 고정, Math.random 금지

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

1.0초 동안 파편 30개가 시드 1의 고정 궤적으로 최대 화면 30% 변위, 120도/s 회전으로 흩어지며 뒤 장면을 드러낸다

과용 · 나쁜 사례OVERUSE

파편이 무작위로 프레임마다 달라 깜빡이거나, 파편이 너무 작아 먼지처럼만 보인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
전체 지속	1.0s	0.7~1.5s	파편 낙하 포함
파편 수	30	16~60	시드 1
최대 변위	화면 30%	15~40%	방사형
회전	120deg/s	60~240	파편별 고정

GSAP

const rnd = (i, k) => ((Math.sin(i * 12.9898 + k * 78.233) * 43758.5453) % 1 + 1) % 1;
gsap.utils.toArray('.frag').forEach((f, i) => {
  const a = rnd(i, 1) * Math.PI * 2, d = 200 + rnd(i, 2) * 380;
  tl.to(f, { x: Math.cos(a) * d, y: Math.sin(a) * d + 120, rotation: (rnd(i, 3) - 0.5) * 240,
    opacity: 0, duration: 1.0, ease: 'power2.in' }, rnd(i, 4) * 0.08);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상A>에서 <대상B>로 샤터 전환을 만들어줘. A를 파편 30개(clipPath 폴리곤)로 나누고 각 파편이 시드 고정 궤적으로 최대 화면 30%까지 날아가며 120도/s로 회전하고 opacity 0이 되도록 1.0초 power2.in으로 보간해. 시작 지연은 파편마다 0~0.08초, Math.random 금지, B는 뒤에 대기, paused 타임라인 하나.

Build a shatter transition from <targetA> to <targetB>. Split A into 30 clipPath polygon fragments; each flies out on a fixed seeded path up to 30% of the frame, rotating 120 degrees per second and fading to opacity 0 over 1.0 second with power2.in, with 0 to 0.08 second start delays. No Math.random, B waits behind, one paused timeline.

Codex

<파일>에 shatter transition을 적용해. .frag 30개에 sin 해시 기반 궤적으로 x, y, rotation, opacity 0을 1.0s power2.in으로 보간하고 시작 지연은 0~0.08s. 0.2초, 0.5초, 1.0초 캡처로 파편이 흩어지며 B가 드러나는지, 같은 시각을 두 번 캡처해 파편 위치가 같은지 확인해.

Apply a shatter transition in <file>. Tween 30 .frag elements along sin-hash trajectories in x, y, rotation, and opacity 0 over 1.0s with power2.in, start delays 0 to 0.08s. Capture at 0.2, 0.5, and 1.0 seconds to confirm fragments scatter while B is revealed, and capture the same time twice to confirm identical fragment positions.