효과Effects / UI 시연UI Demo / Nº 346

모달 등장Modal Lift

Modal Lift

모달 등장

다른 이름Also known as · Modal lift and backdrop · 모달 상승과 배경 암전 · Modal Entrance

346

도판Fig. 346. 모달 등장 · Modal Lift · power3.out

재생 속도Speed

대화상자가 떠오르면서 뒤 화면이 어두워지거나 흐려진다.A dialog rises into focus as the backdrop dims.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

현재 작업 영역을 분명히 한다.Defines the current working area and visual priority.

언제 쓰나Use whenUSE WHEN

중요한 확인 대화상자를 열 때
현재 작업의 보조 입력을 받을 때

Open an important confirmation dialog.
Request supporting input for the current task.

과용 주의AvoidAVOID

본문 위에 과도한 블러를 동시에 적용하지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

모달이 아래 32px에서 올라오며 배경이 250ms에 어두워진다

과용 · 나쁜 사례OVERUSE

배경 암전이 늦어 모달과 기존 화면의 우선순위가 충돌한다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
모달 등장	400ms	250~550ms	상승과 확대
배경 암전	250ms	180~350ms	모달보다 먼저 정착
상승 거리	32px	16~48px	짧은 부상
배경 투명도	0.45	0.3~0.6	내용 대비
시작 배율	0.96	0.94~1	최종 배율 1

GSAP

tl.fromTo('.modal',{y:32,scale:0.96,opacity:0},{y:0,scale:1,opacity:1,duration:0.4,ease:'power3.out'},0);
tl.fromTo('.backdrop',{opacity:0},{opacity:0.45,duration:0.25,ease:'power2.out'},0);
tl.to({}, {duration:1},0.4);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 모달 등장을 적용한다. 모달을 32px 아래와 0.96배에서 400ms에 올리고 배경은 250ms에 opacity 0.45로 맞춘다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.

Apply Modal Lift to <target> in <file>. Lift the modal from 32px below at scale 0.96 over 400ms and fade the backdrop to 0.45 opacity over 250ms. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.

Codex

<파일>에서 <대상>의 모달 등장 장면에 적용한다. 모달을 32px 아래와 0.96배에서 400ms에 올리고 배경은 250ms에 opacity 0.45로 맞춘다. 0.10초·0.26초·0.60초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.

Implement Modal Lift in the scene for <target> in <file>. Lift the modal from 32px below at scale 0.96 over 400ms and fade the backdrop to 0.45 opacity over 250ms. Capture at 0.10s, 0.26s, 0.60s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.