가변 글꼴 축 변형Variable Font Axis Morph

Variable Font Axis Morph

가변 글꼴 축 변형

다른 이름Also known as · Variable font flex · 가변 글꼴 변형 · Variable Font Width Breathing · 가변 폰트 폭 호흡 · Variable Font Slant Motion · 가변 폰트 기울기 변화 · Variable Font Custom Axis Morph · 가변 폰트 사용자 축 변형

115

렌더 추가 예정CLIP COMING가변 글꼴 축 변형Variable Font Axis Morph정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 115. 가변 글꼴 축 변형 · Variable Font Axis Morph · power2.inOut

한 단어의 굵기와 너비가 연속으로 변하며 강도와 성격을 바꾸는 가변 폰트 변형A word's weight and width change continuously, shifting its intensity and character.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

같은 단어가 가벼운 톤에서 단단한 톤으로 바뀌는 인상. 무게가 실린다The same word moves from a light voice to a solid one, gaining weight.

언제 쓰나Use whenUSE WHEN

핵심 단어를 가늘게 시작해 굵게 키워 강조할 때
호버·선택 상태에서 텍스트 성격을 바꿀 때

When a key word should grow from thin to bold for emphasis
When text personality should change on hover or selection

과용 주의AvoidAVOID

줄 바꿈이 바뀌지 않도록 white-space nowrap과 고정 박스 폭을 준다
wght와 wdth를 동시에 바꿀 때는 wdth 변화폭을 20% 이하로 둔다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

"집중"이 0.7초 동안 wght 300에서 800, wdth 80에서 100으로 변하며 글자마다 0.06초 늦게 시작한다

과용 · 나쁜 사례OVERUSE

축 변화가 프레임마다 다른 값을 내 글자가 떨리거나 줄 바꿈이 바뀌어 레이아웃이 점프한다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	0.7s	0.5~1.0s	power2.inOut
wght	300에서 800	200~900	폰트 지원 범위
wdth	80에서 100	75~100	너비 축
글자 시작 차	0.06s	0~0.1s	0이면 단어 전체 동시

GSAP

chars.forEach((_, i) => {
  const o = {w:300, d:80};
  tl.to(o, {w:800, d:100, duration:0.7, ease:'power2.inOut', onUpdate(){
    node(i).style.fontVariationSettings = `'wght' ${o.w}, 'wdth' ${o.d}`;
  }}, 0.2 + i * 0.06);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 단어에 가변 폰트 축 변형을 넣어줘. 0.7초 동안 wght 300에서 800, wdth 80에서 100으로 power2.inOut 변형하고 글자 시작 차 0.06초. 컨테이너 폭은 최종 상태 기준으로 고정하고 줄 바꿈을 막아 레이아웃이 움직이지 않게 해.

Morph the word in <target> along variable-font axes: over 0.7s go wght 300 to 800 and wdth 80 to 100 with power2.inOut, glyph starts 0.06s apart. Fix the container width to the final state and forbid wrapping so layout never moves.

Codex

<파일>에 variable font axis morph를 적용해. 객체 {w:300,d:80}를 800/100으로 0.7초 power2.inOut 보간하고 onUpdate에서 font-variation-settings에 기록, 글자 stagger 0.06. 0.3초·0.6초·1.3초를 캡처해 wght 증가와 컨테이너 좌표 불변을 확인해.

Apply variable font axis morph in <file>. Tween {w:300,d:80} to 800/100 over 0.7s power2.inOut, write to font-variation-settings in onUpdate, glyph stagger 0.06. Capture at 0.3s, 0.6s and 1.3s and verify wght rises while container coordinates stay fixed.