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

캐러셀 슬라이드Carousel Slide

Carousel Slide

캐러셀 슬라이드

다른 이름Also known as · Card rail throw · 카드 레일 던지기 · Carousel slide · Animated Carousel · 슬라이더 카드 교체

324

렌더 추가 예정CLIP COMING캐러셀 슬라이드Carousel Slide정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 324. 캐러셀 슬라이드 · Carousel Slide · power3.out

카드 트랙이 한 방향으로 이동해 다음 항목을 중앙에 놓고 감속하며 멈춘다.A card rail decelerates into the next centered selection.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

빠른 탐색과 선택의 착지를 보여준다.Communicates browsing direction and a settled choice.

언제 쓰나Use whenUSE WHEN

제품 카드 사이를 탐색할 때
선택한 항목을 중앙에 강조할 때

Browse product cards.
Emphasize the selected item in the center.

과용 주의AvoidAVOID

자동 넘김 간격을 읽기 시간보다 짧게 잡지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

폭 360px와 간격 24px를 합친 384px만큼 레일이 이동한다

과용 · 나쁜 사례OVERUSE

레일이 멈춘 뒤 강조 카드가 바뀌어 선택이 어긋난다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
이동	600ms	400~800ms	한 항목 전환
카드 폭	360px	280~480px	1920x1080 기준
간격	24px	16~40px	카드 사이 여백
중심 배율	1.1	1.04~1.12	선택 카드 확대
유지	1500ms	1200~3000ms	정착 후 읽기

GSAP

tl.to('.rail',{x:-384,duration:0.6,ease:'power3.out'},0);
tl.to('.card-current',{scale:1,duration:0.6},0);
tl.to('.card-next',{scale:1.1,duration:0.6},0);
tl.to({}, {duration:1.5},0.6);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 캐러셀 슬라이드을 적용한다. 폭 360px와 간격 24px의 레일을 600ms에 384px 옮기고 새 중심 카드를 1.1배로 확대해 1500ms 유지한다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.

Apply Carousel Slide to <target> in <file>. Move a rail of 360px cards with 24px gaps by 384px in 600ms, scale the new centered card to 1.1, and hold for 1500ms. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.

Codex

<파일>에서 <대상>의 캐러셀 슬라이드 장면에 적용한다. 폭 360px와 간격 24px의 레일을 600ms에 384px 옮기고 새 중심 카드를 1.1배로 확대해 1500ms 유지한다. 0.53초·1.37초·2.30초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.

Implement Carousel Slide in the scene for <target> in <file>. Move a rail of 360px cards with 24px gaps by 384px in 600ms, scale the new centered card to 1.1, and hold for 1500ms. Capture at 0.53s, 1.37s, 2.30s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.