텍스트 반쪽 분리Text Half Split

Text Half Split

텍스트 반쪽 분리

다른 이름Also known as · Split Text Half Separation

216

렌더 추가 예정CLIP COMING텍스트 반쪽 분리Text Half Split정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 216. 텍스트 반쪽 분리 · Text Half Split · power3.inOut

같은 글자의 위아래 반쪽이 반대 방향으로 벌어지고 새 문구가 모여 교체되는 효과The top and bottom halves of a phrase split apart and a new phrase closes in from the opposite sides.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

문구가 갈라져 바뀐다는 것을 선명하게 보여준다. 교체의 순간이 또렷한 무대 전환 같은 리듬을 만든다Makes the swap moment crisp, giving replacement a clear stage-change rhythm.

언제 쓰나Use whenUSE WHEN

헤드라인 문구를 다음 문구로 교체할 때
호버·키워드 순환 제목에서 교체 순간을 강조할 때

Replace one headline phrase with the next.
Emphasize the swap in a rotating keyword title.

과용 주의AvoidAVOID

클립 경계는 정확히 50%로 맞춘다(틈 방지)
분리 거리 150% 초과 금지
교체 문구 길이가 크게 다르면 사용하지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

'SALE'이 중앙선에서 위아래로 100% 벌어져 500ms에 사라지고, 100ms 뒤 'NEW'의 반쪽들이 반대에서 모여 닫힌다

과용 · 나쁜 사례OVERUSE

두 복사본의 절반 경계가 어긋나 글자 중간에 가로 틈이 보인 채 멈춘다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
분리 시간	500ms	300~700ms	반쪽 이동
이동 거리	100%	60~120%	자기 높이 기준
교체 대기	100ms	0~200ms	새 문구가 모이기 전
이징	power3.inOut	power2~power4.inOut	경계가 또렷

GSAP

/* .top{clip-path:inset(0 0 50% 0)} .bot{clip-path:inset(50% 0 0 0)} (같은 글자 복사본 2개) */
tl.to('.old.top', { yPercent: -100, duration: 0.5, ease: 'power3.inOut' }, 0)
  .to('.old.bot', { yPercent: 100, duration: 0.5, ease: 'power3.inOut' }, 0)
  .from('.new.top', { yPercent: 100, duration: 0.5, ease: 'power3.inOut' }, 0.6)
  .from('.new.bot', { yPercent: -100, duration: 0.5, ease: 'power3.inOut' }, 0.6);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>의 문구 '<구 문구>'를 '<신 문구>'로 교체할 때 반쪽 분리를 써줘. 같은 글자 복사본 2개를 clip-path 50%로 위아래 나눠, 구 문구는 0.5초 동안 위아래로 100% 벌어져 사라지고 0.1초 뒤 신 문구 반쪽들이 반대 방향에서 0.5초에 모이게 해. 이징 power3.inOut, 한글은 자모가 아닌 글자 전체 기준으로 클립해.

When replacing '<old text>' with '<new text>' in <target>, use a half split. Make two copies clipped at exactly 50% top and bottom; the old phrase splits 100% apart over 0.5 seconds and disappears, then 0.1 seconds later the new halves close in from the opposite directions in 0.5 seconds. Ease power3.inOut, and clip the whole glyph for Korean.

Codex

<파일>의 문구 교체에 반쪽 분리를 적용해. 복사본 두 개에 clip-path inset(50%) 경계를 쓰고 yPercent ±100을 0.5초 tween. 0초와 신 문구 완성 후에 경계 틈이 없는지, 0.25초에 반쪽이 벌어진 상태인지 캡처로 확인해.

Apply a half split to the phrase swap in <file> using two copies with clip-path inset at 50% and yPercent +/-100 over 0.5s. Capture at 0.25s to see the gap and after the new phrase settles to confirm there is no seam.