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

카드 스택 셔플Card Stack Shuffle

Card Stack Shuffle

카드 스택 셔플

다른 이름Also known as · Stack shuffle · 카드 더미 섞기 · Rotating Card Stack · 카드 스택 순환

323

렌더 추가 예정CLIP COMING카드 스택 셔플Card Stack Shuffle정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 323. 카드 스택 셔플 · Card Stack Shuffle · power2.inOut

뒤 카드가 위를 넘어 맨 앞으로 오고 나머지 카드는 눌렸다 재정렬된다.A rear card travels over the stack and settles at the front.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

순서 변화와 카드의 질량을 보여준다.Makes reordering and card weight perceptible.

언제 쓰나Use whenUSE WHEN

겹친 카드의 순서를 바꿀 때
추천 항목이 순환하는 모습을 보여줄 때

Reorder overlapping cards.
Show cycling recommendations.

과용 주의AvoidAVOID

깊이 교체는 카드가 겹치지 않는 구간에 둔다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

뒤 카드가 위로 180px 나갔다가 앞에 오고 나머지 카드가 재정렬된다

과용 · 나쁜 사례OVERUSE

교차 순간 깊이 순서가 바뀌어 카드가 순간적으로 관통한다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
카드 수	4	3~5	내용 식별 가능한 수
이동	900ms	700~1200ms	들기와 정착 포함
압축	5%	2~6%	나머지 스택 배율
들기 거리	180px	120~240px	겹침을 벗어나는 거리

GSAP

tl.to('.rear-card',{y:-180,rotation:-8,duration:0.45,ease:'power2.out'},0);
tl.to('.stack-rest',{scale:0.95,duration:0.45},0);
tl.set('.rear-card',{zIndex:10},0.45);
tl.to('.rear-card',{y:0,rotation:0,duration:0.45,ease:'power2.inOut'},0.45);
tl.to('.stack-rest',{scale:1,y:24,duration:0.45},0.45);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 카드 스택 셔플을 적용한다. 카드 4개 중 뒤 카드를 180px 들어 올려 450ms에 깊이 순서를 바꾸고 나머지는 5% 압축 후 총 900ms에 정착시킨다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.

Apply Card Stack Shuffle to <target> in <file>. Lift the rear of four cards by 180px, swap its depth at 450ms, compress the remaining stack by 5%, and settle everything by 900ms. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.

Codex

<파일>에서 <대상>의 카드 스택 셔플 장면에 적용한다. 카드 4개 중 뒤 카드를 180px 들어 올려 450ms에 깊이 순서를 바꾸고 나머지는 5% 압축 후 총 900ms에 정착시킨다. 0.23초·0.59초·1.10초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.

Implement Card Stack Shuffle in the scene for <target> in <file>. Lift the rear of four cards by 180px, swap its depth at 450ms, compress the remaining stack by 5%, and settle everything by 900ms. Capture at 0.23s, 0.59s, 1.10s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.