Communitygithub.com

Remotion Explainer Architect Pro (v2 — Sistema & Mecanismo de S…

Sistema de produção completo e fluxo de trabalho reutilizável para séries de vídeo explicativo e motion graphics com Remotion + Three.js (@remotion/three), transformando uma frase em um pacote de vídeo completo.

O que é Remotion Explainer Architect Pro (v2 — Sistema & Mecanismo de S…?

Este skill transforma o processo de criação de vídeos explicativos em um sistema de produção reutilizável baseado em 5 pilares: (1) uma biblioteca reutilizável de objetos visuais e 3D (primitivas procedurais Three.js, montagens explodidas, cartões UI 2D); (2) storyboard orientado por áudio e esquema de narração (blocos de cena AKSI/FOKUS/JEDA com tokens de destaque em nível de palavra); (3) predefinições de tema e direção visual (Blueprint Desmontado, Corte Transversal, CGI ZackD, Brilho Dan Koe, Quadrinhos/Vetor); (4) rigs de animação declarativos (useExplodeRig, useXRayClip, useFlowParticles, useCameraChoreography); e (5) um fluxo de trabalho reutilizável de uma frase (entrada de 1 frase -> saída completa: Lembar Kontak, Storyboard, script de áudio/SFX e código Remotion + Three.js). Ele garante animações determinísticas (sem delta em useFrame), sincronização de áudio dinâmica via <Series> e adaptabilidade de proporção de aspecto (16:9 e 9:16). É ideal para usuários que pedem para planejar, storyboard, roteirizar ou construir vídeos explicativos, anatomia 3D explodida ('bongkar') ou séries de vídeo reutilizáveis.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/farizziezhi/remotion-architect/tree/HEAD
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Remotion Explainer Architect Pro (v2 — Sistema & Mecanismo de Série 3D)

Um mecanismo de produção orientado a sistema para construir séries de motion graphics explicativas de alta retenção em Remotion + Three.js (@remotion/three). Em vez de depender de prompts ad-hoc por vídeo, este skill aplica um Sistema de Produção Reutilizável de 5 Pilares:

  1. Biblioteca Reutilizável de Objetos Visuais e 3D (primitivas procedurais Three.js, montagens em vista explodida e cartões UI 2D)
  2. Esquema de Storyboard e Narração com Foco em Áudio (blocos de cena AKSI / FOKUS / JEDA + tokens de destaque em nível de palavra)
  3. Predefinições de Tema e Direção Visual Bloqueadas (tipografia, paletas de materiais semânticos, shaders, lentes de câmera)
  4. Rigs de Animação Declarativos (useExplodeRig, useXRayClip, useFlowParticles, useCameraChoreography)
  5. Fluxo de Trabalho Reutilizável de Uma Frase (entrada de 1 frase -> saída completa: Lembar Kontak, Storyboard, roteiro de Áudio/SFX e código Remotion + Three.js)

Quando Usar

  • O usuário fornece um tópico ou pergunta de 1 frase (ex.: "Por que a máquina de espresso precisa de 9 bar de pressão?", "Desmontando o funcionamento da bateria de bicicleta elétrica") e deseja um vídeo explicativo completo ou uma prévia interativa do estúdio.
  • O usuário deseja construir ou expandir uma biblioteca reutilizável de objetos visuais/3D, animação de anatomia explodida (estilo TAKEN APART) ou modelo de série no Remotion.
  • O usuário solicita um storyboard, folha de contato de ativos ("Lembar Kontak"), roteiro de narração ou integração edge-tts + SFX para um vídeo de 60s, 90s ou 120s.

⚡ As 3 Regras de Ouro do Remotion + Three.js

Ao implementar ou gerar código com este skill, aplique rigorosamente:

  1. Animação de Quadro Determinística (Zero delta em useFrame): Nunca use delta ou acumuladores requestAnimationFrame em hooks do Three.js. Todas as rotações, transformações e uniformes de shader devem ser funções puramente determinísticas de frame = useCurrentFrame(). Consulte references/remotion-composition-rig.md.
  2. Sincronização Dinâmica de Áudio via <Series>: A duração do áudio da narração varia dinamicamente com a síntese de fala por IA (edge-tts). Nunca codifique durações de quadro fixas para cenas. Sempre calcule <Series.Sequence durationInFrames={Math.ceil(scene.durationSec * fps)}> a partir de timeline.json.
  3. Adaptabilidade do Frustum de Explosão e Proporção de Aspecto: Quando explodeFactor atinge 1.0, os componentes externos se expandem para fora. O zoom da câmera deve ser dimensionado dinamicamente (interpolate(explodeProgress, [0, 1], [baseZoom, baseZoom * 0.72])) para evitar que as partes cortem fora do quadro. Ambos 16:9 (1920x1080) e 9:16 (1080x1920 TikTok/Reels) devem ser suportados.

Pilar 1: Predefinições de Tema e Direção Visual (theme.config.ts)

Sempre bloqueie a direção visual no início. Se o usuário não especificar um estilo, use como padrão taken-apart-blueprint (combinando folhas de contato editoriais com anatomia ortográfica explodida Three.js "Taken Apart"). Consulte os tokens detalhados em references/threejs-exploded-rig.md.

  1. taken-apart-blueprint (Anatomia Técnica Explodida 3D)

    • Estética: Papel arquivístico creme quente (#F2EFE9), contornos técnicos nítidos (#1E2022), câmera Three.js isométrica ortográfica, shader Cel/Toon personalizado com passagem de contorno de detecção de bordas.
    • Moldura HUD: Marcas de registro de canto, metadados superiores (Fig 1, ANATOMY · [NOME DO OBJETO]), telemetria inferior (TAKEN APART, [X] peças · [Y] montagens).
    • Tipografia: Cabeçalho serifado/sans-serif + espaçamento maiúsculo JetBrains Mono para rótulos técnicos.

  2. joni-bongkar-cutaway (Corte Transversal Editorial + Cartões UI de Código)

    • Estética: Branco off-white quente (#F5F2EB), ilustrações de corte transversal isométricas + cartões UI de dados nítidos (KARTU UI), legenda de Palet Material semântica, legendas destacadas em pílula (#1E8E5A verde / #E87A24 laranja).

  3. zackd-cgi (Macro Voo Livre 3D ZackD Films)

    • Estética: Iluminação PBR de estúdio suave, câmera em perspectiva com zooms macro agressivos através de câmaras mecânicas internas, seções transversais ClippingPlane Three.js em tempo real, oclusão ambiente suave.

  4. dan-koe-glow / glow-sketch (Modelos Cibernéticos/Mentais Minimalistas de Alto Contraste)

    • Estética: Vazio obsidiana profundo (#07080C), wireframes vetoriais brilhantes e geometrias de linha Three.js neon (#38BDF8, #A855F7), grades cinéticas de matriz de pontos.

  5. comic-vector (Tinta Pop e Meio-tom Estilizado)

    • Estética: Contornos de tinta grossa de alto contraste (#09090B), preenchimentos de cores sólidas vibrantes, sobreposições de meio-tom, linhas de ação de impacto dinâmico de quadrinhos.

Pilar 2: Biblioteca Reutilizável de Objetos Visuais e 3D (assets/library.ts)

Cada episódio extrai e contribui para um catálogo modular de montagens 3D reutilizáveis (@remotion/three / Three.js) e Cartões UI 2D:

A. Montagens 3D Procedurais Three.js (<ThreeCanvas />)

Cada objeto 3D é construído como um grupo paramétrico de sub-malhas nomeadas (parts & assemblies) com um explodeOffset: [x, y, z] e materialKey aderindo a episode.schema.json:

  • <CylinderCellAssembly />: Carcaça externa, núcleo de eletrodo espiral, membrana separadora, tampa do ânodo superior, válvula de saída de gás (baterias, capacitores, caldeiras, pistões).
  • <FluidPumpAndBoiler3D />: Reservatório de água, bobina de aquecimento de cobre, cilindro de caldeira de alta pressão, porta-filtro/bocal, manômetro, bandeja de gotejamento (máquinas de espresso, sistemas hidráulicos, loops de resfriamento).
  • <CircuitPCBModule3D />: Placa de fibra de vidro, chips MOSFET/IC, caminhos de traços de cobre, indicador LED, cabos de conexão (BMS, smartphones, IoT, fontes de alimentação).
  • <EnclosureShell3D />: Tampa superior, painéis laterais, estrutura de chassi interna com suporte automatizado a clipPlane ou explodeFactor.

B. Cartões UI de Código 2D Reutilizáveis (KARTU UI)

  • <ThreeStageFlowCard />: Cartão de progressão de 3 colunas (ex.: RÁPIDO -> LENTO -> PARADO) com barra de progresso/atual animada abaixo.
  • <ComparisonVerdictCard />: Duelo de métricas lado a lado (80% vs 96%, SAUDÁVEL vs FORÇADO) com contadores animados e emblemas de vencedor/perdedor.
  • <MythStampCard />: Resumo de lista de verificação + carimbo de borracha com física de mola (MITO / FATO / SEGURO).

C. Palet Material Semântico

Cada parte do objeto mapeia para uma chave de material semântico em vez de cores arbitrárias:

  • shell (#B8BCC2 Cinza Corpo)
  • structural (#2B2E33 Carvão Plástico/Ferro)
  • core_component (#3B6EE8 Azul Técnico)
  • control_bms (#1E8E5A Verde Vigia/Seguro)
  • medium_fluid (#E8D882 Amarelo Líquido/Eletrólito)
  • hazard_heat (#E87A24 Laranja Quente/Cobre)
  • energy_current (#F5C400 Amarelo Corrente Elétrica)

Pilar 3: Modos de Duração e Ritmo de Storyboard (episode.schema.json)

Suporta 3 níveis de duração bloqueados (padrão para 90s se não especificado):

  • Modo 60s (Explicador Rápido — ~140 palavras): 9 Painéis Lembar Kontak (6 3D/Corte Transversal + 3 Cartões UI) | 16 Quadros-chave (10 AKSI, 4 JEDA, 2 FOKUS).
  • Modo 90s (Mergulho Profundo Padrão — ~200 palavras): 10-11 Painéis Lembar Kontak | 20-22 Quadros-chave (13 AKSI, 5 JEDA, 4 FOKUS). Adiciona explosão de sub-montagem microscópica/interna e simulação de falha lado a lado.
  • Modo 120s (Análise Documentário Completo — ~280 palavras): 12 Painéis Lembar Kontak | 24-28 Quadros-chave (16 AKSI, 6 JEDA, 6 FOKUS). Adiciona análise forense de múltiplos culpados, curva de degradação de longo prazo e cartão de solução acionável de 3 etapas.

Cada quadro-chave no storyboard deve especificar:

  1. timeSec e Tag de Ritmo (AKSI verde, FOKUS âmbar, JEDA neutro).
  2. narration: Prosa explicativa indonésia contundente com tags [[highlight]] em torno de 1-2 palavras focais por frase.
  3. rigState: Parâmetros declarativos que conduzem a cena 3D/2D:
    • explodeFactor: 0.0 (montado) a 1.0 (totalmente explodido).
    • xrayClip: 0.0 (carcaça sólida) a 1.0 (corte transversal interno completo).
    • cameraPose: [azimute, elevação, zoom] ou predefinição ("iso-wide", "macro-core", "top-down").
    • activeCallouts: Array de rótulos de componentes para aparecer com linhas de chamada.
    • sfxCue: Gatilho de som (whoosh_xray, servo_explode, ui_pop, electric_hum, verdict_stamp).

Pilar 4: Rigs de Animação Declarativos (Remotion + Three.js)

Nunca anime malhas manualmente quadro a quadro. Vincule useCurrentFrame() e os timestamps de timeline.json a estes rigs principais:

  1. useExplodeRig(frame, triggerFrame, partOffsetVector): Usa spring({ frame: frame - triggerFrame, fps, config: { damping: 14, stiffness: 120 } }) para separar suavemente as sub-montagens 3D ao longo de vetores axiais enquanto atualiza o contador de peças do HUD.
  2. useXRayClip(frame, startFrame, endFrame): Interpola uma constante de recorte THREE.Plane do Three.js ou clip-path SVG para abrir a carcaça externa (INTEIRO -> TRANSPARENTE).
  3. useFlowParticles(frame, speed, pathPoints): Anima esferas 3D instanciadas ou traços tracejados SVG ao longo de condutos internos para visualizar eletricidade, pressão de água, calor ou bolhas de gás.
  4. useWordSyncSubtitles(frame, words): Lê os timestamps WordBoundary do edge-tts para destacar palavras faladas em tempo real e disparar pop-ups <CalloutBadge /> nos quadros exatos das palavras-chave.

Pilar 5: Fluxo de Trabalho Reutilizável de Uma Frase (Entregas)

Quando o usuário fornece um tópico de frase única (ou pede para construir/visualizar um episódio), execute automaticamente o pipeline completo:

  1. Lembar Kontak (9-12 Blueprint de Ativos + Palet Material + Contagem de Peças 3D): Defina as montagens 3D reutilizáveis (X peças · Y montagens), prompts de corte transversal de IA e cartões UI de Código.
  2. Storyboard de Quadros-chave (16-28 Quadros com AKSI / FOKUS / JEDA): Script completo com timestamp, tokens [[highlight]], coreografia de câmera e estados explodeFactor / xrayClip de acordo com episode.schema.json.
  3. Compilação de Áudio e SFX: Execute scripts/generate_voice_and_sfx.py para sintetizar:
    • voiceover.mp3 (id-ID-ArdiNeural / id-ID-GadisNeural)
    • SFX WAV processuais (servo_explode.wav, whoosh_xray.wav, ui_pop.wav, electric_hum.wav, verdict_stamp.wav)
    • timeline.json (limites de palavras mapeados + índices de quadro).
  4. Estúdio Interativo / Projeto Remotion + Three.js: Forneça composições @remotion/three prontas para execução seguindo references/remotion-composition-rig.md.

Habilidades Relacionadas

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