효과Effects / 강조·주의Emphasis / Nº 075

통통 튀기Bounce Attention

Bounce Attention

통통 튀기

075

렌더 추가 예정CLIP COMING통통 튀기Bounce Attention정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 075. 통통 튀기 · Bounce Attention · power2.out

요소가 제자리에서 위아래로 튀다가 원래 위치로 돌아온다An element bounces up and down in place, then returns to its original position.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

활기와 선택 대상에 대한 주의를 만든다. 클릭해 달라는 신호로도 쓴다Creates liveliness and draws attention to a selectable target. It also works as a cue to click.

언제 쓰나Use whenUSE WHEN

버튼이나 알림 아이콘을 눌러 보라고 유도할 때
목록에서 새로 추가된 항목을 알릴 때

Nudge people to press a button or notification icon.
Announce a newly added list item.

과용 주의AvoidAVOID

동시에 튀는 요소는 하나만
무한 반복 금지(3회 이하)

분류TagsTAGS

강조·주의Emphasis 주목 끌기Attention 피드백Feedback 웹 UIWeb UI 숏폼Short-form 제품 시연Product demo 난이도 기본Basiccss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

900ms 동안 높이 24px로 3번 튀며 진폭이 줄고 원위치에 정확히 돌아온다. 3초 뒤 한 번 반복한다

과용 · 나쁜 사례OVERUSE

1초 간격으로 무한 반복해 산만하고, 모든 버튼이 함께 튄다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	900ms	700~1100ms
높이	24px	16~32px	첫 진폭
튕김	3회	2~4회	진폭은 매번 0.55배
이징	ease-out	power2.out	상승은 out, 하강은 in

GSAP

[24, 13, 7, 0].forEach((h, i) => {
  tl.to('.btn', { y: -h, duration: 0.12, ease: 'power2.out' }, 0.3 + i * 0.24)
    .to('.btn', { y: 0, duration: 0.12, ease: 'power2.in' }, 0.42 + i * 0.24);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 버튼에 주의를 끄는 통통 튀기를 넣어줘. 0.3초부터 높이 24px, 13px, 7px 순으로 3번 튀고, 각 상승은 0.12초 power2.out, 하강은 0.12초 power2.in으로 하고 마지막은 y 0에 정확히 멈추게 해.

Add an attention bounce to the button in <target>. From 0.3 seconds bounce three times with heights 24px, 13px and 7px, each rise 0.12s power2.out and each fall 0.12s power2.in, ending exactly at y 0.

Codex

<파일>에 bounce attention을 구현해. 높이 [24, 13, 7], 상승 0.12s power2.out, 하강 0.12s power2.in, 시작 0.3초. 0.42초, 0.66초, 0.9초, 1.2초를 캡처해 높이가 감소하는지, 1.2초에 y가 0인지 확인해.

Implement bounce attention in <file>: heights [24, 13, 7], rise 0.12s power2.out, fall 0.12s power2.in, start 0.3s. Capture at 0.42s, 0.66s, 0.9s and 1.2s and verify the heights decrease and y is 0 at 1.2s.