3D 표면 위 텍스트Text On 3D Surface

Text On 3D Surface

3D 표면 위 텍스트

다른 이름Also known as · Cylinder Text Rotation · 원통 텍스트 회전 · Double Ring Text Counterrotation · 이중 링 텍스트 반대 회전 · Twisted Text Ribbon · 뒤틀린 텍스트 리본 · Text Texture Mesh Flow · 메시 표면 텍스트 흐름

579

렌더 추가 예정CLIP COMING3D 표면 위 텍스트Text On 3D Surface정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 579. 3D 표면 위 텍스트 · Text On 3D Surface · none

문구가 원통이나 링 표면에 둘러 배치되고 회전하며 앞면 문구가 바뀌는 효과Phrases wrap around a cylinder or ring and rotate so the front-facing phrase keeps changing.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

반복 정보를 입체적 연속 구조로 보여준다. 깊이감이 있는 회전으로 공간을 만든다Presents repeated information as a continuous 3D structure and builds space with depth-rich rotation.

언제 쓰나Use whenUSE WHEN

목록형 문구를 한 번에 돌려 보여주고 싶을 때
브랜드 인트로에 입체적인 타이포 배경이 필요할 때

Cycle through a list of phrases in one rotation.
Give a brand intro a dimensional typographic backdrop.

과용 주의AvoidAVOID

perspective 없는 3D 금지
뒷면 글자 숨김 처리(backface 또는 opacity) 없이 두지 않는다
면 수 16 초과 금지(글자가 너무 작아짐)

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

12면 원통에 문구가 반지름 180px로 둘러 있고 10초에 한 바퀴 돌며 앞쪽 문구만 선명하다

과용 · 나쁜 사례OVERUSE

뒷면 글자까지 같은 밝기로 보여 앞뒤가 섞이고 원근 없이 납작하다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
면 수	12	8~16	각도 30도
반지름	180px	140~260px	translateZ 값
한 바퀴	10s	8~16s	등속
perspective	1000px	800~1400px	깊이 강도

GSAP

/* .stage{perspective:1000px} .cyl{transform-style:preserve-3d} */
items.forEach((el, i) => gsap.set(el, { rotationY: i * 30, z: 180 }));
tl.to('.cyl', { rotationY: -360, duration: 10, ease: 'none' }, 0);
items.forEach(el => el.style.backfaceVisibility = 'hidden');

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 문구 목록(<항목들>)을 12면 원통 표면에 배치해줘. 각 면은 rotationY i*30도, translateZ 180px, backface-visibility hidden이고 부모 perspective는 1000px. 부모를 10초에 rotationY -360도 등속으로 돌리고, 앞쪽 문구는 opacity 1, 뒤쪽은 0.25가 되게 해.

Arrange the phrases <items> of <target> on a 12-face cylinder. Each face gets rotationY i*30 degrees, translateZ 180px, backface-visibility hidden, with a parent perspective of 1000px. Rotate the parent to rotationY -360 over 10 seconds at constant speed, with front phrases at opacity 1 and back ones at 0.25.

Codex

<파일>에 CSS 3D 원통 텍스트를 구현해. 자식 12개는 gsap.set(rotationY i*30, z 180), 부모는 tl.to(rotationY -360, 10s, none). 2.5초 시점에 앞면 문구가 90도 이동했는지, 뒷면 글자가 보이지 않는지 캡처로 확인해.

Implement a CSS 3D cylinder text in <file>: 12 children via gsap.set(rotationY i*30, z 180) and the parent via tl.to(rotationY -360, 10s, none). Capture at 2.5s to confirm the front phrase has advanced by 90 degrees and that back-facing text is hidden.