손글씨 쓰기Handwriting Write On

Handwriting Write On

손글씨 쓰기

다른 이름Also known as · Handwritten stroke · Handwritten write and erase · 손글씨 쓰기와 지우기 · Write · Unwrite · SVG Stroke Text Draw · SVG 획 텍스트 그리기 · Stitched text

101

렌더 추가 예정CLIP COMING손글씨 쓰기Handwriting Write On정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 101. 손글씨 쓰기 · Handwriting Write On · power2.inOut

펜 끝이 글자의 실제 획 순서대로 움직이며 필체가 드러나는 손글씨 쓰기A pen tip travels along the real stroke order so the handwriting is revealed.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

글을 직접 쓰는 사람의 손길과 속도. 개인적이고 정성스러운 인상을 준다The hand and pace of a person writing: personal and careful.

언제 쓰나Use whenUSE WHEN

서명·인사말·손글씨 제목이 쓰이는 장면
작은 단어를 감성적으로 강조할 때

Signatures, greetings and handwritten titles
Emotionally emphasizing a small word

과용 주의AvoidAVOID

획 경로는 폰트 외곽선이 아니라 중심선을 쓴다. 외곽선 dash는 두 겹 테두리가 생긴다
작은 크기 글자에는 쓰지 않는다. 획이 보여야 손글씨로 읽힌다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

"고맙습니다"가 획마다 300~600ms, 획 사이 80ms로 곡선에서 감속하며 필기 순서대로 그려진다

과용 · 나쁜 사례OVERUSE

글자 폴리곤을 왼쪽에서 오른쪽으로 마스크 와이프해 획 순서와 무관하게 드러난다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
획 시간	0.4s	0.3~0.6s	길이에 비례
획 사이	80ms	60~120ms	펜 이동
곡선 감속	power2.inOut	power1~power3	곡선부에서 느려짐
선 굵기	8px	4~12px	stroke-linecap round

GSAP

// SVG path의 중심선, pathLength=1로 정규화
strokes.forEach((p, i) => {
  p.style.strokeDasharray = 1; p.style.strokeDashoffset = 1;
  tl.to(p, {strokeDashoffset:0, duration:0.4, ease:'power2.inOut'}, 0.2 + i * 0.48);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 문구를 손글씨로 쓰이게 해줘. 중심선 SVG 획들을 pathLength 1로 정규화하고 stroke-dashoffset을 획 순서대로 1에서 0으로 애니메이션해. 획당 0.4초 power2.inOut, 획 사이 80ms, 선 굵기 8px round cap. 획 순서는 배열 순서로 고정해.

Make the phrase in <target> write itself by hand. Normalize centerline SVG strokes with pathLength 1 and animate stroke-dashoffset 1 to 0 in stroke order: 0.4s power2.inOut per stroke, 80ms between strokes, 8px round caps. Fix the order by array order.

Codex

<파일>에 handwriting write-on을 적용해. 각 path의 pathLength=1, strokeDasharray 1, strokeDashoffset 1에서 0을 0.4초 power2.inOut, 시작 0.2+i*0.48. 0.5초·1.0초·끝을 캡처해 획이 순서대로 진행하는지, 완료 시 dashoffset 0으로 모든 획이 이어지는지 확인해.

Apply handwriting write-on in <file>. For each path set pathLength=1, strokeDasharray 1, strokeDashoffset 1 to 0 over 0.4s power2.inOut, start 0.2+i*0.48. Capture at 0.5s, 1.0s and the end to verify strokes progress in order and dashoffset reaches 0 for all.