| name | mira-qrcode |
| description | 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. |
Skill: QR code grande e central no slide
Insere num slide um QR code escaneável, grande e central, gerado de um link ou texto do usuário. Casos típicos: CTA de fim de deck, material complementar, link de inscrição.
Fonte da verdade: decisões congeladas em BRAINSTORM_MIRA_QRCODE.md (2026-06-11) e padrão visual validado em decks/teste-qrcode/index.html (QR de sandeco.com.br, 25x25 módulos, nível M). Em dúvida sobre CSS da moldura ou estrutura do card, copie do teste.
Como o QR é gerado
O QR é gerado localmente, ao criar o slide, e embutido como SVG inline no HTML. Zero dependência na apresentação: nada de JS por CDN nem API externa; o slide funciona aberto por file://. Se o link mudar, regere o slide pela skill.
NUNCA use npx qrcode. Validado pelo usuário em 2026-06-11: npx qrcode trava no Windows (sem saída e sem erro). Use o pacote instalado localmente + um one-liner Node.
Receita (executada na criação do slide):
- Instale o pacote uma vez numa pasta temporária reaproveitável (ex.:
%TEMP%/mira-qr). Se já existir node_modules/qrcode lá, pule esta etapa.
npm install qrcode --no-save --prefix "<pasta-temp>"
- Gere o SVG rodando o Node a partir dessa pasta (ou com
NODE_PATH apontando para o node_modules dela). Substitua DADO pelo link/texto exato do usuário:
node -e "require('qrcode').toString('DADO',{type:'svg',errorCorrectionLevel:'M',margin:0,color:{dark:'#0a0a0a',light:'#ffffff'}},(e,s)=>{if(e)throw e;process.stdout.write(s)})"
margin:0: a zona de silêncio NÃO vem no SVG; quem a garante é o padding do cartão branco (ver CSS). Não deixe o QR encostar na borda.errorCorrectionLevel:'M': padrão. Use 'Q' para escanear de longe (projeção em sala grande); custa mais módulos, mas tolera mais ruído.color: módulos #0a0a0a sobre branco. Não inverta (claro sobre escuro não escaneia bem).
- Embuta o SVG do stdout inline dentro do
.qr-card. Mantenha o viewBox e o shape-rendering="crispEdges", e remova width/height fixos em pixels que o pacote tenha adicionado, para o CSS (width:100%) controlar o tamanho. Acrescente um comentário HTML com o dado codificado, ex.: <!-- QR gerado localmente (pacote npm qrcode, ECC M) para https://... -->.
REGRA ZERO (herdada, com ressalva do QR)
Todo slide do Mira tem loop interno, mas o QR fica estático: nada animado pode passar por cima dos módulos, senão quebra o escaneio. O loop interno vai na moldura:
- Pulso de brilho no cartão (
box-shadow laranja indo e voltando).
- Cantos respirando/orbitando ao redor do cartão.
Descreva o loop em uma frase ("o cartão pulsa um brilho laranja e os quatro cantos respiram, o QR no centro fica firme").
Composição do card (padrão do mira-3d: limpo, elemento maximizado)
- Só o título + o QR. Título no topo (sem ícone, máximo 6 palavras). Sem legenda com o link por extenso embaixo.
- QR grande e central. Cartão branco com o QR ocupando boa parte da altura útil. No teste:
width: min(62vh, 80vw).
- Escaneabilidade manda no estilo: módulos escuros (
#0a0a0a) sobre cartão branco, zona de silêncio proporcional ao módulo (4 módulos, via --qr-quiet; padding fixo não cumpre a norma). O laranja (#FF904D) fica na moldura e no título, nunca dentro dos módulos.
CSS + HTML canônico (gerar conforme o teste)
<style>
.qr-card {
--qr-modules: 33;
--qr-card-size: min(62vh, 80vw);
--qr-quiet: calc(4 * var(--qr-card-size) / (var(--qr-modules) + 8));
position: relative;
background: #ffffff;
border-radius: 24px;
padding: var(--qr-quiet);
width: var(--qr-card-size);
animation: qr-glow 3s ease-in-out infinite;
}
.qr-card svg { display: block; width: 100%; height: auto; }
@keyframes qr-glow {
0%, 100% { box-shadow: 0 0 25px rgba(255,144,77,0.25), 0 0 60px rgba(255,144,77,0.10); }
50% { box-shadow: 0 0 45px rgba(255,144,77,0.55), 0 0 110px rgba(255,144,77,0.25); }
}
.qr-corner { position: absolute; width: 34px; height: 34px; border: 3px solid #FF904D; animation: qr-breathe 3s ease-in-out infinite; }
.qr-corner.tl { top:-12px; left:-12px; border-right:none; border-bottom:none; border-radius:12px 0 0 0; --dx:-6px; --dy:-6px; }
.qr-corner.tr { top:-12px; right:-12px; border-left:none; border-bottom:none; border-radius:0 12px 0 0; --dx:6px; --dy:-6px; }
.qr-corner.bl { bottom:-12px; left:-12px; border-right:none; border-top:none; border-radius:0 0 0 12px; --dx:-6px; --dy:6px; }
.qr-corner.br { bottom:-12px; right:-12px; border-left:none; border-top:none; border-radius:0 0 12px 0; --dx:6px; --dy:6px; }
@keyframes qr-breathe {
0%, 100% { transform: translate(0,0); opacity: 0.6; }
50% { transform: translate(var(--dx), var(--dy)); opacity: 1; }
}
</style>
<section class="min-h-screen flex flex-col items-center justify-center px-6 pt-3 pb-6">
<div class="w-full max-w-6xl flex flex-col items-center" data-aos="fade-up" data-aos-delay="100">
<div class="text-center mb-6">
<h2 class="text-4xl md:text-5xl font-bold mb-2">
Acesse <span class="primary-color italic">seu-link-aqui</span>
</h2>
</div>
<div class="qr-card">
<div class="qr-corner tl"></div>
<div class="qr-corner tr"></div>
<div class="qr-corner bl"></div>
<div class="qr-corner br"></div>
</div>
</div>
</section>
Passos
- Receber o destino + o dado. Slide novo ou slide N do deck X, e o link/texto a codificar. Se faltar o dado, pergunte.
- Gerar o QR localmente (seção "Como o QR é gerado"): instalar
qrcode em pasta temp (sem npx), rodar o one-liner Node, capturar o SVG.
- Montar o card limpo: título no topo (sem ícone, máx. 6 palavras, sem legenda do link), cartão branco com o QR inline grande e central, moldura com glow + cantos. Inserir como
<section> no padrão do deck; preservar o sistema de navegação.
- Conferir escaneabilidade: módulos escuros sobre branco, não invertido, zona de silêncio de 4 módulos preservada, nada animado por cima dos módulos. Decodifique o QR de verdade (ex.:
jsqr sobre um print do cartão renderizado) antes de entregar: um QR bonito que não escaneia é um desastre em sala.
- Reportar. Caminho do arquivo, o dado codificado, o nível de correção (M/Q) e o loop interno em uma frase. Lembre que não há dependência de runtime nem servidor: abre direto, inclusive por file://.
Checklist
