syahdestiny/javascript-animation

JavaScript 애니메이션 (모든 프레임을 코드로 그리기)

모든 픽셀이 계산되는 단편 애니메이션 영화를 만듭니다. 이미지 없음, 로드할 폰트 없음, 라이브러리 없음. 하나의 HTML 파일이 전체 작품을 담고 있으며, 헤드리스 브라우저가 이를 프레임별로 탐색하여 MP4로 변환합니다.

모델

Claude Opus 5.5와 함께 구축 및 테스트되었으며, 그리기 품질은 모델에 크게 의존합니다. 아래의 자체 점검은 이미지 입력이 필요합니다. 현재 모델이 이미지를 볼 수 없으면 사용자에게 알리고 시각적 검증을 수행하지 않은 것으로 처리합니다. 다른 모델은 테스트되지 않았습니다. 결과물이 조악해 보이면, 더 강력한 모델이 도움이 될 가능성이 높다고 말하고 이것이 최상의 결과라고 주장하지 마십시오.

기본 흐름: 묻지 말고 진행

중단하지 않고 바로 실행합니다. 합리적인 기본값을 선택하고 전달 시 대안을 언급합니다. 시작 전에 묻는 것은 주제가 전혀 없는 경우(예: '애니메이션 만들어 줘', 그 외 아무것도 없음)에만 합니다.

1. 브리핑 읽기. 형식(스토리, 설명, 시, 루프, 인터랙티브 페이지), 길이(기본 15-20초, 주제를 그 시간 안에 전달할 수 없는 경우에만 더 길게), 화면비(기본 1920x1080)를 사용자가 말한 내용에서 유추합니다. 화면상의 텍스트는 사용자가 브리핑을 작성한 언어로 합니다. 사용자가 요청하거나 대상이 명확히 이중 언어인 경우에만 이중 언어로 만듭니다. references/forms.md에 각 형식에 대한 간단한 구조가 있습니다.
2. 주제와 대상에 맞는 외형과 사운드를 직접 계획합니다. 영화가 무엇인지, 어떻게 보이고 들리는지, 그리고 그것이 이 주제와 대상에 왜 적합한지 자신의 말로 설명합니다. 작성해야 할 목록은 없습니다. references/techniques.md에 재료가 있으며, 스타터의 값은 하우스 스타일이 아닌 자리 표시자입니다. 이전 작품의 외형이나 사운드를 기본적으로 재사용하지 마십시오. 두 개의 다른 주제가 비슷하게 보이거나 들리면 안 됩니다. 사용자가 다른 사람의 작품을 가리키는 경우(예: '그 바이럴 영상처럼'), 그 기법만 차용하고 캐릭터, 스토리 또는 구성을 절대 차용하지 마십시오.
3. 비트 그리드, 스토리보드 및 블로킹을 데이터로 작성합니다. (references/storyboard.md). 먼저 템포와 섹션을 정하고, 형식에 맞는 템포의 샷 목록(각 샷의 프레이밍, 카메라 움직임, 액션, 착지하는 비트, 사운드, 전환)을 만든 다음, 블로킹(스토리나 설명의 경우 하나의 연속된 세계의 트랙)을 설정합니다. 이들을 BPM, SECTIONS, SHOTS, EVENTS로 페이지에 넣습니다. 장면, 카메라 및 사운드트랙이 모두 이를 읽으므로 그림과 사운드가 설계상 정렬됩니다. 스토리나 설명의 경우 논리를 확인합니다. 모든 비트가 이전 비트에 의해 발생해야 하고, 은유가 그림에서 보여야 합니다.
4. templates/starter.html에서 구축합니다. 이미 스토리보드 기반입니다. 세계 좌표로 그려진 하나의 세계, 샷당 withCamera, 모든 텍스트와 모든 주요 객체에 대한 claim()이 포함되어 있습니다. 자리 표시자 팔레트와 데모 세계를 교체하십시오. 계약을 유지하십시오: draw(frame)은 프레임 번호의 순수 함수입니다. rng(seed) / hash2()를 사용하고 Math.random 또는 Date는 사용하지 마십시오.
5. 자체 점검 후 렌더링합니다. (다음 섹션). 깨끗해질 때까지 수정하고 다시 확인하십시오.
6. 전달: MP4와 HTML(브라우저에서 실시간 재생 가능, 클릭하면 사운드 시작). 그런 다음 한두 줄로 변경 가능한 항목(다른 외형, 합성 대신 AI 음악, 다른 길이)을 제안하십시오.

음악의 경우 soundtrack 스킬을 사용하십시오(기본값: 웹 오디오로 페이지에서 합성, 키 불필요).

자체 점검 (에이전트가 수행하며 사용자는 보지 않음)

node scripts/render.mjs piece.html sheet.jpg --sheet 1        # 컷 직전 초당 한 프레임
node scripts/render.mjs piece.html shot --stills 90,300,610   # 특정 순간
node scripts/render.mjs piece.html piece.mp4                  # 전체 렌더링 (+ 페이지에 사운드트랙이 있으면 포함)
node scripts/asset-audit.mjs piece.html                       # 제로 에셋 증명: 로드되거나 임베드된 것이 있으면 exit 1
node scripts/layout-check.mjs piece.html                      # 텍스트 간 충돌 또는 클레임된 객체와 겹침 확인
node ../soundtrack/scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json   # 비트에 맞춰 컷, 놀람 없음

그런 다음 두 번의 육안 검사를 references/qc.md에 따라 수행합니다.

1. 스토리보드 적합성: 각 샷의 액션 비트에서 정지 프레임을 캡처하여 해당 행과 대조합니다(배우가 블로킹이 지정한 위치에 있고 행이 지정한 대로 행동하는가?).
2. 감독 패스: 초당 2프레임의 콘택트 시트(--sheet .5)를 형식 대비 템포, 프레이밍 다양성, 죽은 프레임, 모든 액션에 사운드가 있는지, 외형이 대상에 적합한지에 대해 점수화합니다. 최소 두 번의 라운드를 수행하십시오. 변경한 프레임의 정지 이미지를 렌더링하고 매번 전체 필름을 다시 렌더링하지 마십시오.

트리거 시에만 실행

조건	수행할 작업
캐릭터가 둘 이상의 장면에 등장함	장면 전에 캐릭터 단독 렌더링(표정 + 포즈) 후 references/character.md에 따라 직접 확인합니다. 캐릭터는 입, 손과 같은 앵커 포인트를 노출하여 소품이 부착될 수 있도록 합니다.
사용자가 실제 사람, 애완동물 또는 장소의 사진을 제공함	references/character.md의 추출 방법을 사용하여 사진에서 캐릭터를 구축합니다. 사진은 로컬에 유지되며 절대 업로드하거나 게시된 파일에 넣지 마십시오.
실제 인물 작품이고 사용자가 참석함	전달 시(그 이전이 아님) 주요 소품이나 사람의 사진을 사용하여 더 개인화할 기회를 제공합니다.
텍스트 또는 말풍선이 움직이는 캐릭터를 따라감	placeFree(w, h, [above, right, left, below])로 배치하여 이미 클레임된 항목에서 비켜나도록 합니다.
화면상의 텍스트가 라틴 문자가 아님(중국어, 일본어 등)	CJK 폰트 스택을 사용하고 모든 글리프가 렌더링되는지 확인하십시오(고정폭 폰트는 누락된 글리프를 조용히 대체합니다. 예: ≈가 =가 됨).
페이지가 웹 페이지로 게시됨	HTML을 전달하고 라이브 미리보기 루프와 클릭 재생 오디오를 유지합니다.

일반적인 실패를 방지하는 규칙

• 시간의 순수 함수. requestAnimationFrame 상태, CSS 애니메이션, 누적 물리학이 없습니다. 각 프레임을 t만으로 계산하지 않으면 렌더링과 미리보기가 일치하지 않습니다.
• 손으로 그린 선은 끓어오르고 떨리지 않습니다. 필름이 LOOK.wobble을 설정하면 매 프레임이 아닌 4프레임마다(LOOK.boil: 4) 워블 시드를 변경합니다. 매 프레임은 노이즈로 읽히고, 초당 ~7.5회 변경은 손으로 그린 것으로 읽힙니다.
• 몸체는 둥근 형태로. 타원과 둥근 사각형으로 인물을 구성합니다. 점이 적은 원시 다각형은 표지판(오각형 손, 상자 몸통)으로 읽힙니다.
• 포즈를 읽을 수 있는 각도를 선택합니다. 옆에서 본 길쭉한 몸체와 짧은 팔다리는 애벌레로 읽힙니다. 같은 포즈를 앞에서 보면(단축 원근법) 엎드린 아기로 읽힙니다.
• 뒤에서 앞으로 명시적으로 그립니다. 뒷머리, 몸체, 목, 얼굴, 앞머리 순서. 대부분의 '무언가가 얼굴을 가린다' 버그는 그리기 순서 문제입니다.
• 컷과 액션의 지점을 정확히 맞춥니다. 모든 컷과 보이는 모든 액션은 EVENTS/CUES에 있으며 사운드트랙이 이에 맞춰집니다(soundtrack 참조).
• 텍스트는 절대 충돌하지 않습니다. 모든 텍스트 상자와 주요 객체를 클레임합니다. layout-check는 CLEAN을 출력해야 합니다. 모니터 가장자리나 얼굴과 겹치는 캡션은 부주의해 보이며 콘택트 시트에서 눈에 띄지 않습니다.

파일

• templates/starter.html: 드로잉 라이브러리(잉크, 일러스트레이션, 플랫/청사진 프리미티브, 레이블, 종이, 필터 레이어), withCamera, claim/placeFree, 스토리보드 기반 2샷 뼈대.
• scripts/render.mjs: MP4 / 정지 이미지 / 콘택트 시트. window.CUES와 window.SCORE는 선택 사항입니다. 전체 렌더링 시 <out>.cues.json을 쓰고 SCORE 사운드트랙을 멀티플렉스합니다(SCORE 없음 = 무음 MP4). 짝수 캔버스 크기가 필요합니다.
• scripts/asset-audit.mjs: 로드되거나 임베드된 항목에 대한 정적 스캔 + 실시간 네트워크 확인.
• scripts/layout-check.mjs: 전체 필름에 걸쳐 window.LAYOUT을 읽고 시간과 함께 텍스트 충돌을 나열합니다.
• references/storyboard.md: 비트 그리드, 샷 목록, 블로킹, 연속성 및 스토리 로직.
• references/techniques.md: 테스트된 드로잉 기법(잉크, 스팟 컬러 인쇄, 단선 조각, 모양으로서의 단어, 마커 채우기, 일러스트레이션 모양).
• references/forms.md: 형식별 구조 노트.
• references/character.md: 캐릭터가 있을 때만.
• references/qc.md: 자체 점검 목록.

요구 사항: Node 18+, ffmpeg, Chrome(또는 npx playwright install chromium), 스크립트를 실행하는 폴더(스킬 폴더가 아닌 프로젝트)에 npm i playwright-core가 설치되어 있어야 합니다.