조각 글자 조립Shape Built Letters

Shape Built Letters

조각 글자 조립

다른 이름Also known as · Decorative Letter Assembly · 장식 조각 글자 조립

439

렌더 추가 예정CLIP COMING조각 글자 조립Shape Built Letters정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 439. 조각 글자 조립 · Shape Built Letters · back.out(1.4)

선과 도형 조각이 움직여 글자의 획과 장식을 완성하는 효과Lines and geometric pieces slide together to complete the strokes and ornaments of letters.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

글꼴을 그래픽 소재로 다루는 창의성을 전한다. 조각이 맞물리는 순간의 만족감이 있다Treats type as graphic material; the moment the pieces lock together is satisfying and shows creativity.

언제 쓰나Use whenUSE WHEN

브랜드명 한 단어를 도형으로 조립해 등장시킬 때
타이포그래피 포스터 느낌의 인트로가 필요할 때

Build a brand word out of shapes as its entrance.
Open with a typographic-poster feel.

과용 주의AvoidAVOID

글자당 조각 5개 초과 금지
탄성 과다(15% 초과) 금지
장식이 최종 글자 위에 남아 가독성을 해치면 안 된다

분류TagsTAGS

도형·패스Shape & Path 브랜딩Branding 주목 끌기Attention 숏폼Short-form 발표Presentation 웹 UIWeb UI 난이도 고급Advancedsvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

원, 막대, 반원 조각 8개가 각 800ms, 50ms 간격으로 날아와 'GAME' 네 글자를 완성하고 장식은 300ms에 사라진다

과용 · 나쁜 사례OVERUSE

조각이 30개 넘게 동시에 움직여 어느 글자가 만들어지는지 읽히지 않는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
조각당 지속	800ms	600~1000ms	이동 시간
조각 간 지연	50ms	30~80ms	순서가 읽히는 간격
탄성	10%	0~15%	도착 시 살짝 넘침
장식 소거	300ms	200~500ms	완성 뒤 장식 제거

GSAP

pieces.forEach((p, i) => {
  tl.from(p, { x: p.dataset.dx, y: p.dataset.dy, rotation: p.dataset.r, opacity: 0,
    duration: 0.8, ease: 'back.out(1.4)' }, i * 0.05);
});
tl.to('.deco', { opacity: 0, duration: 0.3 }, '>+0.4');

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 단어 '<문구>'를 SVG 도형 조각(원, 막대, 반원) 글자당 3~5개로 만들고, 조각이 화면 밖 지정 위치에서 날아와 글자를 조립하게 해줘. 조각당 0.8초, 50ms 간격, back.out(1.4)이고 완성 0.4초 뒤 장식 조각은 0.3초에 사라지게 해. 시작 위치는 고정 수치로 쓰고 paused 타임라인에서 seek 되게 해.

Build the word '<text>' in <target> from 3 to 5 SVG shapes per letter (circles, bars, half circles) that fly in from fixed off-screen positions and assemble the letters. 0.8 seconds per piece, 50ms apart, back.out(1.4); 0.4 seconds after completion remove decoration pieces over 0.3 seconds. Use fixed start values and one paused timeline that can be seeked.

Codex

<파일>의 글자를 SVG 조각으로 분해해 tl.from(i*0.05, 0.8s, back.out(1.4))으로 조립하고 장식은 0.3초 페이드아웃해. Math.random 금지. 0.5초에 조각이 이동 중이고 2.2초에 글자 형태가 완성되며 장식이 없는지 캡처로 확인해.

In <file> decompose the letters into SVG pieces and assemble them with tl.from (i*0.05, 0.8s, back.out(1.4)); fade the decoration over 0.3s. No Math.random. Capture at 0.5s to see pieces in flight and at 2.2s to confirm the finished letterforms with no decoration left.