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

스크롤 격자 확장Scroll Grid Expansion

Scroll Grid Expansion

스크롤 격자 확장

다른 이름Also known as · Sticky Grid Expansion · 고정 격자 확장

350

렌더 추가 예정CLIP COMING스크롤 격자 확장Scroll Grid Expansion정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 350. 스크롤 격자 확장 · Scroll Grid Expansion · power2.out

고정된 이미지 격자가 열별로 들어온 뒤 커져 공간을 열고 설명을 보여 준다.A pinned image grid enters by column, expands, and reveals supporting text.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

자료 집합에서 주요 장면으로 시선을 옮긴다.Moves attention from a collection toward a key scene.

언제 쓰나Use whenUSE WHEN

스크롤 격자 확장으로 자료 집합에서 주요 장면으로 시선을 옮긴다 때
제품 시연에서 조작 전후 상태를 한 장면 안에 연결할 때

Use this effect when you need to communicate: Moves attention from a collection toward a key scene.
Connect interaction states within a product demonstration.

과용 주의AvoidAVOID

격자 확대가 텍스트까지 잘라낸다 상황을 피한다
상태 변화가 끝난 뒤에는 반복을 멈춰 읽을 시간을 둔다

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

열별로 진입한 사진 격자가 확대되며 설명을 공개한다

과용 · 나쁜 사례OVERUSE

격자 확대가 텍스트까지 잘라낸다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
기본 지속	2s	1.2~3s	1920x1080 시연 기준의 한 동작 시간
확대 배율	1.3	1.1~1.5	대상 크기와 정보 밀도에 맞춰 조절한다
이징	power2.out	none \| power2.out \| power2.inOut	진행값은 none, 정착은 power2.out을 쓴다

GSAP

tl.from('.column', {y:120,opacity:0,duration:.6,stagger:.08,ease:'power2.out'}, 0);
tl.to('.grid', {scale:1.3,duration:1,ease:'power2.out'}, .8);
tl.from('.caption', {y:24,opacity:0,duration:.4,ease:'power2.out'}, 1.6);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 스크롤 격자 확장을 적용해. 고정된 이미지 격자가 열별로 들어온 뒤 커져 공간을 열고 설명을 보여 준다. 기본 지속 2초, 확대 배율 1.3, 이징 power2.out를 사용하고 <파일>에 결정론적 paused 타임라인으로 구현해. 위 핵심 코드의 선택자를 대상 구조에 맞추고 완료 상태를 유지해.

Apply Scroll Grid Expansion to <target> in <file>. A pinned image grid enters by column, expands, and reveals supporting text. Use a 2-second duration, a 1.3 scale factor, and power2.out easing. Implement the core snippet with selectors matching the target, using a deterministic paused timeline, and retain the final state.

Codex

<파일>의 시연 장면에서 <대상>에 스크롤 격자 확장을 적용해. 기본 지속 2초, 확대 배율 1.3, 이징 power2.out를 사용해. 0초, 1초, 2.4초를 캡처해 초기 상태, 중간 변화, 완료 상태를 확인하고 같은 시점 seek 결과가 일치하는지 검증해.

Apply Scroll Grid Expansion to <target> in the demonstration scene in <file>. Use a 2-second duration, a 1.3 scale factor, and power2.out easing. Capture at 0, 1, and 2.4 seconds to verify the initial, intermediate, and final states. Seek to the same times again and confirm identical results.