# Mira Squared > 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 #000), 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. - Skill: `sandeco/mira-squared` (Agent Skill) - Install (CLI): `npx skillmds@latest add sandeco/mira-squared` - Raw SKILL.md: https://api.skillmd.com/api/skills/sandeco/mira-squared/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: sandeco (https://skillmd.com/u/sandeco) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/sandeco/mira-squared --- # Skill: Versão Quadrada do Deck (1:1) com canvas quadrado, só título + animação Transforma um deck 16:9 do Mira numa versão **quadrada**, para gravar como vídeo quadrado (feed do Instagram, LinkedIn). Cada slide de conteúdo vira **só o título no topo + a animação grande num canvas quadrado**, reformulada por metáfora para preencher o quadrado. Tem dois modos: - **Modo conversão (padrão quando existe deck 16:9):** reformula um deck existente, slide a slide, conforme o playbook abaixo. - **Modo criação nativa (quando NÃO existe deck de origem, ou o usuário pede um slide novo já quadrado):** cria o slide do zero direto na geometria quadrada. Veja "Criação do zero na geometria nativa". > **Fonte da verdade:** o padrão desta skill está congelado na spec `_reversa_sdd/responsividade/sdd/mira-squared-1x1.md` (score 92) e no mockup `_reversa_sdd/responsividade/sdd/referencias/1.jpg`. Quando em dúvida sobre um valor exato, o resultado deve bater com o mockup. O padrão de qualidade do reflow é o mesmo do `/mira-vertical`. ## O resultado, em uma frase Num slide de conteúdo aparecem **apenas duas coisas, ambas DENTRO da área segura de 50px do quadro**: o **título principal no topo da área segura** (1 ou 2 linhas, nunca mais) e a **animação grande preenchendo todo o resto da área segura** logo abaixo. **Somem:** o subtítulo, o header do card (ícone + label + botão Replay) e a base do card (legenda uppercase + grade de pílulas). As laterais fora do quadrado ficam **#000000**. Capa e encerramento (que não têm `.glass-card`) mantêm o layout próprio. ## CRITÉRIO Nº 1 (prioridade do usuário) A animação tem que **preencher a maior parte do quadrado**. Preencher bem o box vale mais que a perfeição do reflow por metáfora. Nunca é aceitável a animação ocupar só uma faixa fina com área vazia (ou preta) em volta. Antes de entregar, olhe cada slide: se sobra muita área vazia, refaça. Vale o padrão do mira-animator: espaço vazio é defeito de composição; na criação nativa, o que a escala não resolver vira cenário ambiente da própria metáfora (parado ou em deriva lenta, nunca focal). ## ÁREA SEGURA: 50px medidos do QUADRO, com título E animação dentro Todo deck desta skill leva área segura de 50px, e **a animação tem que sempre CHEGAR na margem** (fit-to-área-segura, item C), nunca parar antes dela. Validado nas imagens de referência (`_reversa_sdd/responsividade/margem_ref/`). A área segura pertence ao **quadro do slide** (o quadrado inteiro), NÃO ao palco da animação: **(A) Margem de 50px medida da borda do QUADRO, e tudo dentro dela.** `body > section:has(.glass-card)` leva `padding: 50px; box-sizing: border-box;` (já no bloco canônico). O título é a primeira coisa dentro da margem (nunca colado na borda do quadro) e a animação preenche todo o resto. ERRADO: pôr os 50px como padding do `.anim-stage`, deixando o título fora da margem. CERTO: a margem abraça o QUADRO inteiro. **(B) O palco ocupa TODO o resto da área segura + viewBox casado em runtime.** No canônico, o bloco do slide, o `.glass-card` e o `.anim-stage` formam uma cadeia flex (`flex: 1 1 auto; min-height: 0`): o palco estica da base do título até a margem de baixo, na largura toda da área segura, sem `aspect-ratio` fixo. Como a altura do título varia (1 ou 2 linhas), a razão do palco não é fixa: case o `viewBox` à razão REAL do palco em runtime, no início de cada build/replay (o `H` autorado, `H = W`, é só valor inicial): ```js // F = FMT. (objeto {W, H} usado pela animação); svg = seleção d3 do function casarPalco() { const r = svg.node().closest('.anim-stage').getBoundingClientRect(); if (r.width > 0 && r.height > 0) F.H = Math.round(F.W * r.height / r.width); svg.attr('viewBox', `0 0 ${F.W} ${F.H}`); } // chame casarPalco() na 1ª linha do build/replay; re-case em resize e document.fonts.ready // (o fitToArea a cada tick absorve a mudança sem precisar rebuildar) ``` **(C) A animação PREENCHE até a margem (fit-to-área-segura).** Não basta caber: tem que **ocupar todo o palco, encostando na margem sem cruzar**. Envolva TODO o desenho num grupo `` e, a cada quadro, escale/translade esse grupo para a bounding box dele preencher `[EDGE, W-EDGE] × [EDGE, H-EDGE]` (EDGE ≈ 14, só a folga de stroke/glow; a margem de 50px vem do padding da SEÇÃO): ```js const EDGE = 14; function fitToArea(g) { // g = que envolve TODO o desenho g.attr('transform', null); const b = g.node().getBBox(); if (!b.width || !b.height) return; const tw = F.W - 2 * EDGE, th = F.H - 2 * EDGE; const s = Math.min(tw / b.width, th / b.height); const tx = EDGE + (tw - b.width * s) / 2 - b.x * s; const ty = EDGE + (th - b.height * s) / 2 - b.y * s; g.attr('transform', `translate(${tx},${ty}) scale(${s})`); } // no 'tick' da animação (ou depois de compor o quadro): fitToArea(root) ``` Vale para QUALQUER metáfora (grafo, fluxo, orbital, partículas): componha livre e deixe o fit preencher. O fit **substitui** o antigo clamp de margem e garante preenchimento determinístico (independe de o force layout espalhar bem). **(D) A margem é TRANSPARENTE.** A área segura é só o espaço vazio do padding de 50px da seção, **sem nenhuma pintura**: nada de faixa vermelha, moldura, borda ou CSS/JS de debug no arquivo entregue. Para conferir durante o trabalho, meça no DevTools ou pinte temporariamente e REMOVA antes de entregar. **Validação (a olho):** título e animação inteiros dentro dos 50px, e a animação encostando na margem (não parando antes). ## Dimensão (erro mais comum) O quadrado é **generalista para a tela atual**, não um tamanho fixo em pixels: o **lado é a altura cheia da tela** (`100vh`), a mesma do 16:9. Numa tela 1080p dá 1080x1080; em outra, escala junto. É a **coluna central** centralizada na horizontal, com sobra dos dois lados em #000000. Fixar 1080x1080 prenderia o resultado a uma única resolução. Não é moldura fixa que só centraliza (a versão antiga fazia isso, deixando o `` 16:9 com faixa preta acima e abaixo). Aqui o QUADRO é o slide inteiro, o palco ocupa toda a área segura abaixo do título e a geometria de cada animação é **reformulada no JS da cópia** para preencher. ## Criação do zero na geometria nativa Quando não houver deck 16:9 de origem, ou o usuário pedir "cria um slide quadrado sobre X", NÃO crie um 16:9 intermediário para converter depois. A animação nasce pensada para o quadrado: 1. **Herde as regras criativas do `agents/mira-animator/SKILL.md`:** metáfora primeiro, animação depois (método A/B antes de codar), Regra Zero (metáfora + história + loop interno obrigatório), refinamento sob demanda por slide, regra de idioma, regra de título (sem ícone, máximo 6 palavras), estrutura do card com glass-card. Manter a estrutura do glass-card é o que deixa o mesmo CSS desta skill esconder header/base e exibir só título + animação. 2. **Geometria nativa desde a concepção:** o arquivo já nasce como `index-1x1.html` (na pasta do deck novo), com o bloco `