사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/whaleyxbt/claude-motion --skill web-sims시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
Web sims
Read sims/README.md first; it has the contract and every command.
When to use this instead of Remotion
- Hundreds of moving things with their own rules (agents, particles, crawlers).
- A 3D object or machine the camera moves around or flies through.
- Anything that is easier to write as a three.js or canvas page than as React.
Motion graphics with type, UI and timed reveals stay in Remotion (src/).
Workflow
- Agree on the idea, the hero moment and the length with the user. Default
format: 1080×1350 layout (4:5), 60 fps, 20–24 s.
- Put every beat in a
timeline.jsonnext to the sim (chapters, the hero
moment, camera keys). Sound scripts read the same file.
- Start from the closest example:
crawlers(agents on DOM text),
dossier (the same plus screen-space overlays), engine (three.js object with cutaway, chapters, fly-through, exploded view, generated sound).
- Simulate anything stateful once at load;
render(t)only reads it. - Build:
node sims/build.mjs <name>. - Review with stills at every beat:
node sims/capture.mjs <name> --stills 0,2,5,8,12,16,20 --cols 4 --out out/sims/<name>-review.png. Open the sheet and check it like the review loop says: frame 0 strong, one focal point per frame, nothing blown out by bloom, text readable on a phone, labels never cover the subject. Fix and repeat.
- Sound: a music track (
--music, the sim getscfg.beatsand should hit
the drop), a generated bed (python3 sims/<name>/sound.py like sims/engine/sound.py), or both mixed with ffmpeg first.
- Capture:
node sims/capture.mjs <name> --size 1080x1350 --out out/sims/<name>.mp4
and look at a sheet of the final file before calling it done.
Lessons from the examples
- Bloom eats detail: keep emissive and additive layers under ~1.0 and raise
them only for the one hero moment.
- Glossy metal plus a low sun gives white streaks. Use roughness ≥ 0.45 and
envMapIntensity ≈ 0.5 on big surfaces.
- One hero object beats a crowd. If parts hide the subject, move them out of
the way or fade them.
- Chapters + a one-line caption per step + labels with real numbers make a
simulation read as an explanation, not just eye candy.
- A camera that flies through the object is worth more than ten orbits.
