그림자 엘리베이션Shadow Elevation

Shadow Elevation

그림자 엘리베이션

다른 이름Also known as · 그림자 부상 · Elevation Reveal · Shadow Distance Motion · 거리 연동 그림자

575

렌더 추가 예정CLIP COMING그림자 엘리베이션Shadow Elevation정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 575. 그림자 엘리베이션 · Shadow Elevation · power2.out

대상이 위로 떠오를수록 그림자가 넓어지고 옅어져 떠 있는 높이가 드러나는 표현As an object rises off the surface, its shadow widens and fades, revealing how high it floats.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

선택된 대상이 바닥에서 떨어져 있다는 높이감을 준다. 중요도와 상호작용 상태를 조용하게 알린다Gives a selected object a sense of height and quietly signals importance or interaction state.

언제 쓰나Use whenUSE WHEN

카드를 선택하거나 들어 올릴 때
버튼 호버 상태를 보여 줄 때
드래그 시작과 놓는 순간의 높이 변화를 보일 때

Select or lift a card.
Show a button hover state.
Show the height change when a drag starts and ends.

과용 주의AvoidAVOID

그림자 offset y는 높이의 절반 이하로 한다
높이가 오를수록 opacity는 낮춘다
한 화면에서 동시에 띄우는 카드는 2장 이하로 한다

분류TagsTAGS

3D·깊이3D & Depth 피드백Feedback 강조Emphasis 웹 UIWeb UI 제품 시연Product demo 숏폼Short-form 난이도 기본Basiccss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

카드가 600ms에 24px 떠오르며 그림자 blur가 4px에서 24px로 넓어지고 opacity는 0.3에서 0.15로 옅어진다

과용 · 나쁜 사례OVERUSE

카드는 뜨는데 그림자가 그대로라 붙어 보이거나, 그림자가 오히려 진해져 무겁게 느껴진다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
시간	0.6s	0.3~0.9s	상승
높이	24px	8~40px	translateY 음수
그림자 blur	4→24px	2~40px	높이에 비례
그림자 opacity	0.3→0.15	0.1~0.35	높이와 반비례
이징	power2.out	power1~power3

GSAP

tl.fromTo('.card',
  { y: 0, boxShadow: '0 2px 4px rgba(0,0,0,0.30)' },
  { y: -24, boxShadow: '0 12px 24px rgba(0,0,0,0.15)', duration: 0.6, ease: 'power2.out' }, 0.4);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <카드>가 0.4초부터 0.6초 동안 위로 24px 떠오르는 동안 그림자를 넓히고 옅게 해줘. boxShadow를 0 2px 4px rgba(0,0,0,0.30)에서 0 12px 24px rgba(0,0,0,0.15)로 fromTo, 이징 power2.out. 그림자 offset은 높이의 절반, 그림자가 진해지지 않게 하고 paused 타임라인으로 만들어.

Use GSAP to lift <card> 24px starting at 0.4 seconds over 0.6 seconds while widening and lightening its shadow. Tween boxShadow with fromTo from 0 2px 4px rgba(0,0,0,0.30) to 0 12px 24px rgba(0,0,0,0.15), ease power2.out. The shadow must not get darker. One paused timeline.

Codex

<파일>의 카드에 shadow-elevation을 적용해. fromTo로 y 0→-24, boxShadow '0 2px 4px rgba(0,0,0,0.30)'→'0 12px 24px rgba(0,0,0,0.15)'를 position 0.4, duration 0.6, ease power2.out으로 건다. 0.3초는 붙어 있고, 0.7초는 중간, 1.2초는 y -24와 넓고 옅은 그림자인지 캡처로 확인해.

Apply shadow-elevation to the card in <file>. fromTo y 0 to -24 and boxShadow '0 2px 4px rgba(0,0,0,0.30)' to '0 12px 24px rgba(0,0,0,0.15)' at position 0.4, duration 0.6, ease power2.out. Capture 0.3s (resting), 0.7s (midway) and 1.2s (y -24 with a wide, faint shadow).