효과Effects / 등장·퇴장Entrance & Exit / Nº 058

블러 해제Blur Resolve

Blur Resolve

블러 해제

다른 이름Also known as · Blur / Focus resolve · 초점 흐림 · Focus Text Reveal · 글자 초점 리빌 · Text Blur Reveal · 텍스트 블러 리빌 · Text Blur Resolve · 텍스트 초점 해소

058

렌더 추가 예정CLIP COMING블러 해제Blur Resolve정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 058. 블러 해제 · Blur Resolve · power2.out

흐릿한 대상이 블러 반경이 줄며 선명해져 시선을 모으는 등장A blurred target sharpens as its blur radius falls, pulling the eye.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

초점이 맞는 순간에 눈이 간다. 흐림에서 선명으로 가는 방향이 시선을 이끈다The eye goes to what comes into focus. The blur to sharp direction leads attention.

언제 쓰나Use whenUSE WHEN

제목이나 제품 이미지가 초점 맞듯 나타날 때
뒤 배경은 흐리게 두고 대상만 선명하게 밀어 올릴 때

When a title or product shot arrives as if focusing
When the background stays soft and only the target sharpens

과용 주의AvoidAVOID

blur 시작 3~8px
길이 0.2~0.4초
종료 blur는 정확히 0(filter none)

분류TagsTAGS

등장·퇴장Entrance & Exit 주목 끌기Attention 전환Transition 숏폼Short-form 설명 영상Explainer video 웹 UIWeb UI 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

제목이 blur 4px, opacity 0에서 250ms 동안 blur 0, opacity 1로 선명해진다

과용 · 나쁜 사례OVERUSE

blur 20px 이상으로 시작해 오래 걸리거나, 글자 위에 항상 블러가 남는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
시작 blur	4px	3~8px	1920x1080 기준
길이	250ms	200~400ms	선명해지는 시간
opacity	0→1	0→1	blur와 함께 상승
이징	power2.out	power2~power3.out	끝에서 감속

GSAP

tl.fromTo('.title', { filter: 'blur(4px)', opacity: 0 }, { filter: 'blur(0px)', opacity: 1, duration: 0.25, ease: 'power2.out', clearProps: 'filter' }, 0.3);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상> 제목에 블러 해제를 넣어줘. 0.3초에 filter blur(4px), opacity 0에서 시작해 0.25초 동안 blur(0px), opacity 1로 power2.out. 종료 시 clearProps로 filter를 제거해 글자가 선명하게 남게 해. paused 타임라인에 넣어.

Add a blur resolve to the <target> title with GSAP. At 0.3s start with filter blur(4px), opacity 0 and animate to blur(0px), opacity 1 over 0.25s with power2.out. Use clearProps to remove filter afterward so text stays sharp. Paused timeline.

Codex

<파일>의 <대상>에 blur-resolve를 적용해. fromTo({filter blur(4px), opacity 0}, {blur(0px), opacity 1}, 0.25s, power2.out, position 0.3, clearProps filter). 0.3초·0.42초·0.8초를 캡처해 흐림 정도가 줄어드는지, 0.8초에 computed filter가 none인지 확인해.

Apply blur-resolve to <target> in <file>. fromTo({filter blur(4px), opacity 0}, {blur(0px), opacity 1}, 0.25s, power2.out, position 0.3, clearProps filter). Capture at 0.3s, 0.42s and 0.8s to check the blur shrinks and that computed filter is none at 0.8s.