하이라이트 스윕Highlight Sweep

Highlight Sweep

하이라이트 스윕

다른 이름Also known as · 형광펜 강조 · Marker sweep · Highlight sweep · 하이라이트 쓸기 · 빛 하이라이트 스윕 · light-sweep-sheen · gradient-text-sweep · chrome-sweep

089

도판Fig. 089. 하이라이트 스윕 · Highlight Sweep · power1.inOut

재생 속도Speed

핵심 구절 뒤의 형광펜 띠를 왼쪽에서 오른쪽으로 칠하는 효과A highlighter band sweeps from left to right behind a key phrase.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

문장 안에서 주목할 구절을 분명하게 지정한다Clearly identifies the phrase that deserves attention within a sentence.

언제 쓰나Use whenUSE WHEN

문장에서 핵심 구절을 짚을 때
이미 읽힌 문장의 의미를 강조할 때

Call out a key phrase in a sentence.
Emphasize the meaning of a sentence that has already been read.

과용 주의AvoidAVOID

여러 구절을 동시에 칠하지 않는다
텍스트 위로 띠를 덮지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

AI는 다음 말을 고른다에서 다음 말 뒤에만 연주홍 띠를 칠한다

과용 · 나쁜 사례OVERUSE

문장 전체를 진한 색으로 덮어 글자가 읽히지 않는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	1.35s	0.7~1.5s	칠하는 방향을 읽을 시간
시작	0.3s	0.2~0.5s	문장을 먼저 보여준다
띠 높이	66px	40~75px	84px 제목의 아래쪽을 받친다
좌우 여백	8px	4~12px	핵심어 양끝 여유

GSAP

const tl = Motion.timeline();
tl.fromTo('.mark', {scaleX:0}, {scaleX:1, duration:1.35, ease:'power1.inOut'}, 0.3);
tl.to('.lead', {opacity:1, duration:0.25}, 1.85);
Motion.ready();

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>의 문장 중 다음 말 뒤에 하이라이트 스윕을 넣어줘. 글자는 84px로 고정하고 연주홍 띠는 높이 66px, 좌우 여백 8px, transform-origin 0 50%로 배치해. 0.3초부터 scaleX 0에서 1로 1.35초 동안 power1.inOut으로 칠하고 3초까지 유지해.

Add a highlight sweep behind "next word" in the sentence in <target>. Keep the text at 84px. Place a pale vermilion band with height 66px, horizontal padding 8px, and transform-origin 0 50%. Starting at 0.3 seconds, animate scaleX from 0 to 1 over 1.35 seconds with power1.inOut, and hold until 3 seconds.

Codex

<파일>의 핵심어 span 뒤에 .mark를 배치하고 isolation과 z-index로 글자가 띠 위에 보이게 해. 0.3초부터 duration 1.35초, ease power1.inOut으로 scaleX 0에서 1로 움직여. 0.23초, 0.73초, 1.23초, 2.9초를 캡처해 띠의 왼쪽 고정, 오른쪽 확장, 글자 가독성과 완성 홀드를 확인해.

Place .mark behind the key phrase span in <file>, using isolation and z-index to keep the text above the band. Starting at 0.3 seconds, animate scaleX from 0 to 1 with duration 1.35 seconds and ease power1.inOut. Capture at 0.23, 0.73, 1.23, and 2.9 seconds to check the fixed left edge, rightward expansion, text legibility, and completed hold.