AWESOME AI MOTION
효과Effects / 기본기Principles / Nº 016

바운스 착지Bounce Landing

Bounce Landing
바운스 착지
다른 이름Also known as · Bounce Drop · 낙하 바운스 · bounce-drop-physics · drop-and-settle · Bounce landing · Collision Bounce · 충돌 바운스 · Ballistic bounce · Bounce · 튀기기 · CustomBounce · 사용자 충돌
016
렌더 추가 예정CLIP COMING바운스 착지Bounce Landing정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 016. 바운스 착지 · Bounce Landing · bounce.out

물체가 아래로 가속해 떨어진 뒤 점점 낮게 튀며 멈춘다An object accelerates down, then bounces lower each time until it rests.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
중력과 충돌을 느끼게 한다. 물체의 무게와 바닥이라는 기준면이 생긴다Conveys gravity and impact, and gives the object weight and a ground plane.
언제 쓰나Use whenUSE WHEN
  • 아이콘이나 카드가 위에서 떨어져 자리를 잡을 때
  • 완료나 도착을 경쾌하게 알릴 때
  • An icon or card drops from above and settles.
  • Announce arrival or completion with a lively touch.
과용 주의AvoidAVOID
  • 반동 4회 초과 금지
  • 금융이나 오류 같은 진지한 맥락에는 쓰지 않는다
분류TagsTAGS
기본기Principles피드백Feedback주목 끌기Attention웹 UIWeb UI숏폼Short-form설명 영상Explainer video난이도 기본Basicgsap
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

120px 높이에서 떨어져 1초 동안 반발계수 0.55로 3번 튀고 멈춘다. 착지 순간 그림자가 진해진다

과용 · 나쁜 사례OVERUSE

반발계수 0.9로 10번 넘게 튀어 멈추지 않고, 진지한 데이터 화면에서 장난스럽게 튄다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
낙하 높이120px80~200px시작 y
총 시간1000ms700~1400msbounce.out
반발계수0.550.4~0.65반동 높이 감쇠
반동3회2~4회
GSAP
tl.fromTo('.ball', { y: -120 }, { y: 0, duration: 1, ease: 'bounce.out' }, 0.3);
tl.fromTo('.shadow', { scale: 0.6, opacity: 0.2 }, { scale: 1, opacity: 0.5, duration: 1, ease: 'bounce.out' }, 0.3);
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 아이콘이 120px 위에서 떨어져 1초 동안 bounce.out으로 3번 튀고 멈추게 해줘. 착지 그림자는 같은 시간에 scale 0.6에서 1, opacity 0.2에서 0.5로 함께 변하게 해. 시작은 0.3초.

Make the icon in <target> drop from 120px above and bounce three times over 1 second with bounce.out. Animate the contact shadow at the same time, scale 0.6 to 1 and opacity 0.2 to 0.5. Start at 0.3 seconds.

Codex

<파일>의 등장 애니메이션을 바운스 착지로 바꿔줘. y -120에서 0, duration 1s, ease bounce.out, 그림자 scale 0.6에서 1. 0.5초, 0.8초, 1.3초 시점을 캡처해 바닥에 닿는 순간 그림자가 진해지는지, 반동 높이가 점점 낮아지는지 확인해.

Change the entrance in <file> to a bounce landing: y -120 to 0, duration 1s, ease bounce.out, shadow scale 0.6 to 1. Capture at 0.5s, 0.8s and 1.3s and verify the shadow darkens at contact and each rebound is lower than the last.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
bounce.out을 단일 tween에 쓴다. 그림자는 같은 시간에 별도 tween으로 건다. paused 타임라인이라 seek 결정론
ReelForgeBRIEF TO VIDEO
씬 브리프에 낙하 높이, 총 시간, 반발계수를 싣고 그림자 유무를 선택으로 둔다
Scrolline DeckSCROLL SCRUB
scrub에서는 반동 3회가 손 움직임에 묻힌다. 진행률 0.15 구간에 몰아서 재생한다
06

잘 맞는 조합Pairs well with

스쿼시 앤 스트레치 · Squash & Stretch
Nº 005스쿼시 앤 스트레치Squash & StretchSquash & Stretch
스프링 오버슛 · Spring & Overshoot
Nº 004스프링 오버슛Spring & OvershootSpring & Overshoot
렌더 추가 예정CLIP COMING
관성 퇴장Physical Exit
049
Nº 049관성 퇴장Physical ExitPhysical Exit
07

출처Sources

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