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

페인트 스플래터 와이프Paint Splatter Wipe

Paint Splatter Wipe

페인트 스플래터 와이프

다른 이름Also known as · Paint splatter wipe · 페인트 튐 와이프

188

렌더 추가 예정CLIP COMING페인트 스플래터 와이프Paint Splatter Wipe정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 188. 페인트 스플래터 와이프 · Paint Splatter Wipe · power3.out

불규칙한 페인트 얼룩과 점이 번져 다음 장면을 드러낸다Irregular paint blobs and dots spread and reveal the next scene.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

손으로 뿌린 듯한 페인트 얼룩이 번지며 다음 장면을 드러낸다. 활기와 수작업 느낌이다Adds a lively hand-splashed feel.

언제 쓰나Use whenUSE WHEN

예술, 요리, 캐주얼 브랜드 톤에서 화면을 활기차게 넘길 때
창작 도구나 디자인 서비스 소개에서 색이 튀는 전환을 쓸 때

To switch screens energetically in art, food, or casual brand tones
In creative tool or design service intros where color splashes are on-message

과용 주의AvoidAVOID

최종 scale에서 화면을 완전히 덮는지 캡처로 확인한다
얼룩 모양은 시드 고정 SVG 자산을 쓴다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

SVG 얼룩 마스크의 scale이 0.7초 동안 0에서 1.6으로 커지며 큰 얼룩 하나와 작은 점 12개가 번져 다음 장면 전체를 드러낸다

과용 · 나쁜 사례OVERUSE

얼룩이 원형에 가까워 iris와 구분되지 않거나, 얼룩이 화면 구석을 덮지 못해 이전 장면이 조각으로 남는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	700ms	500~900ms	easeOutCubic
마스크 scale	0에서 1.6	1.4~1.8	화면 완전 덮음
작은 점 수	12	8~20	큰 얼룩 주변
점 지연	0~120ms	0~150ms	시드 고정
시드	1	고정 정수	얼룩 모양

GSAP

tl.fromTo('#splat', { scale: 0, transformOrigin: '50% 50%' }, { scale: 1.6, duration: 0.7, ease: 'power3.out' }, 0);
tl.fromTo('.dot', { scale: 0 }, { scale: 1, duration: 0.4, ease: 'back.out(1.4)', stagger: 0.01 }, 0.05);
// .next 는 mask: url(#splat-mask) 로 공개

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 장면 전환에 페인트 스플래터 와이프를 넣어줘. 얼룩 SVG(#splat)를 mask로 쓰고 scale을 0에서 1.6으로 0.7초 power3.out으로 키워 다음 장면을 공개해. 주변 점 12개는 0.01초 stagger로 scale 0에서 1. 최종 프레임에서 이전 장면이 남지 않게 확인하고 paused 타임라인으로 seek 가능하게 해.

Add a Paint Splatter Wipe to <target>. Use the SVG blob #splat as a mask, growing its scale from 0 to 1.6 over 0.7s with power3.out to reveal the next scene. 12 surrounding dots scale 0 to 1 with a 0.01s stagger. Verify no pixels of the previous scene remain in the final frame, on a paused, seekable timeline.

Codex

<파일>에 페인트 스플래터 와이프를 구현해. #splat scale 0에서 1.6, 0.7초 power3.out, .dot 12개 scale 0에서 1 (0.4초, stagger 0.01, 시작 0.05). 0.2초, 0.4초, 0.7초 시점을 캡처해 얼룩이 커지는지, 0.7초에 이전 장면 픽셀이 없는지 확인해.

Implement Paint Splatter Wipe in <file>. #splat scale 0 to 1.6 over 0.7s power3.out; 12 .dot elements scale 0 to 1 (0.4s, stagger 0.01, start 0.05). Capture at 0.2s, 0.4s, and 0.7s to confirm the blob grows and that no old-scene pixels are left at 0.7s.