skill-motion: 코드로 만드는 애니메이션 영화은(는) 무엇을 하나요?
이런 종류의 영화는 JavaScript 파일로, 매 초를 <canvas>에 그리고(seek(t)),
사운드트랙(banda.mp3: 음성 + 음악 + 효과)과 두 가지를 렌더링한 MP4로 구성됩니다.
제작 시간은 약 2시간, ElevenLabs 비용은 몇 센트에 불과하며,
프레임 단위로 수정할 수 있고 인터넷 없이도 라이브 프레젠테이션 내에서 실행됩니다.
두 가지 모드. 스토리(캐릭터, 만화 또는 부드러운 스타일, 감동을 위한)와 상업(실제 제품, 리듬, 약속, 구매를 유도하기 위한).
시작하기 전에 모드를 결정하세요: "마케터", "상업", "프로", "데모" 또는 "클라이언트에게 보여줄"이라고 하면
references/promo.md를 읽고 assets/motor-promo.js를 사용하세요.
| 요청 | 모터 | 참고 문서 |
|---|---|---|
| 생일, 가족, 초대, 캐릭터 스토리 | motor-base.js(만화) 또는 motor-suave.js | guion.md, chispa.md |
| 상업 동영상, 웹/앱 데모, 구매자용 동영상, Reels | motor-promo.js + filmar_web.py | promo.md |
| 브랜드 또는 론칭, 기술적 룩, 다큐멘터리 카메라 | motor-tech.js | motor-visual.md 섹션 9 |
| 기울어지는 지도, 실제 웹 없이 나는 카메라 | motor-3d.js | chispa.md |
| 수치나 메커니즘 설명: 치수, 라벨, 판독값, 기술 도면 | motor-acotaciones.js(다른 모터와 함께) | motor-visual.md 섹션 12 |
| 3D 장면을 공전하거나 탐색하는 카메라 촬영 | Orbita3D (motor-3d.js 끝에 있음) | motor-visual.md 섹션 13 |
이것을 작동하게 만드는 것은 기술이 아니라 세 가지 습관입니다: 말하는 모든 것이 사실, 추측 대신 Deepgram으로 청취, 렌더링 전에 스틸 시트로 확인. Claude는 실행 중인 동영상을 보거나 듣지 못합니다. 이 두 가지 제어가 에이전트의 눈과 귀입니다.
필요 사항
Node 18 이상, Python 3, ffmpeg 및 Chrome. 음성 및 음악을 위해 ElevenLabs 계정(ELEVENLABS_API_KEY).
결과를 "듣기" 위해 Deepgram 계정(DEEPGRAM_API_KEY, 선택 사항). INSTALAR.md 참조.
각 항목의 위치
| 필요 항목 | 파일 |
|---|---|
| 번뜩임: "그냥 괜찮음"이 아닌 "와우"를 위한 체크리스트 (대본 전에 읽기) | references/chispa.md |
| 컨셉, 테스트된 스타일, 문구, 음성 배정, 타임 시트 | references/guion.md |
| 음성, 음악, 효과, 믹싱, Deepgram으로 듣기 | references/sonido.md |
| 드로잉 엔진, 캐릭터 및 포즈, 만화 스타일, 구성 규칙 | references/motor-visual.md |
| 렌더링, 라이트 버전, 프레젠테이션, 게시, git | references/entrega.md |
| .js 시작점: 만화 스타일 또는 부드러운 스타일 | assets/motor-base.js(만화), assets/motor-suave.js(부드러운, 나이를 먹는 캐릭터) |
| 영화 보기 및 스틸 시트 페이지 | assets/pelicula.html, assets/hoja.html |
| 프레젠테이션 내 영화(슬라이드 + 컨트롤러) 및 빌더 | assets/pelicula-en-presentacion.html, assets/construir.py |
| 스크립트 | scripts/ (키, 음성, 음악, 내레이션, 효과, 믹싱, Deepgram, 렌더링, 라이트) |
| 포함된 CC0 사운드 효과 | sfx/ (크레딧은 sfx/LICENSES.md) |
| Canvas 위의 가짜 3D (기울어지는 지도, 나는 카메라, 네온 바닥) | assets/motor-3d.js |
| 브랜드 및 론칭을 위한 "테크 & 프로" 스타일: 다큐멘터리 카메라(HUD), 포커스 프레임, 알림, 스캔, 인터페이스 카드, 대시보드, 그리드 바닥 | assets/motor-tech.js 및 references/motor-visual.md 섹션 9 |
| 프로 상업, 제품 데모, 16:9, 9:16 및 1:1 포맷 | references/promo.md, assets/motor-promo.js |
| GPU로 실제 웹 페이지를 프레임별로 촬영 | assets/filmar_web.py |
| 클라이언트 브리프 및 프레임 범위가 포함된 고정 스토리보드 (상업 동영상 그리기 전) | assets/brief-cliente.md, assets/storyboard-plantilla.md, references/promo.md |
호를 그리는 커서, 클릭, 타이핑, 바운스 입력, 드리프트, 카메라 푸시. 상업 동영상의 모든 포인터 이동은 호를 그리며 클릭 전에 멈춤 (cursorPro); 직선 이동은 금지 | motor-promo.js (cursorPro, cursor, tecleo, entra, escalonar, deriva, empuje), references/motor-visual.md 섹션 11 |
| 안전 영역, 벡터 인터페이스, "렌더링 전 확인" 목록, 폴리시 뱅크 | references/promo.md |
한 줄 수정을 위한 DATOS 블록의 대본 수치; 오디오 없는 렌더링 | references/entrega.md 섹션 11 |
대본 주석 ([VISUAL], 일시 정지), 각 숫자를 화면에 단어와 함께 표시 | references/guion.md 섹션 8 |
| 비율과 시간 정지가 포함된 촬영 용어 | references/chispa.md |
| BPM 측정 및 마디별 음악 재정렬 | scripts/pulso.py, scripts/cortar_musica.py, references/sonido.md 섹션 13 |
| 테스트 구간, 부분별 조립, 다시 렌더링 없이 새 오디오 | references/entrega.md 섹션 8 |
| 제품 변경으로 인한 이미 전달된 영화 수정 | references/entrega.md 섹션 10 |
| 본인의 목소리로 인사 및 전단지와 함께 초대 | references/sonido.md 섹션 9, references/entrega.md 섹션 7 |
프로세스
다음 단계를 순서대로 따르세요. 각 단계는 다음 단계로 넘어가기 전에 자체적인 확인 과정이 있습니다.
0. 지금 동영상을 만드는 것이 적절한가? 영화가 비즈니스 수치(이익, 가격, 고객, 기한)를 말할 경우,
대본을 쓰기 전에 해당 수치에 대한 공식적으로 선언된 출처가 있어야 합니다. 두 모델이 다른 숫자를 제시하거나,
숫자가 논의 중인 경우 동영상을 만들지 않습니다: 그 사람에게 알리고 스프레드시트를 열고 대화하자고 제안합니다.
동영상 하나는 2시간이 걸리며 시청자의 머릿속에 숫자를 고정시킵니다. 자세한 내용은 references/guion.md 섹션 9를 참조하세요.
1. 컨셉 (사람과 함께). 모드를 결정합니다(위 참조). 먼저 references/chispa.md: 깨지는 규칙, 반전,
이름으로 부르는 사람들, 돌아오는 캐릭터, "와우" 순간이 포함된 형식입니다. 누구를 위한 것인지, 무엇을 느껴야 하는지,
얼마나 오래 지속되어야 하는지, 어디에 표시될 것인지. 각각 두세 문장과 텍스트 미리보기가 포함된 세 가지 컨셉과
톤(테스트된 스타일은 references/guion.md에 있음)을 제안하세요. 상대방이 아이디어를 주었다면 그대로 따르세요:
요청의 각 요소는 하나의 장면입니다.
2. 주장할 내용 확인. 영화가 제품에 대해 말하는 모든 것은 제품 코드에서 찾을 수 있습니다.
코드에 없으면 말하지 않습니다. 코드에 있지만 비활성화된 경우, 말하고 그 사람에게 알립니다.
존재하지 않는 비즈니스나 프로젝트에도 동일하게 적용됩니다: 각 수치는 GUION.md에 출처와 함께 사실, 가정 또는 제안으로
기록되며, 약속을 나타내는 단어("보장", "이미 존재", "몇 초 만에", "법률 준수", 가격)는 결정되어 어딘가에
기록된 경우에만 사용됩니다(references/guion.md 섹션 9).
3. 대본. 영화 폴더의 GUION.md: 상대방의 원래 요청, 음성, 음악, 초, 누가 말하는지, 문장, 무엇이 보이는지가
포함된 표. 짧은 문장, 트랙당 하나, 중립적인 스페인어, 긴 대시 없음.
4. 음성. source scripts/llaves.sh 및 scripts/voces.py frases.json. Deepgram으로 듣고;
--solo로 잘못된 것을 다시 만드세요. 내레이션이 상대방의 음성 메모인 경우, 문장이 없습니다: references/sonido.md
섹션 9 및 10.
5. 타이밍. scripts/armar_narracion.py <inicios> --total <s>: 문장 사이와 이미지가 스스로 말하는 부분에
공백을 남깁니다. Deepgram으로 동기화를 위해 palabras.json(각 단어의 초)을 추출합니다.
6. 음악. 장면을 따르는 섹션별 계획(scripts/musica.py); scripts/pulso.py로 박자와 볼륨을 측정합니다.
섹션이 다른 위치에 떨어지면 scripts/cortar_musica.py로 재정렬합니다.
7. 믹싱. 포함된 CC0 라이브러리(sfx/) 및 합성 효과(scripts/efectos_sinteticos.py),
scripts/mezclar.py efectos.json을 사용하여 -16 LUFS로 믹싱합니다. 확인: oir_con_deepgram.py --comparar로
내레이션 단독과 사운드트랙을 비교합니다: 어떤 단어도 손실되지 않아야 합니다. 손실되면 해당 초에 재생되는 효과를 낮추거나
음악에 공백을 만듭니다.
8. 그리기. 상업 동영상의 경우, 먼저 브리프와 고정 스토리보드(assets/brief-cliente.md), 제품 촬영
(references/promo.md). 스타일 모터(assets/motor-base.js 만화, assets/motor-suave.js 부드러운,
assets/motor-promo.js 상업)를 mi-pelicula/pelicula.js로 복사하고, 전역 이름을 변경한 다음,
타임 시트에 따라 장면별 함수를 작성하세요. assets/에서 pelicula.html 및 hoja.html 페이지 (.js 및 전역 이름 변경;
다른 글꼴을 사용하는 경우 추가). 일반 캐릭터, 실제 사람은 절대 안 됩니다.
9. 스틸 시트. source scripts/preparar_render.sh 및 node $R/render.mjs pelicula.html fotos.png --stills ...
시트당 9개의 순간, 전체 영화. 확인하고, 가려지거나, 잘리거나, 작거나, 겹쳐지거나, 읽을 수 없는 부분을 수정하고
(일반적인 오류 목록은 references/motor-visual.md), 다시 확인하세요. 상업 동영상의 경우 SEGURAS=1은 안전 영역을
그리고 promo.md는 "렌더링 전 확인" 목록을 제공합니다.
10. 렌더링. node $R/render.mjs pelicula.html <ruta>.mp4 30 1 6을 백그라운드에서 실행하고 MP4를 영화 폴더에
복사합니다. scripts/liviano.sh로 메신저로 보냅니다. 라이트 버전의 한 프레임을 확인합니다. 스타일 변경이 큰 경우,
먼저 구간을 다시 만들고 해당 구간만 렌더링하여 상대방이 움직이는 것을 볼 수 있도록 합니다
(references/entrega.md 섹션 8). 오디오만 변경된 경우 렌더링하지 마세요: 새 사운드트랙을 무음 비디오와 결합하세요.
10.b 동영상 텍스트 읽기. scripts/revisar_texto.sh <ruta>.mp4 "palabra1|palabra2": 최종 MP4에서 초당 1프레임으로 OCR,
제품에서 제거된 각 단어 확인(tesseract 필요). 버튼의 텍스트는 영화 파일에 저장됩니다: 제품 용어가 변경되면
다시 요청하고 촬영합니다(references/entrega.md 섹션 10).
11. 전달. 장면별 요약, 확인된 사항, 상대방이 결정할 사항이 포함된 MP4. 동일한 영화에서 전단지가 생성됩니다
(references/entrega.md 섹션 6 및 7). 프레젠테이션에 사용되는 경우: data-peli 슬라이드, 컨트롤러, 글꼴,
construir.py, 브라우저에서 테스트.
12. 저장. GUION, .js, 페이지, 오디오 mp3 및 json을 git에 저장(wav 및 mp4 제외); 폴더의 README에 섹션 추가.
양보할 수 없는 규칙
- 진실: 제품이나 실제 사람에 대해 지어낸 것은 절대 없습니다. 민감한 사항(낙상, 건강)은 격식 있고 정직한 작은 글씨로만 다룹니다.
- 키: 환경 변수에서
llaves.sh로 읽고 절대 출력하거나 파일에 쓰지 않습니다. - 저작물 복사 금지: 유명 영화의 톤을 요청할 수는 있지만("Up처럼", "슈퍼히어로 예고편처럼"), 캐릭터, 장면, 음악 또는 이름은 절대 복사할 수 없습니다.
- 시간의 순수성:
seek(t)는 상태 없이,Math.random()없이(rng사용),setTimeout없이 실행됩니다. 한 프레임이 이전 프레임에 의존하면 렌더링 결과가 라이브에서 보이는 것과 다릅니다. - 하나의 동영상은 하나의 숫자를 고정시킵니다: 수치의 공식 출처 없이는 동영상이 없습니다. 각 영화는 폴더의
LEEME에 상태(초안, 승인, 본 사람, 버전)를 기록하며, 제3자가 본 후 다시 만들 경우 어떤 수치가 변경되었는지 상대방에게 알립니다(references/entrega.md섹션 12). - 측정, 추정 금지: "좋게 들린다"와 "좋게 보인다"는 Deepgram과 스틸 시트 이후에만 가능합니다.
참고 시간 (1분 영화 기준)
대본 및 음성 20분; 타이밍, 음악 및 믹싱 20분; 그리기 4060분; 스틸 시트 및 수정 20분; 렌더링 및 라이트 버전 5분;
프레젠테이션 및 게시 15분. 시각적 수정은 정상입니다: 각 영화에는 510개의 수정 사항이 있습니다.
웹에서 촬영한 97초 상업 동영상: 렌더링 48초, 모션 블러 포함 3분. 수정 사항이 렌더링 후에 도착하면 다시 렌더링합니다.
앱이 중간에 종료되는 경우
중요한 내용은 이미 영화 폴더(오디오, .js, GUION)에 있으며 렌더러는 ~/.cache/skill-motion-render에서
preparar_render.sh로 자동 재구성됩니다. 각 긴 작업 전에 어느 단계에 있었는지 기록하세요.