Line-art animation
애니메이션 일러스트레이션 구성 요소: 모든 것이 종이 위에서 하나의 얇은 펜으로 그려지며, TypeScript로 SVG를 실시간으로 빌드하므로 어떤 크기에서도 선명하게 유지되고, 포인터에 반응하며, 프레임별로 확인하거나 비디오로 내보낼 수 있습니다.
이 스킬은 작은 라이브러리(lib/), 두 개의 예제(examples/walker — 약 150줄의 단일 인물;
examples/village — 전체 장면) 및 도구(scripts/)를 제공합니다.
무엇을 작성하기 전에 요청과 가장 가까운 예제를 먼저 읽으십시오.
사람들이 이 작업을 평가하는 방법
애니메이터처럼 평가합니다: 프레임별로, 확대해서, 실제 또는 참조와 비교합니다. 이 모든 것은 실제로 거절되었으며, 각각 아래에 규칙이 있습니다:
- 사인파로 흔들리는 걷기, 미끄러지는 발, 타임랩스에 맞추기 위해 속도를 높인 보행
- 닫힌 관 모양으로 그려진 팔다리; 자처럼 곧은 선; 다리를 무시하는 딱딱한 옷
- 한 번에 모두 제작되어 모두 비슷해 보이는 전체 구성 요소 세트("AI slop")
- 세상이 반응하는 대신 UI처럼 느껴지는 상호작용
- 장면에 따라 배경이 변하는 페이지("비디오 같고 구성 요소 같지 않아 보임")
- 새로운 것을 요청했을 때 참조 클립의 캐릭터 재사용
- 아무도 요청하지 않은 남은 소품(걸어둔 빨래를 제거해 달라고 요청함)
워크플로우
- 움직이기 전에 룩을 확정하십시오.
references/style.md를 읽으십시오. 펜 두께, 종이 색상, 인물 비율 및 하나 또는 두 개의 평평한 악센트 색상을 결정하십시오. - 프로젝트를 설정하십시오.
lib/를 프로젝트에 복사하고(종속성이 없는 4개의.ts파일), Vite + TypeScript를 사용하십시오(이 저장소의package.json,tsconfig.json및vite.config.ts가 설정을 보여줍니다). 구성 요소는 프레임워크가 필요 없는 일반 DOM/SVG입니다. - 먼저 하나의 인물 또는 한 코너를 제작하고 보여주십시오(스크린샷 또는 짧은 클립, 참조가 있으면 그 옆에). 나머지를 만들기 전에 승인을 받으십시오. 한 번에 만든 전체 세트는 평범하게 돌아옵니다. 하나의 좋은 작품이 기준을 보여줍니다.
- 움직이게 만드십시오.
references/motion.md사용: 걷기와 뛰기를 위한gait(), 부착되거나 매달린 모든 것을 위한spring()/pendulum(), 키 포즈를 위한curve()또는sequence(). 자유로운 사인파로 인물에 애니메이션을 적용하지 마십시오. - 장면을 구성하십시오.
references/scenes.md사용: 고정된 페이지 배경의 자체 포함된 카드, 레이어,lib/daynight.ts의 시간대 팔레트, 조명, 바람, 일정에 따라 도착하는 사람들, 반응인 상호작용. - 보여주기 전에
references/verify.md로 확인하십시오: 타입 검사,?debug스테핑, 모든 움직이는 것의 확대된 프레임 스트립, 상호작용 트리거 및 스테핑, 실제 탭에서 60fps. - 일치시킬 참조 클립이 있으면
references/matching.md를 따르십시오 — 추측 대신 클립에서 타이밍과 포즈를 측정하고 오버레이로 확인하십시오. - 비디오를 원하면
references/video.md를 따르십시오(결정론적 헤드리스 캡처 withscripts/capture.ts, then ffmpeg).
작동하게 만드는 규칙
- 팔다리는 두 개의 열린 획입니다.
limb()는 먼 쪽 끝에서 서로 약간 짧게 멈추는 두 펜 선 사이에 종이로 채워진 띠를 그립니다. 이것이 스타일의 시그니처입니다. - 선은 곡선입니다. 관절은 둥글고, 가장자리는 약간 휘어지며, 자처럼 곧은 것은 없습니다.
- 각 인물을 자체 공간에 그리십시오 — 약 95 단위 키, 발은 y = 120, +x 방향,
x = 40에 서 있음 —
place(g, x, y, dir, scale)로 배치하십시오. 비율, 펜 두께 및 보행 사전 설정은 모두 이 공간을 가정합니다. - 옷은 골격 주위에 그려집니다. 다리를 해결한 다음(숨겨져 있어도), 앞무릎과 발목에서 코트나 기모노 자락을 그려 천이 보폭에 따라 열리고 닫히도록 하십시오. 소매, 스카프 및 가방은 스프링에 매달려 흔들립니다.
- 발은 고정됩니다. 보행자를 정확히
gait.speed × scale만큼 초당 이동시키면 지지하는 발은 땅에 멈춰 있습니다. 압축된 시계에 맞추기 위해 보행 속도를 높이지 마십시오. 대신 도착 시간을 압축하십시오. - 잉크는
currentColor이고, 종이는.pp입니다.applyPalette()로 전체 그림을 다시 색칠하십시오(낮: 따뜻한 종이에 진한 잉크; 밤: 남색에 창백한 잉크, 따뜻한 창문). 단색 팔다리 채우기는solid()를 사용해야 합니다. 그렇지 않으면 종이 CSS가 우선합니다. - 구성 요소는 카드입니다. 주변 페이지는 절대 색상이 변하지 않습니다.
- 상호작용은 세상이 반응하는 것입니다: 사람이 절하거나 모자를 기울이고, 고양이가 깨어 스트레칭하고, 초롱이 흔들리고, 새들이 흩어지고, 물고기가 뛰어오릅니다. 포인터 움직임은 바람입니다. 장면 내부에 버튼은 없습니다. 하나의 희미한 힌트 선이면 충분합니다.
- 새로운 것은 새로운 것입니다. 요청이 "이것처럼 하지만 새롭게"라면, 매체, 펜, 비율 및 타이밍 느낌을 유지하십시오. 캐릭터, 활동 및 소품을 새로 만드십시오.
라이브러리 개요
| 모듈 | 제공하는 것 |
|---|---|
lib/ink.ts | pen shape blot paint limb solid joint hang curve shoe place toScene inkDefs run |
lib/gait.ts | `gait({ kind: 'walk' |
lib/motion.ts | spring pendulum pointerWind sequence seeded wobble ease minJerk … |
lib/daynight.ts | palette(τ) → 하늘, 종이, 잉크, lamp, night, sunset; applyPalette nightTint |
run(draw)는 draw(t, dt)로 모든 것을 구동합니다. 확인을 위해 두 가지 URL 플래그가 중요합니다:
?t=1.25는 시간을 멈춥니다. ?debug는 rAF를 비활성화하고 정확한 스테핑을 위해
window.__step(seconds)를 노출합니다(백그라운드 및 헤드리스 탭은 rAF를 조절하므로 항상 디버그 모드에서 확인하십시오).
스크립트
scripts/capture.ts <url?debug> <outDir> <frames> <fps> [w] [h] [setupJs] [frameJs]— 결정론적 PNG 프레임 from 헤드리스 Chromescripts/clip.ts period|blobs …— 영역의 루프 길이; 프레임별 어두운 블롭 추적scripts/frames.sh <clip> x y w h outDir— 클립에서 포즈를 읽기 위한 그리드 오버레이 프레임
모든 스크립트는 Node ≥ 22.18(네이티브 TypeScript 제거됨)과 ffmpeg가 필요합니다. capture.ts는
로컬 Chrome/Chromium을 찾거나 $CHROME을 사용합니다.