sinapse-ai 1.0.0

package/squad-animations/tasks/create-easing-curve.md

@@ -0,0 +1,156 @@
+---
+task: create-easing-curve
+responsavel: "@motion-choreographer"
+responsavel_type: Agent
+atomic_layer: Task
+elicit: false
+
+Entrada:
+  - campo: feeling
+    tipo: string
+    origem: "animation_brief"
+    obrigatorio: true
+
+Saida:
+  - campo: easing_curve
+    tipo: object
+    destino: "agente executor"
+
+Checklist:
+  - "[ ] Consultar feeling-to-parameters-mapping"
+  - "[ ] Selecionar ou criar cubic-bezier"
+  - "[ ] Considerar spring physics se aplicavel"
+  - "[ ] Testar curva com preview mental"
+  - "[ ] Documentar rational da escolha"
+---
+
+# Task: Create Easing Curve
+
+## Metadata
+- **Agent:** motion-choreographer (Tempo)
+- **Squad:** squad-animations
+- **Complexity:** MEDIUM
+
+## Objetivo
+Selecionar ou criar easing curves que traduzem o feeling desejado em parametros matematicos — cubic-bezier, spring physics ou custom curves. A curva de easing e o DNA da personalidade da animacao.
+
+## Pre-Conditions
+- Feeling/mood desejado definido no brief
+- Tipo de animacao (entrance, exit, hover, continuous)
+- Consultar KB: feeling-to-parameters-mapping
+- Consultar KB: easing-functions-reference
+
+## Passos
+
+### 1. Mapear Feeling para Familia de Easing
+| Feeling | Familia | Exemplo Bezier |
+|---------|---------|---------------|
+| Snappy/decisive | Sharp decelerate | (0.0, 0.0, 0.2, 1) |
+| Smooth/premium | Standard ease | (0.4, 0.0, 0.2, 1) |
+| Bouncy/playful | Overshoot | (0.175, 0.885, 0.32, 1.275) |
+| Heavy/powerful | Slow start | (0.7, 0.0, 0.2, 1) |
+| Light/delicate | Quick start | (0.1, 0.0, 0.2, 1) |
+| Dramatic/cinematic | Extreme ease | (0.86, 0, 0.07, 1) |
+| Mechanical/robotic | Linear | (0, 0, 1, 1) |
+
+### 2. Entender Cubic-Bezier Anatomy
+```
+cubic-bezier(x1, y1, x2, y2)
+  x1, y1 = control point 1 (start shape)
+  x2, y2 = control point 2 (end shape)
+
+  y > 1.0 = overshoot (bounce past target)
+  x1 = 0, y1 = 0 = starts fast (decelerate)
+  x2 = 1, y2 = 1 = ends slow (accelerate)
+```
+
+### 3. Selecionar Presets por Contexto
+| Contexto | Preset | Bezier |
+|----------|--------|--------|
+| UI entrance | ease-out | (0, 0, 0.2, 1) |
+| UI exit | ease-in | (0.4, 0, 1, 1) |
+| UI state change | ease-in-out | (0.4, 0, 0.2, 1) |
+| Hover response | quick ease-out | (0, 0, 0.15, 1) |
+| Modal open | decelerate | (0, 0, 0.2, 1) |
+| Bounce back | overshoot | (0.34, 1.56, 0.64, 1) |
+
+### 4. Criar Spring Easing (GSAP)
+```javascript
+// Spring physics para animacoes organicas
+gsap.to(element, {
+  y: 0,
+  ease: 'elastic.out(1, 0.3)', // amplitude, period
+  duration: 0.8,
+});
+// Ou custom spring:
+gsap.to(element, {
+  y: 0,
+  ease: CustomEase.create('custom', 'M0,0 C0.05,0.7 0.14,1.12 0.3,1.08 0.45,1.04 0.65,1 1,1'),
+});
+```
+
+### 5. Criar CSS Spring Approximation
+```css
+/* Spring-like with overshoot */
+.spring-bounce {
+  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+/* Multiple bounces need @keyframes */
+@keyframes spring-in {
+  0% { transform: scale(0); }
+  60% { transform: scale(1.08); }
+  80% { transform: scale(0.97); }
+  100% { transform: scale(1); }
+}
+```
+
+### 6. Easing para Scroll-Driven
+- Scroll-driven: geralmente `ease: 'none'` (linear)
+- Ou `ease: 'power1.out'` para feeling suave
+- Scrub com smoothing: `scrub: 1` (1 segundo catch-up)
+
+### 7. Testar Curva Mentalmente
+- Imaginar o objeto acelerando/desacelerando
+- A curva deve "sentir" como o feeling descrito
+- Se parece com ease-in-out padrao, provavelmente e boring
+- Customizar pelo menos um control point para dar personalidade
+
+### 8. Documentar Easing Token
+```yaml
+easing_curves:
+  name: "premium-decelerate"
+  css: "cubic-bezier(0.0, 0.0, 0.2, 1)"
+  gsap: "power3.out"
+  feeling: "Premium, controlled, confident"
+  use_for: ["entrances", "modals", "page transitions"]
+  avoid_for: ["exits", "micro-interactions"]
+```
+
+### 9. Consistencia no Projeto
+- Max 3-5 easing curves por projeto
+- Cada curve tem um nome semantico
+- Evitar curvas diferentes para o mesmo tipo de animacao
+- Brand personality refletida na escolha de curvas
+
+### 10. Reduced Motion Easing
+- prefers-reduced-motion: nao precisa de easing (instant)
+- Se manter animacao reduzida: usar linear ou ease padrao
+- Spring/bounce: eliminar completamente
+
+## Output
+- Easing curve(s) selecionadas com valores
+- CSS cubic-bezier e GSAP ease equivalente
+- Spring parameters se aplicavel
+- Documentacao de feeling e uso
+- Token name para design system
+- Reduced motion alternative
+
+## Quality Criteria
+- [ ] Easing traduz o feeling descrito no brief
+- [ ] Bezier values documentados (CSS e GSAP)
+- [ ] Contexto de uso definido (entrance/exit/hover)
+- [ ] Consistente com outras curvas do projeto
+- [ ] Max 5 curvas unicas por projeto
+- [ ] Spring physics parametros documentados
+- [ ] Token name semantico atribuido
+- [ ] Reduced motion: linear ou instant

package/squad-animations/tasks/create-fog-atmosphere.md

@@ -0,0 +1,158 @@
+---
+task: create-fog-atmosphere
+responsavel: "@threejs-architect"
+responsavel_type: Agent
+atomic_layer: Task
+elicit: false
+
+Entrada:
+  - campo: scene_setup
+    tipo: code
+    origem: "setup-threejs-scene"
+    obrigatorio: true
+  - campo: atmosphere_spec
+    tipo: object
+    origem: "animation_brief"
+    obrigatorio: true
+
+Saida:
+  - campo: atmosphere
+    tipo: code
+    destino: "shader-artist"
+
+Checklist:
+  - "[ ] Selecionar tipo (Fog linear, FogExp2)"
+  - "[ ] Configurar cor e density por mood"
+  - "[ ] Implementar volumetric fog se necessario (shader)"
+  - "[ ] Testar com depth of field"
+---
+
+# Task: Create Fog and Atmosphere
+
+## Metadata
+- **Agent:** threejs-architect (Vertex)
+- **Squad:** squad-animations
+- **Complexity:** LOW
+
+## Objetivo
+Criar efeitos atmosfericos na cena Three.js — fog linear, exponential fog, volumetric fog shader, haze e depth-based color shift. Atmosfera adiciona profundidade e mood a cenas 3D.
+
+## Pre-Conditions
+- Scene setup com background color definido
+- Mood desejado (mistico, clean, cyberpunk)
+- Far plane da camera definido (fog deve respeitar)
+- Decisao: fog builtin vs volumetric shader
+
+## Passos
+
+### 1. Selecionar Tipo de Fog
+| Tipo | Comportamento | Melhor Para |
+|------|--------------|-------------|
+| Fog (linear) | Gradual, near-to-far | Cenas com distancia conhecida |
+| FogExp2 | Exponencial, mais natural | Outdoor, floresta, mist |
+| Volumetric (shader) | Raios de luz, density variavel | Cinematico, god rays |
+| Color fog (custom) | Shift de cor com distancia | Estilizado, gradient |
+
+### 2. Implementar Fog Linear
+```javascript
+scene.fog = new THREE.Fog(
+  '#000000',  // Color (match background)
+  5,          // Near (onde comeca)
+  20          // Far (onde e totalmente opaco)
+);
+scene.background = new THREE.Color('#000000'); // DEVE ser igual
+```
+
+### 3. Implementar FogExp2
+```javascript
+scene.fog = new THREE.FogExp2(
+  '#112233',  // Color
+  0.05        // Density (0.01 = sutil, 0.1 = denso)
+);
+scene.background = new THREE.Color('#112233');
+```
+
+### 4. Animar Fog
+```javascript
+function animate(elapsed) {
+  // Pulsar densidade
+  scene.fog.density = 0.05 + Math.sin(elapsed * 0.3) * 0.02;
+  // Shift de cor
+  const hue = (elapsed * 0.01) % 1;
+  scene.fog.color.setHSL(hue, 0.3, 0.1);
+  scene.background.copy(scene.fog.color);
+}
+```
+
+### 5. Fog por Mood
+| Mood | Type | Color | Density/Near-Far |
+|------|------|-------|-----------------|
+| Mistico | FogExp2 | #1a0a2e | 0.04 |
+| Clean/Minimal | Fog | #ffffff | near:8, far:25 |
+| Cyberpunk | FogExp2 | #0a0020 | 0.06 |
+| Floresta | FogExp2 | #1a3a1a | 0.03 |
+| Underwater | FogExp2 | #003355 | 0.08 |
+
+### 6. Volumetric Fog (Shader)
+```glsl
+// Fragment shader para volumetric light rays
+uniform vec3 uLightPosition;
+uniform float uDensity;
+
+float volumetricFog(vec3 ro, vec3 rd, float maxDist) {
+  float fog = 0.0;
+  float stepSize = maxDist / 32.0;
+  for (float t = 0.0; t < maxDist; t += stepSize) {
+    vec3 p = ro + rd * t;
+    float lightDist = length(p - uLightPosition);
+    fog += exp(-lightDist * uDensity) * stepSize;
+  }
+  return fog;
+}
+```
+
+### 7. Fog com Custom Materials
+```javascript
+// MeshBasicMaterial NAO respeita fog por default
+const material = new THREE.MeshBasicMaterial({
+  color: '#ff0000',
+  fog: true, // Habilitar fog neste material
+});
+// ShaderMaterial: precisa implementar fog manualmente
+```
+
+### 8. Layered Atmosphere
+```javascript
+// Combinar fog com particulas para atmosfera rica
+// Fog: background haze
+scene.fog = new THREE.FogExp2('#111111', 0.03);
+// Particulas: floating dust/mist (via generative-particle-engineer)
+```
+
+### 9. Fog e Transparency
+- Fog interage com objetos transparentes de forma diferente
+- `material.transparent = true` + fog pode causar artifacts
+- Considerar order de renderizacao (depthWrite, renderOrder)
+
+### 10. Performance
+- Fog builtin (Fog/FogExp2): custo zero (GPU calcula automaticamente)
+- Volumetric fog: custoso (ray marching no fragment shader)
+- Volumetric: reduzir samples em mobile (16 vs 32)
+
+## Output
+- Fog configurado (tipo, cor, density)
+- Fog animado se solicitado
+- Volumetric fog shader se necessario
+- Background color sincronizado com fog
+- Notas de interacao com transparencia
+- Performance considerations
+
+## Quality Criteria
+- [ ] Fog color IGUAL ao background color
+- [ ] Density adequada ao mood (nao excessiva)
+- [ ] Objetos distantes desaparecem naturalmente
+- [ ] Near plane do fog nao corta objetos proximos
+- [ ] Fog animado suave (sem popping)
+- [ ] Materiais custom respeitam fog (fog: true)
+- [ ] Volumetric fog 30fps minimo
+- [ ] Transparencia nao causa artifacts com fog

package/squad-animations/tasks/create-generative-pattern.md

@@ -0,0 +1,227 @@
+---
+task: create-generative-pattern
+responsavel: "@generative-particle-engineer"
+responsavel_type: Agent
+atomic_layer: Task
+elicit: false
+
+Entrada:
+  - campo: pattern_spec
+    tipo: object
+    origem: "animation_brief"
+    obrigatorio: true
+
+Saida:
+  - campo: generative_pattern
+    tipo: code
+    destino: "review-animation-quality"
+
+Checklist:
+  - "[ ] Selecionar algoritmo (noise, voronoi, L-system, reaction-diffusion)"
+  - "[ ] Implementar com parametros configuráveis"
+  - "[ ] Adicionar seed para reproducibilidade"
+  - "[ ] Animar evolucao do pattern"
+  - "[ ] Mapear para cores do brand system"
+---
+
+# Task: Create Generative Pattern
+
+## Metadata
+- **Agent:** generative-particle-engineer (Cloud)
+- **Squad:** squad-animations
+- **Complexity:** MEDIUM
+
+## Objetivo
+Criar patterns generativos animados usando algoritmos procedurais — noise, Voronoi, L-systems, reaction-diffusion, ou fractais. O pattern deve ser configuravel, reproduzivel via seed, animado e mapeado para o brand system.
+
+## Pre-Conditions
+- Tipo de pattern definido no brief (organic, geometric, cellular, branching)
+- Cores do brand system disponiveis
+- Canvas 2D ou WebGL context configurado
+- Seed strategy definida (random vs fixed)
+- Resolucao e aspect ratio do output
+
+## Passos
+
+### 1. Selecionar Algoritmo por Estetica
+| Algoritmo | Visual | Complexidade | Uso |
+|-----------|--------|-------------|-----|
+| Perlin/Simplex noise | Organico, fluido | Baixa | Backgrounds, terrain |
+| Voronoi diagram | Celular, mosaico | Media | Organic textures, glass |
+| L-system | Branching, fractal | Media | Trees, networks, veins |
+| Reaction-diffusion | Biological, Turing | Alta | Coral, fingerprint, organic |
+| Delaunay triangulation | Geometric mesh | Media | Low-poly, crystal |
+| Wave function collapse | Tiled, structured | Alta | Patterns, tile maps |
+| Circle packing | Organic fill | Baixa | Infographics, abstract |
+
+### 2. Implementar Noise Pattern
+```javascript
+// Multi-octave noise with domain warping
+function warpedNoise(x, y, time) {
+  const warpX = noise3D(x * 0.5, y * 0.5, time) * 2;
+  const warpY = noise3D(x * 0.5 + 100, y * 0.5 + 100, time) * 2;
+  return noise3D((x + warpX) * freq, (y + warpY) * freq, time * 0.3);
+}
+
+// Render as color field
+for (let y = 0; y < height; y++) {
+  for (let x = 0; x < width; x++) {
+    const val = warpedNoise(x, y, time);
+    const color = colorRamp(val); // Map [-1,1] to brand colors
+    setPixel(x, y, color);
+  }
+}
+```
+
+### 3. Implementar Voronoi Pattern
+```javascript
+// Generate seed points
+const seeds = Array.from({ length: numCells }, () => ({
+  x: seededRandom() * width,
+  y: seededRandom() * height,
+  vx: (seededRandom() - 0.5) * speed, // Animated
+  vy: (seededRandom() - 0.5) * speed,
+}));
+
+// For each pixel, find nearest seed (or use Fortune's algorithm for edges)
+function voronoiValue(px, py, seeds) {
+  let minDist = Infinity;
+  let secondDist = Infinity;
+  for (const s of seeds) {
+    const d = Math.hypot(px - s.x, py - s.y);
+    if (d < minDist) { secondDist = minDist; minDist = d; }
+    else if (d < secondDist) { secondDist = d; }
+  }
+  return secondDist - minDist; // Edge detection
+}
+```
+
+### 4. Implementar L-System
+```javascript
+const rules = {
+  'F': 'FF+[+F-F-F]-[-F+F+F]', // Branching tree
+};
+function iterate(axiom, rules, iterations) {
+  let current = axiom;
+  for (let i = 0; i < iterations; i++) {
+    current = current.split('').map(c => rules[c] || c).join('');
+  }
+  return current;
+}
+// Render with turtle graphics
+function drawLSystem(ctx, instructions, stepSize, angle) {
+  const stack = [];
+  for (const char of instructions) {
+    switch (char) {
+      case 'F': ctx.lineTo(turtle.x += Math.cos(turtle.angle) * stepSize,
+                            turtle.y += Math.sin(turtle.angle) * stepSize); break;
+      case '+': turtle.angle += angle; break;
+      case '-': turtle.angle -= angle; break;
+      case '[': stack.push({ ...turtle }); break;
+      case ']': Object.assign(turtle, stack.pop()); ctx.moveTo(turtle.x, turtle.y); break;
+    }
+  }
+}
+```
+
+### 5. Implementar Reaction-Diffusion (Gray-Scott)
+```javascript
+// Two chemical concentrations: A and B
+// dA/dt = Da * laplacian(A) - A*B*B + f*(1-A)
+// dB/dt = Db * laplacian(B) + A*B*B - (k+f)*B
+const Da = 1.0, Db = 0.5, f = 0.055, k = 0.062;
+
+function step(gridA, gridB, nextA, nextB, w, h) {
+  for (let y = 1; y < h - 1; y++) {
+    for (let x = 1; x < w - 1; x++) {
+      const i = y * w + x;
+      const lapA = laplacian(gridA, x, y, w);
+      const lapB = laplacian(gridB, x, y, w);
+      const a = gridA[i], b = gridB[i];
+      nextA[i] = a + (Da * lapA - a * b * b + f * (1 - a));
+      nextB[i] = b + (Db * lapB + a * b * b - (k + f) * b);
+    }
+  }
+}
+```
+
+### 6. Seed para Reproducibilidade
+```javascript
+// Seeded PRNG (mulberry32)
+function mulberry32(seed) {
+  return function() {
+    let t = seed += 0x6D2B79F5;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+const seededRandom = mulberry32(42); // Fixed seed = same pattern
+```
+
+### 7. Animar Evolucao do Pattern
+| Tecnica | Aplicavel a | Efeito |
+|---------|------------|--------|
+| Time dimension no noise | Noise patterns | Morphing suave |
+| Seed point movement | Voronoi | Celulas se movem |
+| Growth iterations | L-system | Arvore crescendo |
+| Simulation steps | Reaction-diffusion | Pattern emergindo |
+| Parameter interpolation | Todos | Transicao entre estados |
+
+### 8. Mapear Cores do Brand System
+```javascript
+function colorRamp(value, brandColors) {
+  // value: 0-1, brandColors: array of hex
+  const stops = brandColors.map((c, i) => ({
+    pos: i / (brandColors.length - 1),
+    color: hexToRgb(c),
+  }));
+  // Find two surrounding stops and interpolate
+  for (let i = 0; i < stops.length - 1; i++) {
+    if (value >= stops[i].pos && value <= stops[i+1].pos) {
+      const t = (value - stops[i].pos) / (stops[i+1].pos - stops[i].pos);
+      return lerpColor(stops[i].color, stops[i+1].color, t);
+    }
+  }
+}
+```
+
+### 9. GPU Acceleration (Shader-Based)
+- Para patterns em tempo real (noise, voronoi): implementar no fragment shader
+- Reaction-diffusion: ping-pong FBOs para simulation
+- L-systems: pre-compute em CPU, render em GPU
+- Vantagem: resolucao full sem per-pixel CPU loop
+
+### 10. Export e Reduced Motion
+```javascript
+// Export static frame as image
+function exportPattern(canvas) {
+  return canvas.toDataURL('image/png');
+}
+
+// Reduced motion: show final static pattern, skip evolution animation
+if (prefersReducedMotion) {
+  // Run algorithm to completion, render final state
+  renderFinalState();
+  return;
+}
+```
+
+## Output
+- Pattern generativo funcional com algoritmo selecionado
+- Parametros configuraveis (seed, scale, colors, speed)
+- Seed-based reproducibilidade
+- Animacao de evolucao do pattern
+- Cores mapeadas para brand system
+- Export capability (static frame)
+- Reduced motion variant
+
+## Quality Criteria
+- [ ] Algoritmo correto para estetica desejada
+- [ ] Parametros configuraveis e documentados
+- [ ] Seed fixa produz resultado identico
+- [ ] Animacao de evolucao suave (sem pops)
+- [ ] Cores do brand system aplicadas corretamente
+- [ ] 60fps na resolucao target
+- [ ] Sem artefatos visuais nas bordas
+- [ ] Reduced motion: pattern estatico final

package/squad-animations/tasks/create-image-effect-shader.md

@@ -0,0 +1,165 @@
+---
+task: create-image-effect-shader
+responsavel: "@shader-artist"
+responsavel_type: Agent
+atomic_layer: Task
+elicit: false
+
+Entrada:
+  - campo: image_effect_spec
+    tipo: object
+    origem: "animation_brief"
+    obrigatorio: true
+
+Saida:
+  - campo: image_shader
+    tipo: code
+    destino: "css-motion-artist ou threejs-architect"
+
+Checklist:
+  - "[ ] Carregar imagem como texture"
+  - "[ ] Implementar efeito (RGB shift, ripple, pixelation, blur)"
+  - "[ ] Configurar interacao (hover, scroll, click)"
+  - "[ ] Adicionar ease in/out suave"
+  - "[ ] Garantir aspect ratio correto"
+---
+
+# Task: Create Image Effect Shader
+
+## Metadata
+- **Agent:** shader-artist (Fragment)
+- **Squad:** squad-animations
+- **Complexity:** HIGH
+
+## Objetivo
+Criar shaders que aplicam efeitos visuais em imagens — RGB shift, chromatic aberration, pixelation, noise overlay, hover reveal e transicoes entre imagens. Tecnica iconica de creative coding para portfolios e galerias.
+
+## Pre-Conditions
+- Imagem source disponivel como texture
+- Tipo de efeito definido no brief
+- Interaction model (hover, scroll, auto)
+- Aspect ratio da imagem e do container
+
+## Passos
+
+### 1. Classificar Efeito de Imagem
+| Efeito | Complexidade | Uso Tipico |
+|--------|-------------|------------|
+| RGB shift | Baixa | Hover feedback, glitch |
+| Chromatic aberration | Baixa | Premium feel, camera-like |
+| Pixelation | Media | Reveal, transition |
+| Noise grain | Baixa | Film-like, texture |
+| Ripple/wave | Media | Interactive, scroll |
+| Dual-image transition | Alta | Hover image swap |
+
+### 2. Configurar Plane com Aspect Ratio
+```javascript
+const texture = await new THREE.TextureLoader().loadAsync('image.jpg');
+const aspect = texture.image.width / texture.image.height;
+const geometry = new THREE.PlaneGeometry(aspect, 1, 32, 32);
+```
+
+### 3. Implementar RGB Shift
+```glsl
+uniform sampler2D uTexture;
+uniform float uIntensity;
+varying vec2 vUv;
+
+void main() {
+  vec2 uv = vUv;
+  float r = texture2D(uTexture, uv + vec2(uIntensity, 0.0)).r;
+  float g = texture2D(uTexture, uv).g;
+  float b = texture2D(uTexture, uv - vec2(uIntensity, 0.0)).b;
+  gl_FragColor = vec4(r, g, b, 1.0);
+}
+```
+
+### 4. Implementar Pixelation Effect
+```glsl
+uniform float uPixelSize;
+void main() {
+  vec2 uv = vUv;
+  vec2 pixelated = floor(uv / uPixelSize) * uPixelSize + uPixelSize * 0.5;
+  gl_FragColor = texture2D(uTexture, pixelated);
+}
+```
+
+### 5. Implementar Noise Grain Overlay
+```glsl
+float grain = fract(sin(dot(vUv * uTime, vec2(12.9898, 78.233))) * 43758.5453);
+vec4 color = texture2D(uTexture, vUv);
+color.rgb += (grain - 0.5) * uGrainIntensity;
+gl_FragColor = color;
+```
+
+### 6. Implementar Dual-Image Hover Transition
+```glsl
+uniform sampler2D uTexture1;
+uniform sampler2D uTexture2;
+uniform float uProgress; // 0.0 = image1, 1.0 = image2
+
+void main() {
+  vec4 tex1 = texture2D(uTexture1, vUv);
+  vec4 tex2 = texture2D(uTexture2, vUv);
+  // Distortion during transition
+  float distortion = sin(vUv.y * 10.0) * uProgress * (1.0 - uProgress) * 0.1;
+  vec2 uv1 = vUv + vec2(distortion, 0.0);
+  vec2 uv2 = vUv - vec2(distortion, 0.0);
+  gl_FragColor = mix(texture2D(uTexture1, uv1), texture2D(uTexture2, uv2), uProgress);
+}
+```
+
+### 7. Smooth Hover Interaction
+```javascript
+let targetIntensity = 0;
+element.addEventListener('mouseenter', () => targetIntensity = 1);
+element.addEventListener('mouseleave', () => targetIntensity = 0);
+
+function animate() {
+  const current = material.uniforms.uIntensity.value;
+  material.uniforms.uIntensity.value += (targetIntensity - current) * 0.05;
+}
+```
+
+### 8. Manter Aspect Ratio Responsivo
+```javascript
+function resize() {
+  const containerAspect = container.clientWidth / container.clientHeight;
+  const imageAspect = texture.image.width / texture.image.height;
+  // Cover behavior
+  if (containerAspect > imageAspect) {
+    mesh.scale.set(containerAspect / imageAspect, 1, 1);
+  } else {
+    mesh.scale.set(1, imageAspect / containerAspect, 1);
+  }
+}
+```
+
+### 9. Reduced Motion / Fallback
+- Intensity = 0 quando prefers-reduced-motion
+- Mostrar imagem normal (`<img>`) como fallback
+- CSS filter como alternativa leve (blur, grayscale)
+
+### 10. Otimizar Texture Loading
+- Usar power-of-two textures quando possivel
+- Comprimir com basis/KTX2 para web
+- Lazy-load textures fora do viewport
+- `texture.minFilter = THREE.LinearFilter` para non-POT
+
+## Output
+- Fragment shader com image effect
+- Texture loading e aspect ratio setup
+- Mouse/scroll interaction com lerp
+- Dual-image transition se aplicavel
+- Fallback CSS para sem WebGL
+- Demo HTML com efeito interativo
+
+## Quality Criteria
+- [ ] Aspect ratio preservado em todos tamanhos
+- [ ] Hover transition suave (lerp, nao snap)
+- [ ] RGB shift sutil (nao nausea-inducing)
+- [ ] 60fps com efeito ativo
+- [ ] Textures carregadas com loader correto
+- [ ] Fallback gracioso (img tag visivel se WebGL off)
+- [ ] Mobile: efeito desativado ou simplificado
+- [ ] Sem texture sampling artifacts nas bordas