회전 블러 전환Tangent Motion Blur Spin

Tangent Motion Blur Spin

회전 블러 전환

다른 이름Also known as · Tangent motion blur spin · 접선 잔상 회전

146

렌더 추가 예정CLIP COMING회전 블러 전환Tangent Motion Blur Spin정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 146. 회전 블러 전환 · Tangent Motion Blur Spin · cubic-bezier(0.68,0.01,0.17,0.98)

장면이 모서리를 중심으로 회전하고 회전 궤도의 접선 방향으로 길게 흐려지며 교체된다The scene spins around a corner and smears along the tangent of its path as it is replaced.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

장면이 회전하며 진행 방향으로 길게 흐려진다. 속도와 관성이 강하게 느껴진다Conveys speed and inertia of rotation strongly.

언제 쓰나Use whenUSE WHEN

에너지 넘치는 오프닝이나 하이라이트 컷에서 속도감을 줄 때
장면이 휙 돌아 다음 장으로 넘어가는 트레일러형 전환

For energetic openings or highlight cuts that need a sense of speed
For trailer-style transitions where the frame whips around into the next scene

과용 주의AvoidAVOID

블러 세기는 회전 속도 정점(진행 40~60%)에서 최대로 둔다
정보 읽기가 필요한 장면 직전에는 쓰지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

장면이 오른쪽 아래 모서리를 축으로 0.65초 동안 도는 동안 접선 방향으로 21샘플 블러가 걸리고, 끝에서 선명해지며 다음 장면이 자리 잡는다

과용 · 나쁜 사례OVERUSE

블러가 처음부터 끝까지 일정해 정지감이 없거나, 회전축이 화면 중앙이라 단순 스핀처럼 보인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	650ms	500~800ms	cubicBezier(0.68,0.01,0.17,0.98)
회전각	75deg	60~90deg	모서리 축
블러 길이	최대 48px	24~72px	속도에 비례
샘플 수	21	12~24	WebGL 다중 샘플
회전축	우하단 모서리	모서리 4곳	읽는 방향과 반대

GSAP

// CSS 근사: 회전과 blur를 속도 곡선에 연동
tl.fromTo('.prev', { rotation: 0, transformOrigin: '100% 100%' }, { rotation: -75, duration: 0.65, ease: 'power3.in' }, 0);
tl.fromTo('.next', { rotation: 75, transformOrigin: '100% 100%' }, { rotation: 0, duration: 0.65, ease: 'power3.out' }, 0);
tl.to(['.prev','.next'], { filter: 'blur(6px)', duration: 0.32, yoyo: true, repeat: 1, ease: 'sine.inOut' }, 0);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 장면 전환에 회전 블러 전환을 넣어줘. 이전 장면을 우하단 모서리 축으로 0에서 -75도, 다음 장면은 75도에서 0도로 0.65초 동안 돌리고, 전환 중간(0.32초)에 blur가 6px까지 올랐다 돌아오게 해. 이징은 cubic-bezier(0.68,0.01,0.17,0.98). 타임라인 하나로 seek 가능하게 해줘.

Add a Tangent Blur Spin to <target>. Rotate the previous scene 0 to -75deg around its bottom-right corner and the next scene 75deg to 0 over 0.65s, with blur peaking at 6px at the midpoint (0.32s) and returning to 0. Use cubic-bezier(0.68,0.01,0.17,0.98) and a single seekable GSAP timeline.

Codex

<파일>에 회전 블러 전환을 구현해. transformOrigin 100% 100%, .prev rotation 0에서 -75, .next 75에서 0, duration 0.65, blur 최대 6px(중간 0.32초 정점). 0.15초, 0.32초, 0.5초, 0.65초 시점을 캡처해 중간에 블러가 최대인지, 끝에서 다음 장면이 선명한지 확인해.

Implement Tangent Blur Spin in <file>. transformOrigin 100% 100%; .prev rotation 0 to -75, .next 75 to 0; duration 0.65; blur peaks at 6px at 0.32s. Capture at 0.15s, 0.32s, 0.5s, and 0.65s to confirm blur is maximal mid-transition and that the next scene is sharp at the end.