효과Effects / 질감·스타일Texture & Style / Nº 470

스캔 왜곡 띠Scan band

Scan band

스캔 왜곡 띠

470

렌더 추가 예정CLIP COMING스캔 왜곡 띠Scan band정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 470. 스캔 왜곡 띠 · Scan band · power1.inOut

좁은 대각 띠가 글자를 지나가고 띠 안에서만 RGB 어긋남이 보이는 효과A narrow diagonal band passes over the text, and RGB misalignment appears only inside it.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

글자를 훑는 스캐너 같은 인상을 주며, 타이틀에 기술적이고 정밀한 강조를 더한다Feels like a scanner sweeping the text, adding precise, technical emphasis to a title.

언제 쓰나Use whenUSE WHEN

제목이 나타난 직후 한 번 스캔되는 인트로를 만들 때
핵심 단어를 스캔하듯 강조하고 싶을 때

For an intro where a title is scanned once right after appearing
To scan-highlight a key word

과용 주의AvoidAVOID

한 번 통과에 0.8~1.2초, 반복은 2회 이하
띠 밖 글자는 변형하지 않는다

분류TagsTAGS

질감·스타일Texture & Style 강조Emphasis 주목 끌기Attention 분위기Mood 숏폼Short-form 설명 영상Explainer video 웹 UIWeb UI 난이도 중급Intermediatecss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

제목 위로 폭 15%의 대각 띠가 0.8초 동안 왼쪽에서 오른쪽으로 지나가고 띠 안에서만 R/B가 8px 갈라진다

과용 · 나쁜 사례OVERUSE

띠 폭이 넓어 글자 전체가 계속 깨져 보이거나, 띠를 여러 번 반복해 산만해진다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	800ms	600~1200ms	띠 통과 시간
띠 폭	15%	8~25%	글자 폭 기준
채널 변위	8px	5~12px	띠 안에서만
띠 각도	20도	10~30도	대각
밝기	+0.15	0.1~0.25	띠 안 약간 밝게

GSAP

/* .band를 clip-path 마스크로 쓰는 복사본 2장(R, B) */
tl.fromTo('.mask',{x:-320},{x:1920,duration:.8,ease:'power1.inOut'},t)
 .set('.r',{x:-8},t).set('.b',{x:8},t)
 .set('.r,.b',{x:0,opacity:0},t+.8);
// .mask는 skewX(-20deg) 폭 15% 띠, R/B 복사본은 이 마스크 안에서만 보임

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<제목>에 스캔 왜곡 띠를 넣어줘. 폭 15%, 20도 기울기의 띠를 0.8초 동안 왼쪽 밖에서 오른쪽 밖으로 power1.inOut으로 통과시키고, 띠 안에서만 빨강 복사본은 -8px, 파랑 복사본은 +8px 어긋나게 하고 밝기 +0.15. 띠 밖 글자는 그대로. 통과 후 복사본은 제거해. paused 타임라인으로 구동해.

Add a scan glitch band to <title>. Pass a band 15% wide at a 20-degree slant from off-screen left to off-screen right over 0.8s with power1.inOut. Only inside the band, shift the red copy -8px and the blue copy +8px and raise brightness by 0.15. Text outside stays untouched. Remove the copies afterward. Drive from a paused timeline.

Codex

<파일>의 <제목>에 glitch-scan-band를 구현해. 띠 폭 15%, 각도 20도, 통과 800ms power1.inOut, 채널 변위 8px. 0.2초, 0.4초, 0.6초, 1.0초를 캡처해 띠 안에서만 색 어긋남이 보이는지, 띠 밖 글자가 정상인지, 1.0초에 복사본이 없는지 확인해.

Implement glitch-scan-band on <title> in <file>: band width 15%, angle 20 degrees, pass 800ms power1.inOut, channel shift 8px. Capture at 0.2s, 0.4s, 0.6s, and 1.0s to verify color offset shows only inside the band, text outside is normal, and no copies remain at 1.0s.