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

글자 조각 어긋남Text Slice Offset

Text Slice Offset

글자 조각 어긋남

다른 이름Also known as · Text Sliding Stripe Distortion · 텍스트 줄무늬 슬라이딩 왜곡 · Sliced Glass Text Offset · 유리 조각 텍스트 어긋남

499

렌더 추가 예정CLIP COMING글자 조각 어긋남Text Slice Offset정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 499. 글자 조각 어긋남 · Text Slice Offset · power4.out

글자를 가른 평행 띠들이 번갈아 서로 다른 방향으로 밀려나는 효과Parallel bands of a word shift in alternating directions.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

분절과 기계적인 변형. 데이터 오류나 스캔 같은 긴장감이 생긴다Segmentation and mechanical distortion, like a data error or a scan.

언제 쓰나Use whenUSE WHEN

제목이 등장하거나 장면이 전환되는 순간에 짧게 흔들림을 줄 때
오류·노이즈·신호 이상을 글자로 표현할 때

A brief jolt when a title arrives or a scene changes
Depicting errors, noise or signal faults through text

과용 주의AvoidAVOID

오프셋은 글자 높이의 10% 이하로 둔다
흔들림은 0.4초 이내의 짧은 순간에만 쓴다. 지속 시 가독성이 사라진다

분류TagsTAGS

질감·스타일Texture & Style 주목 끌기Attention 분위기Mood 숏폼Short-form 웹 UIWeb UI 난이도 중급Intermediatewebgl

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

제목이 8개 띠로 나뉘어 홀수 띠는 +12px, 짝수 띠는 -12px 밀렸다가 0.15초 뒤 제자리로 돌아온다

과용 · 나쁜 사례OVERUSE

띠 이동이 40px을 넘어 글자를 읽을 수 없고 1.5초 내내 계속 흔들린다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
띠 개수	8	6~12	가로 띠
이동량	12px	6~16px	홀짝 반대 방향
버스트 길이	0.2s	0.1~0.4s	정지 상태로 복귀
주기	1.5s	1~3s	반복 시 사이에 홀드

GSAP

const strips = document.querySelectorAll('.strip'); // 같은 텍스트 복제, clip-path: inset(top% 0 bottom% 0)
strips.forEach((s, i) => {
  const dir = i % 2 ? -1 : 1;
  tl.fromTo(s, {x:dir * 12}, {x:0, duration:0.2, ease:'power4.out'}, 0.3);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 제목에 슬라이스 오프셋을 넣어줘. 같은 텍스트를 8개 가로 띠(clip-path inset)로 복제하고, 0.3초에 홀수 띠 +12px, 짝수 띠 -12px에서 0.2초 power4.out으로 제자리로 돌아오게 해. 나머지 시간은 정지 상태로 읽히게 해.

Add a slice offset to the title in <target>. Duplicate the text into 8 horizontal strips (clip-path inset); at 0.3s odd strips start at +12px and even strips at -12px and return to 0 over 0.2s power4.out. Keep the rest of the time still and readable.

Codex

<파일>에 text slice offset을 적용해. 텍스트를 8개 .strip으로 복제하고 각 clip-path inset을 i/8, (7-i)/8로 지정, x 시작값 ±12에서 0으로 0.2초 power4.out, 시작 0.3초. 0.32초·0.5초·1.0초를 캡처해 띠 어긋남, 복귀, 정지 상태에서 텍스트 정렬이 정확히 일치하는지 확인해.

Apply text slice offset in <file>. Duplicate the text into 8 .strip layers with clip-path inset i/8 and (7-i)/8; x from +/-12 to 0 over 0.2s power4.out at 0.3s. Capture at 0.32s, 0.5s and 1.0s and verify mismatch, recovery, and exact alignment at rest.