rendydev404/motion-reel

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

편집 스타일의 모션 릴로 1920×1080, 30fps MP4를 만듭니다. 준비된 엔진이 template/에 있습니다. 이를 복사하고 하나의 설정 파일(src/reel.config.ts)을 작성한 후 렌더링하고, 프레임을 검토한 다음 비디오를 전송합니다.

인수: $ARGUMENTS

1. 요청 읽기

인수와 대화를 바탕으로 다음을 파악합니다:

• 주제: 어떤 제품이나 기능인지. 해당 코드베이스 내에 있다면 실제 카피(i18n 파일, 페이지 컴포넌트, README)를 읽어 영상이 제품의 실제 기능을 보여주도록 합니다.
• 색상:
  • 프리셋 이름: lime(기준 룩), coral, ocean, sunset, violet, night(어두운 테마).
  • 또는 16진수 값으로, accent(하이라이터, 돋보이는 색상), secondary(두 번째 브랜드 색상), 필요에 따라 paper(배경), ink(텍스트)를 지정합니다.
  • 하나의 색상만 주어지면 그 색상이 악센트입니다.
  • 프로젝트에 브랜드 토큰(예: globals.css)이 있으면 해당 값을 secondary로 제공합니다.
  • 아무것도 주어지지 않으면 lime을 사용하고 최종 메시지에 그 사실을 알립니다.
• 카피 언어: 사용자의 언어를 따릅니다(기본적으로 인도네시아어로 작성하면 인도네시아어 사용).
• 출력 폴더: 사용자가 특정 폴더를 지정하지 않으면 세션 스크래치패드를 사용합니다. 사용자가 요청하지 않는 한 절대 제품 저장소 내부에 배치하지 마십시오.

주제 자체가 불명확한 경우에만 질문하십시오. 색상과 지속 시간에는 기본값이 있습니다.

2. 스캐폴딩

cp -r "<이 스킬 디렉토리>/template" "<출력>/reel"
cd "<출력>/reel" && npm install && npm run sfx

• npm install은 약 2분이 소요됩니다. 다른 작업이 있다면 백그라운드에서 실행하십시오.
• 제품에 로고가 있으면 public/에 복사하고 brand.logo를 해당 파일 이름으로 설정하십시오. 그렇지 않으면 brand.initials를 설정합니다.

3. src/reel.config.ts 작성

• theme: makeTheme(presets.coral) 또는 makeTheme({ accent, secondary, paper, ink })로 설정합니다. 다른 모든 토큰은 자동으로 파생됩니다.
• 장면을 선택합니다. 필드 목록, 기본 지속 시간, 카피 길이 제한은 references/config.md에 있습니다. 카피를 작성하기 전에 반드시 읽으십시오.
• 권장 구성(약 45초): spark → word → tagline → bento → checklist → steps → formula → showcase → stats → kinetic → logo. 제품에 맞지 않는 장면은 제외합니다. 짧은 구성(약 20초): spark → word → tagline → kinetic → logo.
• 사실: 제품이 실제로 주장하는 내용만 표시합니다. "10,000명의 사용자"나 "99% 가동률"과 같은 메트릭을 절대 임의로 만들지 마십시오. 샘플 콘텐츠(계정 이름, 샘플 게시물)는 명확히 가상의 일반적인 내용이어야 하며 실제 고객 데이터를 사용해서는 안 됩니다.
• 헤드라인: title.sans는 핵심 문장이고 title.serif는 이탤릭체의 비틀림입니다. mark는 세리프 부분에서 하이라이터가 적용되는 한 단어입니다.

4. 확인 및 렌더링

npx tsc --noEmit
npm run render        # → out/reel.mp4, --port=3917 사용
npm run frames        # → out/frames/sheet*.jpg, 1.5초마다 한 프레임

모든 컨택트 시트를 읽으십시오. 다음 사항을 확인합니다:

• 카드 또는 프레임을 넘어 흐르는 텍스트
• 겹치는 요소
• 비어 보이는 장면
• 잘못된 단어에 적용된 하이라이터
• 사용자 정의 색상(예: 밝은 배경에 밝은 악센트)으로 인한 낮은 대비

구성 파일을 수정하거나 필요시 엔진을 수정한 후 한 번 더 렌더링하십시오. 렌더링을 반복하지 마십시오.

5. 전달

• out/reel.mp4를 SendUserFile(display: "render")을 사용하여 전송합니다.
• 지속 시간, 파일 크기, 장면별 한 줄 요약, 사용된 색상, 추후 편집을 위한 구성 파일 경로를 보고합니다.
• 오디오는 청취하지 않았음을 명확히 말합니다. 타이밍과 레벨만 확인했습니다.

스타일 규칙 (엔진 확장 시)

• 팔레트 역할: paper 배경, ink 텍스트 및 어두운 필, accent는 강조 및 활성 상태에만 사용(종이 위 큰 텍스트에 사용 금지), secondary는 컬러 블록 및 로고 악센트 단어에 사용.
• 타이포그래피:
  • 문장에는 Inter Tight 800.
  • 이탤릭 반전에는 Instrument Serif 이탤릭.
  • 키네틱 단어에는 Archivo Black만 사용.
  • 레이블 및 HUD에는 JetBrains Mono 13–20px, 자간 설정.
• 모션:
  • 등장은 Expo-out bezier(0.16,1,0.3,1), 이동은 in-out bezier(0.65,0,0.35,1).
  • 퇴장은 방향성 블러(Smear)와 함께 가속.
  • 텍스트는 마스크(overflow: hidden + translateY)에서 올라옴.
  • 숫자는 수직 블러(Roll)로 롤링.
• 전환: 스미어 인/아웃, 태그라인 후 잉크 컬러로 딥, 줌-블러 통과, 키네틱 블록 전에 악센트 카드가 전체 프레임으로 확장, 키네틱 단어 사이 하드 컷. 흔들림이나 흰색 플래시 없음.
• HUD: 왼쪽 상단 레이블, 오른쪽 상단 타임코드, 왼쪽 하단 섹션 레이블 및 진행 헤어라인, 오른쪽 하단 해상도, 모서리 브래킷. 어두운 컬러 블록 위에서는 밝은 텍스트로 전환.
• 각 장면은 최소 1.5초 동안 읽기 가능한 텍스트를 유지합니다.

Remotion 함정 (경험을 통해 배운 점)

• 모든 모션은 useCurrentFrame()에서 비롯됩니다. CSS 전환 및 애니메이션은 렌더링되지 않습니다.
• 포트 3000은 종종 개발 서버가 점유하고 있습니다. 항상 --port를 전달하십시오.
• Remotion에 번들된 ffmpeg에는 fps 및 tile 필터가 없습니다. 한 번에 -ss로 프레임을 가져옵니다(scripts/frames.mjs가 이 작업을 수행).
• React.useId()에는 콜론이 포함됩니다. url(#id)에서 사용하기 전에 이를 정리하십시오.
• 방향성 블러: SVG feGaussianBlur stdDeviation="x y". CSS blur()는 균일 블러만 지원합니다.
• 오디오: 각 큐에 대해 <Sequence from> + <Html5Audio>를 사용하고, durationInFrames를 클립 길이로 설정합니다.
• color-mix() 및 clip-path: circle()은 Remotion의 Chrome에서 작동합니다.