sinapse-ai 1.0.0

package/squad-animations/knowledge-base/css-animation-mastery.md

@@ -0,0 +1,127 @@
+# CSS Animation Mastery
+
+> Dominio completo de CSS animations, transitions, transforms e SVG.
+
+---
+
+## Transforms Performaticos (Compositor Thread)
+
+Apenas estas propriedades rodam na GPU sem triggering layout/paint:
+- `transform` (translate, rotate, scale, skew)
+- `opacity`
+- `filter` (com will-change)
+
+NUNCA animar: `width`, `height`, `top`, `left`, `margin`, `padding`, `border`
+
+---
+
+## Easing Reference
+
+```css
+/* Suaves */
+--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
+--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
+--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+
+/* Dramaticos */
+--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
+--ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
+--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+/* Spring-like */
+--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+```
+
+---
+
+## Patterns Essenciais
+
+### Hover Underline Grow
+```css
+.link { position: relative; }
+.link::after {
+  content: '';
+  position: absolute; bottom: 0; left: 0;
+  width: 100%; height: 2px;
+  background: currentColor;
+  transform: scaleX(0);
+  transform-origin: right;
+  transition: transform 0.3s var(--ease-out-expo);
+}
+.link:hover::after {
+  transform: scaleX(1);
+  transform-origin: left;
+}
+```
+
+### Card Lift
+```css
+.card {
+  transition: transform 0.3s var(--ease-out-cubic), box-shadow 0.3s var(--ease-out-cubic);
+}
+.card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+}
+```
+
+### Staggered Grid Reveal
+```css
+.grid-item {
+  opacity: 0; transform: translateY(40px);
+  animation: reveal 0.6s var(--ease-out-quart) forwards;
+}
+.grid-item:nth-child(1) { animation-delay: 0ms; }
+.grid-item:nth-child(2) { animation-delay: 80ms; }
+.grid-item:nth-child(3) { animation-delay: 160ms; }
+/* ... */
+
+@keyframes reveal {
+  to { opacity: 1; transform: translateY(0); }
+}
+```
+
+### Magnetic Button
+```javascript
+button.addEventListener('mousemove', (e) => {
+  const rect = button.getBoundingClientRect();
+  const x = e.clientX - rect.left - rect.width / 2;
+  const y = e.clientY - rect.top - rect.height / 2;
+  button.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px)`;
+});
+button.addEventListener('mouseleave', () => {
+  button.style.transform = 'translate(0, 0)';
+  button.style.transition = 'transform 0.5s var(--ease-out-expo)';
+});
+```
+
+### clip-path Reveal
+```css
+.reveal { clip-path: inset(0 100% 0 0); transition: clip-path 0.8s var(--ease-out-quart); }
+.reveal.visible { clip-path: inset(0 0 0 0); }
+```
+
+### SVG Stroke Drawing
+```css
+.svg-path {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: draw 2s var(--ease-out-quart) forwards;
+}
+@keyframes draw { to { stroke-dashoffset: 0; } }
+```
+
+---
+
+## Acessibilidade
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```

package/squad-animations/knowledge-base/disney-12-principles-web.md

@@ -0,0 +1,95 @@
+# Disney's 12 Principles of Animation — Applied to Web
+
+> Originalmente codificados por Frank Thomas e Ollie Johnston (The Illusion of Life, 1981).
+> Aplicados ao contexto de animacoes web, UI/UX e creative coding.
+
+---
+
+## 1. Squash & Stretch
+- **Original:** Objetos deformam para mostrar peso e flexibilidade
+- **Web:** Botoes que comprimem ao clicar, icones que esticam ao hover
+- **CSS:** `transform: scaleY(0.95)` no `:active`, `scaleX(1.05) scaleY(0.95)` no press
+- **Quando:** Click feedback, bounce animations, loading indicators
+- **Regra:** Manter volume constante — se comprime em Y, expande em X
+
+## 2. Anticipation
+- **Original:** Movimento preparatorio antes da acao principal
+- **Web:** Menu que recua 10px antes de expandir, botao que encolhe antes de navegar
+- **CSS:** Keyframe 0%: `translateY(5px)`, 30%: `translateY(-2px)`, 100%: `translateY(0)`
+- **Quando:** Antes de transicoes importantes, page navigation, modais
+- **Regra:** Quanto maior a acao seguinte, maior a anticipation
+
+## 3. Staging
+- **Original:** Apresentacao clara de uma ideia ao espectador
+- **Web:** Hierarquia visual via motion — hero anima primeiro, depois CTA, depois detalhes
+- **Implementacao:** Stagger delays para criar ordem de leitura visual
+- **Quando:** Landing pages, hero sections, onboarding flows
+- **Regra:** Uma coisa de cada vez — nao competir por atencao
+
+## 4. Straight Ahead vs Pose to Pose
+- **Original:** Animacao sequencial vs. definir poses-chave e interpolar
+- **Web:** Procedural (JS frame-by-frame) vs Declarativo (CSS keyframes, GSAP timeline)
+- **Straight Ahead:** Animacoes generativas, particulas, simulacoes fisicas
+- **Pose to Pose:** UI transitions, scroll reveals, page transitions
+- **Regra:** UI = pose-to-pose (previsivel). Generative = straight-ahead (surpreendente)
+
+## 5. Follow Through & Overlapping Action
+- **Original:** Partes do corpo nao param ao mesmo tempo — cabelo continua, saia balanca
+- **Web:** Staggered animations — cards aparecem em sequencia, elementos filhos demoram mais
+- **GSAP:** `stagger: { each: 0.05, from: "start" }`
+- **Quando:** Lists, grids, multiplos elementos, menu items
+- **Regra:** Stagger 30-100ms entre elementos. Elementos menores tem mais delay
+
+## 6. Slow In / Slow Out (Easing)
+- **Original:** Aceleracao e desaceleracao naturais
+- **Web:** Easing functions — ease-in, ease-out, ease-in-out, cubic-bezier
+- **Entradas:** ease-out (chega rapido, desacelera) — usuario sente responsividade
+- **Saidas:** ease-in (comeca devagar, acelera) — prepara o olho para a saida
+- **Transicoes:** ease-in-out — suave nos dois extremos
+- **Regra:** NUNCA linear para UI (exceto loading bars). Sempre ease-out para entradas
+
+## 7. Arcs
+- **Original:** Movimento natural segue arcos, nao linhas retas
+- **Web:** Elementos que se movem em bezier curves, nao apenas translateX/Y linear
+- **CSS:** `offset-path: path('M0,0 C50,0 50,100 100,100')` ou motion path
+- **GSAP:** `motionPath` plugin para paths curvos
+- **Quando:** Elementos que se movem de A para B, tooltips, notificacoes
+- **Regra:** Se o movimento e > 200px, considere um arco
+
+## 8. Secondary Action
+- **Original:** Acoes de suporte que enriquecem a acao principal
+- **Web:** Icone que pulsa enquanto texto aparece, sombra que cresce com hover, ripple effect
+- **Implementacao:** Pseudo-elements (::before, ::after) com animacoes proprias
+- **Quando:** Sempre que a animacao principal parece "seca" ou "simples demais"
+- **Regra:** Secondary action NUNCA deve competir com a primary — deve complementar
+
+## 9. Timing
+- **Original:** Numero de frames define peso, humor e personalidade
+- **Web:** Duration em ms define percepcao
+- **Rapido (100-200ms):** Leve, responsivo, snappy — micro-interactions
+- **Medio (300-500ms):** Balanced, confortavel — transitions de UI
+- **Lento (600-1200ms):** Pesado, dramatico, luxuoso — hero reveals
+- **Muito lento (1500ms+):** Cinematico, contemplativo — background, ambiente
+- **Regra:** Tempo de atencao humana media para animacao = 300ms. Acima disso, precisa de proposito
+
+## 10. Exaggeration
+- **Original:** Amplificar a realidade para clareza e impacto
+- **Web:** Overshoot (scale vai a 1.1 antes de 1.0), bounce, elastic easing
+- **CSS:** `cubic-bezier(0.68, -0.55, 0.265, 1.55)` — ultrapassa e volta
+- **Quando:** CTA buttons, notificacoes importantes, feedback de sucesso/erro
+- **Regra:** Exagero proporcional a importancia. CTA = mais. Info = menos
+
+## 11. Solid Drawing
+- **Original:** Entender forma, volume, peso — desenhar com profundidade
+- **Web:** CSS 3D transforms com perspective — elementos que parecem ter volume
+- **CSS:** `perspective: 1000px` + `rotateX/Y` para cards 3D, flips, tilt effects
+- **Three.js:** PBR materials, iluminacao correta, sombras — objetos criveis
+- **Quando:** Cards 3D, product showcases, portfolios
+- **Regra:** Se usar 3D transform, usar perspective. Se nao, parece achatado
+
+## 12. Appeal
+- **Original:** Design que captura e mantem atencao — carisma do personagem
+- **Web:** Motion que encanta — o "wow" que faz o usuario explorar mais
+- **Tecnicas:** Spring physics (sensacao viva), detalhes inesperados, easter eggs
+- **Quando:** Sempre — appeal e o objetivo final de toda animacao
+- **Regra:** Appeal nao e "mais animacao" — e a animacao CERTA no momento CERTO

package/squad-animations/knowledge-base/easing-functions-reference.md

@@ -0,0 +1,65 @@
+# Easing Functions Reference
+
+> Referencia completa de easing functions para animacoes web.
+
+---
+
+## Cubic-Bezier Essenciais
+
+| Nome | Curva | Sensacao | Uso |
+|------|-------|---------|-----|
+| ease-out-sine | `(0.39, 0.575, 0.565, 1)` | Suave, sutil | Micro-interactions |
+| ease-out-quad | `(0.25, 0.46, 0.45, 0.94)` | Natural, confortavel | Transitions padrao |
+| ease-out-cubic | `(0.33, 1, 0.68, 1)` | Responsivo, confiante | Entradas de elementos |
+| ease-out-quart | `(0.25, 1, 0.5, 1)` | Rapido e refinado | Scroll reveals |
+| ease-out-expo | `(0.16, 1, 0.3, 1)` | Muito rapido inicio | Page transitions |
+| ease-out-back | `(0.34, 1.56, 0.64, 1)` | Overshoot, playful | CTA, notificacoes |
+| ease-in-out-quart | `(0.76, 0, 0.24, 1)` | Simetrico, elegante | State changes |
+| ease-in-out-back | `(0.68, -0.6, 0.32, 1.6)` | Dramatico, bounce duplo | Modais, drawers |
+| ease-in-expo | `(0.7, 0, 0.84, 0)` | Lento→rapido | Exits, dismiss |
+
+---
+
+## Spring Physics
+
+Simulacao de mola sem duracao fixa:
+
+| Config | Sensacao | mass | stiffness | damping |
+|--------|---------|------|-----------|---------|
+| Snappy | Rapido, preciso | 1 | 300 | 30 |
+| Gentle | Suave, organico | 1 | 100 | 15 |
+| Bouncy | Elastico, fun | 1 | 200 | 10 |
+| Heavy | Pesado, dramatico | 3 | 200 | 25 |
+| Wobbly | Gelatinoso | 1 | 150 | 8 |
+
+### GSAP Spring
+```javascript
+gsap.to(el, { x: 100, ease: 'elastic.out(1, 0.3)', duration: 1 });
+```
+
+### Framer Motion Spring
+```jsx
+<motion.div animate={{ x: 100 }} transition={{ type: 'spring', stiffness: 200, damping: 20 }} />
+```
+
+---
+
+## Stagger Patterns
+
+| Pattern | Delay Formula | Efeito |
+|---------|--------------|--------|
+| Sequential | `i * 50ms` | Cascata linear |
+| From center | `abs(i - mid) * 50ms` | Expande do centro |
+| From edges | `(mid - abs(i - mid)) * 50ms` | Converge para centro |
+| Random | `random(0, 200)ms` | Organico, natural |
+| Grid (2D) | `(row + col) * 30ms` | Onda diagonal |
+
+---
+
+## Regra de Ouro
+
+- **Entradas:** ease-OUT (chega rapido, freia suave)
+- **Saidas:** ease-IN (comeca devagar, acelera fora)
+- **Mudanca de estado:** ease-IN-OUT (suave nos dois lados)
+- **Scroll-driven:** NONE (linear — o scroll E o easing)
+- **Loop/ambient:** LINEAR (constante, sem interrupcao)

package/squad-animations/knowledge-base/feeling-to-parameters-mapping.md

@@ -0,0 +1,139 @@
+# Feeling-to-Parameters Mapping — Animation Intent Translation
+
+> A knowledge base mais critica da squad. Traduz descricoes subjetivas humanas
+> em parametros tecnicos concretos de animacao. Elimina a necessidade de iteracao
+> de prompt — o usuario descreve, o agente traduz.
+
+---
+
+## 1. Mapeamento Principal: Feeling → Parametros
+
+### Feelings Primarios
+
+| Feeling | Duration | Easing | Scale Range | Movement | Technique |
+|---------|----------|--------|-------------|----------|-----------|
+| Elegante | 0.8-1.2s | ease-in-out cubic `(0.76, 0, 0.24, 1)` | 0.98-1.02 | Suave, minimo | Fade + transform sutil, spacing generoso |
+| Energetico | 0.15-0.4s | ease-out back `(0.34, 1.56, 0.64, 1)` | 0.8-1.2 | Rapido, bounce | Spring, overshoot, stagger rapido |
+| Misterioso | 1.0-2.5s | ease-in cubic `(0.55, 0.055, 0.675, 0.19)` | 0.9-1.0 | Lento, reveal | Blur, fade parcial, particulas, fog |
+| Magnetico | 0.4-1.0s | custom spring (stiffness: 200, damping: 20) | Variavel | Atracao ao cursor | Cursor-following, parallax mouse, attraction |
+| Cinematico | 1.5-4.0s | ease-in-out quint `(0.83, 0, 0.17, 1)` | 0.5-2.0 | Camera, zoom | Camera path, DOF, letterbox, slow-mo |
+| Organico | 0.6-1.5s | custom bezier `(0.25, 0.46, 0.45, 0.94)` | 0.95-1.05 | Curvo, ondulante | Perlin noise, morphing, arcs naturais |
+| Futurista | 0.2-0.8s | steps(N) ou linear | 1.0 | Geometrico | Glitch, grid, data viz, wireframe, neon |
+| Playful | 0.2-0.5s | bounce/elastic `(0.68, -0.55, 0.265, 1.55)` | 0.7-1.3 | Bounce, wiggle | Squash-stretch, overshoot, cores vivas |
+| Premium | 0.5-1.0s | ease-out cubic `(0.33, 1, 0.68, 1)` | 0.98-1.0 | Contido, preciso | Fade delicado, tipografia fina, espacamento |
+| Dramatico | 0.6-1.5s | ease-in expo `(0.7, 0, 0.84, 0)` | 0.3-3.0 | Grande, impactante | Scale extremo, delay + burst, contraste |
+| Calmo | 1.0-3.0s | ease-in-out sine `(0.37, 0, 0.63, 1)` | 0.99-1.01 | Lento, respiratorio | Float, pulse suave, gradients lentos |
+| Agressivo | 0.1-0.3s | linear ou ease-out | 1.0-1.5 | Rapido, direto | Shake, flash, corte seco, sem easing |
+| Sofisticado | 0.6-1.0s | ease-out quart `(0.25, 1, 0.5, 1)` | 0.97-1.03 | Preciso, contido | Stagger lento, reveal mask, tipografia |
+| Hipnotico | 2.0-8.0s | linear (loop) | 0.8-1.2 | Ciclico, infinito | Loop perfeito, rotacao continua, pulse |
+| Explosivo | 0.3-0.8s | ease-out expo `(0.16, 1, 0.3, 1)` | 0.0-2.0 | De dentro pra fora | Particle burst, scale from 0, stagger radial |
+
+### Feelings Compostos
+
+| Descricao do Usuario | Traduz Para | Combinacao |
+|---------------------|-------------|------------|
+| "Tipo Apple" | Cinematico + Premium | Scroll-driven, produto hero, tipografia limpa |
+| "Tipo Awwwards" | Sofisticado + Magnetico | Smooth scroll, cursor custom, hover effects |
+| "Tipo Matrix" | Futurista + Hipnotico | Rain de caracteres, green glow, terminal |
+| "Tipo Disney+" | Cinematico + Dramatico | Video hero, fade elegante, parallax profundo |
+| "Tipo game" | Energetico + Playful | Physics, colisoes, particulas, interatividade |
+| "Algo diferente" | Misterioso + Organico | Generative art, noise, particulas, shaders |
+| "Clean e moderno" | Premium + Elegante | Fade suave, spacing, tipografia, minimal |
+| "Impressionar cliente" | Dramatico + Cinematico | Hero impactante, scroll storytelling, 3D |
+| "Reter usuario" | Magnetico + Hipnotico | Micro-interactions, cursor effects, reveals |
+
+---
+
+## 2. Contexto → Estilo Default
+
+### Por Industria
+
+| Industria | Estilo Default | Techniques |
+|-----------|---------------|------------|
+| Fintech / Banking | Premium + Calmo | Numeros animados, graficos smooth, gradients |
+| Moda / Luxo | Elegante + Cinematico | Full-bleed images, slow reveals, tipografia bold |
+| Tech / SaaS | Futurista + Sofisticado | 3D product, grid layouts, data viz |
+| E-commerce | Energetico + Playful | Product hover, cart animations, CTAs bouncy |
+| Portfolio criativo | Magnetico + Misterioso | Custom cursor, hover distortion, page transitions |
+| Startup | Energetico + Premium | Hero animado, scroll reveals, social proof |
+| Saude / Wellness | Calmo + Organico | Gradients suaves, breathing animations, nature |
+| Gaming | Agressivo + Explosivo | Particles, glitch, neon, fast transitions |
+| Educacao | Playful + Calmo | Illustrations animadas, progress, step-by-step |
+| Imobiliario | Cinematico + Premium | 3D tours, map animations, gallery smooth |
+
+### Por Elemento
+
+| Elemento | Estilo Default | Duration | Technique |
+|----------|---------------|----------|-----------|
+| Hero section | Dramatico | 1.0-2.0s | Scale + fade, 3D, particulas, video |
+| Navigation | Premium | 0.2-0.4s | Fade, slide, underline |
+| Cards | Sofisticado | 0.3-0.5s | Lift, shadow, image zoom |
+| CTA buttons | Energetico | 0.15-0.3s | Scale, color shift, ripple |
+| Footer | Calmo | 0.4-0.8s | Fade-in suave no scroll |
+| Modal/Drawer | Premium | 0.3-0.5s | Overlay fade + slide content |
+| Loading | Hipnotico | 1.0-2.0s loop | Spinner, skeleton, progress |
+| Page transition | Cinematico | 0.4-0.8s | Wipe, fade, morph |
+| Scroll sections | Sofisticado | 0.5-0.8s | Reveal, parallax, pin |
+| Tooltips | Premium | 0.15-0.25s | Scale from origin + fade |
+
+---
+
+## 3. Palavras-Chave → Parametros Diretos
+
+### Adjetivos de Velocidade
+| Palavra | Duration Multiplier | Easing |
+|---------|-------------------|--------|
+| "rapido", "fast", "snappy" | 0.5x | ease-out |
+| "normal", "suave" | 1.0x | ease-out cubic |
+| "lento", "slow", "gradual" | 1.5-2.0x | ease-in-out |
+| "muito lento", "dramatic" | 2.0-3.0x | ease-in-out quint |
+| "instantaneo" | 0ms (cut) | none |
+
+### Adjetivos de Intensidade
+| Palavra | Scale Range | Overshoot |
+|---------|------------|-----------|
+| "sutil", "discreto" | 0.98-1.02 | 0% |
+| "moderado", "balanced" | 0.9-1.1 | 5% |
+| "forte", "bold" | 0.7-1.3 | 10-15% |
+| "extremo", "wild" | 0.3-2.0 | 20-30% |
+| "explosivo" | 0.0-3.0+ | 30%+ |
+
+### Adjetivos de Direcao
+| Palavra | Transform |
+|---------|-----------|
+| "de cima", "drop" | translateY(-100%) → 0 |
+| "de baixo", "rise" | translateY(100%) → 0 |
+| "da esquerda" | translateX(-100%) → 0 |
+| "da direita" | translateX(100%) → 0 |
+| "do centro", "expand" | scale(0) → scale(1) |
+| "de longe", "zoom in" | scale(0.5) + opacity(0) → normal |
+| "girar", "spin" | rotate(360deg) |
+| "flip" | rotateY(180deg) ou rotateX(180deg) |
+
+---
+
+## 4. Anti-Patterns — O Que NAO Fazer
+
+| Erro Comum | Problema | Solucao |
+|-----------|---------|---------|
+| Tudo animado ao mesmo tempo | Caos visual, sem hierarquia | Stagger + priorizar hero content |
+| Duracao > 1s para micro-interaction | Sente lento, impaciente | Max 300ms para hover/click |
+| Ease-in para entradas | Parece hesitante, lento no inicio | Usar ease-out para entradas |
+| Parallax em tudo | Nauseante, vestibular issues | Usar parallax apenas em 1-2 secoes |
+| Animacao blocking content | Usuario espera sem poder agir | Conteudo legivel sem animacao |
+| Ignore prefers-reduced-motion | Acessibilidade violada | SEMPRE ter fallback |
+| Bounce em contexto serio | Infantiliza a marca | Bounce so para marcas playful |
+| Flash rapido (<3/sec) | Risco de convulsao (WCAG) | Nunca flash abaixo de 3/segundo |
+
+---
+
+## 5. Perguntas Clarificadoras (quando necessario)
+
+Em vez de bombardear com perguntas, Lens faz NO MAXIMO 2 perguntas focadas:
+
+1. **"Qual o feeling?"** — Se nao conseguir inferir do contexto
+   - Opcoes: Elegante / Energetico / Cinematico / Playful / Futurista / Outro
+2. **"Qual a referencia mais proxima?"** — Se ambiguo
+   - Opcoes: Apple.com / Awwwards top / Portfolio criativo / E-commerce / Outro URL
+
+Se o usuario responder "nao sei", usar defaults baseados na industria e elemento.

package/squad-animations/knowledge-base/generative-algorithms-reference.md

@@ -0,0 +1,120 @@
+# Generative Algorithms Reference
+
+> Algoritmos para criar arte generativa, particulas e padroes procedurais.
+
+---
+
+## Noise Functions
+
+| Tipo | Resultado | Uso |
+|------|-----------|-----|
+| Perlin 2D/3D | Gradientes suaves, terrenos | Deformacao, texturas |
+| Simplex | Similar ao Perlin, mais rapido | Versao otimizada |
+| Worley/Cellular | Padrao celular, cristais | Voronoi-like, organico |
+| Value noise | Blocos suaves interpolados | Pixel art, retro |
+| FBM (multi-octave) | Detalhes multi-escala | Nuvens, terrenos detalhados |
+| Domain warping | Distorcao organica | Fluidos, marmores |
+| Curl noise | Fluxo turbulento sem divergencia | Particulas, fumaca |
+
+---
+
+## Flow Fields
+
+Vetores em uma grade que guiam particulas:
+1. Gerar grade 2D/3D de angulos (noise-based)
+2. Particula consulta angulo na sua posicao
+3. Aplicar angulo como direcao de velocidade
+4. Resultado: linhas fluidas e organicas
+
+```javascript
+// Pseudocodigo
+for (particle of particles) {
+  const col = floor(particle.x / cellSize);
+  const row = floor(particle.y / cellSize);
+  const angle = noise(col * 0.1, row * 0.1, time) * TWO_PI;
+  particle.vx += cos(angle) * force;
+  particle.vy += sin(angle) * force;
+  particle.update();
+}
+```
+
+---
+
+## Boids (Flocking)
+
+3 regras simples criam comportamento de bando:
+1. **Separation:** Evitar colisao com vizinhos proximos
+2. **Alignment:** Alinhar direcao com vizinhos medios
+3. **Cohesion:** Mover em direcao ao centro do grupo
+
+Variantes: predator-prey, leader following, obstacle avoidance
+
+---
+
+## L-Systems (Fractais Vegetais)
+
+Gramatica de substituicao para estruturas ramificadas:
+```
+Axiom: F
+Rule: F → F[+F]F[-F]F
+
+F = desenhar linha
++ = girar +25°
+- = girar -25°
+[ = salvar posicao (push)
+] = restaurar posicao (pop)
+```
+
+Resultado: arvores, plantas, corais, redes neuronais
+
+---
+
+## Voronoi & Delaunay
+
+- **Voronoi:** Espaco dividido em regioes, cada uma mais proxima de um ponto seed
+- **Delaunay:** Triangulacao dual do Voronoi — conecta pontos em triangulos
+- **Uso:** Padrao celular, mosaicos, fragmentacao, shatter effect
+
+---
+
+## Reaction-Diffusion
+
+Simula 2 substancias quimicas (A e B) interagindo:
+- A se difunde e alimenta B
+- B se difunde e consome A
+- Resultado: padrao de Turing (coral, leopardo, labirin)
+
+Parametros: feed rate, kill rate, difusao A, difusao B
+
+---
+
+## Metaballs
+
+Campos escalares que se fundem quando proximos:
+```glsl
+float metaball(vec2 p, vec2 center, float radius) {
+  return radius / length(p - center);
+}
+// Somar multiplas metaballs e aplicar threshold
+```
+
+---
+
+## Cellular Automata
+
+Grade de celulas com regras simples de vizinhanca:
+- **Game of Life:** 2 estados, 8 vizinhos, regras 23/3
+- **Rule 30/110:** 1D automata, patterns complexos
+- **Uso:** Backgrounds generativos, padroes emergentes
+
+---
+
+## Fractais
+
+| Tipo | Tecnica |
+|------|---------|
+| Mandelbrot | z = z² + c, iterar e colorir |
+| Julia | Similar, c fixo |
+| Fractal tree | Recursao + angulo de ramificacao |
+| Sierpinski | Subdivisao triangular/quadrada |
+| Koch snowflake | Adicionar triangulos em cada aresta |

package/squad-animations/knowledge-base/motion-psychology-engagement.md

@@ -0,0 +1,143 @@
+# Motion Psychology & User Engagement
+
+> Como animacao afeta o cerebro, a atencao e o comportamento do usuario.
+> Principios de psicologia cognitiva aplicados a motion design web.
+
+---
+
+## 1. Por Que Animacao Funciona
+
+O cerebro humano esta programado para detectar movimento — e um instinto de sobrevivencia
+herdado de milhoes de anos de evolucao. Na web, animacao:
+
+- **Captura atencao involuntaria** — movimento no campo periferico e impossivel de ignorar
+- **Cria modelos mentais** — transicoes ajudam o usuario a entender relacoes espaciais
+- **Reduz carga cognitiva** — mudancas animadas sao mais faceis de processar que instantaneas
+- **Gera emocao** — ritmo, tempo e estilo de motion evocam sentimentos especificos
+- **Aumenta percepcao de qualidade** — sites com motion bem feito sao percebidos como mais profissionais
+
+---
+
+## 2. Regras Cognitivas
+
+### Regra dos 3 Segundos
+O usuario decide em 3 segundos se fica ou sai. A animacao do hero section DEVE:
+- Ser visivel em < 1s (nao bloquear conteudo)
+- Causar impacto emocional imediato
+- Sugerir que "tem mais" abaixo (scroll invitation)
+
+### Lei de Hick (Tempo de Decisao)
+Mais opcoes = mais tempo para decidir. Animacao ajuda a:
+- Guiar o olho para o CTA principal (staging)
+- Revelar opcoes progressivamente (stagger)
+- Reduzir overwhelm visual
+
+### Lei de Fitts (Target Acquisition)
+Alvos maiores e mais proximos sao mais faceis de clicar. Animacao pode:
+- Expandir botoes no hover (affordance)
+- Magnetizar o cursor para o alvo
+- Indicar area clicavel via motion
+
+### Efeito Von Restorff (Isolation Effect)
+Coisas diferentes sao lembradas. Animacao diferenciada em UM elemento faz ele se destacar:
+- CTA com bounce enquanto resto e estatico
+- Card com hover 3D enquanto outros sao flat
+- Secao com parallax enquanto resto e scroll normal
+
+### Gestalt de Movimento Comum
+Elementos que se movem juntos sao percebidos como grupo:
+- Cards de mesma categoria animam juntos
+- Stagger unifica grupo visual
+- Direction compartilhada = pertencimento
+
+---
+
+## 3. Emocao por Tipo de Motion
+
+| Tipo de Motion | Emocao Evocada | Uso Ideal |
+|---------------|---------------|-----------|
+| Lento e suave | Calma, confianca, luxo | Marcas premium, wellness, finance |
+| Rapido e bouncy | Energia, diversao, juventude | Startups, games, e-commerce |
+| Linear e preciso | Eficiencia, tecnologia | SaaS, dashboards, tools |
+| Organico e fluido | Naturalidade, creatividade | Arte, portfolio, lifestyle |
+| Cinematico e lento | Drama, importancia, exclusividade | Lancamentos, luxury brands |
+| Glitch e interrompido | Ousadia, rebeldia, tech | Gaming, music, streetwear |
+| Loop hipnotico | Meditacao, fascinacao, retencao | Backgrounds, loading, ambient |
+
+---
+
+## 4. Dopamine Loops em Micro-Interactions
+
+Micro-interactions bem desenhadas criam pequenas doses de dopamina que:
+- Recompensam cada acao do usuario (click → feedback visual)
+- Criam curiosidade sobre "o que acontece se eu..."
+- Incentivam exploracao (hover effects revelam conteudo)
+
+### Pattern: Curiosity Gap via Motion
+1. Revelar parcialmente (blur, clip-path, fade parcial)
+2. Usuario interage para ver mais
+3. Reveal completo com animacao satisfatoria
+4. Repeat em proxima secao
+
+### Pattern: Progressive Disclosure
+1. Mostrar minimo necessario (clean)
+2. Expandir com animacao ao interagir
+3. Cada nivel revela mais com motion reward
+
+---
+
+## 5. Retencao e Tempo no Site
+
+Animacoes que aumentam tempo no site:
+- **Scroll storytelling** — usuario quer ver "o que vem depois"
+- **Interactive elements** — usuario experimenta hovering, clicking
+- **Loading transitions** — mascarar loading com animacao manteem engajamento
+- **Page transitions** — transicoes suaves eliminam o "impulso de sair"
+- **Parallax depth** — cria sensacao de exploracao espacial
+
+Animacoes que DIMINUEM tempo no site:
+- **Blocking animations** — conteudo aparece so depois da animacao
+- **Excessive motion** — causa fadiga visual e nausea
+- **Slow transitions** — usuario sente que o site e lento
+- **Autoplay audio/video** — irrita e causa saida imediata
+
+---
+
+## 6. A Curva de Complexidade
+
+```
+                    ✓ Sweet spot
+                   /|
+Engagement        / |
+                 /  |
+                /   |
+    ___________/    |_____________
+              |     |
+   Boring     |     |  Overwhelming
+   (no motion)|     |  (too much)
+              |     |
+    ──────────┴─────┴──────────── Complexity
+```
+
+- **Pouca animacao:** Site parece morto, sem personalidade
+- **Sweet spot:** Motion com proposito, hierarquia clara, feeling coeso
+- **Muita animacao:** Nauseante, confuso, distrai do conteudo
+
+**Regra pratica:** Se voce remover a animacao e o site perder funcionalidade, a animacao e necessaria.
+Se perder apenas "wow", use com moderacao.
+
+---
+
+## 7. Acessibilidade Cognitiva
+
+- **prefers-reduced-motion:** ~30% dos usuarios tem sensibilidade a motion
+- **Disturbios vestibulares:** Parallax e rotacao podem causar nausea
+- **TDAH:** Animacoes loop podem distrair do conteudo
+- **Epilepsia:** Flash > 3/segundo pode causar convulsoes (WCAG)
+
+### Abordagem Inclusiva
+1. Toda animacao tem fallback estatico
+2. `prefers-reduced-motion: reduce` → animacoes simplificadas (fade only)
+3. Botao de pause para animacoes continuas
+4. Parallax maximo 50px de diferenca (evitar extremos)
+5. Nunca depender de animacao para transmitir informacao critica