AWESOME AI MOTION
효과Effects / 등장·퇴장Entrance & Exit / Nº 030

블러 리빌Blur Reveal

Blur Reveal
블러 리빌
다른 이름Also known as · Blur Resolve · 블러에서 선명 · blur-dissolve-in · etch · Blur to focus entrance · 흐림에서 선명한 등장
030
도판Fig. 030. 블러 리빌 · Blur Reveal · power2.out
재생 속도Speed

흐릿한 글자나 이미지가 선명해지면서 나타난다.Blurred text or imagery resolves into sharp focus.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
안개 속에서 내용이 확정되는 느낌을 준다.Makes content feel as if it is emerging from mist.
언제 쓰나Use whenUSE WHEN
  • 짧은 제목이 초점을 찾게 할 때
  • 이미지를 부드럽게 공개할 때
  • Use when presenting blur reveal in a content reveal scene.
  • Use for a focused title, image, or card with a clearly visible final state.
과용 주의AvoidAVOID
  • 긴 본문에 블러를 오래 유지해 읽기를 지연한다.
  • 완료 자세에서 내용이 가려지지 않게 한다.
분류TagsTAGS
등장·퇴장Entrance & Exit주목 끌기Attention전환Transition설명 영상Explainer video웹 UIWeb UI숏폼Short-form난이도 기본Basicgsap
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

제목이 12px 흐림에서 0.6초 동안 선명해진다.

과용 · 나쁜 사례OVERUSE

긴 본문에 블러를 오래 유지해 읽기를 지연한다.

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
지속0.6s0.42~0.84s0초부터 시작하는 공개 구간
시작 블러12px6~16px작은 글자는 낮게
시작 불투명도00~0.2완료 시 1
이징power2.outpower2.out, power3.out, sine.inOut움직임의 가속과 감속
GSAP
gsap.set('.target', {filter:'blur(12px)', opacity:0});
tl.to('.target', {filter:'blur(0px)', opacity:1, duration:0.6, ease:'power2.out'}, 0);
tl.set('.target', {filter:'none'}, 0.6);
라이브 소스 열기Open live source소스 코드SourceREADME
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 블러 리빌을 적용해. 0.6초, 시작 블러 12px; 시작 불투명도 0, 이징 power2.out로 구현해. paused 타임라인으로 seek 가능하게 하고 완료 자세를 유지해.

Apply Blur Reveal to <target> in <file>. Use a 0.6s segment with power2.out; implement these explicit settings: Initial blur: 12px, Initial opacity: 0. Use a paused, seekable timeline and hold the final pose.

Codex

<파일>의 <대상> 레이어에 블러 리빌을 적용해. 0.6초, 시작 블러 12px; 시작 불투명도 0, power2.out를 사용하고 0초, 0.3초, 0.6초 캡처로 시작값, 중간 변화, 완료 자세를 확인해. 동일 시점을 두 번 seek해 같은 결과인지 검증해.

Apply Blur Reveal to the <target> layer in <file> with Initial blur: 12px, Initial opacity: 0, using the supplied core snippet and a 0.6s segment with power2.out. Capture at 0s, 0.3s, and 0.6s to verify the initial pose, intermediate change, and final pose. Seek to the same timestamp twice and confirm identical output.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
paused 타임라인에 0.6초 구간을 넣고 seek로 자세를 계산한다. 시작값과 완료값을 명시한다.
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 블러 리빌, 0.6초, 시작 블러 12px; 시작 불투명도 0, power2.out를 싣고 대상 레이어를 지정한다.
Scrolline DeckSCROLL SCRUB
진행률 0~1을 0.6초 구간에 매핑한다. scrub에서는 스프링 대신 ease-out으로 같은 시작값과 완료값을 보간한다.
06

잘 맞는 조합Pairs well with

페이드 슬라이드 · Fade Slide
Nº 038페이드 슬라이드Fade SlideFade Slide
스태거 · Stagger
Nº 006스태거StaggerStagger
스케일 팝 · Scale Pop
Nº 053스케일 팝Scale PopScale Pop
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo