윤곽 펄스Outline Pulse

Outline Pulse

윤곽 펄스

다른 이름Also known as · Outline and Edge Pulse · 윤곽과 에지 맥박

080

렌더 추가 예정CLIP COMING윤곽 펄스Outline Pulse정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 080. 윤곽 펄스 · Outline Pulse · sine.inOut

이미지나 물체의 경계선이 나타나고 두께와 밝기가 잠깐 커졌다 줄어드는 맥동A shape's edge line appears and briefly thickens and brightens before easing back.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

복잡한 화면에서 선택한 형태를 분명히 드러낸다Reveals the selected form clearly on a busy screen.

언제 쓰나Use whenUSE WHEN

사진 속 제품·인물의 윤곽을 짚을 때
3D 물체나 아이콘을 선택했다는 표시를 줄 때

When tracing the outline of a product or person in a photo
When marking a 3D object or icon as selected

과용 주의AvoidAVOID

두께 4px 초과 금지
윤곽 색은 배경과 3:1 이상
선택된 대상만 윤곽

분류TagsTAGS

강조·주의Emphasis 강조Emphasis 주목 끌기Attention 설명 영상Explainer video 제품 시연Product demo 숏폼Short-form 난이도 고급Advancedwebgl

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

윤곽이 강도 0에서 0.8로 올라가고 두께가 1px에서 3px로 커졌다가 1.4초에 1px로 돌아온다

과용 · 나쁜 사례OVERUSE

윤곽이 지나치게 두꺼워 형태가 뭉개지거나, 배경과 같은 색이라 보이지 않는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
길이	1.4s	1.0~2.0s	상승과 복귀 합산
두께	1→3px	1~4px	1920x1080 기준
강도	0→0.8	0.5~1.0	알파 또는 밝기
이징	sine.inOut	sine~power2.inOut	맥동

GSAP

tl.to('.shape', { attr: { 'stroke-width': 3 }, strokeOpacity: 0.8, duration: 0.7, ease: 'sine.inOut', yoyo: true, repeat: 1 }, 0.4);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상> 윤곽 path에 윤곽 펄스를 넣어줘. 0.4초부터 0.7초 동안 stroke-width 1에서 3px, strokeOpacity 0에서 0.8로 sine.inOut으로 올라갔다가 같은 시간에 1px, 0으로 돌아와. 색은 <강조색>, 배경과 3:1 이상. paused 타임라인에 넣어.

Add an outline pulse to the <target> outline path with GSAP. From 0.4s over 0.7s raise stroke-width 1 to 3px and strokeOpacity 0 to 0.8 with sine.inOut, then return to 1px and 0 in the same time. Color <accent>, at least 3:1 against the background. Paused timeline.

Codex

<파일>의 <대상>에 outline-pulse를 적용해. .shape의 stroke-width 1→3, strokeOpacity 0→0.8, 0.7s, sine.inOut, yoyo true, repeat 1, position 0.4. 0.4초·1.1초·1.9초를 캡처해 최대 두께 3px, 종료 시 1px인지와 윤곽 대비 3:1을 확인해.

Apply outline-pulse to <target> in <file>. Tween .shape stroke-width 1 to 3 and strokeOpacity 0 to 0.8, 0.7s, sine.inOut, yoyo true, repeat 1, position 0.4. Capture at 0.4s, 1.1s and 1.9s to check max width 3px, 1px at the end, and outline contrast 3:1.