` no padrão do deck e preserve o sistema de navegação (barra de progresso, próximo, teclado). ## Scaffold canônico (gerar conforme os arquivos de teste) A forma morfante é um `` dentro de um grupo que escala o sistema 0 0 24 24 (caso dos ícones) para o palco. Como o path vive no espaço 24x24 e é escalado, o `stdDeviation` do glow fica pequeno (~0.7), senão o blur explode. ```html

``` ```javascript gsap.registerPlugin(MorphSVGPlugin); const REDUCE = matchMedia('(prefers-reduced-motion: reduce)').matches; const MIRA_SIZE = 3; // 1..10, ponto único de ritmo/amplitude const SPEED = 0.7 + MIRA_SIZE * 0.1; // 1.0 em SIZE 3 // os d dos SVGs de entrada, na ordem do morph (já inlinados, ids únicos) const FORMAS = [ "M6.5 20q-2.28 0-3.89-1.57...Z", // forma A (svg 1) "m12 21.35l-1.45-1.32C5.4...z" // forma B (svg 2) ...e assim por diante ]; function animateSlug() { const svg = document.getElementById('SLUG-svg'); if (window.__slugTl) window.__slugTl.kill(); // anti-vazamento: mata o loop antigo const H = 300, s = (H / 24).toFixed(2); // altura da forma no palco svg.innerHTML = ` `; if (REDUCE) { document.getElementById('SLUG-forma').setAttribute('d', FORMAS[FORMAS.length - 1]); return; } const seq = FORMAS.length === 2 ? [FORMAS[1], FORMAS[0]] // 2 SVGs: ida e volta : FORMAS.slice(1).concat([FORMAS[0]]); // N SVGs: encadeia e fecha o ciclo const tl = gsap.timeline({ repeat: -1, defaults: { ease: 'power2.inOut' } }); seq.forEach(d => tl.to('#SLUG-forma', { duration: 1.3, morphSVG: d }, '+=0.7')); tl.timeScale(SPEED); window.__slugTl = tl; } ``` Registre `animateSlug` no `setupAnimationTriggers()` do deck (mesmo padrão do mira-animator): dispara ao entrar na viewport e no botão Replay. ## Passos 1. **Receber destino + arquivos.** Slide novo ou slide N do deck X, e os 2+ `.svg` na ordem do morph. Com 1 só, avise que o morph precisa de 2 ou mais. Se faltar arquivo, pergunte. 2. **Vendorar o GSAP** em `assets/gsap/` (pule se já houver). 3. **Inline + ids únicos + convertToPath:** ler cada SVG, extrair os `d`, renomear ids, converter formas não-path. Se as contagens de path diferirem, pareie até o menor e avise; se os viewBox diferirem, normalize e avise. 4. **Montar o card limpo:** título sem ícone (máx. 6 palavras), forma grande e central em #FF904D, marcador `@MIRA:SIZE 3/10`. Inserir como `

` no padrão do deck; preservar a navegação. 5. **Implementar a timeline** com o scaffold: `repeat: -1`, 2 = ida e volta, N = encadeia; `prefers-reduced-motion` mostra a forma final estática; registrar no trigger do deck. 6. **Reportar.** Caminho do arquivo, a sequência do morph e o loop em uma frase, os arquivos usados, e que abre por `file://` sem servidor. ## Checklist - [ ] GSAP e MorphSVG vendorados em `assets/gsap/`; referenciados por caminho relativo; nenhum CDN em runtime. - [ ] Slide abre por `file://` sem nada externo. - [ ] 2 ou mais SVGs de entrada; com 1 só, a skill avisou em vez de gerar card incompleto. - [ ] Paths inlinados; ids de paths/gradientes/filtros renomeados para únicos; 0 colisão. - [ ] Formas não-path convertidas com `convertToPath`; nenhuma `circle`/`rect`/`polygon` crua no morph. - [ ] Loop contínuo (`repeat: -1`): 2 = ida e volta, N = encadeia e fecha o ciclo. - [ ] `prefers-reduced-motion` mostra a forma final estática, sem loop. - [ ] Card limpo: só título + forma; título sem ícone, no máximo 6 palavras. - [ ] Laranja #FF904D na forma; glow com `stdDeviation` pequeno (forma escalada). - [ ] Marcador `@MIRA:SIZE 3/10` acima do palco; timeline registrada no trigger do deck. - [ ] Anti-vazamento: a timeline antiga é morta (`kill`) antes de reconstruir/replay. - [ ] Nenhum travessão (—); acentuação UTF-8 correta (segue `agents/_shared/idioma.md`).