Spring · dynamic-island

높이 변화량으로 bounce 를 정하는 섬

animations.dev 랜딩의 Dynamic Island 를 배포 번들에서 그대로 옮겼다. 핵심은 스프링 상수가 고정이 아니라는 것이다 — 전환 직전에 내용물 높이를 재서, 커질 때는 더 튀고 줄어들 때는 덜 튀도록 bounce 를 0.30~0.35 사이에서 다시 계산한다. 변화가 20px 미만이면 0.5 로 고정한다.

옮기면서 잰 값

내용 전환

spring · bounce 는 높이 변화량에서 계산 (0.30–0.35, 20px 미만이면 0.5)

등장

scale .9 → 1, blur(5px) → 0, 50ms 지연

퇴장

상태 쌍마다 다른 scale/y — 섬 밖 복제본이 blur(5px) 로 흩어진다

타이머 자릿수

spring bounce .35 · y ±12px · blur(2px)

무음 스위치

폭 128 → 148, spring bounce .5 · 종 흔들림 11키프레임

앨범 커버는 강의 페이지 자산이라 랜딩 번들에 없다 — 같은 크기의 그러데이션 타일로 대체했고,albumArt prop 으로 실제 이미지를 넣을 수 있다.