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

파일 업로드 스택File Upload Stack

File Upload Stack

파일 업로드 스택

다른 이름Also known as · 업로드 카드 쌓기

336

렌더 추가 예정CLIP COMING파일 업로드 스택File Upload Stack정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 336. 파일 업로드 스택 · File Upload Stack · power2.out

작은 파일 면이 떠오르며 카드 목록으로 쌓이고 진행 표시가 붙는다.File cards lift into a stack with upload progress indicators.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

선택한 파일과 업로드 진행을 보여 준다.Shows selected files and upload status.

언제 쓰나Use whenUSE WHEN

파일 업로드 스택으로 선택한 파일과 업로드 진행을 보여 준다 때
제품 시연에서 조작 전후 상태를 한 장면 안에 연결할 때

Use this effect when you need to communicate: Shows selected files and upload status.
Connect interaction states within a product demonstration.

과용 주의AvoidAVOID

업로드 완료 전에 진행 막대를 100%로 채운다 상황을 피한다
상태 변화가 끝난 뒤에는 반복을 멈춰 읽을 시간을 둔다

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

선택한 파일 세 장이 24px 올라와 목록에 쌓인다

과용 · 나쁜 사례OVERUSE

업로드 완료 전에 진행 막대를 100%로 채운다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
기본 지속	0.5s	0.3~0.75s	1920x1080 시연 기준의 한 동작 시간
항목 시간차	80ms	40~120ms	대상 크기와 정보 밀도에 맞춰 조절한다
이징	power2.out	none \| power2.out \| power2.inOut	진행값은 none, 정착은 power2.out을 쓴다

GSAP

.file { animation: enter 500ms ease-out both; animation-delay: calc(var(--i) * 80ms); }
@keyframes enter {
  from { transform: translateY(24px) scale(.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 파일 업로드 스택을 적용해. 작은 파일 면이 떠오르며 카드 목록으로 쌓이고 진행 표시가 붙는다. 기본 지속 0.5초, 항목 시간차 80ms, 이징 power2.out를 사용하고 <파일>에 결정론적 paused 타임라인으로 구현해. 위 핵심 코드의 선택자를 대상 구조에 맞추고 완료 상태를 유지해. CSS 애니메이션은 정지 상태와 음수 지연으로 seek를 구현해.

Apply File Upload Stack to <target> in <file>. File cards lift into a stack with upload progress indicators. Use a 0.5-second duration, an 80ms item stagger, and power2.out easing. Implement the core snippet with selectors matching the target, using a deterministic paused timeline, and retain the final state. For CSS animation, implement seeking with a paused play state and a negative delay.

Codex

<파일>의 시연 장면에서 <대상>에 파일 업로드 스택을 적용해. 기본 지속 0.5초, 항목 시간차 80ms, 이징 power2.out를 사용해. 0초, 0.25초, 0.9초를 캡처해 초기 상태, 중간 변화, 완료 상태를 확인하고 같은 시점 seek 결과가 일치하는지 검증해.

Apply File Upload Stack to <target> in the demonstration scene in <file>. Use a 0.5-second duration, an 80ms item stagger, and power2.out easing. Capture at 0, 0.25, and 0.9 seconds to verify the initial, intermediate, and final states. Seek to the same times again and confirm identical results.