반응형 헤더 모션Adaptive Header Motion

Adaptive Header Motion

반응형 헤더 모션

다른 이름Also known as · Direction aware header · 방향 반응 헤더 · Adaptive Navigation · 내비게이션 축소와 노출

322

렌더 추가 예정CLIP COMING반응형 헤더 모션Adaptive Header Motion정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 322. 반응형 헤더 모션 · Adaptive Header Motion · power2.out

스크롤이 진행되면 헤더가 작아지거나 위로 숨고 반대 방향으로 움직이면 다시 나타난다.A header hides or shrinks during scrolling and returns when direction changes.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

내용 공간을 확보하면서 탐색 상태를 알린다.Frees content space while preserving navigation context.

언제 쓰나Use whenUSE WHEN

반응형 헤더 모션으로 내용 공간을 확보하면서 탐색 상태를 알린다 때
제품 시연에서 조작 전후 상태를 한 장면 안에 연결할 때

Use this effect when you need to communicate: Frees content space while preserving navigation context.
Connect interaction states within a product demonstration.

과용 주의AvoidAVOID

방향이 조금만 바뀌어도 헤더가 깜박인다 상황을 피한다
상태 변화가 끝난 뒤에는 반복을 멈춰 읽을 시간을 둔다

분류TagsTAGS

UI 시연UI Demo 피드백Feedback 강조Emphasis 제품 시연Product demo 웹 UIWeb UI 설명 영상Explainer video 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

아래로 스크롤할 때 헤더가 숨고 위로 돌리면 다시 나타난다

과용 · 나쁜 사례OVERUSE

방향이 조금만 바뀌어도 헤더가 깜박인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
기본 지속	0.3s	0.18~0.45s	1920x1080 시연 기준의 한 동작 시간
방향 감지 거리	8px	6~20px	대상 크기와 정보 밀도에 맞춰 조절한다
이징	power2.out	none \| power2.out \| power2.inOut	진행값은 none, 정착은 power2.out을 쓴다

GSAP

tl.set('.header', {y:0});
tl.to('.header', {y:-96,duration:.3,ease:'power2.out'}, .4);
tl.to('.header', {y:0,duration:.3,ease:'power2.out'}, 1.2);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 반응형 헤더 모션을 적용해. 스크롤이 진행되면 헤더가 작아지거나 위로 숨고 반대 방향으로 움직이면 다시 나타난다. 기본 지속 0.3초, 방향 감지 거리 8px, 이징 power2.out를 사용하고 <파일>에 결정론적 paused 타임라인으로 구현해. 위 핵심 코드의 선택자를 대상 구조에 맞추고 완료 상태를 유지해.

Apply Adaptive Header Motion to <target> in <file>. A header hides or shrinks during scrolling and returns when direction changes. Use a 0.3-second duration, an 8px direction threshold, and power2.out easing. Implement the core snippet with selectors matching the target, using a deterministic paused timeline, and retain the final state.

Codex

<파일>의 시연 장면에서 <대상>에 반응형 헤더 모션을 적용해. 기본 지속 0.3초, 방향 감지 거리 8px, 이징 power2.out를 사용해. 0초, 0.15초, 0.7초를 캡처해 초기 상태, 중간 변화, 완료 상태를 확인하고 같은 시점 seek 결과가 일치하는지 검증해.

Apply Adaptive Header Motion to <target> in the demonstration scene in <file>. Use a 0.3-second duration, an 8px direction threshold, and power2.out easing. Capture at 0, 0.15, and 0.7 seconds to verify the initial, intermediate, and final states. Seek to the same times again and confirm identical results.