sinapse-ai 1.0.0

package/squad-animations/knowledge-base/page-transition-patterns.md

@@ -0,0 +1,95 @@
+# Page Transition Patterns
+
+> Transicoes de pagina que eliminam o flash branco e criam experiencia fluida.
+
+---
+
+## Ferramentas
+
+| Ferramenta | Abordagem |
+|-----------|-----------|
+| Barba.js | Intercepta links, AJAX fetch, anima entre paginas |
+| Swup | Similar ao Barba, API mais simples |
+| View Transitions API | Nativa do browser (Chrome 111+) |
+| Custom (SPA) | React Router + AnimatePresence / GSAP |
+
+---
+
+## Padroes de Transicao
+
+### 1. Fade Crossfade
+```javascript
+// Barba.js
+barba.init({
+  transitions: [{
+    leave: ({ current }) => gsap.to(current.container, { opacity: 0, duration: 0.4 }),
+    enter: ({ next }) => gsap.from(next.container, { opacity: 0, duration: 0.4 }),
+  }]
+});
+```
+
+### 2. Curtain Wipe
+```css
+.transition-curtain {
+  position: fixed; inset: 0;
+  background: #000;
+  transform: scaleY(0);
+  transform-origin: bottom;
+}
+/* Leave: scaleY(0) → scaleY(1) from bottom
+   Enter: scaleY(1) → scaleY(0) from top */
+```
+
+### 3. Slide Lateral
+```javascript
+leave: ({ current }) => gsap.to(current.container, { x: '-100%', duration: 0.5 }),
+enter: ({ next }) => gsap.from(next.container, { x: '100%', duration: 0.5 }),
+```
+
+### 4. Circular Reveal
+```css
+.transition-circle {
+  clip-path: circle(0% at 50% 50%);
+  transition: clip-path 0.8s var(--ease-out-quart);
+}
+.transition-circle.active {
+  clip-path: circle(150% at 50% 50%);
+}
+```
+
+### 5. Shared Element (Morph)
+```javascript
+// View Transitions API (nativo)
+document.startViewTransition(() => {
+  // Update DOM
+  updateContent(newPage);
+});
+
+// CSS
+.hero-image { view-transition-name: hero; }
+::view-transition-old(hero) { animation: fade-out 0.3s; }
+::view-transition-new(hero) { animation: fade-in 0.3s; }
+```
+
+### 6. Staggered Exit/Enter
+```javascript
+leave: ({ current }) => {
+  const items = current.container.querySelectorAll('.animate-out');
+  return gsap.to(items, { y: -30, opacity: 0, stagger: 0.05, duration: 0.3 });
+},
+enter: ({ next }) => {
+  const items = next.container.querySelectorAll('.animate-in');
+  return gsap.from(items, { y: 30, opacity: 0, stagger: 0.05, duration: 0.4 });
+}
+```
+
+---
+
+## Regras
+
+1. **Max 800ms total** — Transicoes longas irritam
+2. **Preload next page** — Fetch durante animacao de saida
+3. **Scroll to top** — Resetar scroll na nova pagina
+4. **Reinit scripts** — Re-executar JS da nova pagina (ScrollTrigger.refresh)
+5. **Loading fallback** — Se pagina demora, mostrar loading state
+6. **Back button** — Transicao reversa para navegacao de volta

package/squad-animations/knowledge-base/point-cloud-data-guide.md

@@ -0,0 +1,173 @@
+# Point Cloud Data Guide — Animacao com Dados 3D Reais
+
+> Guia completo para trabalhar com point clouds (.pcd, .ply, .xyz, .las) em animacoes web.
+> De escaneamentos LiDAR a visualizacoes artisticas interativas.
+
+---
+
+## 1. O Que Sao Point Clouds
+
+Uma nuvem de pontos e uma colecao de pontos no espaco 3D (x, y, z), cada um podendo
+carregar atributos adicionais como cor (r, g, b), normal (nx, ny, nz), intensidade e
+classificacao. Sao produzidos por:
+
+- **LiDAR** — escaneamento laser de ambientes
+- **Fotogrametria** — reconstrucao 3D a partir de fotos
+- **Sensores de profundidade** — Kinect, RealSense, iPhone LiDAR
+- **Simulacoes** — dados sinteticos de particulas/fluidos
+- **CAD/BIM** — export de modelos arquitetonicos
+
+---
+
+## 2. Formatos Suportados
+
+| Formato | Ext | Encoding | Atributos | Loader Three.js |
+|---------|-----|----------|-----------|----------------|
+| PCD | .pcd | ASCII, binary, binary_compressed | pos, rgb, normal, intensity | PCDLoader |
+| PLY | .ply | ASCII, binary_little_endian, binary_big_endian | pos, rgb, normal, faces | PLYLoader |
+| XYZ | .xyz | ASCII | pos, rgb (opcional) | Custom (parseFloat) |
+| LAS | .las | Binary | pos, rgb, class, intensity, return# | Custom / Potree |
+| LAZ | .laz | Compressed LAS | Idem LAS | LASZip + custom |
+| E57 | .e57 | XML + binary | pos, rgb, normal, intensity | Custom |
+| OBJ (points) | .obj | ASCII | pos (vertices sem faces) | OBJLoader |
+
+### PCD Format Detalhado
+```
+# .PCD v0.7 - Point Cloud Data file format
+VERSION 0.7
+FIELDS x y z rgb
+SIZE 4 4 4 4
+TYPE F F F U
+COUNT 1 1 1 1
+WIDTH 307200
+HEIGHT 1
+VIEWPOINT 0 0 0 1 0 0 0
+POINTS 307200
+DATA binary
+```
+
+---
+
+## 3. Pipeline de Importacao no Three.js
+
+### PCD
+```javascript
+import { PCDLoader } from 'three/addons/loaders/PCDLoader.js';
+
+const loader = new PCDLoader();
+loader.load('scan.pcd', (points) => {
+  points.geometry.center();           // Centralizar
+  points.geometry.rotateX(Math.PI);   // Corrigir orientacao LiDAR
+  points.material.size = 0.01;        // Tamanho dos pontos
+  points.material.color.set(0x00ff88); // Cor override
+  scene.add(points);
+});
+```
+
+### PLY
+```javascript
+import { PLYLoader } from 'three/addons/loaders/PLYLoader.js';
+
+const loader = new PLYLoader();
+loader.load('model.ply', (geometry) => {
+  geometry.computeVertexNormals();
+  const material = new THREE.PointsMaterial({ size: 0.005, vertexColors: true });
+  const points = new THREE.Points(geometry, material);
+  scene.add(points);
+});
+```
+
+---
+
+## 4. Tecnicas de Animacao com Point Clouds
+
+### 4.1 Transformacao Basica
+- Rotacao continua (`points.rotation.y += 0.002`)
+- Translacao (mover a nuvem toda)
+- Scale pulsante (`1.0 + sin(time) * 0.05`)
+
+### 4.2 Deformacao por Vertex Shader
+```glsl
+uniform float uTime;
+uniform float uAmplitude;
+
+void main() {
+  vec3 pos = position;
+  // Noise-based deformation
+  pos.x += sin(pos.y * 4.0 + uTime) * uAmplitude;
+  pos.y += cos(pos.x * 4.0 + uTime) * uAmplitude;
+  pos.z += sin(pos.z * 4.0 + uTime * 0.5) * uAmplitude;
+
+  vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
+  gl_PointSize = 2.0 * (300.0 / -mvPosition.z);
+  gl_Position = projectionMatrix * mvPosition;
+}
+```
+
+### 4.3 Explosao / Implosao
+- Cada ponto move na direcao da sua normal (ou radialmente do centro)
+- Controlar com `uProgress` uniform (0.0 = original, 1.0 = explodido)
+- Reverse = implosao (pontos convergem para formar o objeto)
+
+### 4.4 Morphing Entre Clouds
+- Dois BufferGeometries com mesmo numero de pontos
+- Interpolar posicoes: `mix(posA, posB, uProgress)`
+- Se quantidades diferentes: amostrar o maior para igualar
+
+### 4.5 Efeitos de Particulas
+- Cada ponto da cloud vira particula independente com velocidade e aceleracao
+- Gravidade, vento, turbulencia aplicados via shader
+- Pontos se dispersam e reagrupam
+
+### 4.6 Coloracao Dinamica
+```glsl
+// Mapear altitude para cor
+float height = (position.y - minY) / (maxY - minY);
+vec3 color = mix(vec3(0.0, 0.3, 1.0), vec3(1.0, 0.2, 0.0), height);
+```
+
+### 4.7 Transicao Cloud → Mesh
+- Delaunay 3D ou Poisson surface reconstruction
+- Renderizar como Points, interpolar para Mesh (triangulos)
+- Animacao: pontos se conectam progressivamente
+
+### 4.8 Animacao Temporal (4D)
+- Sequencia de scans ao longo do tempo
+- Interpolar entre frames de scan
+- "Time-lapse 3D" de ambientes reais
+
+---
+
+## 5. Otimizacao de Point Clouds
+
+| Tecnica | Impacto |
+|---------|---------|
+| Downsample (voxel grid) | Reduz pontos mantendo forma |
+| LOD (nivel de detalhe) | Mais pontos perto, menos longe |
+| Frustum culling | So renderizar pontos visiveis |
+| Octree spatial index | Queries espaciais rapidas |
+| GPU instancing | Para pontos com geometria (spheres) |
+| gl_PointSize adaptativo | Pontos maiores = menos necessarios |
+| Texture atlas para cores | Evitar per-point color attribute |
+
+### Limites de Performance
+| Pontos | Desktop 60fps | Mobile 30fps |
+|--------|---------------|---------------|
+| 10K | Trivial | Trivial |
+| 100K | Facil | Facil |
+| 500K | Ok | Cuidado |
+| 1M | Shader otimizado | Downsample |
+| 5M+ | GPGPU obrigatorio | Nao recomendado |
+
+---
+
+## 6. Ferramentas Complementares
+
+| Ferramenta | Uso |
+|-----------|-----|
+| CloudCompare | Visualizar, filtrar, alinhar point clouds |
+| Potree | Visualizador web otimizado para point clouds massivos |
+| PDAL | Pipeline de processamento de point clouds |
+| Open3D (Python) | Processamento e reconstrucao |
+| Meshlab | Reconstrucao de superficie |
+| Blender | Import/export point clouds com add-ons |

package/squad-animations/knowledge-base/scroll-animation-patterns.md

@@ -0,0 +1,183 @@
+# Scroll Animation Patterns
+
+> Padroes de animacao scroll-driven usados pelos melhores estudios do mundo.
+
+---
+
+## Stack Recomendado
+
+| Ferramenta | Papel |
+|-----------|-------|
+| Lenis | Smooth scrolling (inertia) |
+| GSAP ScrollTrigger | Scroll-driven animations |
+| GSAP SplitText | Text splitting |
+| Intersection Observer | Trigger basico (sem scrub) |
+| CSS scroll-timeline | Native (experimental) |
+
+### Setup Base
+```javascript
+// Lenis + GSAP
+const lenis = new Lenis({ lerp: 0.1, smoothWheel: true });
+lenis.on('scroll', ScrollTrigger.update);
+gsap.ticker.add((time) => lenis.raf(time * 1000));
+gsap.ticker.lagSmoothing(0);
+```
+
+---
+
+## Padroes
+
+### 1. Fade-Up Reveal (O mais comum e efetivo)
+```javascript
+gsap.from('.reveal', {
+  y: 60,
+  opacity: 0,
+  duration: 0.8,
+  ease: 'power3.out',
+  stagger: 0.1,
+  scrollTrigger: {
+    trigger: '.section',
+    start: 'top 80%',
+  }
+});
+```
+
+### 2. Parallax Layer
+```javascript
+gsap.to('.bg-layer', {
+  y: -200,
+  ease: 'none',
+  scrollTrigger: {
+    trigger: '.parallax-section',
+    start: 'top bottom',
+    end: 'bottom top',
+    scrub: true,
+  }
+});
+```
+
+### 3. Pinned Section com Progresso (Apple-style)
+```javascript
+gsap.to('.product-3d', {
+  rotationY: 360,
+  ease: 'none',
+  scrollTrigger: {
+    trigger: '.showcase',
+    start: 'top top',
+    end: '+=3000',
+    pin: true,
+    scrub: 1,
+  }
+});
+```
+
+### 4. Horizontal Scroll
+```javascript
+const sections = gsap.utils.toArray('.panel');
+gsap.to(sections, {
+  xPercent: -100 * (sections.length - 1),
+  ease: 'none',
+  scrollTrigger: {
+    trigger: '.h-scroll-container',
+    pin: true,
+    scrub: 1,
+    end: () => '+=' + document.querySelector('.h-scroll-container').offsetWidth,
+  }
+});
+```
+
+### 5. Text Reveal Word-by-Word
+```javascript
+const split = new SplitText('.headline', { type: 'words' });
+gsap.from(split.words, {
+  opacity: 0.1,
+  stagger: 0.05,
+  scrollTrigger: {
+    trigger: '.headline',
+    start: 'top 80%',
+    end: 'top 20%',
+    scrub: true,
+  }
+});
+```
+
+### 6. Scale-Up Section Reveal
+```javascript
+gsap.from('.full-section', {
+  scale: 0.8,
+  opacity: 0,
+  borderRadius: '20px',
+  scrollTrigger: {
+    trigger: '.full-section',
+    start: 'top 90%',
+    end: 'top 20%',
+    scrub: true,
+  }
+});
+```
+
+### 7. Number Counter on Scroll
+```javascript
+gsap.from('.stat-number', {
+  textContent: 0,
+  duration: 2,
+  ease: 'power1.in',
+  snap: { textContent: 1 },
+  scrollTrigger: {
+    trigger: '.stats-section',
+    start: 'top 70%',
+  }
+});
+```
+
+### 8. Scroll-Linked Video (Apple-style)
+```javascript
+const video = document.querySelector('video');
+ScrollTrigger.create({
+  trigger: '.video-section',
+  start: 'top top',
+  end: '+=5000',
+  pin: true,
+  onUpdate: (self) => {
+    video.currentTime = video.duration * self.progress;
+  }
+});
+```
+
+### 9. Scroll Velocity Effect
+```javascript
+let velocity = 0;
+lenis.on('scroll', ({ velocity: v }) => { velocity = v; });
+
+// No animation loop:
+elements.forEach(el => {
+  el.style.transform = `skewY(${velocity * 2}deg)`;
+});
+```
+
+### 10. Progressive Blur (Profundidade)
+```javascript
+gsap.to('.bg-text', {
+  filter: 'blur(10px)',
+  opacity: 0.3,
+  ease: 'none',
+  scrollTrigger: {
+    trigger: '.content-section',
+    start: 'top top',
+    end: 'bottom top',
+    scrub: true,
+  }
+});
+```
+
+---
+
+## Regras de Ouro
+
+1. **start: 'top 80%'** — Trigger quando 80% visivel (nao esperar bottom)
+2. **scrub: true** — Para animacoes vinculadas ao progresso do scroll
+3. **scrub: 1** — Para smoothing de 1 segundo (mais suave)
+4. **pin: true** — Usa apenas para secoes hero/showcase
+5. **ease: 'none'** — Sempre para scrubbed animations (easing vem do scroll)
+6. **stagger: 0.05-0.1** — Para reveals de multiplos elementos
+7. **Testar sem smooth scroll** — Garantir que funciona com scroll nativo tambem

package/squad-animations/knowledge-base/shader-techniques-library.md

@@ -0,0 +1,167 @@
+# Shader Techniques Library
+
+> Biblioteca de tecnicas GLSL para efeitos visuais na web.
+
+---
+
+## Noise Functions
+
+### Simplex Noise 2D (Use Case: Texturas organicas, terrenos, deformacoes)
+```glsl
+// Inclusao: copiar funcao simplex2D ou usar #include
+float n = snoise(vUv * 5.0 + uTime * 0.3);
+```
+
+### Fractal Brownian Motion (FBM) — Multiplas oitavas de noise
+```glsl
+float fbm(vec2 p) {
+  float value = 0.0;
+  float amplitude = 0.5;
+  for (int i = 0; i < 6; i++) {
+    value += amplitude * snoise(p);
+    p *= 2.0;
+    amplitude *= 0.5;
+  }
+  return value;
+}
+```
+
+### Domain Warping — Noise distorcendo noise
+```glsl
+vec2 q = vec2(fbm(p), fbm(p + vec2(5.2, 1.3)));
+vec2 r = vec2(fbm(p + 4.0 * q + vec2(1.7, 9.2) + uTime * 0.15),
+              fbm(p + 4.0 * q + vec2(8.3, 2.8) + uTime * 0.126));
+float f = fbm(p + 4.0 * r);
+```
+
+### Curl Noise — Para fluxo de particulas
+```glsl
+vec2 curlNoise(vec2 p) {
+  float eps = 0.001;
+  float n1 = snoise(vec2(p.x, p.y + eps));
+  float n2 = snoise(vec2(p.x, p.y - eps));
+  float n3 = snoise(vec2(p.x + eps, p.y));
+  float n4 = snoise(vec2(p.x - eps, p.y));
+  float x = (n1 - n2) / (2.0 * eps);
+  float y = -(n3 - n4) / (2.0 * eps);
+  return vec2(x, y);
+}
+```
+
+---
+
+## Image Effects
+
+### Distorcao por Mouse (Akella-style)
+```glsl
+uniform vec2 uMouse;
+uniform float uStrength;
+
+void main() {
+  vec2 uv = vUv;
+  float dist = distance(uv, uMouse);
+  float effect = smoothstep(0.3, 0.0, dist);
+  uv += (uv - uMouse) * effect * uStrength;
+  gl_FragColor = texture2D(uTexture, uv);
+}
+```
+
+### RGB Shift / Chromatic Aberration
+```glsl
+float shift = 0.005;
+float r = texture2D(uTexture, uv + vec2(shift, 0.0)).r;
+float g = texture2D(uTexture, uv).g;
+float b = texture2D(uTexture, uv - vec2(shift, 0.0)).b;
+gl_FragColor = vec4(r, g, b, 1.0);
+```
+
+### Hover Displacement
+```glsl
+uniform sampler2D uDisplacement; // Textura de displacement map
+uniform float uHover; // 0.0 a 1.0
+
+vec2 displaced = uv + texture2D(uDisplacement, uv).rg * uHover * 0.1;
+gl_FragColor = texture2D(uTexture, displaced);
+```
+
+### Transition Entre Imagens
+```glsl
+uniform sampler2D uTexture1;
+uniform sampler2D uTexture2;
+uniform float uProgress; // 0.0 a 1.0
+
+// Pattern: displacement transition
+float displacement = texture2D(uDisplacement, uv).r;
+float threshold = step(displacement, uProgress);
+vec4 color = mix(texture2D(uTexture1, uv), texture2D(uTexture2, uv), threshold);
+```
+
+---
+
+## Post-Processing Shaders
+
+### Film Grain
+```glsl
+float grain = fract(sin(dot(uv * uTime, vec2(12.9898, 78.233))) * 43758.5453);
+color.rgb += (grain - 0.5) * 0.1;
+```
+
+### Vignette
+```glsl
+float vignette = 1.0 - smoothstep(0.5, 1.5, length(uv - 0.5) * 2.0);
+color.rgb *= vignette;
+```
+
+### Scanlines
+```glsl
+float scanline = sin(uv.y * 400.0 + uTime * 2.0) * 0.04;
+color.rgb -= scanline;
+```
+
+### Glitch
+```glsl
+float glitchStrength = step(0.99, fract(sin(floor(uTime * 10.0)) * 43758.5453));
+if (glitchStrength > 0.0) {
+  float shift = (fract(sin(uv.y * 100.0) * 43758.5453) - 0.5) * 0.1;
+  uv.x += shift;
+}
+```
+
+---
+
+## SDF (Signed Distance Functions)
+
+### Circulo
+```glsl
+float sdCircle(vec2 p, float r) { return length(p) - r; }
+```
+
+### Caixa
+```glsl
+float sdBox(vec2 p, vec2 b) {
+  vec2 d = abs(p) - b;
+  return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);
+}
+```
+
+### Operacoes
+```glsl
+float opUnion(float d1, float d2) { return min(d1, d2); }
+float opSubtraction(float d1, float d2) { return max(-d1, d2); }
+float opIntersection(float d1, float d2) { return max(d1, d2); }
+float opSmoothUnion(float d1, float d2, float k) {
+  float h = clamp(0.5 + 0.5 * (d2 - d1) / k, 0.0, 1.0);
+  return mix(d2, d1, h) - k * h * (1.0 - h);
+}
+```
+
+---
+
+## Performance Tips
+
+1. **Evitar branching** — usar `step()`, `smoothstep()`, `mix()` em vez de `if/else`
+2. **Precision qualifiers** — `mediump` no fragment shader para mobile
+3. **Minimizar texture lookups** — cada `texture2D()` e caro
+4. **Pre-computar no vertex shader** — passar via varying para o fragment
+5. **Evitar loops dinamicos** — loops com count fixo sao otimizaveis pelo compilador
+6. **Pack dados** — usar canais RGBA para 4 valores em 1 texture lookup