효과Effects / 반복·앰비언트Loop & Ambient / Nº 603

폴딩 큐브 로더Folding Cube Loader

Folding Cube Loader

폴딩 큐브 로더

다른 이름Also known as · 접히는 정사각 로더

603

렌더 추가 예정CLIP COMING폴딩 큐브 로더Folding Cube Loader정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 603. 폴딩 큐브 로더 · Folding Cube Loader · ease-in-out

네 개의 작은 면이 차례로 3D 회전하며 접혔다 펼쳐진다.Four small panels fold and unfold in sequence.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

조립되는 면의 순환을 보여 준다.Suggests a repeating assembly cycle.

언제 쓰나Use whenUSE WHEN

조립 작업 대기 표시에서 지속 활동을 표시할 때
짧은 반복으로 조립되는 면의 순환을 보여 준다 때

Use folding tiles for an assembly-related waiting state.
Use a short repeating motion to communicate suggests a repeating assembly cycle.

과용 주의AvoidAVOID

얇은 글자까지 면과 함께 뒤집어 읽을 수 없게 한다 상황을 피한다
동작 감소 설정에서는 첫 프레임을 고정한다

분류TagsTAGS

반복·앰비언트Loop & Ambient 피드백Feedback 순서·흐름Sequence 제품 시연Product demo 설명 영상Explainer video 웹 UIWeb UI 난이도 중급Intermediatecss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

조립 작업 대기 표시에서 네 면이 300ms 간격으로 접힌다

과용 · 나쁜 사례OVERUSE

얇은 글자까지 면과 함께 뒤집어 읽을 수 없게 한다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	2400ms	1800~3600ms	한 번의 반복에 걸리는 시간이다
격자	2x2	2x2	네 면을 사용한다
위상차	300ms	200~400ms	시계 방향으로 지연한다
원근 거리	140px	120~300px	작은 로더 크기에서 사용한다
이징	ease-in-out	linear \| ease-in-out	경로 이동은 등속, 맥동은 부드러운 왕복을 쓴다

GSAP

.fx { display:grid; grid-template-columns:repeat(2,24px); perspective:140px; }
.fx i { height:24px; background:currentColor; transform-origin:100% 100%; animation:fold 2.4s ease-in-out infinite; animation-delay:calc(var(--i)*-300ms); }
@keyframes fold {
  0%,100% { transform:rotateX(0deg); opacity:1; }
  40%,60% { transform:rotateX(-180deg); opacity:.2; }
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 폴딩 큐브 로더를 적용해. 주기 2400ms, 격자 2x2, 위상차 300ms, 원근 거리 140px, 이징 ease-in-out로 구현해. 예시 코드의 요소 구조를 함께 만들고 하나의 paused 타임라인으로 seek 가능하게 연결해. 동작 감소 설정에서는 첫 프레임을 유지해.

Apply Folding Cube Loader to <target>. Use a 2.4-second cycle, four tiles, 300ms offsets, and 140px perspective, and ease-in-out easing. Include the required element structure and drive the effect with one paused, seekable timeline. Hold the first frame when reduced motion is enabled.

Codex

<파일>의 대기 표시 또는 배경 영역에 폴딩 큐브 로더를 적용해. 주기 2400ms, 격자 2x2, 위상차 300ms, 원근 거리 140px, 이징 ease-in-out를 사용하고 반복 위상을 절대 시간에서 계산해. 0초, 1.2초, 2.4초를 캡처해 중간 변화와 첫 프레임으로의 연결을 확인해.

Apply Folding Cube Loader in the waiting indicator or background region of <file>. Use a 2.4-second cycle, four tiles, 300ms offsets, and 140px perspective, and ease-in-out easing; derive loop phase from absolute time. Capture at 0, 1.2, and 2.4 seconds to verify the intermediate change and the return to the starting frame.