agentsclimarketplace

Animated presentation

Skill Morfeu333/animated-presentation-skill/animated-presentation

Claude Code skill: criar vídeos de apresentação animados narrados com Remotion + OpenMontage (UIs nativas, sync narração↔animação, legendas, PT, sound design)

Install
npx -y skills add Morfeu333/animated-presentation-skill --skill animated-presentation

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use ao criar vídeos de apresentação animados narrados (estilo "explainer" de produto/plataforma) com Remotion + OpenMontage — recriando UIs nativamente, sincronizando animação à narração TTS, com legendas, versão PT e sound design. Gatilhos: "criar vídeo de apresentação", "animação explicativa", "explainer animado", "recriar a tela X em animação", "sincronizar animação com narração", "sound design do vídeo".

SKILL.md

4.1 KB, ~1.1k tokens by cl100k_base, as published. Nobody here has run it

Animated Presentation (Remotion + OpenMontage)

Pipeline completo para vídeos de apresentação narrados com animações (1920×1080). Baseado no projeto Chris Lamm AI Platform.

Nota: os caminhos absolutos abaixo (ex.: ~/Documents/Codex/OpenMontage/…) são do projeto de origem — adapte ao seu ambiente. As técnicas são universais. Detalhe completo em reference.md (mesmo diretório desta skill).

Onde (adaptar ao seu setup)

  • Composer: OpenMontage/remotion-composer/
    • src/Explainer.tsx = roteador de cenas (interface Cut + SceneRenderer). Composition: Explainer.
    • src/components/*.tsx = uma cena por componente; src/components/index.ts re-exporta.
    • public/<icons>/, public/<ui>/, public/demo-props/*.json.
    • renders-tmp/ = saídas + frames de verificação.
  • Guia detalhado: reference.md (mesmo diretório) — LER ANTES; tem todos os padrões, gotchas e receitas.

Princípios

  1. Tudo é código React (Remotion). Dados (textos, posições, cores, schedules) em JSON de props; componente só desenha.
  2. Canvas base 1280×720 escalado ×1.5 p/ 1920×1080 (texto grande e nítido).
  3. Verificação por frame SEMPRE: após render, ffmpeg -ss <t> -i out.mp4 -vframes 1 f.jpg e inspecionar. Nunca confiar às cegas.
  4. open <arquivo>.mp4 após cada render.

Receita: adicionar cena

  1. Criar src/components/MinhaCena.tsx (export + tipos). 2. Exportar em index.ts. 3. Importar em Explainer.tsx. 4. Adicionar campos na interface Cut (NÃO duplicar nomes — steps,centerLabel já existem). 5. Dispatch em SceneRenderer. 6. Props JSON com id,type,in_seconds,out_seconds obrigatórios. Render: npx remotion render src/index.tsx Explainer renders-tmp/x.mp4 --props=public/demo-props/x.json.

Padrões-chave (detalhes em reference.md)

  • Ícones visíveis: simple-icons são pretos-mono → somem no escuro. Use tile branco atrás do ícone (cor da marca na borda). Originais full-color: svgl.app / vectorlogo.zone.
  • SVG <image> gotcha: não carrega no headless; preload com <Img> hidden mesmo URL. Prefira <Img> DOM.
  • Remover fundo de logo/imagem: magick in.png -fuzz 16% -fill none -draw 'alpha 0,0 floodfill' ... -trim out.png.
  • Recriar UI real nativamente: extrair frames → contact-sheet → recortar UI limpa → prompt detalhado + frames → subagente constrói componente isolado. (Rápido/menos fiel: UITourScene = screenshot + Ken Burns + callout.)
  • Sincronia narração↔animação: AssemblyAI word-level → highlightSchedule:{name,at} no componente. ⚠️ Remotion renderiza ~+1s além do out_seconds → padar áudio à duração REAL medida. QA com SentrySearch (sentrysearch index/search).
  • TTS: OpenAI tts-1-hd voz onyx (OPENAI_API_KEY). Montar narração por segmento c/ apad.
  • Legendas: AssemblyAI → SRT → burn (ffmpeg subtitles=...:force_style=...).
  • Outro idioma: traduzir → TTS → atempo-fit à duração original → sincroniza ao mesmo vídeo.
  • Sound design: música (Suno/ElevenLabs Music) + SFX (ElevenLabs /v1/sound-generation); mix com sidechaincompress (ducking) + adelay/amix (SFX nos timestamps dos eventos).

Montagem do vídeo completo

Render cada cena à duração do seu bloco de narração → concat (ffmpeg -f concat -c copy) → mux com narration-final.mp3. Cada segmento de áudio padado (apad -t <dur_real_do_segmento>) p/ sync exato.

Ferramentas

ffmpeg · ffprobe · ImageMagick (magick) · sentrysearch · Remotion. Chaves: OPENAI_API_KEY, ASSEMBLYAI_API_KEY (e opcional ElevenLabs/Suno p/ áudio).

Gives 0 of the 12 instructions most slides presentations skills give in ~1.1k tokens

Counted across 568 of the 571 authors here whose files we hold, read 2026-08-06

  • include a visual element on every slidein 52 of 568, across 21 files
  • put one idea per slidein 50 of 568, across 42 files
  • state the design approach before writing codein 38 of 568, across 8 files
  • validate XML immediately after each editin 37 of 568, across 7 files
  • rasterize gradients and icons as PNG images before referencing themin 37 of 568, across 7 files
  • generate and inspect thumbnails to validate layoutin 37 of 568, across 7 files
  • commit to a single visual motif across every slidein 37 of 568, across 12 files
  • use web-safe fonts onlyin 36 of 568, across 7 files
  • keep 0.5 inch minimum marginsin 35 of 568, across 9 files
  • use two-column layout for slides with charts or tablesin 34 of 568, across 5 files
  • save a template inventory analysis to a filein 33 of 568, across 4 files
  • use subagents to visually inspect rendered slidesin 33 of 568, across 9 files

Said here and by no other author read

  • Render at a 1280x720 base scaled by 1.5
  • Inspect a specific frame after every render
  • Open the output video file after each render
  • Keep all scene data in a JSON props file
  • Pad audio segments to match exact video duration
  • Place a white tile behind monochrome icons

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.