게임·미디어 제작Games & media

deterministic-html-motion-render

어느 프레임이든 어떤 순서로든 똑같이 렌더되는 HTML 모션 장면인지 검사합니다. 시계, 난수, 타이머가 없어야 합니다.

어떤 문제를 푸나The problem

프레임 단위로 정확한 렌더에는 시간만의 순수 함수인 장면이 필요합니다. lint_scene.py는 소스에서 흔한 누수(Date.now, Math.random, setTimeout 등)를 찾고, determinism_check.mjs는 같은 프레임을 두 번, 다른 순서로 렌더해 픽셀을 비교합니다.

__seek이 아무것도 바꾸지 않는 장면은 결정론적인 것이 아니라 검사가 무의미한 것이므로 실패로 처리합니다.

이런 분께 맞습니다Who it is for

코드로 영상 장면을 만들고 프레임 단위로 렌더하려는 사람, Remotion이나 Motion Canvas 같은 도구 위에서 결정론을 검증하고 싶은 사람.

무엇을 하나What it does

린트는 문자열 속 URL이 코드를 가리지 않게 먼저 문자열과 주석을 가립니다. Math['random']과 webkitAudioContext도 찾습니다.
픽셀 검사는 샘플한 프레임만 증명하므로 --frames로 타임라인 전체를 고르게 지정합니다.
장면을 열 수 없으면 종료 코드 3입니다. Playwright가 없으면 브라우저 검사는 SKIPPED라고 크게 표시합니다.

직접 돌려 본 출력Real output

저장소의 examples 폴더를 실행한 결과입니다.

$ bash examples/demo.sh
# Static lint: scene code that cannot be replayed frame-exact
$ python3 scripts/lint_scene.py examples/scene.html
clean
[exit 0]

$ python3 scripts/lint_scene.py examples/scene_forbidden.html
examples/scene_forbidden.html:2: Date.now (wall clock)
examples/scene_forbidden.html:4: Math.random (non-deterministic)
examples/scene_forbidden.html:4: setTimeout (time-driven)
3 violation(s)
[exit 1]

# Behavioural check: render the same frames twice, in a different order, and compare pixels (needs Playwright)
(install first:  npm install playwright && npx playwright install chromium)

알아둘 한계Limits

검증 도구일 뿐 렌더러가 아닙니다.
픽셀 비교에는 Playwright가 필요합니다. 베타입니다.

받아서 쓰기Get it

# 저장소를 받습니다
git clone https://github.com/Kein-chronicle/deterministic-html-motion-render.git

# Claude Code 스킬로 쓰려면 이 폴더 이름으로 받습니다
git clone https://github.com/Kein-chronicle/deterministic-html-motion-render.git ~/.claude/skills/deterministic-motion-render

정보Info

분류Category: 게임·미디어 제작Games & media
형태Type: 명령줄 도구Command-line tool
라이선스License: MIT
필요한 것Requires: Node.js 22 이상, Python 3.10 이상, bash, Playwright(determinism_check.mjs를 쓸 때)
저장소Repository: deterministic-html-motion-render
토픽Topics: motion-graphics html video playwright determinism animation rendering claude-skills

2026-10-18 기준: 저장소의 테스트를 로컬에서 실행해 통과했고, 예제 출력은 저장소의 examples 폴더를 실제로 실행한 결과입니다.