글자 색 와이프Text Color Wipe

Text Color Wipe

글자 색 와이프

다른 이름Also known as · Progressive text fill · 진행률 텍스트 채움 · Text Color Wipe Replacement · 텍스트 색 와이프 교체 · Colorama soft wipe · 색 번짐 와이프

086

렌더 추가 예정CLIP COMING글자 색 와이프Text Color Wipe정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 086. 글자 색 와이프 · Text Color Wipe · none

옅은 글자 위로 밝은 글자가 한쪽에서부터 채워지는 효과Bright text fills over dim text from one side.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

읽는 위치와 진행 정도를 동시에 알린다. 문구가 곧 진행 표시가 된다Communicates reading position and progress at once; the phrase itself becomes the progress indicator.

언제 쓰나Use whenUSE WHEN

로딩·진행률 문구를 글자 채움으로 보여줄 때
긴 문장을 스크롤에 맞춰 읽어 나갈 때

Show a loading or progress phrase as a letter fill.
Read a long sentence along with scrolling.

과용 주의AvoidAVOID

두 레이어는 같은 글꼴·크기·줄바꿈을 쓴다
옅은 층 opacity 0.25 미만 금지(아직 안 읽은 글자가 보이지 않음)
여러 줄은 줄 단위로 나눠 채운다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

옅은 회색 문장 위에 흰 문장이 왼쪽에서 2초 동안 0에서 100%로 채워지고 경계가 200ms로 부드럽다

과용 · 나쁜 사례OVERUSE

두 레이어의 글꼴·줄바꿈이 달라 채워지는 글자가 아래 글자와 어긋난다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
채움 시간	2s	1.2~3s	0→100%
경계 부드러움	200ms	0~300ms	clip 가장자리
옅은 층 opacity	0.3	0.2~0.4	읽히는 하한
방향	좌→우	좌우/상하	읽는 방향

GSAP

/* .base(옅은 글자) 위에 .fill(밝은 글자, 같은 텍스트) */
tl.fromTo('.fill', { clipPath: 'inset(0 100% 0 0)' },
  { clipPath: 'inset(0 0% 0 0)', duration: 2, ease: 'none' }, 0);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 문장을 색 와이프로 채워줘. 옅은 회색(opacity 0.3) 문장 위에 같은 글꼴·크기의 흰 문장을 겹치고, clip-path inset(0 100% 0 0)에서 inset(0 0% 0 0)까지 2초 동안 이징 none으로 채워. 경계는 200ms 정도로 부드럽게. 여러 줄이면 줄마다 순서대로 채워.

Fill the sentence in <target> with a color wipe. Overlay a white copy of the same font and size over a dim gray copy (opacity 0.3) and animate clip-path from inset(0 100% 0 0) to inset(0 0% 0 0) over 2 seconds with ease none, softening the edge by about 200ms. For multiple lines, fill line by line in order.

Codex

<파일>의 문장에 두 겹 텍스트를 만들고 상단층 clipPath를 2초 tween해. 0초, 1초, 2초 캡처로 채움이 0%, 50%, 100%이고 두 레이어 글자가 픽셀 단위로 겹치는지 확인해.

In <file> build the two-layer text and tween the top layer clipPath over 2s. Capture at 0s, 1s and 2s to confirm the fill is at 0%, 50% and 100%, and check that both layers overlap pixel for pixel.