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

이미지 언롤Image Unroll

Image Unroll

이미지 언롤

다른 이름Also known as · 이미지 말림 펴기

566

렌더 추가 예정CLIP COMING이미지 언롤Image Unroll정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 566. 이미지 언롤 · Image Unroll · power2.out

말려 있던 이미지 면이 펼쳐지며 평평한 사진으로 정착하는 움직임A rolled-up image surface unfurls and settles as a flat picture.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

숨겨져 있던 면이 열리며 드러나는 물성을 준다. 종이나 포스터가 펼쳐지는 기대감이 있다Gives a hidden surface a sense of material as it opens, like unrolling a poster or scroll.

언제 쓰나Use whenUSE WHEN

포스터, 지도, 사진을 펼쳐 공개할 때
이미지 갤러리의 첫 사진을 극적으로 열 때
문서나 두루마리 같은 소재를 소개할 때

Unfurl a poster, map or photo.
Open an image gallery's first picture dramatically.
Introduce documents or scrolls.

과용 주의AvoidAVOID

최종 프레임 말림 반경은 정확히 0으로 끝낸다
말림 반경은 이미지 폭의 8% 이하에서 시작한다
말리는 부분에도 이미지 텍스처 늘어남을 만들지 않는다

분류TagsTAGS

3D·깊이3D & Depth 설명Explain 전환Transition 제품 시연Product demo 숏폼Short-form 설명 영상Explainer video 난이도 고급Advancedwebgl

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

이미지가 말림 반경 80px에서 0으로 1.4초 동안 펴지며 오른쪽 끝부터 평평해지고 마지막에 그림자가 사라진다

과용 · 나쁜 사례OVERUSE

말림이 균일해 원통이 회전만 하는 것처럼 보이거나, 펴진 뒤에도 미세한 곡면이 남아 이미지가 휘어 있다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
시간	1.4s	1.0~2.0s	펼침
말림 반경	80→0px	50~120px	곡률
진행 방향	오른쪽 → 왼쪽	한 방향	고정
그림자	0.3→0	0~0.4	말림에 비례
이징	power2.out	power1~power3	끝에서 감속

GSAP

const u = { r: 80, x: 1 }; // r: 곡률 반경, x: 펼침 경계 0~1
tl.to(u, { r: 0, x: 0, duration: 1.4, ease: 'power2.out', onUpdate: () => { mat.uniforms.uR.value = u.r; mat.uniforms.uEdge.value = u.x; } }, 0.3);
// vertex: x > uEdge 인 정점을 반경 uR 원통에 감음

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

WebGL과 GSAP으로 <이미지>가 말려 있다 펼쳐지는 연출을 만들어 줘. 평면 메시를 60분할해 경계 오른쪽 정점을 반경 80px 원통에 감고, 0.3초부터 1.4초 동안 power2.out으로 반경 80→0, 경계 1→0으로 tween해. 끝나면 곡률이 정확히 0이고 그림자도 0이어야 해. uniform은 paused 타임라인에서 seek 가능하게 갱신해.

Use WebGL and GSAP to unroll <image>. Split a plane into 60 segments and wrap the vertices right of an edge around a cylinder of radius 80px. From 0.3 seconds over 1.4 seconds with power2.out, tween radius 80 to 0 and edge 1 to 0. At the end curvature and shadow are exactly 0. Update uniforms so the paused timeline can seek.

Codex

<파일>에 image-unroll을 적용해. uniform {r:80, x:1}을 position 0.3, duration 1.4, ease power2.out으로 {r:0, x:0}으로 tween하고 onUpdate에서 uR, uEdge를 갱신한다. 0.3초는 말린 상태, 1.0초는 절반, 1.9초는 완전히 평평하고 곡률이 0이며 텍스처 늘어남이 없는지 캡처로 확인해.

Apply image-unroll in <file>. Tween uniform {r:80, x:1} to {r:0, x:0} at position 0.3, duration 1.4, ease power2.out, updating uR and uEdge in onUpdate. Capture 0.3s (rolled), 1.0s (half) and 1.9s (fully flat, zero curvature, no texture stretching).