iron-edge 1.0.0

package/squads/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

package/squads/squad-animations/tasks/design-lighting-setup.md

@@ -0,0 +1,170 @@
+---
+task: design-lighting-setup
+responsavel: "@threejs-architect"
+responsavel_type: Agent
+atomic_layer: Task
+elicit: false
+
+Entrada:
+  - campo: scene_setup
+    tipo: code
+    origem: "setup-threejs-scene"
+    obrigatorio: true
+  - campo: mood
+    tipo: string
+    origem: "animation_brief"
+    obrigatorio: true
+
+Saida:
+  - campo: lighting_setup
+    tipo: code
+    destino: "create-material-system"
+
+Checklist:
+  - "[ ] Selecionar schema de iluminacao por mood"
+  - "[ ] Configurar key, fill, rim lights"
+  - "[ ] Ajustar intensidades e cores"
+  - "[ ] Configurar sombras (type, mapSize, bias)"
+  - "[ ] Testar com materiais finais"
+---
+
+# Task: Design Lighting Setup
+
+## Metadata
+- **Agent:** threejs-architect (Vertex)
+- **Squad:** squad-animations
+- **Complexity:** MEDIUM
+
+## Objetivo
+Projetar iluminacao da cena 3D — key light, fill, rim, ambient e special lights. Iluminacao define o mood visual e e tao importante quanto geometria e materiais.
+
+## Pre-Conditions
+- Scene setup funcional
+- Mood desejado definido no brief
+- Materiais planejados (PBR, toon, flat)
+- Shadow requirements (sim/nao, qualidade)
+
+## Lighting por Mood
+- **Dramatico:** Key forte lateral, fill fraco, rim intenso
+- **Suave/Premium:** Ambient alto, directional suave, sem sombras duras
+- **Neon/Cyberpunk:** PointLights coloridos, sem ambient, bloom forte
+- **Natural:** DirectionalLight como sol, hemisphere fill
+
+## Passos
+
+### 1. Configurar Three-Point Lighting
+```javascript
+// Key light — luz principal
+const keyLight = new THREE.DirectionalLight(0xffffff, 1.5);
+keyLight.position.set(5, 5, 5);
+
+// Fill light — suaviza sombras
+const fillLight = new THREE.DirectionalLight(0x8888ff, 0.4);
+fillLight.position.set(-5, 3, -5);
+
+// Rim/back light — separa objeto do background
+const rimLight = new THREE.DirectionalLight(0xffffff, 0.8);
+rimLight.position.set(0, 5, -5);
+
+scene.add(keyLight, fillLight, rimLight);
+```
+
+### 2. Adicionar Ambient Light
+```javascript
+// Hemisphere: cor do ceu + cor do chao
+const hemiLight = new THREE.HemisphereLight(0xddeeff, 0x0f0e0d, 0.5);
+scene.add(hemiLight);
+// Ou ambient flat:
+const ambientLight = new THREE.AmbientLight(0x404040, 0.3);
+```
+
+### 3. Configurar Point Lights (Accent)
+```javascript
+const accent = new THREE.PointLight(0xff6600, 2, 10);
+accent.position.set(2, 1, 0);
+scene.add(accent);
+// Decay: 2 (fisicamente correto)
+accent.decay = 2;
+```
+
+### 4. Configurar Spot Lights
+```javascript
+const spot = new THREE.SpotLight(0xffffff, 2, 15, Math.PI / 6, 0.5, 2);
+spot.position.set(0, 8, 0);
+spot.target.position.set(0, 0, 0);
+scene.add(spot);
+scene.add(spot.target);
+```
+
+### 5. Setup Sombras
+```javascript
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+
+keyLight.castShadow = true;
+keyLight.shadow.mapSize.set(2048, 2048);
+keyLight.shadow.camera.near = 0.5;
+keyLight.shadow.camera.far = 20;
+keyLight.shadow.camera.left = -5;
+keyLight.shadow.camera.right = 5;
+keyLight.shadow.bias = -0.001;
+```
+
+### 6. Intensidades por Mood
+| Mood | Key | Fill | Rim | Ambient |
+|------|-----|------|-----|---------|
+| Dramatico | 2.0 | 0.2 | 1.0 | 0.1 |
+| Premium/Suave | 1.0 | 0.6 | 0.5 | 0.5 |
+| Neon | 0 | 0 | 0 | 0 |
+| Natural | 1.5 | 0.3 | 0.3 | 0.4 |
+
+### 7. Animar Luzes
+```javascript
+function animate(elapsed) {
+  // Subtle light movement
+  keyLight.position.x = Math.sin(elapsed * 0.2) * 5;
+  // Color temperature shift
+  accent.color.setHSL(0.05 + Math.sin(elapsed * 0.1) * 0.02, 1, 0.5);
+}
+```
+
+### 8. Light Helpers (Dev)
+```javascript
+if (DEV) {
+  scene.add(new THREE.DirectionalLightHelper(keyLight, 1));
+  scene.add(new THREE.PointLightHelper(accent, 0.5));
+  scene.add(new THREE.CameraHelper(keyLight.shadow.camera));
+}
+```
+
+### 9. Otimizar Performance
+| Otimizacao | Impacto |
+|-----------|---------|
+| Menos shadow-casting lights | Alto |
+| Shadow map 1024 em mobile | Alto |
+| Desabilitar shadows em mobile | Alto |
+| Bake lighting em textures | Maximo |
+
+### 10. Testar com Materiais
+- Verificar que PBR materials refletem corretamente
+- Ajustar tone mapping exposure se necessario
+- Testar com materiais claros E escuros
+- Verificar que cores das luzes nao distorcem materiais
+
+## Output
+- Setup de iluminacao completo (key, fill, rim, ambient)
+- Configuracao de sombras
+- Intensidades e cores documentadas
+- Animacao de luzes se solicitada
+- Dev helpers para ajuste
+- Notas de performance
+
+## Quality Criteria
+- [ ] Mood visual alcancado (conforme brief)
+- [ ] Sombras suaves sem acne ou peter-panning
+- [ ] Shadow camera frustum ajustado (sem clipping)
+- [ ] Performance: max 2 shadow-casting lights
+- [ ] Intensidades balanceadas (sem overexposure)
+- [ ] Hemisphere ou ambient para fill global
+- [ ] Light helpers removidos em production
+- [ ] Testado com materiais finais

package/squads/squad-animations/tasks/ensure-animation-accessibility.md

@@ -0,0 +1,39 @@
+---
+task: ensure-animation-accessibility
+responsavel: "@animation-performance-engineer"
+responsavel_type: Agent
+atomic_layer: Task
+elicit: false
+
+Entrada:
+  - campo: animation_code
+    tipo: code
+    origem: "qualquer agente"
+    obrigatorio: true
+
+Saida:
+  - campo: accessible_animation
+    tipo: code
+    destino: "review-animation-quality"
+
+Checklist:
+  - "[ ] Implementar prefers-reduced-motion media query"
+  - "[ ] Definir fallback para reduced motion (opacity only ou static)"
+  - "[ ] Verificar WCAG 2.3.3 (animation from interactions)"
+  - "[ ] Adicionar pause/play control se animacao > 5s"
+  - "[ ] Verificar contraste durante animacao"
+  - "[ ] Evitar flash rates > 3/segundo"
+  - "[ ] Testar com screen reader"
+---
+
+# Task: Ensure Animation Accessibility
+
+## Metadata
+- **Agent:** animation-performance-engineer (Benchmark)
+- **Squad:** squad-animations
+- **Complexity:** MEDIUM
+
+## WCAG Requirements
+- 2.3.1 Three Flashes or Below Threshold (Level A)
+- 2.3.3 Animation from Interactions (Level AAA)
+- prefers-reduced-motion: OBRIGATORIO em toda animacao

package/squads/squad-animations/tasks/extract-animation-intent.md

@@ -0,0 +1,175 @@
+---
+task: extract-animation-intent
+responsavel: "@animation-interpreter"
+responsavel_type: Agent
+atomic_layer: Task
+elicit: false
+
+Entrada:
+  - campo: user_input
+    tipo: string
+    origem: "prompt ou briefing do usuario"
+    obrigatorio: true
+
+Saida:
+  - campo: animation_intent
+    tipo: object
+    destino: "build-animation-brief"
+
+Checklist:
+  - "[ ] Identificar tipo de animacao"
+  - "[ ] Identificar elemento alvo"
+  - "[ ] Extrair sentimento desejado"
+  - "[ ] Detectar referencias implicitas"
+  - "[ ] Classificar complexidade"
+---
+
+# Task: Extract Animation Intent
+
+## Metadata
+- **Agent:** animation-interpreter (Lens)
+- **Squad:** squad-animations
+- **Complexity:** HIGH
+
+## Objetivo
+Analisar input textual do usuario e extrair intent estruturado — tipo de animacao, elemento alvo, sentimento desejado, referencias implicitas e complexidade. Este e o primeiro passo do pipeline de interpretacao.
+
+## Pre-Conditions
+- Input do usuario disponivel (pode ser vago ou detalhado)
+- Vocabulario de motion do projeto (se ja gerado)
+- Contexto do site/projeto (se disponivel)
+
+## Passos
+
+### 1. Parsear Input por Categorias
+```yaml
+# Input: "quero uma hero section com parallax que parece Apple, bem premium e cinematico"
+parsed:
+  raw: "quero uma hero section com parallax que parece Apple, bem premium e cinematico"
+  segments:
+    - { text: "hero section", category: "element" }
+    - { text: "parallax", category: "technique" }
+    - { text: "parece Apple", category: "reference" }
+    - { text: "premium", category: "feeling" }
+    - { text: "cinematico", category: "feeling" }
+```
+
+### 2. Identificar Tipo de Animacao
+| Keywords no Input | Tipo Inferido |
+|-------------------|---------------|
+| scroll, parallax, reveal, pin | scroll-driven |
+| hover, click, press, toggle | interaction |
+| load, entrance, fade in, appear | entrance |
+| transition, page, route, navigate | page-transition |
+| 3D, rotate, orbit, scene | threejs |
+| particles, stars, confetti, snow | particle-system |
+| background, ambient, loop, continuous | ambient |
+| text, headline, title, words | text-animation |
+| shader, distortion, glitch, effect | shader |
+| morph, transform, shape | shape-morph |
+
+### 3. Identificar Elemento Alvo
+| Keywords | Elemento |
+|----------|----------|
+| hero, banner, header, top | hero-section |
+| card, grid, list, item | card-component |
+| modal, popup, dialog, overlay | modal |
+| nav, menu, hamburger, sidebar | navigation |
+| button, CTA, link, action | button |
+| footer, bottom | footer |
+| section, block, container | generic-section |
+| background, backdrop, behind | background |
+| text, headline, title, paragraph | text-element |
+| image, photo, gallery | image-element |
+
+### 4. Extrair Sentimento (Feeling)
+| Sinonimos do Usuario | Feeling Normalizado |
+|---------------------|-------------------|
+| bonito, elegante, sofisticado, chique | premium |
+| rapido, energetico, snappy, punchy | energetico |
+| suave, smooth, fluido, delicado | suave |
+| cinematico, filme, dramatico, epic | cinematico |
+| divertido, playful, bounce, fun | playful |
+| limpo, clean, minimalista, sutil | minimalista |
+| futurista, tech, cyber, digital | futurista |
+| organico, natural, vivo, breathing | organico |
+| agressivo, bold, impactante, strong | bold |
+| misterioso, dark, moody, ethereal | misterioso |
+
+### 5. Detectar Referencias Implicitas
+| Referencia Mencionada | Site/Efeito Provavel |
+|----------------------|---------------------|
+| "tipo Apple" | apple.com — scroll-driven, product reveal |
+| "estilo Stripe" | stripe.com — gradient mesh, subtle parallax |
+| "como Awwwards" | Award-winning — complex scroll, transitions |
+| "estilo Nike" | nike.com — bold typography, video bg |
+| "tipo Vercel" | vercel.com — dark mode, code animations |
+| "minimalista japones" | muji-like — white space, subtle fade |
+
+### 6. Classificar Complexidade
+| Fator | LOW (1) | MEDIUM (2) | HIGH (3) | CRITICAL (4) |
+|-------|---------|-----------|----------|-------------|
+| Tecnicas | 1 CSS | 2-3 CSS/GSAP | GSAP + scroll | Three.js + shaders |
+| Elementos | 1-2 | 3-5 | 5-10 | 10+ ou full page |
+| Interacao | Nenhuma | Hover | Scroll + click | Multi-input |
+| Custom code | Template | Parametrizado | Custom logic | Custom shader |
+| Dependencies | 0 | 1-2 tasks | 3-5 tasks | 5+ tasks, pipeline |
+
+### 7. Identificar Constraints Implicitos
+- "rapido" → performance-first, lightweight approach
+- "mobile" → touch-friendly, reduced complexity
+- "acessivel" → prefers-reduced-motion, WCAG compliance
+- "leve" → no heavy libraries, CSS-first
+- "sem jQuery" → modern approach only
+- "React/Next.js" → Framer Motion ou GSAP with React
+
+### 8. Detectar Anti-Patterns (O Que NAO Querem)
+| Frase do Usuario | Anti-Pattern Detectado |
+|-----------------|---------------------|
+| "nada exagerado" | Avoid bounce, overshoot, large scale |
+| "nao quero email marketing" | Avoid slide > 100px, slow fade |
+| "sem distracao" | Subtle only, no attention-grabbing |
+| "nao pode ser lento" | Duration < 400ms, snappy |
+| "nada infantil" | No wobble, no cartoon easing |
+
+### 9. Gerar Intent Object
+```yaml
+intent:
+  type: scroll-driven
+  element: hero-section
+  feeling: [cinematico, premium]
+  reference: "apple.com/iphone"
+  anti_patterns: ["nao exagerado"]
+  constraints: [mobile-friendly, 60fps]
+  complexity: HIGH
+  industry: fintech
+  estimated_tasks: 3
+  estimated_agents: [scroll-narrative-engineer, motion-choreographer]
+  confidence: 0.85  # How confident in interpretation
+```
+
+### 10. Validar Intent e Passar Adiante
+- Se confidence < 0.6: fazer 1 pergunta clarificadora
+- Se confidence >= 0.6: propor interpretacao e prosseguir
+- Passar intent para build-animation-brief
+- Se referencia detectada: trigger analyze-reference-animation em paralelo
+
+## Output
+- Animation intent object estruturado
+- Tipo de animacao classificado
+- Elemento alvo identificado
+- Feelings normalizados (mapeados para vocabulario padrao)
+- Referencias identificadas (implicitas e explicitas)
+- Complexidade classificada (LOW/MEDIUM/HIGH/CRITICAL)
+- Constraints e anti-patterns extraidos
+- Confidence score da interpretacao
+
+## Quality Criteria
+- [ ] Tipo de animacao identificado corretamente
+- [ ] Elemento alvo extraido do input
+- [ ] Feelings normalizados (nao raw do usuario)
+- [ ] Referencias implicitas detectadas
+- [ ] Complexidade classificada com justificativa
+- [ ] Anti-patterns identificados (se mencionados)
+- [ ] Confidence score realista
+- [ ] Intent passavel para build-animation-brief sem ambiguidade

package/squads/squad-animations/tasks/generate-animation-report.md

@@ -0,0 +1,39 @@
+---
+task: generate-animation-report
+responsavel: "@animations-orqx"
+responsavel_type: Agent
+atomic_layer: Task
+elicit: false
+
+Entrada:
+  - campo: pipeline_status
+    tipo: object
+    origem: "manage-animation-pipeline"
+    obrigatorio: true
+  - campo: quality_verdict
+    tipo: object
+    origem: "review-animation-quality"
+    obrigatorio: false
+
+Saida:
+  - campo: animation_report
+    tipo: document
+    destino: "usuario ou squad externa"
+
+Checklist:
+  - "[ ] Compilar resultados do pipeline"
+  - "[ ] Incluir metricas de performance"
+  - "[ ] Listar decisoes tecnicas tomadas"
+  - "[ ] Documentar assets entregues"
+  - "[ ] Gerar recomendacoes de melhoria"
+---
+
+# Task: Generate Animation Report
+
+## Metadata
+- **Agent:** animations-orqx (Kinetic)
+- **Squad:** squad-animations
+- **Complexity:** LOW
+
+## Objetivo
+Gerar relatorio completo do projeto de animacao executado.