효과Effects / 원리 도해Explainer / Nº 394

영역 분할 스캔Segmentation Reveal

Segmentation Reveal

영역 분할 스캔

다른 이름Also known as · Segmentation flood

394

렌더 추가 예정CLIP COMING영역 분할 스캔Segmentation Reveal정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 394. 영역 분할 스캔 · Segmentation Reveal · none

대상의 여러 구역에 반투명 색 마스크가 주사선 순서로 차오르고 라벨이 붙는다.A scan progressively reveals predefined colored region masks.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

기계가 대상을 부분별로 분석하는 과정을 보여준다.Shows a system analyzing separate parts of a subject.

언제 쓰나Use whenUSE WHEN

차량의 차체와 바퀴를 30% 불투명도의 서로 다른 색으로 공개한다.
기계가 대상을 부분별로 분석하는 과정을 보여준다. 기준값과 대상을 함께 표시할 때.

Explain region-level image analysis.
Keep the encoded values, labels, and visual state synchronized.

과용 주의AvoidAVOID

영역 색만으로 구분하지 말고 라벨을 붙인다.

분류TagsTAGS

원리 도해Explainer 설명Explain 순서·흐름Sequence 설명 영상Explainer video 제품 시연Product demo 스크롤덱Scroll deck 난이도 중급Intermediatecanvas

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

차량의 차체와 바퀴를 30% 불투명도의 서로 다른 색으로 공개한다.

과용 · 나쁜 사례OVERUSE

마스크를 완전 불투명하게 덮어 원본을 가린다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	1500ms	1000~2500ms	상단부터 스캔
스캔 단계	24	12~48	마스크 행 단위 공개
마스크 불투명도	0.3	0.2~0.45	원본 윤곽 유지

GSAP

const tl=gsap.timeline({paused:true}),s={p:0};
tl.to(s,{p:1,duration:1.5,ease:'none',onUpdate:()=>{
 ctx.clearRect(0,0,1920,1080);ctx.save();
 ctx.beginPath();ctx.rect(0,0,1920,Math.floor(s.p*24)/24*1080);ctx.clip();
 ctx.globalAlpha=0.3;ctx.drawImage(regionMask,0,0);ctx.restore();
}});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 영역 분할 스캔을 적용해. 사전 정의 영역 마스크를 행 단위 임계값으로 공개한다. 지속 1500ms; 스캔 단계 24; 마스크 불투명도 0.3을 적용한다. GSAP 코어의 paused 타임라인 하나로 seek 가능하게 만들고 임의 난수와 타이머를 쓰지 마.

Codex

<파일>의 설명 장면에서 <대상>에 영역 분할 스캔을 적용해. 사전 정의 영역 마스크를 행 단위 임계값으로 공개한다. 지속 1500ms; 스캔 단계 24; 마스크 불투명도 0.3을 적용한다. 0초, 0.75초, 1.5초를 캡처해 시작 상태, 중간 진행, 최종 상태를 확인하고 같은 시각으로 다시 seek했을 때 좌표와 라벨이 같은지 검증해.

Implement Segmentation Reveal on <target> in <file>. Reveal a predefined region mask over 1500ms in 24 scan steps at 0.3 opacity. Add region labels after their masks are revealed. Use one paused GSAP core timeline, support seeking, and avoid random values and timers. Capture at 0s, 0.75s, and 1.5s to check the initial state, intermediate motion, and final state. Seek to each time again and verify identical geometry and labels.