글자 뒤집기 등장Letter Flip Reveal

Letter Flip Reveal

글자 뒤집기 등장

다른 이름Also known as · Per Character 3D Flip · 글자별 3D 뒤집기 · Per-character 3D

578

렌더 추가 예정CLIP COMING글자 뒤집기 등장Letter Flip Reveal정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 578. 글자 뒤집기 등장 · Letter Flip Reveal · power3.out

납작하게 누워 있던 글자가 가로축이나 세로축으로 회전해 앞면을 드러내는 입체 등장Text lying flat tips up on a horizontal or vertical axis to reveal its front face.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

글자가 공간에 세워지는 느낌. 제목에 깊이와 무게가 생긴다Letters seem to stand up in space, giving a title depth and weight.

언제 쓰나Use whenUSE WHEN

짧은 제목 한 줄을 입체감 있게 등장시킬 때
섹션 도입부 타이틀

When a single short title should arrive with dimensional weight
For section-opening titles

과용 주의AvoidAVOID

perspective는 800px 이상을 쓴다. 낮으면 왜곡이 심하다
회전 중에는 opacity를 0에서 1로 함께 올려 뒷면 노출 깜빡임을 가린다

분류TagsTAGS

3D·깊이3D & Depth 주목 끌기Attention 분위기Mood 숏폼Short-form 설명 영상Explainer video 발표Presentation 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

"START"가 글자마다 rotateX -90도에서 0도로 0.55초 동안 세워지고 글자 시작 차는 0.04초다

과용 · 나쁜 사례OVERUSE

180도 이상 돌리며 perspective를 200px으로 낮춰 글자가 찌그러지고 읽히지 않는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
글자당 시간	0.55s	0.4~0.7s	power3.out
시작 차	0.04s	0.03~0.06s	왼쪽부터
회전각	-90deg	-90 또는 -180deg	rotateX 또는 rotateY
perspective	1000px	800~1200px	부모에 적용

GSAP

gsap.set('.title', {perspective:1000});
tl.from('.ch', {rotationX:-90, opacity:0, transformOrigin:'50% 100%', duration:0.55, ease:'power3.out', stagger:0.04}, 0.2);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 제목 글자를 입체로 세워줘. 부모에 perspective 1000px, 글자마다 rotationX -90도에서 0도, opacity 0에서 1, 0.55초 power3.out, 바닥 경첩(transform-origin 50% 100%), 시작 차 0.04초. 한국어는 음절 단위로 span을 나눠.

Stand up the title letters in <target>. Put perspective 1000px on the parent; each glyph goes rotationX -90 to 0 and opacity 0 to 1 over 0.55s power3.out with a bottom hinge (transform-origin 50% 100%), staggered 0.04s. Split Korean by syllable.

Codex

<파일>의 제목에 letter flip 3d를 적용해. 부모 perspective 1000px, Intl.Segmenter로 분할한 .ch에 rotationX -90에서 0, opacity 0에서 1, 0.55초, stagger 0.04, origin 50% 100%. 0.4초·0.7초·1.4초를 캡처해 회전 중 뒷면이 보이지 않고 최종 글자가 정면인지 확인해.

Apply letter flip 3d to the title in <file>. Parent perspective 1000px; .ch from Intl.Segmenter with rotationX -90 to 0, opacity 0 to 1, 0.55s, stagger 0.04, origin 50% 100%. Capture at 0.4s, 0.7s and 1.4s, verify no back face shows mid-rotation and the final glyphs face front.