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

윤곽 섬광 등장Outline Flash Reveal

Outline Flash Reveal

윤곽 섬광 등장

다른 이름Also known as · Flashing-outline entrance · 윤곽 섬광 동반 등장 · FlashyFadeIn

061

렌더 추가 예정CLIP COMING윤곽 섬광 등장Outline Flash Reveal정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 061. 윤곽 섬광 등장 · Outline Flash Reveal · power2.out

밝은 윤곽선이 대상을 훑는 동안 내부 대상이 점점 선명해진다.A bright outline traces the subject while its interior fades into clarity.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

등장과 주의 신호를 같은 순간에 만든다.Combines an entrance with a focused attention cue.

언제 쓰나Use whenUSE WHEN

아이콘 등장에 주의를 모을 때
윤곽과 내부의 순서를 보여 줄 때

Draw attention to an entering icon.
Explain the relationship between outline and fill.

과용 주의AvoidAVOID

같은 장면의 여러 대상에 동시에 적용하지 않는다.
동작 감소 설정에서는 정적인 대표 상태를 보여 준다.

분류TagsTAGS

등장·퇴장Entrance & Exit 설명Explain 강조Emphasis 설명 영상Explainer video 웹 UIWeb UI 숏폼Short-form 난이도 중급Intermediatesvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

제품 아이콘 윤곽이 먼저 훑고 0.12초 뒤 내부가 선명해진다.

과용 · 나쁜 사례OVERUSE

굵은 흰색 윤곽을 여러 번 번쩍여 작은 아이콘이 뭉개진다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	900ms	600~1200ms	1920x1080 기준. 장면 시작을 0초로 둔다.
윤곽 두께	2px	1~3px	1920x1080 기준. 장면 시작을 0초로 둔다.
내부 지연	120ms	80~200ms	1920x1080 기준. 장면 시작을 0초로 둔다.
내부 최종 불투명도	1	1	1920x1080 기준. 장면 시작을 0초로 둔다.

GSAP

const path = document.querySelector('.outline');
const length = path.getTotalLength();
const tl = gsap.timeline({ paused: true });
tl.set(path, { strokeDasharray: length, strokeDashoffset: length, strokeWidth: 2 });
tl.to(path, { strokeDashoffset: 0, duration: 0.6, ease: 'power2.out' }, 0);
tl.fromTo('.fill', { opacity: 0 }, { opacity: 1, duration: 0.78, ease: 'power2.out' }, 0.12);
tl.to(path, { opacity: 0, duration: 0.3 }, 0.6);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 윤곽 섬광 등장을 구현해. 지속 900ms, 윤곽 두께 2px, 내부 지연 120ms, 내부 최종 불투명도 1, 이징 power2.out을 적용해. SVG 윤곽의 이동 dash와 내부 fill-opacity를 같은 타임라인에서 보간한다. paused 타임라인과 절대 시간으로 구동하고 Math.random 없이 같은 시점의 상태를 재현해.

Implement Outline Flash Reveal on <target>. Use duration 900ms; stroke width 2px; fill delay 120ms; final fill opacity 1; use power2.out easing. Drive the effect with a paused GSAP timeline and absolute time, and reproduce the same state on every seek without Math.random. Keep foreground text readable.

Codex

<파일>의 윤곽 섬광 등장 장면 레이어에 적용해. 지속 900ms, 윤곽 두께 2px, 내부 지연 120ms, 내부 최종 불투명도 1, 이징 power2.out을 사용하고 본문과 분리해. 0초, 0.4초, 1.2초 시점을 캡처해 시작 상태와 중간 변화 및 대상 가독성을 확인하고 같은 시점을 다시 seek해 결과가 같은지 검증해.

Apply Outline Flash Reveal to the scene layer in <file>. Use duration 900ms; stroke width 2px; fill delay 120ms; final fill opacity 1 and power2.out easing. Capture at 0, 0.4, and 1.2 seconds to check the initial state, motion progression, and foreground readability; seek to each time again to verify identical output.