스크리블 와이프Scribble Wipe

Scribble Wipe

스크리블 와이프

다른 이름Also known as · Scribble cover · 낙서로 덮기

193

렌더 추가 예정CLIP COMING스크리블 와이프Scribble Wipe정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 193. 스크리블 와이프 · Scribble Wipe · power2.out

낙서 띠가 빠르게 쌓여 화면을 덮고 지워지며 다음 장면을 보여주는 전환Scribble strokes stack up quickly to cover the frame, then wipe away to show the next scene.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

손으로 그은 거친 리듬. 매끈한 디지털 와이프와 다른 사람 손맛A rough, hand-drawn rhythm: a human touch that clean digital wipes lack.

언제 쓰나Use whenUSE WHEN

손그림, 노트, 스티커 톤의 영상에서 장면을 바꿀 때
덮는 순간에 컷을 숨겨야 할 때

Change scenes in a hand-drawn, notebook, or sticker-styled video.
Hide a cut behind the covering moment.

과용 주의AvoidAVOID

띠 개수 20개 초과 금지(과하면 노이즈가 된다)
덮는 정점에서 다음 장면으로 교체한다. 덮이기 전 교체 금지

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

12개의 굵은 낙서 띠가 30ms 간격으로 그어져 0.35초에 화면을 덮고, 덮인 사이 장면이 바뀐 뒤 0.35초에 지워진다

과용 · 나쁜 사례OVERUSE

띠가 가늘어 덮는 데 1초 넘게 걸리거나, 낙서 색이 배경과 비슷해 덮였는지 알 수 없다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
전체 지속	0.7s	0.5~1.0s	덮기 0.35s + 걷기 0.35s
띠 개수	12	8~16	가로 지그재그
시작차	30ms	20~50ms	위에서 아래 순서
이징	power2.out	power1~3	선 그리기는 빠르게 시작

GSAP

const paths = gsap.utils.toArray('.stroke');   // stroke-dasharray = length
paths.forEach((p, i) => tl.fromTo(p, { strokeDashoffset: p.getTotalLength() },
  { strokeDashoffset: 0, duration: 0.3, ease: 'power2.out' }, i * 0.03));
tl.set('.a', { display: 'none' }, 0.36)
  .to(paths, { opacity: 0, duration: 0.3, stagger: 0.03 }, 0.4);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상A>에서 <대상B>로 스크리블 와이프를 만들어줘. SVG 낙서 띠 12개를 위에서 아래 순서로 30ms 간격으로 strokeDashoffset 애니메이션(0.3초, power2.out)으로 그어 화면을 덮고, 덮인 시점(0.36초)에 A를 숨기고 B를 보이게 한 뒤 띠를 0.3초 동안 지워. 낙서 좌표는 고정 배열로 두고 paused 타임라인 하나로 만들어.

Build a scribble wipe from <targetA> to <targetB>. Draw 12 SVG scribble strokes top to bottom with a 30ms stagger, each animating strokeDashoffset over 0.3 seconds with power2.out to cover the frame. At the covered moment (0.36s) hide A and show B, then erase the strokes over 0.3 seconds. Keep the stroke coordinates in a fixed array and use one paused timeline.

Codex

<파일>에 scribble wipe를 적용해. path 12개의 strokeDashoffset을 길이에서 0으로 0.3s power2.out, 시작차 0.03s로 그리고 0.36초에 장면을 교체한 뒤 opacity 0으로 0.3s 지운다. 0.2초에 일부만 덮였는지, 0.36초에 화면이 전부 덮였는지, 0.8초에 낙서가 없는지 캡처로 확인해.

Apply a scribble wipe in <file>. Animate strokeDashoffset of 12 paths from their length to 0 over 0.3s with power2.out and a 0.03s stagger, swap scenes at 0.36 seconds, then fade the strokes to opacity 0 over 0.3s. Capture at 0.2 seconds to confirm partial coverage, at 0.36 seconds for full coverage, and at 0.8 seconds to confirm no strokes remain.