faizalmy/brand-film

브랜드 필름

하나의 브랜드 아이덴티티(마크, 사이트, 제품, 이름)에 관한 60초 필름입니다. 최초 승인 필름: ReUI "Refreshed". template/ 에는 그 코드(작동하는 참조 구현)가 포함되어 있으며, 복사하여 적응할 수 있는 일반 라이브러리가 아닙니다.

• brands/<brand>.md: 모든 브랜드별 정보(팔레트, 서체, 텍스트 출처, 로고, 제품, 음악, 규칙, 선호사항). 이 파일을 먼저 읽으십시오. 새 브랜드의 경우 brands/_new-brand.md 에서 작성하십시오.
• references/example-reui-refreshed.md: 승인된 필름의 샷 맵과 프레임 및 히트 정보. 적응해야 할 형식입니다.
• references/reui-frames/: 시각적 템플릿. 승인된 필름의 스틸 38장과 sheet.jpg 가 포함되어 있습니다. 디자인하기 전에 시트를 보고, 확인할 때 스틸을 일치하는 프레임과 비교하십시오.
• references/review.md: 취약점 체크리스트 및 서브에이전트 리뷰 브리프.

사전 요구사항 (먼저 확인하고, 없는 것만 설치)

머신에서 첫 번째 빌드 전에 다음 확인을 실행하십시오. 실패한 것만 설치하고, 사용자에게 설치한 내용을 알리십시오.

필요 사항	확인	설치
Node 20.19+	node -v	brew install node (또는 nvm)
Remotion 및 렌더러	프로젝트 내에서 npx remotion versions	프로젝트 내에서 npm i (버전은 template/package.json 에 고정됨); 기존 프로젝트의 경우: 하나의 공유 버전으로 npm i remotion @remotion/cli @remotion/renderer @remotion/fonts @remotion/media
Chrome for Remotion	npx remotion browser ensure	동일 명령어; Chrome Headless Shell을 다운로드합니다.
ffmpeg / ffprobe (최종 파일 확인)	ffprobe -version	brew install ffmpeg
Python 3 + Pillow (연락처 시트)	python3 -c "import PIL"	pip3 install pillow
librosa + numpy (beat.py, 새 트랙만)	python3 -c "import librosa"	pip3 install librosa numpy
Playwright + Chromium (캡처)	프로젝트 내에서 node -e "require('playwright')"	npm i -D playwright && npx playwright install chromium
음악 배경	public/audio/의 파일	브랜드 프로필이 지정한 소스에서; 절대 임의로 생성하지 마십시오.

Remotion 라이선스: 개인 및 소규모 팀에게 무료입니다. 회사가 크기 제한을 초과하는 경우 회사 라이선스가 필요합니다 (https://remotion.dev/license). 브랜드가 회사인 경우 한 번 언급하십시오.

언어 (모든 브랜드 동일)

• 브랜드 자체의 중성색에서 가져온 하나의 캔버스와 하나의 잉크. 브랜드에 실제로 있는 색상이나 실제 UI 내부에서만 색상을 사용하십시오. 브랜드가 유리, 금, 3D 또는 광택으로 구성되지 않는 한 사용하지 마십시오.
• 하나의 요소가 주도합니다. 그것은 가는 선을 따라 날아가며, 컷을 전달하고 최종 로고에 안착합니다. 모든 샷은 동일한 화면 위치에서 다음 샷으로 요소를 전달합니다. ReUI의 마크에서 이것은 점(dot)입니다. 새 마크에서 이 요소를 찾으십시오: 점, 모서리, 선 끝.
• 모든 선은 실제입니다. 구성 가이드는 로고 자체의 경로에서 비롯됩니다. 화면의 모든 숫자는 측정된 값입니다 (로고 단위, DOM 박스의 px). 장식이 아닙니다.
• 브랜드 자체의 서체 (해당 사이트에서 사용하는 것). 측정값에만 모노 서체를 사용하십시오.
• 제품 UI 위에 로고나 텍스트를 배치하지 마십시오. 레이블은 UI 외부, 여유 공간에 배치하십시오.
• 긴 정적 홀드는 필름의 일부입니다. 차분함은 괜찮지만, 죽은 장면은 안 됩니다.

스토리 형식 (맹목적으로 복사하지 말고 적응)

파트	비트 (60 중)	역할
라인	0-8	주도 요소가 캐럿이 되어 브랜드 자체의 라인을 입력
마크	8-20	요소가 마크로 열림; 마크는 그 구성에서 그려짐
사이트	20-32	로고가 축소되어 사이트 자체의 네비게이션 로고가 되고, 빠른 투어; 히트 시 실제 사이트 상호작용
이름	32-36	워드마크, 비트당 한 글자
제품	36-49	3-4개의 실제 제품 보기, 실제 드래그, 측정된 치수, 하드 컷, 각각 약 3비트
룩스	49-52	각 비트마다 마크를 다르게 그림; 주도 요소는 절대 움직이지 않음
엔드	52-60	로고 안착, 마지막 히트에 글자 정렬, 브랜드 라인 및 도메인

브랜드가 자랑스러워하는 부분에 시간을 할애하십시오. 구성 또는 제품보다 룩스를 줄이십시오.

엄격한 규칙

• 브랜드 텍스트는 복사되며, 작성되지 않습니다. 태그라인, 라인 및 이름은 브랜드 자체 사이트 또는 문서에서 그대로 가져옵니다. 절대 발명, 결합 또는 단축하지 마십시오.
• 제품 UI 내부의 데모 데이터는 콘텐츠가 아닙니다: 그 이름, 숫자 또는 사람을 특정하지 마십시오.
• 실제 UI만, 실제 마우스로 캡처하십시오. 제품을 절대 모킹하지 마십시오.
• 오디오:
  • 음악은 브랜드 프로필이 지정한 소스에서 가져오며, 프로필이 허용하지 않는 한 절대 새로 생성하지 마십시오.
  • 히트는 싱크 포인트에 몇 개의 임팩트와 슬램입니다.
  • 프로필에서 요청하지 않는 한 클릭 또는 타이핑 SFX는 없습니다.
• 해당 턴에 요청하지 않는 한 절대 렌더링하거나 내보내지 마십시오. 편집 후 Studio 미리보기를 전달하고 렌더링을 제안하지 마십시오. 요청 시: 4K, 동일 파일명, 덮어쓰기.
• 시도 아이디어는 중복 컴포지션에 넣으십시오. 스틸을 비교하여 승인된 것이 변경되지 않았음을 증명하십시오. "모두 수정" 또는 "X 제거"는 메인으로 바로 이동합니다.
• 사용자가 프레임을 가리키는 경우 ("3150 제거"). 해당 프레임을 렌더링하고 변경하기 전에 샷 이름을 지정하십시오.

타이밍 시스템 (깨지기 쉬움)

모두 src/Refreshed.tsx 에 있음:

• 시계.
  • 배경 음악의 BPM. SLOW = 2: 스토리는 음악의 절반 속도로 실행됩니다. 로컬 useCurrentFrame() 은 느려진 프레임을 반환합니다.
  • T = 하나의 스토리 비트. b(n) = 비트 n, 반 비트로 스냅됨: b(0.25) 는 1/4이 아닙니다. T / 4를 사용하십시오.
  • real(n) = b(n) * SLOW = 비트 n의 필름 프레임.
• ramp(f, from, to, ease) 가 애니메이션을 위한 유일한 방법입니다. from/to를 T / 8 그리드로 스냅하고 함께 스냅되면 1을 반환합니다. 0-1 분수를 절대 전달하지 마십시오. clamp01((x - a) / (b - a))를 사용하십시오.
• 샷. SHOTS = [[fromBeat, toBeat, Component]]. 해당 샷 내의 모든 비트 상수와 함께 경계를 이동하십시오.
• 사운드.
  • HITS = 비트의 SFX.
  • BED_FROM = 트랙 시작 오프셋. BED_VOL, 덕을 위한 volume 콜백 포함.
• 킥. KickBump는 룩스까지 킥당 프레임을 펄스합니다. STILL = 펄스가 없는 비트 범위.
• 싱크 포인트는 척추입니다: 각 큰 변화는 히트에 있습니다. 이동하려면 주변 샷을 다시 고정해야 합니다.
• 새 트랙: python3 scripts/beat.py <track.wav> 는 템포, 첫 번째 비트 위상 및 드롭을 제공합니다. BPM 및 BED_FROM을 설정한 다음 싱크 포인트를 그 강세에 배치하십시오.

브랜드에 템플릿 적응

교체	위치
마크 경로 (링, 내부 모양, 주도 요소), 모양의 중심선 및 획, 워드마크 문자 및 위치, viewBox	src/logo.tsx (RING_D, U_D, DOT, U_LINE, U_STROKE, LETTERS, LETTER_X, VB, uPoint)
팔레트, 글꼴, 자간	src/Refreshed.tsx 상단 (INK, PAPER, LIGHT_INK, DIM, FONT, TRACK) 및 public/fonts
브랜드 라인 및 도메인	LINE, DOMAIN
사이트 캡처	public/cap/site-object/에 쓰는 scripts/reui/site-object.mjs 와 같은 캡처 스크립트
제품 보기	scripts/reui/live.mjs, dash.mjs, block-live.mjs 와 같은 캡처 스크립트. 각각 마우스 단계당 하나의 스크린샷과 측정된 박스를 public/cap/live/<dir>/ 및 meta.json에 씁니다. 그런 다음 NAMES_UI/BLOCK_UI 항목과 WITH_UI 의 dir 합집합을 편집합니다.
룩스	LOOKS: 마크를 그리는 3-4가지 방법 (경로 데이터, 하프톤, 구성선)
음악 및 히트	public/audio/, BPM, BED_FROM, HITS

다른 구조(점 없음, 링 없음)의 마크는 자체 Construct, Opening 및 Final 이 필요합니다. 아이디어를 유지하십시오: 실제 지오메트리에서 그리고, 하나의 요소가 주도합니다.

워크플로우

1. brands/<brand>.md를 읽거나 작성하십시오. 로고 SVG와 사이트를 측정하고 브랜드의 원본 라인을 수집하십시오.
2. 새 필름:
   • cp -R ~/.claude/skills/brand-film/template <project> 및 npm i.
   • 배경 음악을 public/audio/에 넣으십시오.
   • 캡처 스크립트는 프로젝트 폴더에서 Playwright를 로드하거나 (npm i -D playwright), PLAYWRIGHT_FROM 의 폴더에서 로드합니다.
3. 실제 마우스로 사이트 및 제품을 캡처하십시오. 재캡처 전에 meta.json을 백업하십시오. 서로 다른 제품 보기를 선택하고 실제 항목을 드래그하십시오. 호버 투어는 금지입니다.
4. 브랜드가 변경한 내용만 편집하십시오 (위 표). 헬퍼 (Flight, Wipe, Dim, Lead, Disc, Live, LiveRun)를 유지하십시오.
5. 확인.
   • npx tsc --noEmit. 사용되지 않은 import의 TS6192만 허용됩니다.
   • 프로젝트 폴더에서: ~/.claude/skills/brand-film/scripts/qa.sh <scratch>/q1 0.4 <frames...>, 그런 다음 sheet.jpg를 읽으십시오.
   • 각 샷, 각 조인의 두 프레임, 각 싱크 프레임 및 엔딩을 샘플링하십시오.
   • 시트를 references/reui-frames/sheet.jpg 옆에 놓으십시오. 템플릿의 일치하는 샷보다 더 듬성듬성하거나, 더 크거나, 더 혼잡한 것은 발견 사항입니다.
   • 단일 스틸은 깜박일 수 있습니다. 수정하기 전에 하나를 다시 렌더링하십시오.
6. 리뷰 (항상, 새 컷의 첫 번째 전달 전):
   • references/review.md 의 브리프와 함께 하나의 서브에이전트를 생성하십시오. 코드를 받고, 당신의 결론은 받지 않습니다.
   • 순위가 매겨진 약점과 프레임 및 "건드리지 말 것" 목록을 반환합니다.
   • 프레임에서 상위 발견 사항을 직접 확인하고 프레임에 표시되지 않는 것은 제거하십시오.
   • 사용자에게 짧은 순위 목록을 보여주고 무엇을 수정할지 물어보십시오. 단, 사용자가 "모두 수정"이라고 말한 경우는 제외합니다.
   • 수정된 프레임을 다시 확인하십시오. 사용자가 좋아한 내용(브랜드 프로필)을 절대 취소하지 마십시오.
7. Remotion Studio에서 미리보기 (http://localhost:<port>/Refreshed). 렌더링이 아닌 미리보기를 전달하십시오.
8. 렌더링 (요청 시에만): npx remotion render src/index.ts Refreshed out/<name>.mp4 --scale=2 --codec=h264 --crf=16 --pixel-format=yuv420p --overwrite --log=error 를 백그라운드에서 실행하십시오. 그런 다음 ffprobe: 3840x2160, 60fps, 프레임 수, 오디오 스트림.

각 턴을 다음으로 마무리

변경된 내용 (프레임별), 확인되지 않은 내용 (모션과 사운드는 스틸에 표시되지 않음), 그리고 렌더링된 mp4가 오래되었는지 여부.