mira-animator

Gera um deck HORIZONTAL 16:9 (1920x1080, arquivo index-16x9.html) pronto para gravar videoaula sem OBS, onde cada slide declara um de três layouts: camera (webcam ao vivo em tela cheia), thirds (animação nos dois terços da esquerda + câmera ao vivo no terço direito) e full (animação em tela cheia, sem câmera). Os slides nascem do roteiro.md (layout, título e animação declarativa linha/orbita por cabeçalho), o teleprompter em overlay fica fora do vídeo via Element Capture e a gravação nativa sai em MP4 full-hd pela tecla R, com painel de encoder, câmera, microfone e gravação direta no disco. Use SEMPRE que o usuário disser /mira-studio-full, deck 16:9 com câmera, videoaula com câmera embutida, studio horizontal, gravar aula em full hd, terços com câmera, ou pedir slides horizontais que misturam câmera e animação num vídeo 16:9. Para vídeo VERTICAL 9:16 (Reels, Shorts, TikTok), use /mira-studio.

Insere num slide do Mira (novo ou existente) um QR code escaneável, grande e centralizado, gerado de um link ou texto. O QR é gerado LOCALMENTE (pacote npm qrcode) e embutido como SVG inline: funciona por file://, sem API nem CDN em apresentação. Card limpo no padrão mira-3d (só o título, no máximo 6 palavras, e o QR central, sem legenda do link); módulos escuros sobre cartão branco, laranja só na moldura e no título. Herda a Regra Zero do mira-animator, mas o QR fica ESTÁTICO e o loop interno vai na moldura. Use SEMPRE que o usuário disser /mira-qrcode, QR code, qrcode, código QR, gera um QR, coloca um QR no slide, QR do link, QR de inscrição, QR de CTA, código para escanear, ou pedir um slide com um link escaneável.

Reenquadra um deck do Mira na regra dos terços, sem mudar a proporção: joga título + animação nos 2/3 da esquerda de um grid 3x3 e deixa a coluna da direita em cinza #333, limpa, para você sobrepor texto, lower-third ou câmera na edição. A animação é reformulada por metáfora para preencher os 2/3; não toca no original (cria arquivo -thirds ao lado). Aplica sobre 16:9, 1:1 (mira-squared) ou 9:16 (mira-vertical), ou cria slides do zero; lado cinza à direita por padrão, com opção de inverter. Use SEMPRE que o usuário disser /mira-thirds, regra dos terços, rule of thirds, composição em terços, anima à esquerda, deixa a direita livre, coluna livre, dois terços à esquerda, grid 3x3, espaço para texto/câmera ao lado, abre espaço à direita, cria um slide em terços, ou pedir a animação encostada num lado e o outro terço livre em cinza.

Gera imagens estáticas para slides do Mira: painéis 1920x800, infográficos 1920x1920, diagramas técnicos e gráficos — via D3.js com captura PNG, ou fotorrealismo via prompt JSON (mira-image-prompt). Use esta skill SEMPRE que o usuário disser: "criar imagem", "gerar imagem", "ilustração", "diagrama", "gráfico estático", "infográfico", "resumo visual", "quadro resumo", "imagem para o slide", "visual para o deck", ou qualquer variação sobre criar elementos visuais estáticos. Para ANIMAÇÕES use /mira-animator; esta skill produz imagens PARADAS.

Coloca um site vivo DENTRO de um slide do Mira (novo ou existente), ocupando o slide inteiro, edge to edge, via iframe full-bleed. Resolve os dois problemas reais de embutir um site num deck: (1) o iframe rouba o foco do teclado e quebra a navegacao por seta do deck, entao uma guarda de interacao deixa o site so visivel ate o apresentador clicar, e Esc devolve o controle ao deck; (2) muitos sites bloqueiam incorporacao (X-Frame-Options / CSP frame-ancestors), entao tem camada de fallback com link e a opcao de baixar o site para assets/webview/ e rodar offline por file protocol. Herda a Regra Zero do mira-animator, mas o site fica firme e o loop interno vai na guarda (pill pulsando e borda respirando em laranja) enquanto nao se esta interagindo. Use SEMPRE que o usuario disser /mira-webview, webview, embutir site, colocar um site no slide, site dentro do slide, iframe no slide, incorporar pagina, mostrar um site na apresentacao, abrir um site no deck, ou pedir um slide que seja uma pagina web ao vivo.

Gera um deck VERTICAL 9:16 (1080x1920) pronto para gravar no OBS Studio, onde cada slide declara um de três layouts: camera (webcam ao vivo em tela cheia), split (animação quadrada estilo mira-squared em cima + câmera embaixo) e full (animação vertical estilo mira-vertical). A câmera do apresentador é embutida ao vivo no slide via getUserMedia (módulo mira/mira-camera.js), sem chroma key: no OBS basta capturar a janela. Sem câmera, a área vira verde chroma #00FF00 como plano B. Use SEMPRE que o usuário disser /mira-studio, deck para OBS, deck com câmera, slide com câmera, meio a meio, câmera embutida, deck para gravar vídeo comigo falando, ou pedir slides que misturam câmera e animação num vídeo vertical.

Cria slides animados com looping interno obrigatório (D3.js v7+ ou 3D CSS), no padrão dos decks em mira-templates/decks/ e do esqueleto visual do mira-builder (glass-card, icon-hero, attribute-pills, replay-btn). Use SEMPRE que o usuário disser, "criar slide animado", "novo slide com animação", "adicionar card com D3", "/mira-animator", "slide criativo para o deck", "slide com flip cards", "slide com battle arena", "slide com staircase", ou pedir explicitamente "looping na animação", "animação contínua", "movimento contínuo no slide". Também use quando o usuário enviar uma imagem e pedir "transforme isso em um slide animado" ou "anima essa figura".

Porta de entrada para um novo deck do Mira: coleta requisitos conversacionalmente e monta a pasta em decks/ pronta para o pipeline. NÃO gera slides, só prepara o terreno. Use SEMPRE que o usuário disser /mira-new, novo deck, nova apresentação, criar deck, começar slides sobre, quero fazer slides de, novo tema de slides, iniciar uma apresentação, cria uma pasta de slides, ou pedir para começar uma apresentação do zero sobre algum assunto.

Adiciona elementos 3D reais (profundidade, rotação contínua, arrastar e zoom) ao canvas de um slide do Mira, em card limpo com o 3D maximizado. Escolhe sozinha entre três camadas: CSS 3D puro, Three.js procedural e glTF (.glb). Herda a Regra Zero do mira-animator (gira sozinho, pausa no arrasto e retoma); só a camada .glb exige servidor HTTP local. Use SEMPRE que o usuário disser /mira-3d, elemento 3D, objeto 3D no slide, coloca um cérebro ou robô 3D, esfera de partículas, rede de nós em 3D, carrega esse .glb, modelo glTF, ou pedir um slide com profundidade real e rotação.

Transforma a animação de um slide (ou de todos) numa METÁFORA visual animada: uma analogia concreta do cotidiano animada no padrão do mira-animator, substituída no lugar (mantém título, subtítulo e pílulas). Use SEMPRE que o usuário disser "/mira-animated-metaphor", "metáfora animada", "transforma em metáfora", "cria uma analogia", "anima como analogia", "transforma os slides em metáforas", "vira metáfora", "quero uma metáfora pra esse conceito", "anima essa ideia como analogia", "metáfora visual", ou pedir para reexpressar um conceito como comparação animada, no deck inteiro ou num slide específico.

Gera a cena "prompt digitado em zoom": simula uma pessoa digitando um comando de agent harness (Claude Code, Codex) em fonte mono de terminal gigante sobre fundo escuro, cursor piscando estilo Windows, com janela deslizante quando o texto passa da tela. Aceita cor por trecho (color=#HEX), quebra de linha (/n) e print do texto como entrada. Zero dependências, roda por file://. Use SEMPRE que o usuário disser "/mira-animated-typing", "texto digitado em zoom", "animação de digitação", "simular digitando um comando", "prompt gigante sendo digitado", "efeito typing", "comando sendo escrito na tela", ou pedir uma cena de comando de agente digitado em tela cheia.

Motor de montagem atômica para criar apresentações interativas em HTML/Tailwind usando componentes Glassmorphism modulares com navegação card-a-card.

Cria um slide de gráfico de corrida no Mira: série temporal animada que corre no tempo, toca uma vez e para no fim. Dois modos: "bars" (barras que trocam de posição no ranking) e "lines" (linhas desenhadas com o rótulo perseguindo a ponta); dados em CSV largo embutidos, roda por file:// offline, gera section em D3 v7 no tema do Mira. Use SEMPRE que o usuário disser /mira-chart-race, gráfico de corrida, corrida de barras, bar chart race, racing chart, gráfico animado no tempo, dados temporais animados, ranking ao longo do tempo, barras que mudam de posição, linhas crescendo no tempo. Para gráfico estático use /mira-chart; para enquete ao vivo use /mira-survey.

Especialista em gráficos de dados para slides do Mira. Recebe dados (CSV, JSON, TSV, tabela markdown, texto colado) ou imagens (print de gráfico, foto de quadro branco, rascunho à mão) e gera um gráfico D3.js; usa o tipo pedido ou recomenda a melhor visualização. Use esta skill SEMPRE que o usuário disser: "criar gráfico", "plotar", "gráfico de barras", "gráfico de linhas", "pizza", "scatter", "visualizar esses dados", "transformar esse CSV em gráfico", "recriar esse gráfico", "desenhei um gráfico", "fiz um rascunho", ou qualquer combinação de dados + gráfico/visualização. Para imagens que não são gráficos use /mira-visuals; para animar um gráfico pronto use /mira-animator.

Diretor criativo que refina o plano de slides do /mira-planner: reescreve titulos, descricoes e conteudo com tecnicas de copywriting e avalia/melhora as imagens, chamando /mira-visuals para gerar as que faltam. Use SEMPRE que o /mira-planner terminar de gerar um plano, ou quando o usuario quiser melhorar o texto de uma apresentacao, refinar as frases dos slides, aplicar copywriting, ou reescrever conteudo de slides para ficar mais impactante.

Extrator de contexto do Mira: lê uma fonte vinculada no mira.config.json (pasta de projeto, PDF, LaTeX ou texto) e produz um briefing estruturado para o /mira-planner. Use SEMPRE que o usuário pedir para criar slides "sobre" um projeto ou documento, mencionar uma fonte vinculada pelo nome, ou disser "extrai o conteúdo de", "lê o projeto", "prepara o material do", "briefing do projeto".

Baixa os vídeos de fundo do Mira para mira-templates/videos_header/. Use SEMPRE que o usuário disser: "/mira-get-videos", "baixar vídeos", "instalar vídeos do mira", "quero os backgrounds de vídeo" ou "os vídeos não estão aparecendo".

Gera num slide do Mira uma forma que morfa em outra(s) em loop a partir de CONCEITOS em palavras (o usuário só tem a ideia, não o arquivo). Busca cada conceito na API do Iconify, valida licença, baixa o SVG e monta a timeline de morph (GSAP + MorphSVGPlugin vendorados; deck offline file://). Só licença aberta (MIT, Apache-2.0, CC0 ou CC-BY), com atribuição em CREDITS.md; recusa personagens/marcas de IP protegida e sugere arte original. Reaproveita o render do mira-svg-morph. Use SEMPRE que o usuário disser "/mira-icon-morph", "nuvem virando lâmpada", "uma semente que vira árvore", "cadeado abrindo", "morfa o conceito X no Y", "acha um ícone que vira outro", "busca uns ícones e faz morph", ou descrever em palavras dois ou mais conceitos para um virar o outro SEM fornecer arquivos. Se o usuário JÁ tem os arquivos .svg, use mira-svg-morph. Para metáfora densa/emergente (partículas, explosão), use mira-animator (D3).

Cria prompts JSON estruturados para geração de imagens de produto com estética luxuosa e cinematográfica. Use sempre que o usuário quiser gerar um prompt de imagem, criar foto de produto, ou fotografar (comida, bebida, cosmético, joia, moda ou qualquer item visual) com IA. Ative também ao mencionar: "prompt para imagem", "gerar imagem de produto", "foto de produto com IA", "prompt para Midjourney/DALL-E/Flux", "fotografar produto", "montar um prompt JSON de imagem".

Coloca uma imagem que o usuário JÁ TEM (arquivo local ou URL) num slide do Mira, novo ou existente, em card limpo (padrão mira-3d/mira-qrcode): só título (sem ícone, máx. 6 palavras) e a imagem grande e bem enquadrada. Copia a imagem para assets/ do deck por caminho relativo, então abre por file:// sem servidor; imagem estática, com o loop da Regra Zero na moldura. NÃO confunda: para GERAR imagem nova use mira-visuals ou mira-image-prompt; para ANIMAR a imagem use mira-img-animator; este só POSICIONA uma imagem pronta. Use SEMPRE que o usuário disser /mira-image, coloca essa imagem no slide, põe essa foto no slide, insere essa imagem, adiciona essa figura ao deck, slide com essa imagem, mostra esse print no slide, ou fornecer um arquivo de imagem ou URL pedindo para exibir.

Cria um NOVO template de deck do Mira a partir de imagem(ns) de referência (prints de slides e/ou logomarca): reconhece o design system e a disposição dos elementos e salva o esqueleto index.html (design system no bloco @MIRA:THEME) mais o tema em mira-templates/, para aparecer no /mira-new. Use SEMPRE que o usuário disser "/mira-image-template", "criar template a partir de imagem", "template a partir desse print", "transforma essa tela em template", "monta um template com essa identidade", "usa essa logomarca como template", "extrai o design system dessa imagem", "novo template de deck a partir de imagem", ou anexar imagens pedindo para virarem um template/identidade de slides.

Transforma imagens (fotos, logos, diagramas) em animações D3.js interativas e self-contained. Use sempre que o usuário pedir para animar uma imagem, criar efeitos visuais a partir de uma imagem, transformar imagem em partículas, gerar visualizações interativas de uma imagem, ou combinar "imagem + animação + D3". Também quando mencionar "partículas", "dissolve", "explode", "morph", "wave", "pixel art animado", "imagem animada com D3", "efeito visual em imagem", "animação interativa de imagem", ou transformar uma imagem estática em algo dinâmico. Funciona com JPG, PNG, SVG, GIF e WebP.

Converte um deck do Mira já criado para modo OFFLINE (self-contained, sem CDN em runtime), para abrir por file:// mesmo atrás do firewall corporativo que bloqueia as CDNs (Tailwind, AOS, Lucide, D3, fonte Inter e Three.js dos slides 3D). Use SEMPRE que o usuário disser /mira-offline, deixa o deck offline, deixa o slide self-contained, o firewall da empresa está bloqueando o slide, funciona sem internet, tira as CDN, baixa as bibliotecas pro deck, ou o aluno não consegue abrir o slide na empresa. Rode por último, depois do deck pronto.

Planeja o conteudo de apresentacoes em slides HTML: analisa um capitulo (LaTeX, PDF ou texto) e gera um plano de slides antes da montagem visual. Use SEMPRE que a skill /mira-builder for acionada, ou quando o usuario quiser planejar o conteudo de uma apresentacao, definir quantos slides criar, ou revisar a estrutura antes de gerar o HTML.

Slide de QUIZ AO VIVO no Mira: a plateia escaneia um QR-code e responde uma múltipla escolha num Google Forms; o slide lê as respostas via Google Sheets gviz/JSONP. Diferente do mira-survey, tem resposta correta, revelação controlada pelo apresentador e percentuais que só aparecem após revelar. Use SEMPRE que o usuário disser /mira-quiz, quiz ao vivo, pergunta com resposta correta, revelar resposta, ranking do quiz, quiz com QR, quiz tipo Mentimeter, quiz tipo Slido, ou pedir um slide onde a plateia responde pelo celular e a resposta correta é revelada no palco. Para enquete sem resposta correta use /mira-survey; para QR simples use /mira-qrcode.

Cria e organiza a pasta references/ de um tema de slides, incluindo automaticamente o material que já estiver lá. A fonte é sempre local ao tema, nunca perguntada na instalação. Use SEMPRE que o usuário disser /mira-references, adicionar referência, adicionar referencias, onde coloco o material, onde ponho a fonte, preparar as fontes do slide, referências para o tema, vincular conteúdo para os slides, criar pasta de referências, quais referências esse slide vai usar, ou pedir para apontar PDF, imagem, diagrama, livro, artigo ou print como base de um slide. Use também antes de criar um slide quando o tema ainda não tiver uma pasta de referências.

Liga um deck do Mira a um segundo aparelho pela rede local: o notebook apresenta, o celular espelha, controla (avançar/voltar) e desenha (telestrator sincronizado). Sem app, sem login e sem internet — só a mesma rede ou o hotspot do celular; sem o atalho instalado, o deck segue 100% funcional em file://. Use SEMPRE que o usuário disser /mira-remote-control, apresentar com o celular, controlar pelo celular, controle remoto da apresentação, espelhar no celular, segunda tela, passar slide pelo celular, apresentar andando pela sala, QR para controlar o deck, ou pedir para o celular/tablet comandar ou acompanhar a apresentação.

Escala a percepção de tamanho das animações D3 de um deck numa escala de 1 a 10 (3/10 é o padrão gerado pelo mira-animator), lendo o marcador @MIRA:SIZE de cada animação e ajustando só o desenho dentro do SVG, sem mexer na altura do palco nem nos gatilhos. Use SEMPRE que o usuário disser "/mira-size-animator", "aumentar o tamanho da animação", "as animações estão pequenas", "a animação ocupa pouco espaço", "deixa tudo em 6/10", "coloca as animações em 5/10", "qual o tamanho das animações", "percepção de tamanho", "escalar a animação", "diminuir a animação", "deixa esse slide maior", ou pedir para crescer ou encolher um slide específico ou o deck inteiro.

Gera um .mp4 de um ou mais slides de um deck do Mira gravando a animacao real (Chrome headless + ffmpeg): cada slide dispara do zero, sem vazar o anterior, preenchendo o frame. Recebe quais slides (um, varios ou todos) e a resolucao (16:9, 9:16, 1:1), encadeia com transicao (4 segundos por slide, alteravel), toca animacoes finitas como o chart-race por inteiro e nunca toca no deck original. Use SEMPRE que o usuario disser /mira-slide-to-video, gerar video do slide, transformar slide em video, exportar slide como mp4, gravar a animacao do slide, video do deck, quero um mp4 do slide, renderizar o slide em video, ou fazer um Reels/Short a partir do slide.

Gera uma versão QUADRADA (1:1) de um deck do Mira a partir do 16:9 original, OU cria slides quadrados do zero quando não há deck de origem, para vídeo quadrado (feed do Instagram, LinkedIn, etc.). Não toca no original: cria index-1x1.html ao lado. Cada slide de conteúdo vira só o título no topo + a animação num canvas quadrado (lado = altura do 16:9, 100vh; laterais em #333), com o eixo reformulado por metáfora para preencher o quadrado. Texto, cores, timings e loop intactos. Use SEMPRE que o usuário disser /mira-squared, versão quadrada, deixa quadrado, formato 1:1, 1080x1080, apresentação quadrada, vídeo quadrado, cria um slide quadrado, novo slide 1:1, ou pedir o deck ou um slide novo num formato quadrado.

Cria um slide de ENQUETE AO VIVO: a plateia escaneia um QR-code, vota num Google Forms, e o resultado se atualiza em TEMPO REAL no slide (donut 3D girando ou barras). Recebe dois links — o de votação (vira o QR gerado local) e o da planilha de respostas (o slide lê a contagem via endpoint gviz/JSONP). Use SEMPRE que o usuário disser /mira-survey, enquete, enquete ao vivo, votação em tempo real, poll, resultado ao vivo no slide, QR de enquete, a plateia vota e o slide atualiza, tipo Mentimeter, tipo Slido, ou pedir um slide que mostra votação em tempo real. Para um QR sem votação use /mira-qrcode; para um gráfico estático use /mira-chart.

Anima um SVG que o usuário FORNECE dentro de um slide do Mira, dando movimento próprio à forma (não vira outra forma, isso é morph). Usa GSAP vendorado offline (file://) e escolhe a técnica por transform, DrawSVGPlugin (o traço se desenha) ou MotionPathPlugin (curva). Para animar uma PARTE, ela precisa ser um elemento separado; se o SVG vier como path único fundido, a skill separa por clipPath ou editando o path. Remove fundo opaco, define a origem do movimento, herda a Regra Zero e respeita prefers-reduced-motion. Use SEMPRE que o usuário disser /mira-svg-animator, anima esse svg, faz a borboleta bater asas, gira essa roda, faz esse desenho se mexer, desliza esse svg, faz pulsar, o traço se desenha sozinho, ou passar um SVG pedindo movimento. Para uma forma virando OUTRA use mira-svg-morph ou mira-icon-morph.

Gera num slide do Mira (novo ou existente) uma forma SVG que morfa em outra(s) em loop contínuo, com GSAP e MorphSVGPlugin vendorados localmente (deck offline, file://). O usuário aponta 2 ou mais arquivos .svg da pasta assets/ na ordem do morph; a skill inline os paths com ids únicos, converte formas não-path e monta a timeline em loop. Card limpo, laranja FF904D, herda a Regra Zero e respeita prefers-reduced-motion. Use SEMPRE que o usuário disser /mira-svg-morph, morfa esse svg no outro, uma forma virando outra, morphing de svg, transição de forma, faz um ícone virar outro, ou der dois ou mais SVGs pedindo um virar o outro. Quando o usuário só descreve em palavras, use mira-icon-morph.

Cria um slide de MESA TÁTICA no Mira: campo de futebol cinematográfico com os dois times na formação real, cada jogador um boneco chibi (ou disco) na cor do time, editável ao vivo (mover, setas/zonas/paint), com jogadas gravadas e reproduzidas por quadros-chave (tecla R) e salvas como JSON. Com times reais, valide 4 atributos por titular: nome, número, posição e aparência. /mira-vertical gira o campo (tecla V). Use SEMPRE que o usuário disser /mira-tactics, mesa tática, quadro tático, prancheta tática, escalação, formação de time, campo de futebol com jogadores, montar a jogada, replay de jogada, posicionar os jogadores, tabuleiro tático, Magic Wall, ou pedir um slide com um campo e peças/jogadores posicionados. Para desenhar por cima de qualquer slide use o mira-draw; esta skill gera um slide dedicado.

Aplica transição DISSOLVE (crossfade estilo Canva/Keynote) entre slides de um deck do Mira via View Transitions API same-document, que roda em file:// sem servidor. Cria index-dissolve.html ao lado, sem tocar no original. Use SEMPRE que o usuário disser "/mira-transition-dissolve", "transição dissolve", "dissolve nos slides", "crossfade entre slides", "fade entre slides", "transição de slides estilo Canva", "tira o scroll e põe fade", "transição suave entre cards", "aplica o dissolve", ou pedir qualquer transição de esmaecimento entre slides do deck.

Valida o HTML gerado pela /mira-builder, checando conformidade visual, estrutural e de assets. Use SEMPRE que a /mira-builder terminar de gerar um index.html, ou quando o usuario quiser verificar a qualidade de uma apresentacao existente, revisar se os slides seguem o padrao, ou diagnosticar problemas visuais em slides ja criados.

Gera uma versão VERTICAL (9:16, generalista para a tela atual: largura da tela / 3 por altura cheia, ex. 640x1080 numa tela 1080p) de um deck do Mira a partir do 16:9, OU cria slides verticais DO ZERO quando não há deck de origem, para vídeo vertical (Reels, Shorts, TikTok, Stories). Não toca no original: gera index-9x16.html ao lado, com só o título no topo e a animação num canvas alto, e reformula o eixo de cada animação para o retrato. Use SEMPRE que o usuário disser /mira-vertical, versão vertical, deixa vertical, formato 9:16, 1080x1920, apresentação vertical, para Reels, para Shorts, para Stories, para TikTok, vídeo vertical, modo retrato, ou cria um slide vertical.