효과Effects / 3D·깊이3D & Depth / Nº 573

팝업북 전개Pop-up Book

Pop-up Book

팝업북 전개

다른 이름Also known as · Pop-up book deployment · 팝업북 펼침 · Popup hinge

573

렌더 추가 예정CLIP COMING팝업북 전개Pop-up Book정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 573. 팝업북 전개 · Pop-up Book · power2.inOut

책 페이지가 열리며 접힌 종이 구조가 솟아올라 하나의 장면을 만든다A book's pages open and folded paper structures rise up to form a scene.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

설명 속의 세계가 눈앞에서 세워지는 느낌을 준다. 이야기의 시작이나 새 챕터의 문을 여는 데 어울린다Gives the feeling of a world being built before the viewer's eyes. Suits story openings and chapter starts.

언제 쓰나Use whenUSE WHEN

챕터가 시작될 때 책이 열리며 장면이 세워지는 도입을 만들 때
도시나 방 같은 공간을 종이 구조로 소개할 때

Open a chapter with a book opening and building its scene.
Introduce a city or room as a paper structure.

과용 주의AvoidAVOID

구조물은 페이지가 절반 이상 열린 뒤 세운다
각 종이 면에 그림자를 준다

분류TagsTAGS

3D·깊이3D & Depth 분위기Mood 전환Transition 설명 영상Explainer video 숏폼Short-form 발표Presentation 난이도 고급Advancedcss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

1800ms 동안 책 페이지가 110도 열리고, 종이 구조물이 0에서 80도로 세워진다. 이징 easeInOut

과용 · 나쁜 사례OVERUSE

페이지와 구조물이 동시에 같은 속도로 움직여 종이가 접힌다는 인상이 없다. 그림자가 없어 평면 스티커처럼 보인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	1800ms	1400~2400ms
페이지 각도	110도	90~140도	rotateX 또는 rotateY
구조 각도	0→80도	60~90도	페이지가 열린 뒤 시작
perspective	1600px	1200~2000px

GSAP

gsap.set('.book', { perspective: 1600, transformStyle: 'preserve-3d' });
tl.to('.page-r', { rotateY: -110, transformOrigin: '0% 50%', duration: 1.0, ease: 'power2.inOut' }, 0.3)
  .to('.pop', { rotateX: -80, transformOrigin: '50% 100%', duration: 0.9, ease: 'back.out(1.2)', stagger: 0.12 }, 0.9);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 도입에 팝업북 전개를 넣어줘. 컨테이너 perspective 1600px, 오른쪽 페이지를 0.3초부터 1초 동안 rotateY -110도 power2.inOut으로 열고, 0.9초부터 종이 구조물 3개를 rotateX -80도로 0.12초 간격 stagger로 세워. 각 면에는 부드러운 그림자.

Add a pop-up book reveal to the intro of <target>. Set container perspective 1600px, open the right page from 0.3 seconds with rotateY -110 degrees over 1s using power2.inOut, and from 0.9 seconds raise 3 paper structures to rotateX -80 degrees with a 0.12s stagger. Give every face a soft shadow.

Codex

<파일>에 popup book을 구현해. perspective 1600, .page-r rotateY 0→-110 / 1s / power2.inOut / origin 왼쪽, .pop rotateX 0→-80 / 0.9s / stagger 0.12 / origin 아래. 0.8초, 1.4초, 2.1초를 캡처해 페이지가 먼저 열리고 구조물이 뒤이어 서는지, 최종 각도가 80도인지 확인해.

Implement a popup book in <file>: perspective 1600, .page-r rotateY 0 to -110 / 1s / power2.inOut / origin left, .pop rotateX 0 to -80 / 0.9s / stagger 0.12 / origin bottom. Capture at 0.8s, 1.4s and 2.1s and verify the page opens first, the structures rise after it, and the final angle is 80 degrees.