sinapse-ai 1.0.0

package/squad-animations/checklists/animation-quality-checklist.md

@@ -0,0 +1,67 @@
+---
+checklist: animation-quality-checklist
+squad: squad-animations
+description: "Checklist de qualidade para validar animacoes antes da entrega"
+used_by:
+  - review-animation-quality
+  - animation-quality-review-cycle
+---
+
+# Animation Quality Checklist
+
+## 1. Fidelidade ao Brief
+- [ ] Animacao entrega o feeling solicitado no brief
+- [ ] Tipo de animacao corresponde ao especificado
+- [ ] Elemento alvo correto
+- [ ] Tecnologia utilizada e a recomendada
+- [ ] Complexidade dentro do estimado
+
+## 2. Qualidade Visual
+- [ ] Motion e fluido e natural (sem jank)
+- [ ] Easing curves sao apropriadas para o feeling
+- [ ] Duration esta no range correto
+- [ ] Stagger timing cria ritmo agradavel
+- [ ] Cores e opacidades consistentes com brand
+
+## 3. Principios de Motion
+- [ ] Ease in/ease out aplicado corretamente
+- [ ] Anticipation presente onde necessario
+- [ ] Follow-through em listas e sequencias
+- [ ] Secondary action enriquece sem distrair
+- [ ] Staging direciona atencao corretamente
+
+## 4. Performance
+- [ ] 60fps constante em desktop
+- [ ] 30fps minimo em mobile
+- [ ] Sem layout thrashing (transform/opacity only)
+- [ ] Memory estavel (sem leaks)
+- [ ] GPU usage aceitavel
+
+## 5. Responsividade
+- [ ] Funciona em desktop (1920+)
+- [ ] Funciona em tablet (768-1024)
+- [ ] Funciona em mobile (320-767)
+- [ ] Touch interactions funcionam
+- [ ] Orientacao landscape/portrait
+
+## 6. Acessibilidade
+- [ ] prefers-reduced-motion implementado
+- [ ] Fallback graceful (opacity ou static)
+- [ ] Sem flash rate > 3/segundo
+- [ ] Pause/play disponivel para loops > 5s
+- [ ] Screen reader nao e afetado
+
+## 7. Codigo
+- [ ] Codigo limpo e bem estruturado
+- [ ] Cleanup de listeners e timelines no unmount
+- [ ] Nenhum console.log residual
+- [ ] Imports otimizados (tree-shaking friendly)
+- [ ] Comentarios em trechos complexos
+
+## Scoring
+| Score | Verdict |
+|-------|---------|
+| 28-30 checks | APPROVED |
+| 22-27 checks | APPROVED com notas |
+| 15-21 checks | NEEDS_REVISION |
+| < 15 checks | REJECTED |

package/squad-animations/checklists/performance-audit-checklist.md

@@ -0,0 +1,78 @@
+---
+checklist: performance-audit-checklist
+squad: squad-animations
+description: "Checklist tecnico para auditoria de performance de animacoes"
+used_by:
+  - audit-animation-performance
+  - optimize-threejs-scene
+  - optimize-for-mobile
+---
+
+# Performance Audit Checklist
+
+## 1. CSS Animations
+- [ ] Apenas transform e opacity animados (compositor thread)
+- [ ] will-change aplicado seletivamente (nao em tudo)
+- [ ] Nenhum width/height/top/left animado
+- [ ] contain: layout style onde possivel
+- [ ] @keyframes sem propriedades de layout
+
+## 2. JavaScript Animations
+- [ ] requestAnimationFrame usado (nao setTimeout/setInterval)
+- [ ] Delta time implementado para frame-independence
+- [ ] GSAP timelines com cleanup (kill/revert)
+- [ ] Event listeners com removeEventListener no cleanup
+- [ ] Intersection Observer para trigger (nao scroll listener)
+
+## 3. Three.js Specific
+- [ ] Renderer.setPixelRatio(Math.min(devicePixelRatio, 2))
+- [ ] Geometrias estaticas merged
+- [ ] InstancedMesh para objetos repetidos
+- [ ] Frustum culling ativo
+- [ ] Dispose() em geometrias e materiais nao usados
+- [ ] Texturas comprimidas (KTX2/Basis)
+- [ ] Shadow map resolution proporcional
+
+## 4. Shaders
+- [ ] Sem branches dinamicos no fragment shader
+- [ ] step/smoothstep ao inves de if/else
+- [ ] Constantes pre-computadas
+- [ ] Precision adequada (mediump onde possivel)
+- [ ] Uniforms atualizados apenas quando mudam
+
+## 5. Particles
+- [ ] Quantidade adequada ao device tier
+- [ ] Object pooling implementado
+- [ ] GPGPU para > 100K particulas
+- [ ] BufferAttribute.needsUpdate seletivo
+- [ ] Spatial partitioning para interacao
+
+## 6. Scroll Animations
+- [ ] ScrollTrigger.refresh() no resize
+- [ ] Nenhuma animacao fora do viewport
+- [ ] Batch reads/writes no DOM
+- [ ] Passive event listeners
+- [ ] Debounce em handlers pesados
+
+## 7. Loading
+- [ ] Assets preloaded ou lazy loaded
+- [ ] Loading state visivel ao usuario
+- [ ] Texturas em resolucao adequada (nao 4K desnecessario)
+- [ ] Modelos 3D com Draco compression
+- [ ] Code splitting para animacoes pesadas
+
+## 8. Mobile
+- [ ] Device tier detection implementado
+- [ ] Pixel ratio limitado a 2
+- [ ] Post-processing reduzido/removido
+- [ ] Particle count reduzido
+- [ ] Touch events otimizados (passive: true)
+
+## Metricas Target
+| Metrica | Desktop | Mobile |
+|---------|---------|--------|
+| FPS | 60 constante | 30 min, 60 target |
+| First Animation | < 1s | < 2s |
+| Memory Growth | 0 apos init | 0 apos init |
+| Draw Calls | < 100 | < 50 |
+| Triangles | < 1M | < 200K |

package/squad-animations/knowledge-base/comprehensive-animation-reference.md

@@ -0,0 +1,290 @@
+# Comprehensive Animation Reference — Deep Dive Companion
+
+> Referencia aprofundada cobrindo todos os dominios de animacao web.
+> Complementa as KBs especializadas com contexto mais profundo,
+> exemplos de codigo e heuristicas de tomada de decisao.
+
+---
+
+## 1. Disney 12 Principles — Web Quick Guide
+
+### Squash and Stretch
+- Button press: `scaleY(0.95) scaleX(1.05)` por 80ms, spring back
+- Modal landing: arrive `scaleY(1.05)` -> settle `scaleY(0.97)` -> `scale(1)`
+
+### Anticipation
+- Accordion: compress 2-3px por 100ms antes de expandir
+- Page transition: scale 0.98, opacity 0.9 por 150ms antes da transicao
+- **Regra:** 50-150ms, movimento pequeno
+
+### Staging
+- Hero: bg fade 300ms -> headline slide 200ms depois -> subtext 150ms -> CTA ultimo
+- Modal: overlay dim 200ms -> modal scale-in 300ms
+
+### Follow-Through
+- Cards: stagger 50-80ms entre cada card
+- Elastic easing: `cubic-bezier(0.175, 0.885, 0.32, 1.275)` overshoot e settle
+- Dragged element: overshoot 5-10%, shadow chega 30ms depois
+
+### Slow In/Slow Out (FUNDAMENTAL)
+- **Ease-out** `(0.0, 0.0, 0.2, 1.0)`: Elementos ENTRANDO. Mais usado
+- **Ease-in** `(0.4, 0.0, 1, 1)`: Elementos SAINDO
+- **Ease-in-out** `(0.4, 0.0, 0.2, 1.0)`: Reposicionando ON SCREEN
+- **NUNCA linear** para UI (exceto spinners)
+
+### Arc
+- `offset-path: path(...)` ou GSAP MotionPath
+- Aproximar: X linear + Y ease-in (parabola)
+- Usar para movimentos > 200px
+
+### Timing Quick Ref
+- Micro-interactions: 100-200ms
+- Small transitions: 200-300ms
+- Medium transitions: 300-500ms
+- Large transitions: 500-800ms
+- Ambient: 2000-8000ms
+- **NUNCA > 1000ms** para user-initiated action
+- **Mobile:** ~30% mais rapido que desktop
+
+### Exaggeration
+- Hover scale: `scale(1.05)` cards, `scale(1.1)` icons (nao 1.01)
+- Error shake: 10-15px (nao 2px)
+- Banking: 1.02x | Gaming: 1.1x
+
+---
+
+## 2. Psicologia do Motion
+
+### 3-Second Rule
+- 0-50ms: Gut reaction visceral
+- 50ms-500ms: Loading ou loaded?
+- 500ms-1.5s: Hero animation. Cool ou slow?
+- 1.5s-3s: Scroll ou leave
+- **Golden rule:** Core content visivel em 1.5s
+
+### Continuity Illusion
+Transicoes animadas parecem MAIS RAPIDAS que swaps instantaneos (Google research)
+
+### Hierarchy of Motion Attention
+1. Large fast center movement (highest)
+2. Color/contrast change peripheral (high)
+3. Slow continuous movement (medium)
+4. Micro-movements subconscious (low)
+- **Regra:** Apenas UM elemento high-attention por vez
+
+### Emotional Response
+
+| Speed | Association |
+|-------|------------|
+| 50-100ms | Snappy, tech-forward |
+| 150-250ms | Efficient, professional |
+| 300-500ms | Balanced, approachable |
+| 600-1000ms | Luxurious, premium |
+| 1000ms+ | Ambient, dramatic |
+
+| Direction | Association |
+|-----------|------------|
+| Bottom to Top | Growth, progress |
+| Top to Bottom | Weight, gravity |
+| Left to Right | Forward (LTR) |
+| Scale up | Importance |
+| Scale down | Dismissal |
+
+### Dopamine Loops
+- Pull-to-refresh: anticipation -> reward cycle
+- Like animations: binary action -> micro-celebration
+- Scroll reveals: piece by piece curiosity
+- Easter eggs: variable reward discovery
+
+---
+
+## 3. The Vocabulary Gap — Complete Translation Table
+
+| Description | What They Mean | Parameters |
+|-------------|---------------|------------|
+| Smooth | No jerkiness | ease-out `(0.0, 0, 0.2, 1)`, 300-500ms |
+| Snappy | Fast response | strong ease-out, 150-250ms |
+| Bouncy | Overshoots target | spring stiffness~300, damping~10-15 |
+| Elastic | Overshoots AND oscillates | `elastic.out(1, 0.3)` |
+| Elegant | Slow, graceful | ease-in-out, 600-1000ms |
+| Dramatic | Large visual change | Scale 0-1 or translateY 100px+, fast |
+| Playful | Bounce, energetic | Spring, 200-300ms, random stagger |
+| Cinematic | Film-like, depth | 800ms+, camera movement, DOF blur |
+| Organic | Natural, imperfect | Perlin noise offsets, +/-15% random |
+| Futuristic | Tech-forward | Glitch, clip-path, RGB split, steps |
+| Liquid/Fluid | Morphing, flowing | SVG morph, metaball shader |
+| Sharp/Crisp | Precise, clean | Linear/slight ease, short, no spring |
+| Subtle | Barely noticeable | 2-5px, 0.02 scale, 200-300ms |
+| Bold | Confident, visible | 1.2x+ scale, bright, fast |
+| Minimalist | Fade and translate | opacity + translateY(20px), 300ms |
+| Premium | Controlled, no overshoot | ease-in-out, 500-800ms |
+| Aggressive | Hard-hitting | 100-200ms, shake, flash |
+| Corporate | Conservative | `(0.4, 0, 0.2, 1)`, 250-350ms |
+| Luxurious | Long fade, minimal | `(0.16, 1, 0.3, 1)`, 700-1200ms |
+
+### Brand Archetype Motion Language
+
+| Archetype | Motion Style | Speed |
+|-----------|-------------|-------|
+| Innovator/Tech | Precise, grid-based, data-driven | Fast |
+| Luxury/Premium | Slow, minimal, controlled | Slow |
+| Playful/Youth | Bouncy, colorful, energetic | Fast |
+| Professional/Trust | Conservative, reliable, subtle | Medium |
+| Creative/Art | Experimental, unexpected, bold | Variable |
+| Nature/Organic | Flowing, natural, imperfect | Slow-medium |
+| Minimal/Clean | Fade-and-slide only, restrained | Medium |
+
+### 10 Clarifying Questions for Vague Requests
+1. Mostre 2-3 sites com animacao correta para o projeto
+2. De instantaneo a luxuoso, onde deve ficar?
+3. Energetico/bouncy ou calmo/controlado?
+4. Elementos param preciso ou bounce/settle?
+5. Muitas animacoes pequenas ou poucos momentos impactantes?
+6. Quao importante e performance mobile?
+7. Site de competitor mais proximo? O que mudaria?
+8. Se fosse pessoa entrando numa sala, como caminharia?
+9. Animacoes toda visita ou so primeira?
+10. Mais importante: conteudo rapido ou experiencia completa?
+
+---
+
+## 4. Performance Budgets
+
+| Metric | Desktop | Mobile |
+|--------|---------|--------|
+| FPS | 60 constante | 30 min, 60 target |
+| JS per frame | < 4ms | < 4ms |
+| DOM animated | < 20 elements | < 10 elements |
+| Draw calls | < 300 | < 100 |
+| Texture memory | < 200MB | < 50MB |
+| Total 3D weight | < 20MB | < 5MB |
+| LCP | < 2.5s | < 2.5s |
+| CLS | < 0.1 | < 0.1 |
+| INP | < 200ms | < 200ms |
+
+---
+
+## 5. Masters Deep Techniques
+
+### Bruno Simon
+- Physics-driven (cannon-es), nao hand-animated
+- Baked lighting em Blender, minimal real-time lights
+- Low-poly como estrategia de performance E estetica
+- Single-Canvas Architecture
+- "Se voce fizer alguem JOGAR com seu portfolio, vai lembrar pra sempre"
+
+### Akella (Yuri Artiukh)
+- Image displacement com displacement map texture no hover
+- Decomposition: reconstruir efeitos complexos passo a passo
+- GLSL mastery: UV distortion, channel separation, noise warping
+- "Efeitos complexos sao construidos de partes simples"
+
+### Active Theory
+- Custom rendering pipelines por projeto
+- Shader-first design
+- Audio-visual sync com Web Audio API
+- "Se alguem diz cool WebGL, percebeu a tech — ideal e sentir a marca"
+
+### Locomotive
+- `smoothScroll += (target - smoothScroll) * 0.1`
+- Scroll-speed effects: fast scroll = mais parallax, mais skew
+- Data-attribute-driven animation
+- "Scroll e a interacao mais fundamental"
+
+### Lusion
+- Custom pipelines alem do standard Three.js
+- Physically-based tudo: camera, atmosfera, particulas
+- Loading como cerimonia: preloader e primeiro ato
+- "Web 3D deve parecer 3D, ponto"
+
+### Bees and Bombs
+- Perfect loops: sin/cos over 2PI
+- Parametric equations: posicoes como funcao do tempo
+- Staggered repetition: offset de timing
+- "Complexidade da simplicidade"
+
+### Resn
+- Surprise-driven interaction
+- Exaggerated cartoony physics
+- Sound as interaction feedback
+- "Se o usuario nao esta se divertindo, o site falhou"
+
+---
+
+## 6. GSAP Patterns
+
+### Timeline Architecture
+```javascript
+const master = gsap.timeline();
+const heroTL = gsap.timeline();
+heroTL.from(".hero-title", { y: 100, opacity: 0, duration: 0.8 })
+      .from(".hero-subtitle", { y: 50, opacity: 0, duration: 0.6 }, "-=0.4");
+master.add(heroTL);
+```
+
+### ScrollTrigger Pin + Scrub
+```javascript
+gsap.timeline({
+  scrollTrigger: {
+    trigger: ".sticky-section",
+    start: "top top",
+    end: "+=3000",
+    scrub: 1,
+    pin: true
+  }
+})
+.to(".phone", { rotateY: 360 })
+.to(".feature-1", { opacity: 0 }, "<")
+.to(".feature-2", { opacity: 1 }, "<");
+```
+
+### Grid Stagger
+```javascript
+gsap.from(".grid-item", {
+  opacity: 0, y: 50,
+  stagger: { grid: "auto", from: "center", amount: 0.8 }
+});
+```
+
+### Easing Quick Reference
+- `power2.out` — workhorse entrances
+- `power2.inOut` — repositioning
+- `back.out(1.7)` — playful overshoot
+- `elastic.out(1, 0.3)` — bouncy attention
+- `expo.out` — luxury dramatic
+
+---
+
+## 7. Easing Functions Reference
+
+```
+Linear:         cubic-bezier(0, 0, 1, 1)
+Ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1.0)        — Material Design
+Ease-in:        cubic-bezier(0.4, 0.0, 1, 1)             — Material Design
+Ease-in-out:    cubic-bezier(0.4, 0.0, 0.2, 1.0)         — Material Design
+Ease-out-back:  cubic-bezier(0.175, 0.885, 0.32, 1.275)  — Overshoot
+Ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1)            — Luxury
+Ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1)           — Dramatic
+Snappy:         cubic-bezier(0.2, 0, 0, 1)               — Fast tech
+```
+
+---
+
+## 8. Accessibility Minimum
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```
+
+- WCAG 2.3.1: No flash > 3x/segundo
+- WCAG 2.3.3: Animation from interactions desabilitavel
+- WCAG 2.2.2: Moving content pausavel
+- Vestibular: parallax, zoom, rotacao sao mais problematicos
+- ~35% adultos > 40 anos tem algum disturbio vestibular

package/squad-animations/knowledge-base/creative-coding-masters-reference.md

@@ -0,0 +1,113 @@
+# Creative Coding Masters — Reference Encyclopedia
+
+> Heuristicas, tecnicas e modelos mentais dos maiores creative coders do mundo.
+> Use como referencia para criar animacoes no nivel dos melhores do planeta.
+
+---
+
+## Masters & Suas Assinaturas
+
+### Bruno Simon (Three.js Journey)
+- **Assinatura:** Portfolios 3D imersivos gamificados (carro andando por um mundo 3D)
+- **Modelo mental:** "A web e um playground — trate o browser como game engine"
+- **Tecnicas:** Physics-based 3D (Cannon.js), interatividade tangivel, materiais que reagem a luz
+- **Quando usar como referencia:** Experiencias 3D interativas, gamificacao, portfolios imersivos
+- **Stack:** Three.js, Cannon-es, Blender para modelos, GSAP para UI
+
+### Yuri Artiukh (Akella)
+- **Assinatura:** Efeitos de distorcao de imagem, hover effects com shaders, recriacao de efeitos Awwwards
+- **Modelo mental:** "Reverse-engineer o efeito, entenda a matematica, depois recrie"
+- **Tecnicas:** GLSL displacement maps, UV manipulation, noise-driven distortion, post-processing
+- **Quando usar como referencia:** Hover effects avancados, distorcao de imagem, transicoes fluidas
+- **Stack:** Three.js, ShaderMaterial, custom GLSL, YouTube tutorials
+
+### Active Theory
+- **Assinatura:** Experiencias web imersivas com qualidade cinematica (Google, Pharrell)
+- **Modelo mental:** "A web e uma midia criativa igual a cinema ou games"
+- **Tecnicas:** Custom WebGL pipelines, spatial audio, 3D immersive worlds
+- **Quando usar como referencia:** Brand experiences imersivas, hero sections cinematicos, campanhas interativas
+- **Stack:** Custom engines, Three.js, heavy shader work, custom physics
+
+### Resn (Wellington/Amsterdam)
+- **Assinatura:** Experiencias interativas playful e absurdistas
+- **Modelo mental:** "Encontre a diversao em cada projeto"
+- **Tecnicas:** Physics-based toys, game-like interfaces, tactile interactions
+- **Quando usar como referencia:** Marcas playful, experiencias game-like, interatividade tactil
+- **Stack:** Three.js, Canvas, custom physics, GSAP
+
+### 14islands (Stockholm)
+- **Assinatura:** Elegancia sueca — 3D integrado com bom gosto em sites "normais"
+- **Modelo mental:** "3D e animacao devem enriquecer o conteudo, nao ofuscar"
+- **Tecnicas:** React Three Fiber, 3D elements tastefully integrated, refined micro-interactions
+- **Quando usar como referencia:** Sites corporativos premium, integracao sutil de 3D, balance
+- **Stack:** React, R3F, Drei, GSAP, custom shaders
+
+### Locomotive (Montreal)
+- **Assinatura:** Smooth scroll que se tornou padrao da industria
+- **Modelo mental:** "Scroll e a interacao mais fundamental — torne-a perfeita"
+- **Tecnicas:** Inertia-based smooth scrolling, scroll-triggered reveals, parallax
+- **Quando usar como referencia:** Qualquer site com scroll storytelling, parallax, reveals
+- **Stack:** Lenis (evolucao do Locomotive Scroll), GSAP ScrollTrigger
+
+### Lusion (London/Copenhagen)
+- **Assinatura:** 3D web premium e futurista com tecnicas de ponta
+- **Modelo mental:** "Empurre os limites do que o browser pode renderizar"
+- **Tecnicas:** GPU particles, advanced shaders, real-time 3D de alta fidelidade
+- **Quando usar como referencia:** Hero 3D de alto impacto, tech brands, experiencias futuristas
+- **Stack:** Three.js, WebGL advanced, GLSL heavy, post-processing chains
+
+### Immersive Garden (Paris)
+- **Assinatura:** Atmosfera e poesia — fog, particulas, iluminacao emotiva
+- **Modelo mental:** "Crie uma atmosfera, nao apenas uma animacao"
+- **Tecnicas:** Post-processing (bloom, DOF, film grain), fog, particulas ambientais, luz dynamica
+- **Quando usar como referencia:** Sites com atmosfera forte, storytelling emotivo, mood boards animados
+- **Stack:** Three.js, EffectComposer, custom shaders
+
+### Mr.doob (Ricardo Cabello)
+- **Assinatura:** Criador do Three.js — abstraiu WebGL para o mundo
+- **Modelo mental:** "Simplicidade habilita criatividade — faca funcionar, depois faca rapido"
+- **Legado:** Scene, Camera, Renderer, Mesh — o padrao que definiu 3D na web
+- **Quando usar como referencia:** Arquitetura de cenas, API design, demo scene aesthetics
+
+### Daniel Shiffman (The Coding Train)
+- **Assinatura:** Natureza no codigo — flocking, genetica, fractais, fisica
+- **Modelo mental:** "Os melhores resultados vem de modelar como a natureza funciona"
+- **Tecnicas:** Nature of Code — gravidade, friccao, flocking, genetic algorithms, neural nets, fractals
+- **Quando usar como referencia:** Animacoes organicas, particulas naturais, simulacoes fisicas
+- **Stack:** p5.js, Processing, tutorials
+
+### Joshua Davis
+- **Assinatura:** Arte generativa — caos controlado, milhares de elementos parametricos
+- **Modelo mental:** "O artista escreve o sistema, o sistema cria a arte"
+- **Tecnicas:** Recursao, design parametrico, randomness controlada, layering massivo
+- **Quando usar como referencia:** Arte generativa, padroes complexos, backgrounds unicos
+
+### Zach Lieberman (SFPC)
+- **Assinatura:** Computacao poetica — codigo como expressao artistica humana
+- **Modelo mental:** "Pratica diaria de creative coding — consistencia gera descoberta"
+- **Tecnicas:** Computer vision, tipografia interativa, body tracking, AR experiments
+- **Quando usar como referencia:** Tipografia experimental, interacao corporal, instalacoes digitais
+
+### Bees & Bombs (Dave Whyte)
+- **Assinatura:** Loops perfeitos hipnoticos — beleza matematica em GIF
+- **Modelo mental:** "Funcoes trigonometricas + timing exato = hipnose visual"
+- **Tecnicas:** sin/cos, modular arithmetic, loops seamless, geometria simetrica
+- **Quando usar como referencia:** Loading animations, backgrounds ciclicos, motion graphics loops
+
+### Aristide Benoist
+- **Assinatura:** Portfolio ultra-polido, cursor effects, transitions refinadas
+- **Modelo mental:** "Um developer solo pode produzir qualidade de estudio"
+- **Tecnicas:** Custom cursor, page transitions suaves, hover effects refinados
+- **Quando usar como referencia:** Portfolios pessoais, sites de estudio, elegancia minimalista
+
+---
+
+## 7 Modelos Mentais Universais
+
+1. **"A web e uma midia criativa"** — Recuse os limites de "site normal"
+2. **"Entenda a matematica, quebre as regras"** — Noise, trig, algebra linear sao as ferramentas
+3. **"Constraints geram criatividade"** — 60fps, browser sandbox, loop perfeito — use como forca
+4. **"Pratica diaria acumula"** — Creative coding e habilidade construida por experimentacao
+5. **"O shader e o pincel"** — GLSL da controle pixel-a-pixel — e o divisor entre bom e excepcional
+6. **"Performance e feature"** — Animacao bonita a 15fps e lixo
+7. **"Animacao e comunicacao"** — Toda animacao deve ter proposito: guiar, dar feedback, encantar ou contar historia

package/squad-animations/knowledge-base/criterion-driven-creativity.md

@@ -0,0 +1,81 @@
+# Criterion-Driven Creativity — Criatividade Orientada por Criterio
+
+> Fonte: Inteligencia extraida do posicionamento de Marcelo Kimura — criatividade estrategica aplicada.
+
+## Principio Central
+
+A criacao melhora quando deixa de ser apenas expressao e passa a ser **decisao guiada por intencao, contexto e resultado desejado**. Criatividade sem criterio e experimentacao; criatividade com criterio e craft.
+
+## Framework: Da Inspiracao ao Criterio
+
+### O problema da criatividade sem direção
+
+A maioria dos profissionais criativos opera assim:
+1. Recebe um brief (ou nao)
+2. Busca inspiracao (Pinterest, Dribbble, Awwwards)
+3. Produz algo que "parece bom"
+4. Espera aprovacao
+
+**O que falta:** criterio explicito de por que uma decisao criativa e melhor que outra.
+
+### O modelo com criterio
+
+1. **Definir intencao** — Qual emocao, percepcao ou acao queremos provocar?
+2. **Estabelecer criterio** — Como saberemos se a solucao criativa atende a intencao?
+3. **Gerar alternativas** — Explorar multiplos caminhos com consciencia do criterio
+4. **Decidir com raciocinio** — Escolher baseado em criterio, nao apenas gosto
+5. **Validar resultado** — A entrega cumpre a intencao original?
+
+## Aplicacao em Animacoes Web
+
+| Criterio | Pergunta | Exemplo |
+|----------|----------|---------|
+| **Intencao emocional** | Que sensacao a animacao deve provocar? | Fluidez = confianca; Impacto = urgencia; Sutileza = sofisticacao |
+| **Hierarquia visual** | O que deve chamar atencao primeiro? | Hero animation > micro-interactions > ambient motion |
+| **Performance como criterio** | A animacao vale o custo de performance? | 60fps e non-negotiable; complexidade deve justificar impacto visual |
+| **Contexto de uso** | Onde o usuario ve isso? | Mobile scroll = gestos rapidos; Desktop hero = tempo de contemplacao |
+| **Coerencia sistêmica** | A animacao faz parte de uma linguagem? | Easing curves consistentes, durações proporcionais, motion tokens |
+
+## Heuristicas para Decisao Criativa em Motion
+
+- Antes de animar, pergunte: **"por que isso precisa se mover?"**
+- Animacao que nao comunica algo e decoracao — decoracao tem custo de performance
+- O criterio mais forte e: **"se eu remover essa animacao, o usuario perde algo?"**
+- Referencia boa e aquela que voce consegue explicar **por que funciona**, nao apenas "achei bonita"
+- Efeito WOW sem proposito e ruido visual — efeito WOW com proposito e experiencia
+- A melhor animacao e aquela que o usuario **sente** mas nao **nota**
+
+## Entrega Superior = Combinacao
+
+Ferramenta sozinha nao resolve. A entrega superior nasce de:
+
+```
+Criterio + Referencia + Metodo + Leitura de Contexto = Entrega de alto nivel
+```
+
+- **Criterio** — saber por que uma escolha e melhor
+- **Referencia** — repertorio visual e conceitual amplo
+- **Metodo** — processo repetivel de criacao
+- **Leitura de contexto** — entender o mercado, o usuario e o momento
+
+## IA como Amplificador de Criatividade
+
+A IA entra como **camada de expansao**, nao como protagonista:
+- Gerar variações de easing curves para testar hipoteses visuais
+- Explorar paletas de cor e composicao baseadas em criterio
+- Prototipagem rapida de shaders e efeitos para validar direcao
+- Expandir repertorio de referencias com buscas semanticas
+- Iterar mais rapido sem perder direcao criativa
+
+## Anti-patterns
+
+- Copiar animacao de referencia sem entender o criterio por tras
+- Usar Three.js/WebGL porque "e mais legal" sem justificativa de experiencia
+- Otimizar performance antes de definir criterio visual (otimizacao prematura)
+- Fazer scroll animation em toda pagina porque "e tendencia"
+
+## Conexao com Outras Squads
+
+- **squad-design:** Criterio de animacao alinhado com UX research
+- **squad-brand:** Motion language como extensao da identidade visual
+- **squad-content:** Animacao como ferramenta de storytelling em conteudo