david-d2c2/motion-promo-reels

코드로 생성된 모션 그래픽 홍보 영상

15~30초 분량의 영상이 순수 코드로 생성됩니다: 2D 캔버스 → 프레임 → ffmpeg, numpy로 합성된 오디오. 비디오 템플릿, After Effects, 서드파티 음악이 필요 없습니다. 세 가지 경우를 다룹니다:

• 개인 또는 개인 브랜드(16:9)
• 소량의 제품(9:16)
• 스토어의 전체 카탈로그(9:16, 수십 또는 수백 개의 영상)

기본 원칙: 절대 지어내지 않습니다. 영상에 표시되는 모든 수치, 가격, 색상, 기능은 확인된 출처(웹사이트, 스토어 API, 제품 페이지 또는 프로젝트 문서)에서 가져옵니다. 확인할 수 없는 내용은 보류 중으로 표시하고 그렇게 말합니다.

이 패키지에는 ${CLAUDE_SKILL_DIR}/templates/에 세 가지 완전한 템플릿이 포함되어 있습니다(claude.ai 채팅에서는 이 파일 옆의 templates/). 사용자의 프로젝트에 가장 가까운 템플릿을 복사하여 엔진을 처음부터 다시 구축하는 대신 적응시키십시오(섹션 4 참조). templates/README.md에는 각 템플릿에서 변경해야 할 사항이 나와 있습니다.

모든 화면 텍스트는 브랜드 대상자의 언어로 작성하고, 사용자에게는 사용자의 언어로 응답하십시오. 고정된 인터페이스 문자열("from", "colors", "NOT HIM"…)은 템플릿의 textos 블록을 통해 재정의되며, 엔진을 직접 편집하지 마십시오. no_es에서 사람의 성별을 일치시키십시오.

0. 케이스 선택

케이스	템플릿	형식	길이	개그 단위
개인 또는 개인 브랜드	persona-16x9	1920×1080	27초	하나, 수동 작성
웹사이트 또는 서비스	persona-16x9, 적응	16:9 또는 9:16	20–30초	하나, 수동 작성
소수 제품(≤10)	producto-9x16	1080×1920	15.5초	제품당 하나, 수동 작성
카탈로그(수십~수백 개)	catalogo-9x16	1080×1920	15.5초	카테고리당 하나, 각 제품 데이터로 채워진 템플릿 구문 사용

사용자가 지정하지 않은 경우 제품에는 9:16을 사용하고 한 줄로 설명하십시오.

1. 리서치(스크립트 한 줄을 작성하기 전에)

출처, 순서대로:

1. 프로젝트 폴더(있는 경우). CLAUDE.md, AGENTS.md, 의사 결정 로그, 보고서 및 소셜 미디어 계획을 읽으십시오. 여기에 브랜드 및 카피 규칙(예: "타사 브랜드 이름 금지", "비공식 어조", "빈 수사 금지")과 디자인 토큰, 중재 규칙 및 법적 고지사항(AI 라벨링)이 있습니다. 이러한 규칙은 모든 창의적인 아이디어보다 우선합니다.
2. 공식 웹사이트. 히어로, 서비스, 통계, 방법, 스택, 자격 증명. JS가 많은 사이트에서는 브라우저를 사용하고 document.body.innerText를 섹션별로 읽으십시오.
3. 온라인 스토어:
   • WooCommerce: /wp-json/wc/store/v1/products?per_page=100&page=N 및 /products/<id>. 가격은 센트 단위입니다. prices.price_range에서 min ≠ max → "from"; on_sale + regular_price → 취소선 가격; attributes(색상, 크기, 측정값); description(종종 구조화된 글머리 기호 목록 포함); permalink.
   • Shopify: /products.json 및 /products/<handle>.json.
   • 슬러그나 URL을 추측하지 마십시오: permalink에서 읽으십시오.
4. 웹 검색. 개인에게 유용하지만, 흔한 이름은 동명이인을 반환합니다. 그런 경우 숨기지 말고 스크립트 소재로 전환하십시오(섹션 2 참조).
5. 사진: 먼저 로컬 프로젝트 파일을 사용하십시오. 클라우드 샌드박스는 종종 스토어에서 다운로드할 수 없습니다. 계속 재시도하지 마십시오. 로컬 사진을 사용하거나 코드로 제품을 그리십시오(줄무늬, 새틴 웨이브 및 간단한 모양이 예상보다 잘 나옵니다).

데이터를 읽은 날짜를 기록하십시오: 가격은 시간이 지나면 변합니다.

2. 컨셉: 개그

개그는 제품이나 사람의 실제 속성을 비디오 자체가 수행하는 동작으로 전환한 것입니다. 단순히 덧붙인 농담이 아닙니다. 모든 템플릿에 구현된 예시 메커니즘(개그 ID는 코드에서 스페인어):

메커니즘	실제 속성	비디오 동작
invisible	투명, 숨김, 은밀	빈 프레임: "여기에 케이스가 있습니다. 안 보이시죠? 당연합니다, 투명하니까요." 화면이 지퍼처럼 열립니다.
contador(카운터)	많은 양(미터, 시간, 단위)	"이 릴은 15초입니다. 이 롤은 50m입니다. 다 쓸 시간이 없을 겁니다." 카운터가 실행됩니다.
diagonal	바이어스 컷, 줄무늬 또는 대각선 디자인	텍스트가 45° 기울어지고 줄무늬가 화면을 가로지릅니다.
brillo(광택)	광택 또는 새틴 마감	"이 텍스트는 무광입니다. / 이것은 광택이 납니다."(광택과 함께)
cortar(자르기)	끈, 케이블, 넥타이 없음	두 개의 실이 텍스트를 들어 올리고, 잘리고, 텍스트는 그대로 있습니다.
elevar(들어올리기)	플랫폼, 푸쉬업, 높이	텍스트가 "쿠션" 위로 올라갑니다.
secuencia(순서)	많은 크기, 너비 또는 변형	실제 변형이 하나씩 넘어갑니다: "여기, E부터 H까지."
quitar(제거)	"X 없음"	두 개의 고리가 그려지고 날아갑니다: "사라짐."
ritmo(리듬)	스포츠, 움직임	단어가 비트에 맞춰 떨어집니다.
reordenar(재배열)	다용도, 컨버터블	두 줄이 위치를 바꿉니다: 평행, 교차, V자형.
patron(패턴)	자수, 프린트, 레이스	장식 패턴이 스스로 그려집니다.
calma(평온)	민감한 카테고리(건강, 수술 후, 임신…)	개그 없음, 사운드 히트 없음, 타악기 없음: 평온한 분위기.
homonimos(동명이인, 개인)	구글에서 흔한 이름	investigar("Name")은 동명이인을 "NOT THEM"으로 지우고 "SOURCE FOUND"를 표시합니다.

규칙:

1. 하나의 실제적이고 확인 가능한 속성.
2. 세 줄: 설정, 반전, 결정타(결정타는 이탤릭체 또는 강조 색상).
3. 결정타는 거짓이어서는 안 됩니다. 제품 페이지에 명시되지 않은 내용은 주장하지 마십시오. 조건부 구문(구성의 si/sino)은 설명이 뒷받침할 때만 결정타가 나타나도록 합니다.
4. 전체 비디오에 걸쳐 고정된 자기 참조적 요소, 업계와 연결됨: HUD(타임코드 및 프레임 카운터, 기술), 스티치 라인(스티치 카운터, 공예/직물), 릴을 "측정"하는 줄자(패션, 사이즈). 아웃트로에서 해소하십시오("이 릴은 15.5초입니다. 하나의 사이즈가 모두에게 맞습니다.").
5. 신체에 대해 절대 농담하지 마십시오. 민감한 카테고리는 calma를 사용하십시오. 추상적인 그림이 신체 실루엣으로 읽힐 수 있는지도 확인하십시오.
6. 빈 수사 금지, 경쟁사와의 비교 금지.

3. 구조

9:16 제품(15.5초, 30fps = 465프레임)

장면	시간	내용
후크	0–3.0	개그
제품	3.0–5.6/5.8	이름 + 바운스 있는 사진(또는 절차적 그림, 또는 플레이스홀더 카드)
범위	~2.8초	실제 색상 수, 또는 범위(크기), 변형 및 이름과 함께 색상
사실	~2.6초	제품 페이지의 세 가지 사실, 애니메이션 체크표시 포함
가격	~1.8초	실제 가격, "from" 또는 세일, 해당하는 경우 세금 정보
아웃트로	13.2–15.5	로고 또는 브랜드, 알약 모양의 웹사이트, 배송 또는 CTA, 마지막 윙크

16:9 개인 또는 브랜드(27초): 터미널 → 글리치와 함께 동명이인을 지움 → 드롭(출처 발견 + 헤드라인) → 카운터가 있는 통계 → 단계별 방법 → 도구 스택 마키(자기 참조 항목에서 멈춤: "↑ 그게 나야") → "이 비디오: 0개 템플릿 · N줄의 코드"(실제 개수) → 개인의 인용문 → 모노그램, 이름 및 CTA가 있는 아웃트로.

4. 엔진

<project>/<reels-folder>/
├── METODO.md        방법, 규칙 및 체크리스트(인간용)
├── CLAUDE.md        상태 및 할 일(다음 세션용)
├── config.json      (카탈로그) 스토어, 속성, 레이블, 팔레트 및 카테고리 → 개그 + 구문
├── productos.json   브랜드 + 제품당 하나의 블록
├── motor.html       1080×1920 또는 1920×1080 캔버스; window.renderFrame(f)는 결정론적입니다
├── render.js        puppeteer-core → 프레임당 JPEG 하나 → ffmpeg image2pipe; 그런 다음 오디오 및 먹싱
├── audio.py         numpy/scipy 합성, motor.html과 동일한 큐 테이블 사용
├── catalogo.js      (카탈로그) API → 제품 시트: 개그, 구문, 사실, 브랜드 제거
├── extraer.js       (카탈로그) 브라우저 UA로 카탈로그 및 사진 다운로드, 일시 중지; REVISAR.md
├── fonts/           로컬 woff2 + 라이선스(fontsource: `npm pack @fontsource/<family>@<version>`)
├── img/             로컬 사진
└── out/             최종 비디오

기술 키:

• 결정론: 모든 프레임은 t = f/FPS에서 계산됩니다. requestAnimationFrame, 시드되지 않은 무작위성 없음(hash(n) 사용).
• 헬퍼: clamp, P(t,a,b)(진행), 이징(eOC, eIOC, eOX, eIX, eOB 바운스 포함), 텍스트용 T_()(letterSpacing 및 알파 포함), 텍스트가 들어갈 때까지 줄이는 fit(), 둥근 사각형용 rr().
• 장면은 로컬 시간 u = t - T.scene을 받는 함수입니다. 전환은 모든 컷에서 ±0.16초의 배경색 와이프입니다.
• render.js: page.evaluateOnNewDocument(spec => window.SPEC = spec), window.READY(글꼴 및 이미지 로드됨)를 기다린 다음 canvas.toDataURL('image/jpeg', .93) → ffmpeg -f image2pipe -c:v mjpeg -i - -c:v libx264 -preset veryfast -crf 18 -pix_fmt yuv420p의 stdin.
  • Chrome을 --allow-file-access-from-files로 실행하십시오. 그렇지 않으면 로컬 이미지가 캔버스를 오염시킵니다.
  • 표준 경로 또는 CHROME_PATH에서 Chrome 또는 Edge를 찾으십시오.
  • 검토를 위해 --stills t1,t2,… 모드를 유지하십시오.
• 믹싱: -af loudnorm=I=-14:TP=-1:LRA=11 -c:a aac -movflags +faststart -shortest.
• 오디오: 브랜드 분위기에 맞는 4코드 진행(기술: 128 BPM, 킥, 베이스 및 플럭 포함; 공예: 112 BPM 피치카토 및 마림바; 우아함: 96 BPM 피아노 및 현악기).
  • 개그별 효과: 지퍼 = 클릭의 가속 버스트; 기계 = 클릭 트레인 + 험; 가위 = 두 번의 스냅; 광택 = 높은 아르페지오.
  • 공유 효과: 컷에서 우쉬, 카운터에서 틱, 가격에서 차임.
  • 킥 아래의 라이트 사이드체인, 제한을 위한 tanh, 그런 다음 정규화.
• Windows에서는 스크립트가 python을 호출하고, Linux 및 macOS에서는 python3을 호출합니다.

5. 지어내지 않고 카탈로그 데이터 얻기(catalogo.js + config.json)

• 표시 이름: marcas_a_quitar(제거할 브랜드, 카피 규칙에 따라) 및 palabras_tipo(일반 유형 단어, 예: "Sneaker" 또는 "Boot")를 제외한 제품 이름. 코드만 남으면 브랜드 없이 이름을 사용하십시오.
• 사실: 설명에서 titulo_datos 아래의 글머리 기호, 구성 제외. 글머리 기호가 없으면 짧은 설명에서 "." 및 ":"로 분할한 구문을 사용하십시오. 세 번째 사실은 재료 속성의 구성으로, EVA와 같은 약어를 유지하십시오.
• 자르기: 구문을 ~54자로 자르십시오. 먼저 쉼표에서 자르십시오. 그렇지 않으면 마지막 종속절("with", "for", "that", "and") 이전에 자르십시오. 전치사나 관사로 끝나지 않도록 하십시오.
• 색상: 이름 → motor.html의 16진수 테이블. 두 톤 색상("Black/White")은 분할 견본을 얻습니다. 알 수 없는 색상은 실제 이름과 함께 중성 회색으로 렌더링됩니다.
• 수동 편집: 제품의 "manual": true는 다음 추출 시 덮어쓰지 않도록 보호합니다.
• REVISAR.md(검토 목록): 민감한 어조, 글머리 기호가 없는 페이지, 사진이나 속성이 없는 제품.
• 신뢰하기 전에 실제 카탈로그에 대해 변환을 테스트하십시오. 추출기를 신뢰하기 전에 함수를 스토어의 브라우저 콘솔에 붙여넣어 테스트하십시오. 다운로드 단계를 테스트할 수 없는 경우 그렇게 말하십시오.

6. 품질 관리(전달 전 필수)

1. 모든 장면에 대해 스틸을 렌더링하고, PIL로 연락처 시트를 만든 다음(입력이 많은 xstack 아님: ffmpeg가 충돌할 수 있음) 확인하십시오. 다음을 확인하십시오:
   • 겹치는 텍스트 또는 잘린 구문;
   • 큰 제목의 악센트가 위의 줄과 충돌;
   • 요소가 다른 줄을 침범;
   • 지나치게 흰색 광택 아래로 사라지는 글자;
   • 속성이 누락된 경우 빈 "—" 블록;
   • 세로 형식에서 아래쪽 절반이 비어 있음.
2. 9:16 안전 영역: 위쪽 약 250px(Reels UI) 또는 마지막 약 320px(캡션)에는 중요한 내용이 없어야 합니다. 장식 요소만 그 아래로 내려갑니다.
3. 데이터: 오늘의 가격, 범위가 있는 경우 "from", 만료될 수 있는 세일, 확인되지 않은 단위(플래그 지정), 확인된 URL.
4. 법률 및 중재:
   • AI 생성 또는 AI 수정된 사람이 있는 사진 → 비디오에 눈에 띄는 라벨(EU AI Act, art. 50; 구성의 ia.mostrar_si_foto). 게시할 때도 공개하십시오.
   • 신체에 표시된 제품: 전체 사진, 카탈로그 스타일, 공격적인 자르기 금지, 적은 화면 시간.
   • 적용되지 않는 반품이나 보증을 약속하지 마십시오.
5. 오디오: ffmpeg -af ebur128 → 약 −14 LUFS. ffprobe로 지속 시간과 해상도를 확인하십시오.

7. 전달

• 사용자의 컴퓨터에서 작업할 때는 모든 것을 프로젝트의 하위 폴더에 작성하고 편집하는 모든 파일의 줄 끝을 유지하십시오. 기존 CLAUDE.md 파일이나 문서를 건드리지 마십시오: 하위 폴더 내에 자신의 파일을 만드십시오.
• METODO.md: 무엇이 있는지, 실행 방법, 각 데이터 조각의 출처, 적용된 브랜드 규칙, 제품 또는 개그 추가 방법, 게시 전 체크리스트 및 알려진 제한 사항.
• 하위 폴더의 CLAUDE.md: 상태, 할 일 및 양보할 수 없는 규칙, 몇 줄로.
• 비디오를 보여주고 요약하십시오: 개그(줄당 하나), 모든 파일의 위치, 재생성 명령어, 아직 확인해야 할 데이터.

일반적인 실수(피하십시오)

• 제품 슬러그 추측. permalink에서 읽으십시오.
• 회전된 텍스트 개그가 다음 줄을 덮는 경우: 텍스트가 회전할 때 줄 위치를 다시 조정하십시오.
• 너무 흰색인 새틴 광택이 글자를 먹습니다. 순수한 흰색 대신 밝은 브랜드 색조를 사용하십시오.
• 색상 스톱이 붕괴되는 견본 그라데이션은 대각선 밴드를 남깁니다. 대신 별도의 클리핑된 광택 레이어를 사용하십시오.
• 가격 범위가 있는 제품의 취소선 가격: 취소선 없이 "from" + 세일 배지를 사용하십시오.
• 제품 페이지에서 누락된 단위(예: "cm" 없는 측정값): 생략하거나 확인을 위해 플래그를 지정하십시오.
• 함께 신체 실루엣을 암시하는 추상적인 모양: 명확한 도형으로 교체하십시오.