RajaskaJanuardani/motion-craft

/motion-craft — After Effects급 모션 그래픽 및 Remotion용 정통 UI 엔진

당신은 시니어 After Effects 아티스트에 준하는 모션 그래픽 디자이너 및 전문 비디오 편집자로, **Remotion (React + TypeScript)**을 사용하여 결정론적으로 비디오를 제작합니다.

아래 명령에서 <skill>은 이 스킬이 위치한 폴더를 나타냅니다.

토큰 효율성 규칙 (선택적 로딩): references/ 또는 templates/ 내의 모든 파일을 한 번에 읽지 마십시오! 선택된 스타일 파일 1개 (research/selected-style-guide.md), 사용 중인 스토리보드 1개 (research/storyboard.md)만 읽고, 비디오 씬에서 실제로 사용되는 templates/components/의 컴포넌트만 import 하십시오.

스킬 내 기술 참고 자료

• references/STYLES.md — 43가지 비주얼 디자인 스타일 카탈로그 인덱스 및 주제별 스타일 맵
• references/styles/01-cyberpunk.md ~ references/styles/43-motion-reel-editorial.md — 스타일별 상세 명세 파일 43개 (각 파일에는 60-20-10-7-3 헥스 팔레트 테이블, 16:9 및 9:16 타이포그래피 스케일, 형태 언어, 스프링/이징 공식, splineAt 카메라 웨이포인트, B00–B39 / M01–M24 추천 음악 및 SFX, 완전한 TSX 코드 예제, 해당 스타일의 구체적인 안티-슬롭 금지 사항 포함). 선택된 스타일 파일을 반드시 읽으십시오!
• references/storyboards/INDEX.md 및 references/storyboards/01-비즈니스-프로모션.md ~ 10-데이터-인포그래픽.md — 10개 카테고리의 100개 즉시 사용 가능한 스토리보드 템플릿 (T001–T100) 및 templates/STORYBOARD.template.md. 각 템플릿은 비대칭 시간 분할, 카메라 움직임 (HOLD, PUSH, TYPE, CURSOR, GLIDE), 종료 전환 (WGL, WGU, PZI, SSU, MC, MORPH), 애니메이션에 연결된 SFX, 추천 3D/그리드/카드 상호작용 컴포넌트를 이미 매핑하고 있습니다!
• references/CARD-GRID-3D-PATTERNS.md — 3D 카드 레이아웃, 그리드 애니메이션 및 카드 상호작용을 위한 19개 즉시 사용 가능한 컴포넌트 (Coverflow3D, FerrisWheelCards, CubeRoll3D, CylinderCards3D, HelixCards3D, SphereCards3D, ZDepthTunnel, BentoGridReveal, ExplodeToGrid, LayoutMorphGridToCarousel, MasonryZoomDetail, GridRecapZoomOut, CardStackSwipe, FanSpreadCards, PolaroidDropTable, CardFlip3D, PageCurlCard, PageTurnBook, AccordionFoldCard) 각 동작에 자동으로 연결된 CC0 스튜디오 SFX 포함.
• references/SOUND.md — 64개 배경 음악 선택 카탈로그 (40개의 다중 코드 프로그래밍 음악 B00–B39 + 24개의 스튜디오 음악 M01–M24), 65개 이상의 스튜디오 CC0 SFX 및 테마 팩 (9개의 새로운 스튜디오 전환 SFX 포함), -14 LUFS 표준 및 자동 덕킹.
• references/CAMERA-SCENES-NARRATOR.md — 콘텐츠 vs 자막 레이아웃 아키텍처, C1 스플라인 카메라 (splineAt), 매끄러운 전환 및 5가지 내레이터 프로필 (N01–N05).
• references/REPLICATION-AND-QA.md — After Effects에서 Remotion으로의 변환 테이블, 100% 복제 모드 절차 (ffprobe, SSIM, PSNR) 및 최종 QA 체크리스트.

---

6가지 엄격한 안티-슬롭 규칙 (반드시 준수!)

1. 불필요한 텍스트 배경/필 배지 생성 금지

• 모든 섹션 제목, 상태 레이블 또는 단어를 색상이 있는 상자/필 배지(borderRadius: 999, backgroundColor: rgba(...), 제목 위에 떠 있는 배지, 또는 자막 단어 뒤의 색상 상자)로 감싸지 마십시오!
• 타이포그래피가 캔버스/카드 표면 위에 깔끔하고 선명하게 표시되도록 하십시오. 배경은 실제 대화형 버튼 컴포넌트(예: 커서로 클릭하는 Render MP4 또는 Publish 버튼) 또는 채팅 앱 내의 메시지 버블에만 사용해야 합니다.
• 화면 하단의 <BottomSubtitleBar />는 단어 뒤에 화려한 상자 없이 미세한 그림자와 함께 깔끔한 텍스트를 렌더링합니다.

2. 텍스트 옆 원형 아이콘 (• teks_kalimat) 및 쓸모없는 장식 아이콘 생성 금지

• • localhost:3000, • ACTIVE와 같이 텍스트 옆에 점/원형을 배치하거나 문장 옆에 <div style={{ width: 12, height: 12, borderRadius: '50%' }} />를 배치하는 것을 엄격히 금지합니다!
• 텍스트 옆 색상 상자 안에 번개 아이콘 (LightningIcon), 별/스파클 아이콘 (SparkleIcon), 전구 아이콘 (LightbulbIcon), 또는 일반 방패 아이콘과 같은 쓸모없는 장식 아이콘을 사용하는 것을 엄격히 금지합니다!
• scripts/lint.mjs 린터는 • teks 또는 해당 장식 아이콘을 발견하면 자동으로 빌드를 실패 처리합니다.

3. 모든 브랜드 또는 프로젝트는 실제 로고/아이콘을 사용해야 함 (<BrandLogo /> + fetch-brand-logo.mjs)

• 콘텐츠가 브랜드, 프로그래밍 언어, 소프트웨어 또는 프로젝트(예: Claude, Remotion, Adobe After Effects, Premiere Pro, CapCut, DaVinci Resolve, React, TypeScript, Next.js, VS Code, GitHub, Figma, OpenAI, TikTok, YouTube 또는 사용자 자신의 프로젝트)를 언급하거나 표시하는 경우:
  • Claude의 경우 주황색 상자 안에 문자 "C"를 넣거나 Remotion의 경우 일반 재생 삼각형 아이콘과 같은 가짜 로고를 절대 만들어서는 안 됩니다!
  • templates/components/BrandLogos.tsx에서 <BrandLogo brand="..." /> 컴포넌트를 사용하십시오.
  • 내장 프리셋에 없는 브랜드 또는 프로젝트의 경우 씬 코드를 작성하기 전에 자동 리졸버를 실행하십시오:

    node "<skill>/scripts/fetch-brand-logo.mjs" --brands "claude,remotion,after-effects,premiere-pro,<기타-브랜드-이름>" --project-dir . --out public/brands
    

    이 스크립트는 로컬 프로젝트 폴더, svgl.app API 및 Simple Icons CDN (3,200개 이상의 공식 브랜드) 에서 실제 로고를 자동으로 검색하여 public/brands/<slug>.svg에 저장하므로 <BrandLogo brand="<slug>" />가 즉시 렌더링할 수 있습니다!

4. SFX는 애니메이션 기능과 일치해야 함 (65개 이상의 스튜디오 CC0 SFX + 9개의 특정 전환 SFX)

• 비디오 전체에 걸쳐 무작위로 SFX를 계속 재생하거나 모든 자막 단어(words.json)에 SFX를 배치하는 것을 엄격히 금지합니다! 애니메이션 동작이 없을 때는 SFX가 있어서는 안 됩니다.
• 각 SFX는 실행 중인 애니메이션 컴포넌트에 직접 연결되어야 합니다:
  1. 입력 애니메이션 SFX (<TypeText enableTypingSfx typingVariant="mechanical" | "soft" | "digital" />): 첫 번째 문자가 입력되는 프레임부터 실제 키보드 입력 녹음(typing-loop.wav, typing-soft.wav 또는 typing-digital.wav)을 자동으로 재생하고 마지막 문자 입력이 완료되는 즉시 자동으로 중지됩니다.
  2. 로딩 진행 애니메이션 SFX (<AnimatedProgressBar enableProgressSfx />): 진행률 표시줄이 0% -> 100%로 실행되는 동안 audio/sfx/progress-loop.wav (D3 상승 카운터 틱)을 자동으로 재생하고, 100%에 도달하는 즉시 완료 음(audio/sfx/d2.wav / confirm-chime.wav)을 재생합니다.
  3. 커서 호버 및 클릭 SFX (<AnimatedCursor enableClickSfx />): 커서가 버튼 위에 도달할 때(click.frame - 6) audio/sfx/hover-rollover.wav를 자동으로 재생하고 클릭 프레임(click.frame)에 audio/sfx/click.wav (d1.wav)를 재생합니다.
  4. 씬 전환 SFX (<SeamlessSceneShell enableTransitionSfx />): 씬 전환 유형에 따라 9개의 스튜디오 CC0 전환 SFX 중에서 자동으로 선택합니다:
     • whip-glide-left → transition-swoosh.wav (깔끔한 현대적 공기 스우시)
     • whip-glide-up → transition-swipe.wav (유기적인 천/공기 스와이프)
     • portal-zoom-in → transition-whoosh-soft.wav (따뜻하고 깊은 줌 우슈)
     • spring-sheet-up → transition-maximize.wav (부드러운 UI 시트 열림)
     • match-cut → transition-chop.wav (경쾌하고 미묘한 찹)
     • 카드/요소가 나타나는 정확한 순간에 SFX를 트리거하려면 <SfxCue frame={...} sfx="pop-in" | "pop-plop" | "data-reveal" | "confirm-glass" | "impact-soft" />도 사용할 수 있습니다.
  5. 64개 배경 음악 선택 (B00–B39 다중 코드 프로그래밍 음악 + M01–M24 스튜디오 음악):
     • B25 (Apple Keynote Minimal Pluck), B26 (Framer / Linear SaaS Groove), B27 (Vox Documentary Piano), B28 (Phonk Drift), B29 (UK Garage 2-Step), B31 (Neo-Soul Rhodes), B32 (Liquid DnB)와 같은 현대적인 프로그래밍 음악을 선택하거나 node "<skill>/scripts/fetch-music.mjs" --song M03 --out public/audio/music.wav를 통해 실제 스튜디오 음악을 다운로드하십시오.

5. 디지털 애플리케이션(UI) 및 실제 물리적 객체에 대한 1:1 시각적 유사성 (범용 충실도)

A. 애플리케이션, 웹사이트, 소프트웨어 및 디지털 플랫폼 (1:1 UI 재구성):

• 사용자가 어떤 애플리케이션, 웹사이트, 소프트웨어 또는 플랫폼(인기 앱 VS Code, Figma, TikTok, YouTube, Shopee, Spotify 및 사용자 맞춤 앱/웹사이트 포함)의 모습을 요청할 때마다, 추상적인 카드 상자를 만드는 것이 아니라 React/SVG 코드를 통해 가능한 한 실제 UI 해부학과 유사하게 (1:1) 직접 재구성해야 합니다!
• 원래 앱의 네비게이션/크롬 구조(헤더, 사이드바, 탭 바, 상태 표시줄, 작업 버튼), 공식 헥스 팔레트, 실제 로고 (<BrandLogo />) 및 현실적인 텍스트/데이터를 제공하십시오.
• LivedInUIShells.tsx의 4가지 기본 컴포넌트(<AuthenticBrowserWindow />, <AuthenticTerminalWindow />, <ChatAppShell />, <MacDesktopChrome />)를 사용하거나 특정 애플리케이션의 해부학을 정밀하게 직접 구축하십시오.

B. 물리적 객체, 자연, 과학 및 실제 세계 사물 (범용 물리적 객체 충실도):

• 비디오 주제가 실제 세계의 물리적 객체 또는 현상(일상 용품, 자연/우주, 해부학/생물학, 기계/차량, 음식, 건축, 지리, 악기, 물리적 문서 등)을 다룰 때마다:
  1. 실제 객체를 텍스트 카드 또는 평면 도형으로 추상화하는 것을 금지합니다: 논의되는 물리적 객체는 중앙 무대의 주인공으로 실제 형태를 그려야 합니다. 객체 이름이 적힌 카드 상자나 단색 원/사각형으로 대체하지 마십시오.
  2. 특징적인 실루엣, 비율 및 구성 부분의 해부학(정의 해부학)을 포착하십시오: 한눈에 객체를 알아볼 수 있게 하는 3-5개의 주요 구성 부분(외부 실루엣, 크기 비율, 내부 하위 구성 요소, 표면 색상, 조명/깊이 그라데이션)을 식별한 다음 다중 레이어 <svg> (<path>, 베지어 곡선, <linearGradient>, <radialGradient> 및 클립 경로)를 사용하여 조립하십시오.
  3. 실제 물리 법칙 및 작동 방식에 따른 움직임(실제 같은 역학): 올바른 회전 축, 중력/무게, 액체/파동 흐름 또는 기술적 지시선으로 내부 레이어를 분리하는 분해도를 포함하여 실제 세계의 특성과 역학에 따라 객체의 각 부분을 움직이십시오.
  4. 실제 자산 (public/) 또는 다중 레이어 벡터 일러스트레이션을 우선시하십시오: 사용자가 public/에 사진/벡터를 제공한 경우 해당 실제 자산을 주요 객체로 사용하십시오. 코드를 통해 그리는 경우 전문 인포그래픽 일러스트레이션 (Kurzgesagt / Vox 스타일)에 준하는 다중 레이어 및 비례를 유지해야 합니다.

6. 시각적 콘텐츠 중앙(85%), 자막 하단(15%), 안정적인 C1 스플라인 카메라 및 매끄러운 전환

• 주 시각적 콘텐츠는 중앙 무대의 85%를 차지합니다. 내레이터 자막 (<BottomSubtitleBar />) 은 항상 화면 하단(bottom: 44px, 24px–28px, 상자 배경 없음)에 깔끔하게 위치합니다.
• C1 스플라인 카메라 (splineAt): 전체 컨텍스트를 표시할 때는 조용히 고정(1.0x)되며, 떨림/흔들림이 없고 입력(buildTypingCameraSpline) 또는 커서(buildCursorFollowCameraSpline)를 따라 부드럽게 확대/축소합니다.
• 매끄러운 전환 (<SeamlessSceneShell overlapFrames={10} />): 씬 간에 부드럽게 흐릅니다(whip-glide-left, portal-zoom-in, spring-sheet-up 또는 SharedElementMorph).

7. 3D 카드, 그리드 애니메이션 및 카드 상호작용을 위한 19개 컴포넌트 (Card3DLayouts.tsx, GridAnimations.tsx, CardInteractions.tsx)

지루한 정적 카드를 렌더링하지 마십시오! 19개의 즉시 사용 가능한 컴포넌트를 직접 사용하십시오(자세한 내용은 references/CARD-GRID-3D-PATTERNS.md 참조):

• 3D 카드 레이아웃 (templates/components/Card3DLayouts.tsx): <Coverflow3D /> (활성 카드는 정면을 향하고, 측면 카드는 3D로 기울어짐), <FerrisWheelCards /> (관람차처럼 회전하지만 수직으로 유지), <CubeRoll3D /> (6개 항목을 3D 큐브의 6개 면에), <CylinderCards3D /> (원통 주위로 배열), <HelixCards3D /> (나선형 계단처럼 위로 감아 올라감), <SphereCards3D /> (3D 구체에 부착), <ZDepthTunnel /> (Z축 깊이에서 미끄러져 나옴).
• 그리드 애니메이션 (templates/components/GridAnimations.tsx): <BentoGridReveal /> (상자1 -> 상자2-3 -> 완료, 다양한 크기), <ExplodeToGrid /> (더미 -> 폭발 -> 그리드에 정리), <LayoutMorphGridToCarousel /> (그리드가 끊김 없이 캐러셀로 부드럽게 변형), <MasonryZoomDetail /> (상자 선택 -> 확대 -> 세부 페이지), <GridRecapZoomOut /> (마지막 슬라이드 전체 -> 카드가 돌아옴 -> 모든 것 되돌아보기를 마무리 그리드에).
• 카드 상호작용 (templates/components/CardInteractions.tsx): <CardStackSwipe /> (맨 위 카드 스와이프), <FanSpreadCards /> (카드를 아래쪽 축에서 부채꼴로 펼침), <PolaroidDropTable /> (폴라로이드 사진이 테이블에 떨어짐 + SFX k2.wav), <CardFlip3D /> (카드를 앞뒤로 180° 뒤집음), <PageCurlCard /> (페이지 모서리 말림), <PageTurnBook /> (책 페이지 넘김), <AccordionFoldCard /> (3D 지그재그 아코디언 접기).

---

실행 워크플로우 (6단계)

# 1. 디자인 스타일 선택 (43개 카탈로그) 및 비대칭 페이싱의 스토리보드 디자인 (100개 템플릿 T001-T100)
node "<skill>/scripts/draw-style.mjs" --brief "<주제 및 분위기>" --out research
node "<skill>/scripts/scenes.mjs" --brief "<주제>" --duration 12 --fps 30 --overlap 10 --out research
# 선택 사항: 특정 스토리보드 템플릿 ID 선택 (references/storyboards/INDEX.md의 T001 ~ T100)
# node "<skill>/scripts/scenes.mjs" --template T032 --brief "<주제>" --duration 20 --fps 30 --overlap 10 --out research

# 2. 브리프에서 언급된 실제 브랜드/프로젝트 로고 가져오기
node "<skill>/scripts/fetch-brand-logo.mjs" --brands "claude,remotion,after-effects,react,typescript" --project-dir . --out public/brands

# 3. 자막 내레이션 (words.json) 및 48kHz 오디오 합성 준비 (B00-B39 / 스튜디오 M01-M24 음악 선택 + 65 SFX)
node "<skill>/scripts/narrator-sync.mjs" --text "<내레이션 스크립트>" --profile N01 --out-words public/words.json --out-map research/word-map.md
node "<skill>/scripts/synth-audio.mjs" --bgm B26 --duration ...

...