Communitygithub.com

Remotion Explainer Architect Pro (v2 — 시스템 및 3D 시리즈 엔진)

Remotion + Three.js (@remotion/three)를 사용한 엔드투엔드 프로덕션 시스템 및 재사용 가능한 워크플로우로, 설명 및 모션 그래픽 비디오 시리즈(60~120초)를 제작합니다. 한 문장으로 된 주제를 재사용 가능한 3D/2D 시각 에셋 라이브러리, 고정된 테마 및 스타일 프리셋, 프레임 정확한 스토리보드, edge-tts 음성 해설 및 절차적 SFX 생성기, 선언적 Remotion 애니메이션 리그를 사용하여 완전한 비디오 패키지로 변환합니다.

Remotion Explainer Architect Pro (v2 — 시스템 및 3D 시리즈 엔진)란 무엇인가요?

이 스킬은 Remotion과 Three.js를 기반으로 한 체계적인 제작 엔진으로, 시청자 유지율이 높은 설명형 모션 그래픽 시리즈를 제작하도록 설계되었습니다. 5개의 기둥으로 구성된 재사용 가능한 생산 시스템을 적용하여, 각 비디오마다 임시로 프롬프트를 입력할 필요 없이 일관된 품질의 비디오를 제작할 수 있습니다. 주요 기능으로는 재사용 가능한 3D 객체 라이브러리(Three.js 절차적 프리미티브, 분해도 조립, 2D UI 카드), 오디오 우선 스토리보드 및 내레이션 스키마(AKSI/FOKUS/JEDA 장면 블록 및 단어 수준 하이라이트 토큰), 고정된 테마 및 시각 방향 프리셋(예: 분해 청사진, 컷어웨이, ZackD CGI, Dan Koe Glow, 만화/벡터), 선언적 애니메이션 리그(useExplodeRig, useXRayClip, useFlowParticles, useCameraChoreography), 그리고 한 문장으로 시작하는 재사용 가능한 워크플로우(주제 입력 -> 완전한 연락처 시트, 스토리보드, 오디오/SFX 스크립트, Remotion + Three.js 코드 출력)를 포함합니다. Cursor, Claude Code, Codex와 같은 AI 에이전트 플랫폼에서 사용할 수 있으며, 사용자가 설명 또는 모션 그래픽 비디오, 3D 분해 애니메이션, 또는 재사용 가능한 Remotion 비디오 시리즈를 계획, 스토리보드, 스크립트 또는 제작하려고 할 때 이상적입니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/farizziezhi/remotion-architect/tree/HEAD
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Remotion Explainer Architect Pro (v2 — 시스템 & 3D 시리즈 엔진)

Remotion + Three.js (@remotion/three) 를 사용하여 높은 유지율의 설명 모션 그래픽 시리즈를 제작하기 위한 시스템 기반 제작 엔진입니다. 각 비디오마다 임시로 프롬프트를 입력하는 대신, 이 스킬은 5가지 기둥으로 구성된 재사용 가능한 제작 시스템을 적용합니다:

  1. 재사용 가능한 시각 및 3D 객체 라이브러리 (Three.js 절차적 프리미티브, 분해도 조립, 2D UI 카드)
  2. 오디오 우선 스토리보드 및 나레이션 스키마 (AKSI / FOKUS / JEDA 장면 블록 + 단어 수준 하이라이트 토큰)
  3. 고정된 테마 및 시각 방향 프리셋 (타이포그래피, 의미론적 재료 팔레트, 셰이더, 카메라 렌즈)
  4. 선언적 애니메이션 리그 (useExplodeRig, useXRayClip, useFlowParticles, useCameraChoreography)
  5. 한 문장 재사용 가능 워크플로우 (1개의 주제 문장 입력 -> 완전한 연락처 시트, 스토리보드, 오디오/SFX 스크립트, Remotion + Three.js 코드 출력)

사용 시기

  • 사용자가 한 문장의 주제나 질문(예: "왜 에스프레소 머신에 9바 압력이 필요한가?", "전기 자전거 배터리 작동 방식 분해")을 제공하고 완전한 설명 비디오 또는 대화형 스튜디오 미리보기를 원할 때.
  • 사용자가 재사용 가능한 시각/3D 객체 라이브러리, 분해 애니메이션 (TAKEN APART 스타일), 또는 Remotion 시리즈 템플릿을 구축하거나 확장하려고 할 때.
  • 사용자가 스토리보드, 에셋 연락처 시트 ("Lembar Kontak"), 나레이션 스크립트, 또는 60초, 90초, 120초 비디오를 위한 edge-tts + SFX 통합을 요청할 때.

⚡ Remotion + Three.js의 3가지 황금 규칙

이 스킬로 코드를 구현하거나 생성할 때 다음을 엄격히 준수하십시오:

  1. 확정적 프레임 애니메이션 (useFrame에서 delta 사용 금지): Three.js 훅에서 delta 또는 requestAnimationFrame 누산기를 사용하지 마십시오. 모든 회전, 변환 및 셰이더 유니폼은 반드시 frame = useCurrentFrame()의 순수 확정적 함수여야 합니다. references/remotion-composition-rig.md를 참조하십시오.
  2. <Series>를 통한 동적 오디오 동기화: 음성 해설 오디오 길이는 AI 음성 합성(edge-tts)에 따라 동적으로 변합니다. 장면에 고정 프레임 길이를 하드코딩하지 마십시오. 항상 timeline.json에서 durationInFrames={Math.ceil(scene.durationSec * fps)}를 계산하여 <Series.Sequence>를 설정하십시오.
  3. 분해 절두체 및 종횡비 적응성: explodeFactor가 1.0에 도달하면 외부 구성 요소가 바깥쪽으로 확장됩니다. 카메라 줌은 프레임 밖으로 부품이 잘려나가지 않도록 동적으로 확장되어야 합니다 (interpolate(explodeProgress, [0, 1], [baseZoom, baseZoom * 0.72])). 16:9 (1920x1080) 및 9:16 (1080x1920 TikTok/Reels)을 모두 지원해야 합니다.

기둥 1: 테마 및 시각 방향 프리셋 (theme.config.ts)

항상 시작 시 시각 방향을 고정하십시오. 사용자가 스타일을 지정하지 않으면 기본값으로 taken-apart-blueprint (편집 연락처 시트와 "Taken Apart" Three.js 분해 직교 투영 해부도를 결합)을 사용합니다. 자세한 토큰은 references/threejs-exploded-rig.md를 참조하십시오.

  1. taken-apart-blueprint (3D 분해 기술 해부도)

    • 미학: 따뜻한 크림색 아카이브 용지 (#F2EFE9), 선명한 기술 잉크 윤곽선 (#1E2022), 직교 등각 투영 Three.js 카메라, 가장자리 감지 윤곽선 패스가 있는 커스텀 Cel/Toon 셰이더.
    • HUD 프레임: 모서리 등록 표시, 상단 메타데이터 (Fig 1, ANATOMY · [OBJECT NAME]), 하단 원격 측정 (TAKEN APART, [X] parts · [Y] assemblies).
    • 타이포그래피: 디스플레이 세리프/산세리프 헤더 + 기술 레이블을 위한 JetBrains Mono 대문자 트래킹.

  2. joni-bongkar-cutaway (편집 컷어웨이 + 코드 UI 카드)

    • 미학: 따뜻한 오프화이트 (#F5F2EB), 등각 투영 단면 컷어웨이 일러스트레이션 + 선명한 데이터 UI 카드 (KARTU UI), 의미론적 팔레트 재료 범례, 알약 강조 자막 (#1E8E5A 녹색 / #E87A24 주황색).

  3. zackd-cgi (ZackD Films 3D 매크로 플라이스루)

    • 미학: 부드러운 스튜디오 PBR 조명, 내부 기계 챔버를 통한 공격적인 매크로 줌인이 있는 원근 카메라, 실시간 Three.js ClippingPlane 단면, 부드러운 앰비언트 오클루전.

  4. dan-koe-glow / glow-sketch (미니멀리스트 고대비 사이버/정신 모델)

    • 미학: 깊은 흑요석 공허 (#07080C), 빛나는 벡터 와이어프레임 및 네온 Three.js 라인 지오메트리 (#38BDF8, #A855F7), 운동 점 매트릭스 그리드.

  5. comic-vector (팝 잉크 & 하프톤 스타일화)

    • 미학: 고대비 두꺼운 잉크 윤곽선 (#09090B), 생생한 평면 색상 채우기, 하프톤 도트 오버레이, 역동적인 만화 충격 액션 라인.

기둥 2: 재사용 가능한 시각 및 3D 객체 라이브러리 (assets/library.ts)

각 에피소드는 모듈식 재사용 3D 어셈블리(@remotion/three / Three.js) 및 2D UI 카드의 카탈로그에서 가져와 기여합니다:

A. Three.js 절차적 3D 어셈블리 (<ThreeCanvas />)

각 3D 객체는 explodeOffset: [x, y, z] 및 materialKey가 있는 명명된 하위 메시(parts 및 assemblies)의 매개변수 그룹으로 구축되며 episode.schema.json을 따릅니다:

  • <CylinderCellAssembly />: 외부 케이싱, 나선형 전극 코어, 분리막, 상단 양극 캡, 가스 배출 밸브 (배터리, 커패시터, 보일러, 피스톤).
  • <FluidPumpAndBoiler3D />: 물 탱크, 구리 가열 코일, 고압 보일러 실린더, 포타필터/노즐, 압력 게이지, 드립 트레이 (에스프레소 머신, 유압 시스템, 냉각 루프).
  • <CircuitPCBModule3D />: 유리 섬유 기판, MOSFET/IC 칩, 구리 트레이스 경로, LED 표시기, 커넥터 케이블 (BMS, 스마트폰, IoT, 전원 공급 장치).
  • <EnclosureShell3D />: 상단 뚜껑, 측면 패널, 자동 clipPlane 또는 explodeFactor 지원이 있는 내부 섀시 프레임.

B. 재사용 가능한 2D 코드 UI 카드 (KARTU UI)

  • <ThreeStageFlowCard />: 하단에 애니메이션 진행/진행 표시줄이 있는 3열 진행 카드 (예: DERAS -> MELAMBAT -> BERHENTI).
  • <ComparisonVerdictCard />: 애니메이션 카운터와 승자/패자 배지가 있는 나란히 메트릭 대결 (80% vs 96%, SEHAT vs DIPAKSA).
  • <MythStampCard />: 체크리스트 요약 + 스프링 물리 고무 도장 (MITOS / FAKTA / AMAN).

C. 의미론적 팔레트 재료

모든 객체 부분은 임의의 색상이 아닌 의미론적 재료 키에 매핑됩니다:

  • shell (#B8BCC2 회색 몸체)
  • structural (#2B2E33 플라스틱/철 숯)
  • core_component (#3B6EE8 기술 파랑)
  • control_bms (#1E8E5A 경비/안전 녹색)
  • medium_fluid (#E8D882 액체/전해질 노랑)
  • hazard_heat (#E87A24 뜨거움/구리 주황)
  • energy_current (#F5C400 전류 노랑)

기둥 3: 지속 시간 모드 및 스토리보드 페이싱 (episode.schema.json)

3개의 고정된 지속 시간 계층을 지원합니다 (지정되지 않은 경우 기본값은 90초):

  • 60초 모드 (빠른 설명 — ~140단어): 9개의 연락처 시트 패널 (6개의 3D/컷어웨이 + 3개의 UI 카드) | 16개의 키프레임 (10개의 AKSI, 4개의 JEDA, 2개의 FOKUS).
  • 90초 모드 (표준 심층 분석 — ~200단어): 10-11개의 연락처 시트 패널 | 20-22개의 키프레임 (13개의 AKSI, 5개의 JEDA, 4개의 FOKUS). 미시적/내부 하위 어셈블리 폭발 및 나란히 오류 시뮬레이션을 추가합니다.
  • 120초 모드 (전체 다큐멘터리 분석 — ~280단어): 12개의 연락처 시트 패널 | 24-28개의 키프레임 (16개의 AKSI, 6개의 JEDA, 6개의 FOKUS). 다중 원인 법의학 분석, 장기 성능 저하 곡선 및 3단계 실행 가능한 솔루션 카드를 추가합니다.

스토리보드의 각 키프레임은 다음을 지정해야 합니다:

  1. timeSec 및 리듬 태그 (AKSI 녹색, FOKUS 호박색, JEDA 중성).
  2. narration: 문장당 1-2개의 초점 단어 주위에 [[highlight]] 태그가 있는 간결한 인도네시아어 설명 산문.
  3. rigState: 3D/2D 장면을 구동하는 선언적 매개변수:
    • explodeFactor: 0.0 (조립됨)에서 1.0 (완전히 분해됨)까지.
    • xrayClip: 0.0 (단단한 껍질)에서 1.0 (전체 내부 컷어웨이)까지.
    • cameraPose: [azimuth, elevation, zoom] 또는 프리셋 ("iso-wide", "macro-core", "top-down").
    • activeCallouts: 리더 라인과 함께 팝업될 구성 요소 레이블 배열.
    • sfxCue: 사운드 트리거 (whoosh_xray, servo_explode, ui_pop, electric_hum, verdict_stamp).

기둥 4: 선언적 애니메이션 리그 (Remotion + Three.js)

메시를 수동으로 프레임별로 애니메이션하지 마십시오. useCurrentFrame() 및 timeline.json 타임스탬프를 다음 핵심 리그에 바인딩하십시오:

  1. useExplodeRig(frame, triggerFrame, partOffsetVector): spring({ frame: frame - triggerFrame, fps, config: { damping: 14, stiffness: 120 } })를 사용하여 3D 하위 어셈블리를 축 벡터를 따라 부드럽게 분리하는 동시에 HUD 부품 카운터를 업데이트합니다.
  2. useXRayClip(frame, startFrame, endFrame): THREE.Plane 클리핑 상수 또는 SVG 클립 경로를 보간하여 외부 껍질을 열어 엽니다 (UTUH -> TEMBUS PANDANG).
  3. useFlowParticles(frame, speed, pathPoints): 내부 도관을 따라 인스턴스화된 3D 구 또는 SVG 점선 스트로크를 애니메이션하여 전기, 수압, 열 또는 가스 거품을 시각화합니다.
  4. useWordSyncSubtitles(frame, words): edge-tts WordBoundary 타임스탬프를 읽어 음성 단어를 실시간으로 강조 표시하고 정확한 키워드 프레임에서 <CalloutBadge /> 팝업을 트리거합니다.

기둥 5: 한 문장 재사용 가능 워크플로우 (산출물)

사용자가 한 문장 주제를 제공하면 (또는 에피소드 구축/미리보기를 요청하면) 자동으로 전체 파이프라인을 실행합니다:

  1. 연락처 시트 (9-12 에셋 청사진 + 재료 팔레트 + 3D 부품 수): 재사용 가능한 3D 어셈블리 (X 부품 · Y 어셈블리), AI 컷어웨이 프롬프트 및 코드 UI 카드를 정의합니다.
  2. 키프레임 스토리보드 (AKSI / FOKUS / JEDA가 있는 16-28 프레임): [[highlight]] 토큰, 카메라 안무, 그리고 episode.schema.json에 따른 explodeFactor / xrayClip 상태가 포함된 완전한 타임스탬프 스크립트.
  3. 오디오 및 SFX 컴파일: scripts/generate_voice_and_sfx.py를 실행하여 다음을 합성합니다:
    • voiceover.mp3 (id-ID-ArdiNeural / id-ID-GadisNeural)
    • 절차적 WAV SFX (servo_explode.wav, whoosh_xray.wav, ui_pop.wav, electric_hum.wav, verdict_stamp.wav)
    • timeline.json (매핑된 단어 경계 + 프레임 인덱스).
  4. 대화형 스튜디오 / Remotion + Three.js 프로젝트: references/remotion-composition-rig.md를 따라 즉시 실행 가능한 @remotion/three 구성을 제공합니다.

관련 스킬

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community