sinapse-ai 1.0.0

package/squad-animations/tasks/cross-reference-brand-system.md

@@ -0,0 +1,203 @@
+---
+task: cross-reference-brand-system
+responsavel: "@animation-interpreter"
+responsavel_type: Agent
+atomic_layer: Task
+elicit: false
+
+Entrada:
+  - campo: brand_guidelines
+    tipo: document
+    origem: "brand system, briefing do site"
+    obrigatorio: true
+
+Saida:
+  - campo: brand_animation_context
+    tipo: object
+    destino: "build-animation-brief"
+
+Checklist:
+  - "[ ] Extrair paleta de cores → cores para particulas, gradients, luzes"
+  - "[ ] Mapear personalidade da marca → estilo de motion"
+  - "[ ] Traduzir valores → principios de animacao"
+  - "[ ] Identificar tipografia → abordagem de text animation"
+  - "[ ] Gerar contexto de animacao alinhado a marca"
+---
+
+# Task: Cross-Reference Brand System
+
+## Metadata
+- **Agent:** animation-interpreter (Lens)
+- **Squad:** squad-animations
+- **Complexity:** MEDIUM
+
+## Objetivo
+Traduzir brand system (cores, personalidade, valores, tipografia) em parametros de animacao concretos. Garantir que toda animacao do projeto reflete a identidade visual e emocional da marca.
+
+## Pre-Conditions
+- Brand guidelines disponiveis (documento, brand book, ou briefing)
+- Paleta de cores definida (primaria, secundaria, neutros)
+- Personalidade da marca descrita (adjetivos, arquetipo)
+- Tipografia selecionada (familias, pesos)
+
+## Passos
+
+### 1. Extrair Paleta de Cores para Animacao
+| Brand Color | Uso em Animacao |
+|-------------|----------------|
+| Primary | Particulas primarias, glow, accent animations |
+| Secondary | Gradients, secondary elements, hover states |
+| Background | Scene background, fog, ambient light |
+| Accent | Highlights, interactive feedback, CTA pulse |
+| Neutral/dark | Shadows, text, subtle elements |
+| Neutral/light | Glow, soft particles, blur overlays |
+
+```yaml
+animation_colors:
+  particles_primary: "#brand-primary"
+  particles_secondary: "#brand-secondary"
+  glow_color: "#brand-accent"
+  gradient: ["#brand-primary", "#brand-secondary"]
+  three_js:
+    ambient_light: "#brand-neutral-light"
+    point_light: "#brand-accent"
+    fog_color: "#brand-background"
+```
+
+### 2. Mapear Personalidade da Marca para Motion Style
+| Personalidade | Motion Style | Duration | Easing | Movement |
+|---------------|-------------|----------|--------|----------|
+| Sofisticada | Contido, elegante | 400-800ms | ease-decelerate | Minimal, precise |
+| Energetica | Bold, snappy | 150-300ms | back.out | Large, bouncy |
+| Confiavel | Consistente, previsivel | 300-500ms | ease-standard | Smooth, steady |
+| Inovadora | Experimental, bold | 200-600ms | custom spring | Unconventional |
+| Acolhedora | Suave, warm | 400-600ms | ease-decelerate | Gentle, organic |
+| Profissional | Clean, minimal | 200-400ms | ease-standard | Subtle, functional |
+| Luxuosa | Slow, dramatic | 600-1000ms | ease-decelerate | Cinematic, layered |
+| Rebelde | Aggressive, unexpected | 100-300ms | power4.out | Sharp, glitch |
+
+### 3. Traduzir Valores da Marca para Principios de Animacao
+| Valor da Marca | Principio de Animacao | Implementacao |
+|----------------|----------------------|---------------|
+| Transparencia | Animacoes claras, sem surpresas | ease-out consistente, no randomness |
+| Inovacao | Tecnicas modernas, efeitos custom | Shaders, particles, ScrollTrigger |
+| Sustentabilidade | Animacoes leves, low-energy | CSS-first, minimal JS, green coding |
+| Velocidade | Rapido, sem espera | Duration < 300ms, no blocking |
+| Qualidade | Polished, refinado | Disney principles, 60fps, attention to detail |
+| Simplicidade | Minimal, clean | Fade-only, no complex transforms |
+| Humanidade | Organic, imperfeito | Spring easing, slight overshoot, natural |
+
+### 4. Mapear Tipografia para Text Animation
+| Tipo de Fonte | Animation Approach | Tecnica |
+|---------------|-------------------|---------|
+| Serif classica | Reveal letra por letra, elegante | SplitType + clip-path reveal |
+| Sans-serif moderna | Slide-in rapido, fade | translateX + opacity |
+| Display/decorativa | Morphing, scale dramático | Scale entrance, stagger chars |
+| Monospace | Typewriter, terminal | Char-by-char com cursor |
+| Handwritten | Drawing/stroke animation | SVG stroke-dashoffset |
+
+```yaml
+text_animation:
+  headline_font: "Playfair Display" # Serif
+  headline_approach: "char-reveal, stagger 30ms, clip-path"
+  body_font: "Inter" # Sans-serif
+  body_approach: "fade-in, line-by-line, 200ms"
+```
+
+### 5. Analisar Arquetipo da Marca
+| Arquetipo | Motion Personality | Exemplos |
+|-----------|-------------------|----------|
+| Heroi | Bold, impactful, confident | Nike — strong transitions |
+| Mago | Transformative, magical | Disney — morph, sparkle |
+| Sabio | Clean, structured, precise | Google — material design motion |
+| Explorador | Dynamic, adventurous | Patagonia — parallax, nature |
+| Criador | Creative, expressive | Adobe — colorful, experimental |
+| Cuidador | Gentle, warm, reassuring | Health brands — soft fade, calm |
+| Rebelde | Disruptive, edgy, raw | Punk brands — glitch, shake |
+| Amante | Sensual, smooth, flowing | Luxury — slow reveals, golden |
+
+### 6. Definir Color Animation Guidelines
+```yaml
+color_rules:
+  gradients:
+    allowed_pairs: [["primary", "secondary"], ["primary", "accent"]]
+    angle: 135  # Diagonal
+    animation: "hue-shift 10deg over 5s, loop"
+  particles:
+    base_color: "primary"
+    variation: "hue +-15deg, saturation +-10%"
+  glow:
+    color: "accent"
+    intensity: 0.3  # Subtle
+    radius: "20-40px"
+  dark_mode:
+    adjust: "increase luminance 10%, reduce saturation 20%"
+```
+
+### 7. Definir Photography/Image Style Impact
+| Image Style | Animation Impact |
+|-------------|-----------------|
+| Minimalist, lots of white | Subtle animations, fade-only |
+| Bold, saturated colors | Stronger motion, color shifts |
+| Photography-heavy | Ken Burns, parallax, reveal |
+| Illustration-heavy | Character animation, SVG morph |
+| Abstract/geometric | Geometric transitions, grid |
+
+### 8. Gerar Motion Personality Document
+```yaml
+motion_personality:
+  name: "Confident Clarity"
+  description: "Animations are purposeful and precise. Movement feels confident
+    but never aggressive. Transitions guide the user with clarity."
+  do:
+    - "Use ease-decelerate for all entrances"
+    - "Keep durations between 300-600ms"
+    - "Stagger elements to create reading order"
+    - "Use brand primary for accent animations"
+  dont:
+    - "Never use bounce or elastic easing"
+    - "Never exceed 800ms for any single animation"
+    - "Never animate more than 3 properties simultaneously"
+    - "Never use random or chaotic motion"
+```
+
+### 9. Criar Color Token Mapping
+```css
+/* Animation-specific color tokens derived from brand */
+:root {
+  --anim-primary: var(--brand-primary);
+  --anim-secondary: var(--brand-secondary);
+  --anim-glow: var(--brand-accent);
+  --anim-particle: var(--brand-primary);
+  --anim-bg-gradient-start: var(--brand-primary);
+  --anim-bg-gradient-end: var(--brand-secondary);
+  --anim-text-reveal: var(--brand-primary);
+  --anim-shadow: rgba(var(--brand-primary-rgb), 0.2);
+}
+```
+
+### 10. Validar Coerencia e Entregar
+- Verificar que motion personality nao contradiz brand personality
+- Confirmar que cores de animacao sao acessiveis (contrast ratios)
+- Testar combinacoes de cor em dark mode e light mode
+- Entregar brand_animation_context para build-animation-brief
+
+## Output
+- Brand animation context completo
+- Paleta de cores mapeada para usos em animacao
+- Motion personality derivada da personalidade da marca
+- Text animation approach por tipo de fonte
+- Do/Dont list alinhado com valores da marca
+- Color token mapping (CSS custom properties)
+- Arquetipo de motion identificado
+- Guidelines de uso de cor em animacoes
+
+## Quality Criteria
+- [ ] Cores da marca mapeadas para usos de animacao especificos
+- [ ] Personalidade da marca traduzida em motion style
+- [ ] Valores da marca refletidos em principios de animacao
+- [ ] Tipografia mapeada para approach de text animation
+- [ ] Do/Dont list coerente e acionavel
+- [ ] Color tokens exportados (CSS custom properties)
+- [ ] Sem contradicoes entre brand e motion personality
+- [ ] Testado em dark mode e light mode

package/squad-animations/tasks/design-animation-timing.md

@@ -0,0 +1,157 @@
+---
+task: design-animation-timing
+responsavel: "@motion-choreographer"
+responsavel_type: Agent
+atomic_layer: Task
+elicit: false
+
+Entrada:
+  - campo: animation_brief
+    tipo: document
+    origem: "ca-orchestrator"
+    obrigatorio: true
+
+Saida:
+  - campo: timing_spec
+    tipo: object
+    destino: "agente executor"
+
+Checklist:
+  - "[ ] Definir duration por elemento"
+  - "[ ] Selecionar easing curves"
+  - "[ ] Configurar delays e staggers"
+  - "[ ] Mapear sequencia temporal"
+  - "[ ] Aplicar principios Disney relevantes"
+  - "[ ] Validar ritmo geral"
+---
+
+# Task: Design Animation Timing
+
+## Metadata
+- **Agent:** motion-choreographer (Tempo)
+- **Squad:** squad-animations
+- **Complexity:** HIGH
+
+## Objetivo
+Projetar o timing completo de uma animacao — durations, easing curves, delays, staggers e sequenciamento. O timing e o que diferencia animacao amadora de profissional. Entregar uma timing spec executavel pelos agentes implementadores.
+
+## Pre-Conditions
+- Animation brief com tipo e elementos a animar
+- Contexto da animacao (micro-interaction, entrance, page transition)
+- Feeling desejado (snappy, smooth, dramatic, playful)
+- Numero de elementos no sequence
+
+## Regras de Timing
+- Micro-interactions: 100-300ms
+- Transitions: 200-500ms
+- Entrance animations: 300-800ms
+- Complex sequences: 600-1200ms
+- Page transitions: 400-800ms
+
+## Passos
+
+### 1. Classificar Contexto de Timing
+| Contexto | Duration Range | Easing Family |
+|----------|---------------|---------------|
+| Immediate feedback | 50-150ms | ease-out |
+| State change | 150-300ms | ease-in-out |
+| Entrance/reveal | 300-600ms | ease-out (decelerate) |
+| Exit/dismiss | 150-300ms | ease-in (accelerate) |
+| Dramatic/hero | 600-1200ms | custom bezier |
+| Scroll-driven | N/A (scrub) | linear/ease-out |
+
+### 2. Definir Duration por Elemento
+| Elemento | Duration | Justificativa |
+|----------|----------|---------------|
+| Button hover | 150ms | Feedback imediato |
+| Card entrance | 400ms | Noticeable but not slow |
+| Modal open | 300ms | Standard |
+| Page transition | 500ms | Smooth handoff |
+| Hero sequence | 800ms | Dramatic impact |
+
+### 3. Selecionar Easing Curves
+| Tipo | CSS | Feeling |
+|------|-----|---------|
+| Standard | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Balanced, natural |
+| Decelerate | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Entrance, appearing |
+| Accelerate | `cubic-bezier(0.4, 0.0, 1, 1)` | Exit, disappearing |
+| Sharp | `cubic-bezier(0.4, 0.0, 0.6, 1)` | Quick, decisive |
+| Spring | `cubic-bezier(0.175, 0.885, 0.32, 1.275)` | Bouncy, playful |
+
+### 4. Mapear Sequencia Temporal
+```
+t=0ms    Element A starts (entrance)
+t=100ms  Element B starts (stagger)
+t=200ms  Element C starts (stagger)
+t=400ms  Element A complete
+t=500ms  Element B complete
+t=600ms  Element C complete
+Total: 600ms perceived, 400ms per element
+```
+
+### 5. Configurar Stagger Pattern
+| Pattern | Stagger Delay | Quando |
+|---------|--------------|--------|
+| Cascade | 50-100ms fixo | Listas, cards |
+| Accelerating | 80, 60, 40ms | Building energy |
+| Decelerating | 40, 60, 80ms | Settling down |
+| From center | Distancia-based | Grid, radial |
+
+### 6. Aplicar Regra de Assimetria
+- Entrance: mais lento (ease-out, 300-600ms)
+- Exit: mais rapido (ease-in, 70% do entrance)
+- Exemplo: entrance 400ms, exit 280ms
+
+### 7. Validar Perceived Duration
+- Animacao mais rapida que 100ms: user nao percebe como animacao
+- Mais lenta que 1000ms: user percebe como lenta
+- Sweet spot para UI: 200-400ms
+- Teste: fechar os olhos, abrir, a animacao ja deveria estar quase completa
+
+### 8. Considerar Contexto de Repeticao
+| Frequencia | Timing Approach |
+|-----------|----------------|
+| Uma vez (page load) | Mais dramatico (600-800ms) |
+| Frequente (hover) | Mais rapido (100-200ms) |
+| Repetitivo (lista) | Minimo (50-80ms stagger) |
+| Scroll-driven | Scrub (sem duration fixo) |
+
+### 9. Documentar Timing Spec
+```yaml
+timing_spec:
+  element_a:
+    duration: 400ms
+    easing: cubic-bezier(0.0, 0.0, 0.2, 1)
+    delay: 0ms
+    property: [opacity, transform]
+  element_b:
+    duration: 400ms
+    easing: cubic-bezier(0.0, 0.0, 0.2, 1)
+    delay: 100ms
+    property: [opacity, transform]
+  total_perceived: 500ms
+```
+
+### 10. Reduced Motion Timing
+- Reduce durations to 0ms (instant state change)
+- Remove staggers
+- Keep color/opacity changes (reduce, not eliminate)
+- Document which animations are decorative vs functional
+
+## Output
+- Timing spec completa por elemento
+- Easing curves selecionadas com justificativa
+- Stagger pattern definido
+- Sequencia temporal mapeada
+- Reduced motion variants
+- Total perceived duration
+
+## Quality Criteria
+- [ ] Durations dentro dos ranges recomendados
+- [ ] Easing curves adequadas ao contexto (decelerate/accelerate)
+- [ ] Stagger nao faz animacao total exceder 1s
+- [ ] Entrada mais lenta que saida (assimetria)
+- [ ] Timing spec documentada e executavel
+- [ ] Reduced motion: instant ou sem animacao
+- [ ] Perceived duration validada mentalmente
+- [ ] Ritmo geral consistente (nao mistura rapido e lento sem razao)

package/squad-animations/tasks/design-entrance-animation.md

@@ -0,0 +1,139 @@
+---
+task: design-entrance-animation
+responsavel: "@motion-choreographer"
+responsavel_type: Agent
+atomic_layer: Task
+elicit: false
+
+Entrada:
+  - campo: element_spec
+    tipo: object
+    origem: "animation_brief"
+    obrigatorio: true
+
+Saida:
+  - campo: entrance_animation
+    tipo: object
+    destino: "css-motion-artist ou threejs-architect"
+
+Checklist:
+  - "[ ] Definir estado inicial (from)"
+  - "[ ] Definir estado final (to)"
+  - "[ ] Selecionar tipo (fade, slide, scale, clip, blur)"
+  - "[ ] Configurar easing e duration"
+  - "[ ] Considerar viewport trigger"
+---
+
+# Task: Design Entrance Animation
+
+## Metadata
+- **Agent:** motion-choreographer (Tempo)
+- **Squad:** squad-animations
+- **Complexity:** LOW
+
+## Objetivo
+Projetar animacoes de entrada — como elementos aparecem no viewport ou na pagina. Definir from/to states, easing e duration que criam uma entrada natural e engajante.
+
+## Pre-Conditions
+- Elemento e contexto definidos (hero, card, text, image)
+- Trigger definido (page load, scroll, interaction)
+- Feeling desejado (sutil, impactante, elegante)
+- Performance constraints (composite-only properties)
+
+## Passos
+
+### 1. Selecionar Tipo de Entrance
+| Tipo | From State | Melhor Para |
+|------|-----------|-------------|
+| Fade-in | opacity: 0 | Universal, sutil |
+| Slide-up | y: 20-40px, opacity: 0 | Cards, text, content |
+| Scale-in | scale: 0.8-0.95, opacity: 0 | Modals, images, heroes |
+| Clip-reveal | clip-path: inset(100%) | Headlines, premium |
+| Blur-in | filter: blur(10px), opacity: 0 | Dramatic, cinematic |
+| Slide-from-side | x: +-50px, opacity: 0 | Navegacao lateral |
+
+### 2. Definir From/To States
+```yaml
+entrance_spec:
+  from:
+    opacity: 0
+    transform: translateY(30px)
+  to:
+    opacity: 1
+    transform: translateY(0)
+  duration: 400ms
+  easing: cubic-bezier(0.0, 0.0, 0.2, 1) # decelerate
+  trigger: viewport-enter
+```
+
+### 3. Duration por Importancia
+| Elemento | Duration | Razao |
+|----------|----------|-------|
+| Hero/headline | 500-700ms | Dramatico, focal |
+| Cards/items | 300-400ms | Balanceado |
+| Text/paragraph | 300-400ms | Rapido |
+| Icons/small | 200-300ms | Sutil |
+| Background | 600-800ms | Lento, atmosferico |
+
+### 4. Easing para Entrances
+- SEMPRE usar ease-out (decelerate) para entrances
+- Objeto "chega rapido e freia" — mais natural
+- Nunca ease-in para entrance (parece que "desacelera antes de chegar")
+- Spring easing para playful/bouncy
+
+### 5. Distance de Movimento
+| Distancia | Feeling | Uso |
+|-----------|---------|-----|
+| 10-20px | Sutil, profissional | UI elements, forms |
+| 20-40px | Notavel, engajante | Cards, sections |
+| 40-80px | Dramatico | Hero, full-section |
+| 0px (scale/opacity only) | Clean, minimal | Images, icons |
+
+### 6. Trigger Types
+| Trigger | Quando | Ferramenta |
+|---------|--------|-----------|
+| Page load | Imediato | CSS animation, GSAP |
+| Viewport enter | Scroll reveals | ScrollTrigger, IO |
+| User action | Click, hover | Event listener |
+| Data loaded | Async complete | Callback/promise |
+
+### 7. Composicao de Propriedades
+- Combinar 2-3 propriedades max (opacity + transform)
+- Evitar animar width/height (layout trigger)
+- Scale + opacity = modal feel
+- translateY + opacity = content reveal
+
+### 8. Stagger Entrance (Grupo)
+- Primeiro elemento: sem delay
+- Demais: stagger 60-100ms
+- Total sequence < 800ms
+- Ver task: choreograph-stagger-sequence
+
+### 9. Reduced Motion
+- Entrance com opacity fade rapido (100ms)
+- OU mostrar tudo instantaneo (no animation)
+- NUNCA remover conteudo — so remover motion
+
+### 10. Anti-Patterns
+- Distance > 100px (exagerado, parece email marketing)
+- Duration > 1s (usuario ja perdeu interesse)
+- Ease-in em entrance (nao natural)
+- Scale < 0.5 (muito pequeno, distrai)
+- Rotate em entrance (confuso para text content)
+
+## Output
+- Entrance spec: from/to states, duration, easing
+- Trigger type e configuration
+- Stagger settings se grupo
+- Reduced motion variant
+- Anti-pattern warnings
+
+## Quality Criteria
+- [ ] Ease-out (decelerate) para todas entrances
+- [ ] Duration dentro de 200-700ms
+- [ ] Distance proporcional ao tamanho do elemento
+- [ ] Apenas propriedades composite (transform, opacity)
+- [ ] Trigger correto (load vs scroll vs action)
+- [ ] Reduced motion: conteudo visivel
+- [ ] Nao exagerado (sutil > dramatico para UI)
+- [ ] Consistente com animation system do projeto

package/squad-animations/tasks/design-exit-animation.md

@@ -0,0 +1,150 @@
+---
+task: design-exit-animation
+responsavel: "@motion-choreographer"
+responsavel_type: Agent
+atomic_layer: Task
+elicit: false
+
+Entrada:
+  - campo: element_spec
+    tipo: object
+    origem: "animation_brief"
+    obrigatorio: true
+
+Saida:
+  - campo: exit_animation
+    tipo: object
+    destino: "css-motion-artist ou scroll-narrative-engineer"
+
+Checklist:
+  - "[ ] Definir estado de saida"
+  - "[ ] Exit mais rapido que entrance (regra 70%)"
+  - "[ ] Selecionar tipo (fade, collapse, slide-out)"
+  - "[ ] Garantir que nao interrompe fluxo"
+  - "[ ] Cleanup apos animacao (display:none, remove)"
+---
+
+# Task: Design Exit Animation
+
+## Metadata
+- **Agent:** motion-choreographer (Tempo)
+- **Squad:** squad-animations
+- **Complexity:** LOW
+
+## Objetivo
+Projetar animacoes de saida — como elementos desaparecem da tela. Exits devem ser mais rapidos que entrances, nao chamar atencao para si e garantir cleanup DOM correto apos completar.
+
+## Pre-Conditions
+- Elemento e contexto definidos
+- Entrance animation definida (exit deve ser complementar)
+- Cleanup behavior definido (remove, hide, collapse)
+- Next state do layout apos exit
+
+## Passos
+
+### 1. Regra de Assimetria
+- Exit = 70% da duration do entrance
+- Entrada 400ms -> Saida 280ms
+- Razao: usuario quer ver o proximo, nao esperar a saida
+
+### 2. Selecionar Tipo de Exit
+| Tipo | To State | Melhor Para |
+|------|----------|-------------|
+| Fade-out | opacity: 0 | Universal |
+| Slide-away | y: -20px, opacity: 0 | Cards, content |
+| Collapse | height: 0, opacity: 0 | Lists, accordion |
+| Scale-out | scale: 0.9, opacity: 0 | Modals, popups |
+| Slide-lateral | x: +-100%, opacity: 0 | Page transitions |
+| Dissolve | filter: blur(5px), opacity: 0 | Dramatic exits |
+
+### 3. Easing para Exits
+- SEMPRE ease-in (accelerate) para exits
+- Objeto "comeca devagar e vai embora rapido"
+- Complementar ao ease-out do entrance
+
+### 4. Duration Guidelines
+| Elemento | Exit Duration | = Entrance * 0.7 |
+|----------|-------------|-------------------|
+| Modal | 200ms | (300ms entrance) |
+| Toast/notification | 200ms | (300ms entrance) |
+| Card dismiss | 250ms | (350ms entrance) |
+| Page transition out | 250ms | (400ms entrance) |
+| Dropdown | 150ms | (200ms entrance) |
+
+### 5. Exit Direction
+- Oposto ao entrance OU na direcao da proxima acao
+- Entrance de baixo (slideUp) -> Exit para cima (slideUp) ou fade
+- Dismiss swipe: sair na direcao do swipe
+- NUNCA sair na mesma direcao que entrou (parece yoyo)
+
+### 6. Cleanup Apos Exit
+```javascript
+// Framer Motion
+<AnimatePresence>
+  {isVisible && <motion.div exit={{ opacity: 0, y: -20 }} />}
+</AnimatePresence>
+
+// GSAP
+gsap.to(element, {
+  opacity: 0, y: -20,
+  duration: 0.25,
+  ease: 'power2.in',
+  onComplete: () => element.remove(),
+});
+```
+
+### 7. Collapse Animation
+```css
+.collapsing {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 250ms ease-in, opacity 200ms ease-in;
+}
+.collapsing.hidden {
+  grid-template-rows: 0fr;
+  opacity: 0;
+}
+.collapsing > .content { overflow: hidden; }
+```
+
+### 8. Stagger Exit (Reverse Order)
+```javascript
+gsap.to('.card', {
+  opacity: 0, y: -20,
+  duration: 0.25,
+  ease: 'power2.in',
+  stagger: {
+    each: 0.04,
+    from: 'end', // Ultimo sai primeiro, ou 'start'
+  }
+});
+```
+
+### 9. Prevent Layout Shift
+- Animar opacity + transform (nao remove do flow)
+- Apos animacao: mudar display/remove
+- Considerar `position: absolute` durante exit
+- Proximo conteudo deve ocupar espaco suavemente
+
+### 10. Reduced Motion
+- Exit instantaneo (display: none, sem animacao)
+- Ou fade rapido (100ms)
+- Cleanup deve acontecer mesmo sem animacao
+
+## Output
+- Exit spec: to state, duration, easing
+- Cleanup behavior (remove, hide, collapse)
+- Reverse stagger se grupo
+- Layout shift prevention
+- Reduced motion variant
+- Relationship com entrance animation
+
+## Quality Criteria
+- [ ] Exit = 70% da duration do entrance
+- [ ] Ease-in (accelerate) para todos exits
+- [ ] Cleanup DOM apos animacao completar
+- [ ] Sem layout shift durante exit
+- [ ] Exit nao chama atencao (deve ser discreto)
+- [ ] Stagger reverse order funciona
+- [ ] Reduced motion: exit instantaneo
+- [ ] Complementar a animacao de entrada