큐브 전환Cube Transition

Cube Transition

큐브 전환

다른 이름Also known as · Cube rotation · 큐브 회전

134

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

도판Fig. 134. 큐브 전환 · Cube Transition · power3.inOut

두 장면이 큐브의 이웃 면처럼 원근을 가지며 회전해 교체되고 바닥 반사가 보인다Two scenes rotate in perspective like neighboring faces of a cube, with a hint of floor reflection.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

두 장면이 같은 3D 물체의 이웃 면처럼 이어진다. 공간이 회전한다는 감각을 준다Makes both scenes feel attached to one 3D object. Suggests space rotating.

언제 쓰나Use whenUSE WHEN

탭이나 섹션이 나란히 놓인 면이라는 구조를 보여 주며 다음 면으로 넘어갈 때
제품 소개에서 기능 A 화면에서 기능 B 화면으로 회전해 넘어갈 때

When showing tabs or sections as adjacent faces and moving to the next one
When going from a feature A screen to a feature B screen in a product tour

과용 주의AvoidAVOID

회전은 90도 한 번으로 끝낸다(두 바퀴 이상은 어지러움)
반사는 opacity 0.4 이하로 둔다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

현재 장면이 왼쪽으로 90도 돌아 나가고 다음 장면이 오른쪽 면에서 들어오며, 0.8초 동안 원근 0.7로 바닥 반사가 살짝 보인다

과용 · 나쁜 사례OVERUSE

원근이 너무 강해 화면이 찌그러지거나, 회전 축이 화면 중앙이 아니라 모서리로 어긋난다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	800ms	600~1000ms	easeInOutCubic 근사
원근	0.7	0.5~1.0	perspective 1400~2000px
회전각	90deg	90deg 고정	이웃 면
축소	0.3	0.2~0.4	회전 중 살짝 물러남
반사 opacity	0.4	0.2~0.4	바닥 반사

GSAP

gsap.set('.stage', { perspective: 1600 });
tl.fromTo('.next', { rotationY: 90, transformOrigin: '0% 50%' }, { rotationY: 0, duration: 0.8, ease: 'power3.inOut' }, 0);
tl.to('.prev', { rotationY: -90, transformOrigin: '100% 50%', duration: 0.8, ease: 'power3.inOut' }, 0);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 두 장면 사이에 큐브 전환을 넣어줘. 부모에 perspective 1600px, 이전 장면은 오른쪽 축(100% 50%)으로 0에서 -90도, 다음 장면은 왼쪽 축(0% 50%)으로 90도에서 0으로 0.8초 동안 power3.inOut으로 돌려. backface-visibility는 hidden. 회전 중 살짝 축소해 원근이 보이게 하고, GSAP 타임라인 하나로 seek 가능하게 만들어.

Add a Cube Transition between the two scenes in <target>. Set perspective 1600px on the parent. Rotate the previous scene from 0 to -90deg around its right edge (100% 50%) and the next scene from 90deg to 0 around its left edge (0% 50%), over 0.8s with power3.inOut. Use backface-visibility hidden, and keep it on a single seekable GSAP timeline.

Codex

<파일>에 큐브 전환을 구현해. .stage perspective 1600, .prev rotationY 0에서 -90, .next 90에서 0, duration 0.8, ease power3.inOut, transformOrigin은 각각 100% 50%와 0% 50%. 0.2초, 0.4초, 0.6초, 0.8초 시점을 캡처해 두 면이 모서리에서 맞닿아 회전하는지, 틈이 벌어지지 않는지 확인해.

Implement a cube transition in <file>. .stage perspective 1600; .prev rotationY 0 to -90, .next 90 to 0, duration 0.8, ease power3.inOut, transformOrigin 100% 50% and 0% 50%. Capture at 0.2s, 0.4s, 0.6s, and 0.8s to confirm the two faces meet at the edge while rotating and no gap opens between them.