마스크 전환Shape Mask Transition

Shape Mask Transition

마스크 전환

다른 이름Also known as · 원형 전환 · Iris reveal · Iris mask · 아이리스 마스크 · Circle iris · Diamond iris · Iris Mask · iris-circle-directional

123

도판Fig. 123. 마스크 전환 · Shape Mask Transition · power2.inOut

재생 속도Speed

한 점에서 원형 마스크가 커지며 다음 장면을 드러내는 전환A circular mask expands from a point to reveal the next scene.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

같은 위치를 출발점으로 새 정보가 화면 전체로 퍼진다Shows new information spreading across the screen from a shared origin.

언제 쓰나Use whenUSE WHEN

질문에서 답으로 장면을 바꿀 때
선택한 지점을 기준으로 상세 장면을 열 때

Transition from a question to its answer.
Open a detail scene from a selected point.

과용 주의AvoidAVOID

마스크 중심과 시작 점의 위치를 맞춘다
완료 반경을 가장 먼 모서리 거리보다 크게 둔다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

주홍 점의 중심에서 원형 마스크가 커지며 질문 장면을 답 장면으로 바꾼다

과용 · 나쁜 사례OVERUSE

원이 충분히 커지지 않아 끝까지 모서리에 이전 장면이 남는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
시작 반경	0px	0~20px	작은 한 점에서 시작
완료 반경	680px	655~800px	1168×580 중심 기준으로 모서리까지 덮는다
중심	584px 290px	장면 내부 좌표	주홍 점 중심과 동일
전환 시간	1.35s	0.8~1.5s	마스크 확장이 읽히는 시간

GSAP

tl.to('.b', {clipPath:'circle(680px at 584px 290px)', duration:1.35, ease:'power2.inOut'}, 0.4);
tl.to('.seed', {scale:0, duration:0.15, ease:'power1.in'}, 0.4);
tl.to('.lead', {opacity:1, duration:0.25}, 1.95);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>을 한 점에서 열리는 원형 마스크 전환으로 만들어줘. 1168×580 장면 중심 584px, 290px에 주홍 점을 두고 장면 B의 clip-path를 circle(0px at 584px 290px)에서 circle(680px at 584px 290px)로 바꿔. 0.4초부터 1.35초간 power2.inOut으로 확장하고 2.2초 이후 정지해.

Create a circular mask transition for <target> that opens from a point. Place a vermilion dot at the center of a 1168×580 scene, at 584px, 290px. Animate scene B's clip-path from circle(0px at 584px 290px) to circle(680px at 584px 290px). Expand starting at 0.4 seconds over 1.35 seconds with power2.inOut, and hold after 2.2 seconds.

Codex

<파일>의 장면 B 래퍼에 clip-path circle을 적용해. 중심은 584px, 290px이고 반경은 0.4초부터 1.35초간 0에서 680px까지 power2.inOut으로 커지게 해. 0.23초, 0.73초, 1.23초, 2.9초 캡처로 시작 점과 마스크 중심이 일치하고 마지막 모서리에 장면 A가 남지 않는지 확인해.

Apply a circle clip-path to the scene B wrapper in <file>. Use center 584px, 290px and animate the radius from 0 to 680px starting at 0.4 seconds over 1.35 seconds with power2.inOut. Capture at 0.23, 0.73, 1.23, and 2.9 seconds to verify that the starting dot and mask center align and that no scene A remains in the corners at the end.