site-motion은(는) 무엇을 하나요?

Pro로 표시되거나 노트에 언급되었지만 scenes/ 디렉토리에 없는 씬은 site-motion Pro 씬입니다. 해당 씬에 대한 노트 설명을 참고하여 배우고, scenes/ 디렉토리에 실제로 존재하는 씬(site-motion list)을 사용하여 빌드하세요.

씬은 시간의 순수 함수입니다. render(t)는 이전 상태와 관계없이 동일한 t에 대해 동일한 프레임을 그립니다. 이 하나의 규칙 덕분에 같은 파일이 웹사이트에서 라이브로 재생됨과 동시에 프레임 정확한 비디오로 렌더링될 수 있습니다. 내보내기 도구는 단순히 모든 프레임 시간을 탐색하며 스크린샷을 찍습니다.

저장소 루트: 이 파일이 위치한 폴더 (git clone https://github.com/Shivraj97/site-motion ~/.claude/skills/site-motion 으로 설치하거나, 해당 위치에 클론을 링크하세요). Node 22+, Chrome, ffmpeg가 필요합니다. npm 설치는 필요하지 않습니다. 어떤 프로젝트에서든 전체 경로로 CLI를 실행하면 빌드와 렌더링 결과물이 해당 프로젝트의 out/ 폴더에 생성되며, --tokens와 --content는 해당 프로젝트를 기준으로 한 상대 경로를 사용합니다:

SM=~/.claude/skills/site-motion/bin/site-motion.mjs
node $SM init card-story --tokens ledger          # ./brand.json (프리셋에서)과 ./card-story.json 파일을 생성하여 편집 가능
node $SM make card-story --tokens ./brand.json --content ./card-story.json --out public/motion/story.html

씬을 프로젝트 소스 코드에 포함시켜 팀이 직접 편집할 수 있게 하려면 make 대신 add를 사용하세요. 이 명령어는 scene.js, scene.css, content.json, tokens.json 파일을 public/motion/<scene>/ (또는 public/ 디렉토리가 없으면 motion/<scene>/)으로 복사하고, 플레이어와 공급업체 라이브러리를 runtime/으로 복사하며, 단일 파일 임베드인 <scene>.html을 작성합니다. 복사된 폴더는 build, render, make 명령어에 유효한 씬으로 사용됩니다:

node $SM add ledger-stamp --tokens ./brand.json --content ./ledger.json          # → public/motion/ledger-stamp/ + ledger-stamp.html
node $SM make public/motion/ledger-stamp --tokens public/motion/ledger-stamp/tokens.json --formats png,sheet

저장소 내부에서는 짧은 형식도 동작합니다:

node bin/site-motion.mjs list                                   # 씬 및 토큰 프리셋 목록 출력
node bin/site-motion.mjs make iso-blocks --tokens mint          # mp4, webp, 포스터 빌드 + 렌더링
node bin/site-motion.mjs make card-story --tokens ./brand.json --content ./my-story.json --formats mp4,webm,webp,gif,png,sheet
node bin/site-motion.mjs build window-stack --tokens night --out public/hero.html   # 라이브 임베드만 빌드
node bin/site-motion.mjs render out/hero.html --formats mp4 --scale 2 --range loop        # 기존 빌드 내보내기

출력물은 out/<content>-<tokens>/ 디렉토리에 저장됩니다. --range loop는 (GIF와 WebP의 기본값인) 무한 루프만 내보내고, full은 (MP4와 WebM의 기본값인) 인트로와 한 번의 루프를 포함합니다. sheet는 4×3 연락처 시트를 작성합니다: 항상 하나를 만들고 확인하세요.

워크플로우

**전체 사이트 (여러 섹션 또는 페이지)**는 하나의 씬이 아닌 계획부터 시작합니다. 프로젝트에서 node $SM plan을 실행하세요:

섹션을 알고 있을 때는 --brief brief.md와 함께 실행하세요. 이것이 최고의 입력입니다. 사이트의 실제 카피를 바탕으로 브리핑을 작성하세요:

# Acme: 제품이 하는 일을 한 줄로 요약
## home
- hero: 히어로 헤드라인
- feature: 각 기능 섹션의 제목과 그 아래 한 줄 설명
## pricing
- hero: …

또는 --url https://their-site.com[,https://their-site.com/pricing]을 사용하여 라이브 페이지의 실제 제목을 읽어옵니다.
다른 방법이 없을 때는 --pages home,features,pricing --about "…"을 사용합니다 (일반적인 선택; 그렇게 명시하세요).

이 명령어는 각 섹션을 하나의 씬에 매핑하며, 각 씬은 한 번만 사용되고 모두 동일한 스타일을 공유합니다. 스타일은 홈 히어로의 스타일로, site-motion.json에 고정됩니다. site-motion-plan.png를 생성합니다: 각 섹션이 해당 씬의 브랜드와 스타일로 표현된 프레임과 점수 평가 결과가 상단에 표시됩니다. 사용자에게 시트를 보여주고 plan apply 전에 승인을 받으세요.

?로 표시된 선택은 강력한 일치 항목이 없었음을 의미합니다. 해당 노트 (예: "ledger-stamp가 더 잘 맞지만 home.hero에 사용됨")를 읽고, 씬을 교체하거나(plan swap <slot> <scene>), 더 나은 씬을 재사용하거나, 라이브러리에 해당 스토리에 맞는 씬이 없다고 사용자에게 알리세요.
약한 선택에 대해 언급하지 않고 적용하지 마세요.

plan apply는 모든 씬을 추가하고 각 섹션의 임베드 코드를 출력합니다. 그런 다음 각 씬의 content.json에 해당 카피를 작성하고, sync를 실행한 후 score --project로 마무리하세요.

단일 씬의 경우 아래 단계를 따르세요.

먼저 디자인 시스템을 확보하세요. 토큰은 색상과 타이포그래피의 유일한 출처입니다. 다음 순서로 찾으세요: 프로젝트의 토큰/테마 파일 (CSS 변수, Tailwind 설정, tokens.json), 라이브 사이트 (계산된 스타일 측정), 마지막으로 질문. 이를 tokens/<brand>.json 형식으로 작성하세요 (아래 형태 참조). 팔레트가 존재하는 한 색상을 임의로 만들지 마세요; 토큰의 h.mix(a, b, p)를 사용하여 음영을 파생하세요.

제품의 스토리를 전달하는 아키타입을 선택하거나 새 씬을 작성하세요:

씬	전달하는 스토리	렌더러
`iso-blocks`	인프라, 플랫폼, "많은 부품의 협력": 타일 바닥 위에 각 면에 실시간 데이터가 있는 블록들	SVG
`card-story`	작업을 줄여주는 워크플로우: 기능 목록이 제품 카드를 상태별로 이동시킴	DOM
`window-stack`	"당신이 작업하는 곳에서 작동합니다": 페인트 Canvas 배경 위의 앱 창들, 단계를 수행하는 에이전트	Canvas + DOM
`live-room` Pro	멀티플레이어: 앱 창 위의 이름이 있는 커서, 제안, 통과된 투표, 배포된 변경 사항, 활동 티커	Canvas + DOM
`leaderboard`	신용 및 순위: 기여가 행에 도착하고, 포인트가 올라가며, 행이 재정렬됨	DOM
`bloom-flow`	자동화: 이벤트가 워크플로우 그래프를 따라 실행되고 각 단계가 생성적인 꽃으로 피어남	Canvas + SVG
`signal-field`	혼란 → 구조화: 잡음이 있는 가닥이 게이트를 통과하여 깔끔한 차선으로 나옴	p5.js
`drop-pile`	다수 → 하나: 작업 항목이 실제 물리 엔진을 따라 하나의 트레이로 떨어지고, 카운터가 집계함	Matter.js (baked)
`galton-router`	라우팅, 승인, A/B 테스트: 지불금이 못판을 통해 떨어지고, 규칙이 스위치를 전환하며 흐름이 최적의 저장소로 이동함	SVG (시드 기반 무작위 보행)
`receipt-printer`	혼란 → 구조화: 문서가 슬롯으로 들어가고, 각 추출된 필드와 신뢰도가 표시된 영수증이 인쇄됨	DOM + SVG
`score-sheet`	오케스트레이션, 멀티에이전트: 악보로 작성된 실행, 각 에이전트가 작업하는 동안 오선이 진동함	SVG
`css3d-stack`	아키텍처, 레이어: 실제 HTML 박스가 CSS 3D로 분리되며 요청이 통과함	CSS 3D
`loom`	다수 → 하나, 통합: 각 도구는 날실 띠로, 하나의 능직 천으로 짜여져 제품의 빔에 감김	Canvas 2D
`domino-run`	자동화, 트리거: 하나의 공이 단계별로 그룹화된 도미노 체인을 넘어뜨리고, 각 단계는 파동이 도달할 때 불이 켜짐	Matter.js (baked)
`weather-board`	안정성, 장애 조치: 폭풍 (셰이더 구름, 비, 번개)이 상태 맵의 한 지역에 형성되고, 트래픽이 우회되며, 실패 요청 0건으로 맑아짐	WebGL 셰이더 + DOM
`ledger-stamp`	승인, 규정 준수, 신뢰: 지불금이 정책 스캐너를 지나는 색인된 벨트를 타고 이동하고, APPROVED 도장 프레스와 서명 및 봉인 프레스를 거쳐 감사 추적에 기록됨; 한도 초과분은 HELD로 도장되고 두 번째 승인자를 기다림	SVG + DOM
`grain-tally`	메트릭, 규모: 수천 개의 입자 (각각 실제 이벤트의 고정 배치)가 먼지 고리로 숨 쉬고, 총계 숫자로 흘러들어간 후 소스별로 하나의 막대에 정렬되어 정확한 개수 표시; 숫자는 데이터로부터 구성되며 카운트업되지 않음	Canvas 2D (입자, 순수 t)
`lens-of-order`	혼란 → 구조화, 분류, 보는 AI: 1비트 디더링된 떠다니는 블롭 필드 (아직 이해되지 않음); 확대 렌즈가 각 블롭을 클래스 색상으로 채우고, 윤곽을 그리고 신뢰도로 레이블을 붙이며, 희미해지는 색상 흔적을 남김	Canvas 2D (셀당 필드, Bayer 디더)
`water-slide-funnel`	전환 퍼널: 라이더가 단계별로 하나의 경사로를 미끄러져 내려가고, 각 단계의 웅덩이가 해당 단계의 이탈자를 포착함	SVG
`gold-pan` Pro	입력 시 검색: 키 입력마다 팬이 회전하여 세 개의 가격이 표시된 금덩이가 남을 때까지 계속됨	Canvas 2D
`museum-heatmap` Pro	제품 분석: 방문자 발자국이 사람들이 멈추는 기능 주변의 바닥을 데우고; 순위는 열에서 비롯됨	Canvas 2D
`cell-division`	데이터베이스 분기: 메인이 분기로 나뉘고, 하나는 폐기되며, 하나는 변경 사항과 함께 병합됨	Canvas 2D (메타볼)
`scratch-off` Pro	예측: 항공사 게시판이 따라잡기 전에 호일이 실제 출발 시간을 긁어냄	Canvas 2D
`sieve-tray` Pro	조기 탐지: 마커가 미세한 망을 통과하고; 잡히는 소수만 들어 올려져 플래그 지정됨	Matter.js (baked)
`rube-goldberg` Pro	전후 비교: 영수증 구슬이 다섯 개의 오래된 장치에서 막히다가 두 번째 장치에서 하나의 슈트로 떨어짐	SVG
`language-balloons` Pro	지역화: 여덟 개의 스크립트로 된 단어 풍선이 떠올라 각 로케일의 문장을 조립함 (RTL 포함)	Matter.js (baked)
`balloon-deploy` Pro	배포: 각 빌드 단계가 외피를 부풀리고; 100%에서 릴리스가 이륙함	SVG
`pufferfish` Pro	오토스케일링: 복어가 각 트래픽 웨이브에 맞춰 부풀어 오르는 반면, 고정 용량 물고기는 흔들림	SVG
`gear-tiers` Pro	가격 정책: 캠핑 장비(텐트에서 베이스캠프까지)로 그려진 요금제, 월간/연간 전환 포함	SVG
`permission-chessboard` Pro	역할 및 권한: 각 역할 말이 보드에 착지하여 사용할 수 있는 칸만 불을 밝힘	SVG
`tree-rings`	연간 리뷰: 각 연도별로 하나의 나이테, 연도가 바빴던 만큼 넓고, 첫 번째 일에 대한 노치 포함	SVG
`parchment-changelog`	변경 로그: 한 번에 한 릴리스씩 두루마리가 펼쳐지고, 각 릴리스는 출시될 때 잉크로 쓰임	SVG + DOM
`moving-boxes`	마이그레이션: 핸드 트럭이 각 이전 도구의 상자를 새 건물로 운반하며, 아무것도 잃지 않음	SVG + DOM
`privacy-pebbles` Pro	PII(개인 식별 정보) 삭제: 스퀴지가 모든 개인 정보를 동일한 조약돌로 바꾸고; 문장은 여전히 읽힘	SVG + DOM
`ant-trail` Pro	자동 분류: 개미가 각 스와이프의 영수증, 메모, 승인을 올바른 원장 슬롯으로 운반함	Canvas 2D
`sunrise-payroll` Pro	글로벌 급여: 일출이 8개 시간대를 가로질러 각 도시에 해당 시간대의 오전 9시에 지급함	SVG
`whiteout` Pro	평온: 복잡한 대시보드가 안개로 사라지며, 중요한 하나의 숫자만 남김	WebGL 셰이더 + DOM
`ink-flood` Pro	테마, 화이트 라벨: 페인트 칩이 전체 제품을 새로운 색상 배합으로 채움	SVG
`integration-deck` Pro	통합: 각 도구는 하나의 아이소메트릭 매크로 패드의 키이고; 워크플로우가 코드로 연주되는 동안 런 로그가 각 단계를 입력함	Three.js
`margin-rails` Pro	출처: 메모가 자체적으로 작성되는 동안 이전 파일에서 가져온 구절이 출처를 명명하는 레일을 따라 미끄러짐	SVG + DOM
`pigeonhole-wall`	메모리: 문서가 레이블이 지정된 비둘기칸에 정리되고, 요청이 필요한 세 가지 출처를 가져옴	SVG + DOM
`redline-front` Pro	계약 검토: 검토 전선이 문서를 휩쓸고 내려와 확인된 권한과 함께 완성된 수정본으로 반환함	SVG + DOM
`step-rail`	작동 방식, 온보딩: 토큰이 번호가 매겨진 단계를 따라 이동하고; 각 카드는 해당 단계가 생성한 것을 표시하며 마지막 단계에서 결과가 도착함	SVG + DOM
`pipeline-board`	워크플로우, 파이프라인: 카드가 칸반 보드에서 열별로 진행되며 카운트와 총계가 따라옴	DOM
`account-health`	유지, 고객 성공: 상태 테이블이 한 달을 다시 재생하고; 하나의 계정이 위험으로 전환되며, 플레이북이 실행되어 복구됨	SVG
`split-wipe`	전후 비교, 통합: 분할기가 흩어진 수동 작업을 가로질러 휩쓸고 각 조각이 하나의 제품 표면에 맞춰짐	DOM
`roadmap-rail`	로드맵, 마일스톤: 오늘 마커가 시간 축을 따라 이동하고; 출시된 마일스톤이 채워지며 주요 출시가 카드로 열림	SVG
`trust-rings`	보안, 규정 준수: 요청이 데이터 주변의 동심원 제어 링을 통과하고; 권한 없는 요청은 중단되어 기록됨	SVG
`balance-scale`	가격 정책, 품질 대 비용: 세 개의 저울 접시, 각 기울기는 점수에서 계산됨; 우리 쪽은 품질로 기울어짐	SVG
`crate-discrepancy`	조정: 트레이가 상자에서 들어 올려져 포장 명세서와 대조되고; 누락된 하나가 메모와 함께 떠오름	SVG + DOM
`press-qa`	테스트, CI: 빌드가 프레스에서 나오고; 팔이 실패한 테스트가 있는 빌드를 슈트로 던지고 재실행 시 통과함	SVG
`radar-sweep`	관찰 가능성: 실행 중인 모든 작업은 레이더 스코프의 블립이고; 커서가 들어와 실패한 작업을 일시 중지함	Canvas 2D + DOM
`agent-checkout`	제품 UI 데모, 에이전트 결제: 구매 요청, 마스킹된 가상 카드 자동 입력, 한도 미터가 금액만큼 이동, 영수증이 목록에 추가됨	DOM + ui-kit
`click-to-done`	제품 UI 데모, 모든 단일 액션 기능 (초대, 보내기, 승인, 게시): 브라우저 프레임의 실제 화면, 커서가 입력, 선택 및 클릭, 카메라가 결과에 가까워졌다가 멀어짐	DOM + ui-kit
`dashboard-push`	제품 UI 데모, 분석 및 보고: 헤드라인 수치가 차트가 그려짐에 따라 구성되고, 커서가 툴팁을 스크러빙, 카메라가 중요한 순간에 집중, 범위 전환이 모든 시리즈를 변형	DOM + SVG + ui-kit
`phone-stack`	제품 UI 데모, 모바일 및 알림: 각 알림이 신호 링과 함께 잠금 화면에 도착하고, 탭하면 최신 알림이 앱 화면으로 열리고, 홈으로 스와이프하면 사라짐	DOM + ui-kit
`shot-demo`	스크린샷 기반 제품 UI 데모: 프레임 안의 고객 실제 스크린샷; 커서가 실제 필드에 입력하고 버튼을 클릭하며, 브랜드 색상으로 값이 변경되고, 스포트라이트와 콜아웃이 결과에 표시됨	DOM + 스크린샷 + ui-kit

integration-deck은 3D 표준입니다: 하나의 촉각적 객체, 하나의 물리적 동작, 평평한 툰 밴드, 잉크 윤곽선, 실제 아이소메트릭 카메라 및 브랜드 타이포그래피 레이블. 다른 Three.js 객체 씬 (궤도 허브, 정렬 벽, 돌출 로고, glTF 쇼케이스)은 재작업될 때까지 공개 세트 외부에 있습니다; 3D 도구 (vendor/three-full.min.js, vendor/three-mesh-bvh.min.js, vendor/three-csm.min.js)는 저장소에 포함되어 있습니다.

씬 작성: 새 씬을 작성해야 하는 경우 기존 씬을 템플릿으로 사용하여 render(t) 함수를 구현하세요. 씬은 DOM 요소를 조작하거나 Canvas, SVG, WebGL, 또는 CSS 3D를 통해 렌더링할 수 있습니다. content.json은 텍스트와 데이터를, tokens.json은 색상 및 타이포그래피를 정의합니다. 씬의 특정 구현은 scenes/ 디렉토리의 기존 씬을 참조하세요.
로컬에서 빌드 및 테스트: make 명령어를 사용하여 씬을 빌드하고 라이브 HTML 출력을 확인하세요.
내보내기: 원하는 포맷(MP4, WebM, WebP, GIF, PNG, 연락처 시트)을 지정하여 render 명령어로 다양한 출력을 생성하세요. range 매개변수로 루프 또는 전체 재생을 제어할 수 있습니다.

API 참조

`site-motion.mjs` CLI

명령어:

init <scene> [--tokens <preset|path>]: 새 씬 구성을 초기화합니다. content.json과 tokens.json 템플릿을 생성합니다.
make <scene> [--tokens <preset|path>] [--content <path>] [--out <path>] [--formats <list>]: 씬을 빌드하고 내보냅니다. --formats는 쉼표로 구분된 형식 목록입니다 (기본값: mp4,webp,poster).
render <html> [--formats <list>] [--scale <n>] [--range <loop|full>]: 기존에 빌드된 HTML 파일을 내보냅니다.
add <scene> [--tokens <preset|path>] [--content <path>]: 씬 파일을 프로젝트로 복사합니다.
build <scene> [--tokens <preset|path>] [--content <path>] [--out <path>]: 라이브 웹 임베드만 빌드합니다 (내보내기 없음).
list: 사용 가능한 씬과 토큰 프리셋을 나열합니다.
plan [--brief <path>] [--url <url>] [--pages <list>] [--about "..."]: 전체 사이트 계획을 생성합니다.
plan apply: 계획의 각 씬을 프로젝트에 추가합니다.
plan swap <slot> <scene>: 계획의 슬롯에 대한 씬을 교체합니다.
sync: 각 씬의 content.json을 다시 읽고 출력을 업데이트합니다.
score [--project]: 각 씬의 점수를 평가합니다.

토큰 파일 형식 (`tokens/<brand>.json`)

{
  "color": {
    "primary": "#...",
    "secondary": "#...",
    "background": "#...",
    "surface": "#...",
    "onPrimary": "#...",
    "onSecondary": "#...",
    "onBackground": "#...",
    "onSurface": "#..."
  },
  "typography": {
    "fontFamily": "...",
    "fontSize": "...",
    "fontWeight": "...",
    "lineHeight": "..."
  },
  "animation": {
    "duration": "...",
    "easing": "..."
  }
}

h.mix(a, b, p)을 사용하여 두 토큰 색상 a와 b를 혼합하고 혼합 비율 p (0에서 1 사이)로 음영을 파생할 수 있습니다.

토큰 해석기

토큰 해석기는 디자인 시스템 토큰을 씬에서 사용할 수 있는 실제 CSS 값으로 변환하는 내장 유틸리티입니다. 이는 다음을 지원합니다:

CSS 변수 참조 해결
색상 혼합 (h.mix(a, b, p))
색상 공간 변환 (예: sRGB에서 P3로)
상대적 타이포그래피 크기 계산
애니메이션 지속 시간 및 이징 함수 맵핑

기술 요구 사항

Node.js 22+ (최신 LTS 권장)
Chrome/Chromium (헤드리스 브라우저 자동화용, Puppeteer 사용)
ffmpeg (시스템 경로에 설치되어 있어야 함, 비디오 인코딩용)
npm 종속성 없음; 모든 것이 저장소에 포함되어 있음 (vendor/)

디렉토리 구조 (저장소)

~/.claude/skills/site-motion/
├── bin/
│   └── site-motion.mjs          # 메인 CLI
├── scenes/                       # 모든 내장 씬
│   ├── iso-blocks/
│   ├── card-story/
│   ├── window-stack/
│   ├── ledger-stamp/
│   └── ...
├── tokens/                       # 토큰 프리셋 (브랜드)
│   ├── mint.json
│   ├── night.json
│   ├── ledger.json
│   └── ...
├── vendor/                       # 타사 라이브러리
│   ├── three-full.min.js
│   ├── three-mesh-bvh.min.js
│   ├── three-csm.min.js
│   ├── p5.min.js
│   ├── matter.min.js
│   └── ...
├── SKILL.md                      # 이 파일
└── README.md                     # (있는 경우)

추가 참고 사항

성능: scale 매개변수는 렌더링 해상도를 조정합니다. --scale 2는 2배 해상도로 내보내 레티나 디스플레이에 적합합니다.
루프 내보내기: GIF 및 WebP는 기본적으로 loop 범위를 사용하며, 이는 원활한 루프에 적합합니다. MP4 및 WebM은 기본적으로 full (인트로 + 루프)을 사용합니다.
연락처 시트: 프레임 정확도를 확인하는 데 매우 유용합니다. 항상 하나를 생성하세요.
오류 처리: 씬에 오류가 있으면 CLI가 자세한 오류 메시지와 함께 관련 정보를 출력합니다.
맞춤형 씬: 새 씬을 작성할 때는 기존 씬 구조를 따르고 render(t)만 구현하면 됩니다. DOM 조작 및 Canvas/SVG/WebGL 등 다양한 렌더링 방식을 지원합니다.

site-motion

site-motion란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서

site-motion은(는) 무엇을 하나요?

워크플로우

API 참조

`site-motion.mjs` CLI

토큰 파일 형식 (`tokens/<brand>.json`)

토큰 해석기

기술 요구 사항

디렉토리 구조 (저장소)

추가 참고 사항

관련 스킬

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

즐겨 사용하는 AI에게 물어보기

문서

site-motion은(는) 무엇을 하나요?

워크플로우

API 참조

site-motion.mjs CLI

토큰 파일 형식 (tokens/<brand>.json)

토큰 해석기

기술 요구 사항

디렉토리 구조 (저장소)

추가 참고 사항

관련 스킬

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

`site-motion.mjs` CLI

토큰 파일 형식 (`tokens/<brand>.json`)