라이브러리가 아니라 레시피

랜딩에서 눈을 끄는 모션은 대부분 애니메이션 라이브러리가 아니라 작은 코드 세 덩어리다. 무엇이 움직이는지(도메인 모델), 어떻게 그리는지(캔버스 렌더러), 언제 갱신하는지(requestAnimationFrame 루프). 이 스킬은 그 세 덩어리를 엔진으로 묶고, 바로 복제해 쓸 레시피 넷을 붙였다. 외부 라이브러리는 하나도 없다.

두 모드

• 시뮬레이션 구동: 상태와 규칙을 매 순간 갱신하고 결과를 그린다. 볼 때마다 조금씩 다르다. 로봇·군집·흐름.
• 타임라인 구동: 시각 t 에 따라 정해진 장면을 그린다. 순서가 있는 설명과 반복 데모.

쓰는 법

• 모드를 고른다. 살아 있어야 하면 시뮬.
• 가장 가까운 레시피를 복제한다. 처음부터 짜지 않는다.
• 모델, 렌더, 루프 순으로 얹는다.
• 린트로 점검한다.

node lint/motion-lint.mjs my-hero.html

린트가 막는 실수

AI 가 캔버스 애니메이션을 처음부터 짤 때 자주 하는 실수들이다.

• 동작 줄이기 무시. 기기 설정에서 움직임을 줄인 사람에게도 계속 움직인다.
• 프레임레이트에 묶인 속도. 120Hz 화면에서는 두 배로 빨라진다. 고정 timestep 으로 막는다.
• 흐린 캔버스. 고해상도 화면(DPR)을 고려하지 않아 뿌옇게 보인다.
• 겹침 순서 오류. 아이소 화면에서 뒤에 있어야 할 것이 앞에 그려진다. 깊이 정렬로 막는다.
• 매번 다른 결과. 시뮬레이션에 시드를 주지 않아 재현이 안 된다.
• 애니메이션 라이브러리 반입.

실측

레시피 넷을 크롬에서 1280×800 으로 띄워 쟀다(맥 미니, 2026-10-08).

정직한 한계

• 실측은 데스크톱 크롬 한 대 기준이다. 저사양 폰에서 입자 2,400개는 느릴 수 있다. 입자 수는 레시피에서 줄인다.
• Canvas 2D 라 3D(WebGL)급 효과는 범위 밖이다.
• 화면 읽기 프로그램에는 캔버스 안의 내용이 보이지 않는다. 의미 있는 정보는 캔버스 밖 글로 따로 둔다.

쓰는 법 (다른 AI)

npx skills add hanmariyang/giting-skills --skill canvas-motion