sinapse-ai 9.3.0 → 9.5.0

package/squads/squad-artdir/knowledge-base/deliverables-templates.md

@@ -0,0 +1,457 @@
+# Deliverables Templates
+
+> Templates dos 8 deliverables padrao da squad-artdir.
+> Cada deliverable tem estrutura, conteudo obrigatorio e exemplo.
+
+---
+
+## Deliverable 1: Art Direction Brief
+
+### Template
+
+```yaml
+# Art Direction Brief: {Project Name}
+# Generated by: squad-artdir (Canvas)
+# Date: {date}
+
+## Project Overview
+project_name: "{name}"
+project_type: landing_page | website | campaign | product_page
+client: "{client name}"
+objective: "{primary conversion objective}"
+
+## Audience
+primary:
+  description: "{who they are}"
+  demographics: "{age, role, industry}"
+  psychographics: "{values, motivations, pain points}"
+  tech_savviness: low | medium | high
+secondary:
+  description: "{secondary audience if exists}"
+
+## Positioning
+category: "{market category}"
+competitors_visual: ["{comp1}", "{comp2}", "{comp3}"]
+differentiation: "{how we stand apart visually}"
+brand_voice_visual: "{adjectives: bold, minimal, warm, etc.}"
+
+## Visual Language (Pilar 1)
+mood:
+  adjectives: ["{adj1}", "{adj2}", "{adj3}", "{adj4}", "{adj5}"]
+  references: ["{ref_url_1}", "{ref_url_2}", "{ref_url_3}"]
+  territory: "{visual territory description}"
+decisions:
+  mode: dark | light | adaptive
+  mode_rationale: "{psychological justification}"
+  density: sparse | balanced | dense
+  density_rationale: "{why this density for this audience}"
+  temperature: warm | neutral | cool
+  weight: light | medium | heavy
+  contrast: subtle | balanced | stark
+  movement: static | subtle | kinetic
+
+## Color System (Pilar 2)
+accent:
+  color: "{hex}"
+  name: "{descriptive name}"
+  neuropsychological_rationale: "{why this color — brain science}"
+neutral:
+  base: "{hex}"
+  rationale: "{why}"
+semantic: "{success, warning, error, info hex values}"
+von_restorff_application: "{how accent creates isolation effect}"
+wcag_compliance: "{AAA for CTAs, AA for text — verified}"
+
+## Typography (Pilar 3)
+heading_font: "{font name}"
+body_font: "{font name}"
+accent_font: "{font name if any}"
+pairing_rationale: "{why this pairing — positioning signal}"
+type_scale: "Major Third (1.25) | Perfect Fourth (1.333) | {custom}"
+fluid: true | false
+special_treatments: ["{treatment 1}", "{treatment 2}"]
+
+## Motion System (Pilar 4)
+philosophy: "{what personality does motion express}"
+primary_lib: GSAP | Framer Motion | CSS | Lenis
+smooth_scroll: true | false
+scroll_driven: true | false
+hero_technique: "{frame sequence | text reveal | parallax | static}"
+stagger_default: "{value}ms"
+easing_default: "{name} ({cubic-bezier})"
+performance_budget: "60fps desktop, 30fps mobile"
+reduced_motion: "{fallback strategy}"
+
+## Information Architecture (Pilar 5)
+section_sequence:
+  - role: HOOK
+    description: "{what this section does cognitively}"
+    principle: "{psychological principle}"
+  - role: PROMISE
+    description: "{...}"
+    principle: "{...}"
+  # ... continue for all sections
+retention_devices: ["{Zeigarnik loops}", "{progressive disclosure}", "{etc}"]
+
+## CRO Patterns (Pilar 6)
+patterns_applied:
+  - pattern: "{name}"
+    location: "{where in page}"
+    principle: "{psychological basis}"
+    impact_hypothesis: "{metric: direction, rationale}"
+cta_strategy:
+  primary: "{text + position}"
+  secondary: "{text + position}"
+  sticky: true | false
+
+## Layout System (Pilar 7)
+grid: "12-column | custom"
+spacing_base: "4px | 8px"
+max_width: "{value}"
+full_bleed_sections: ["{section 1}", "{section 2}"]
+responsive_strategy: "mobile-first with breakpoints at {values}"
+
+## Accessibility (Transversal)
+wcag_target: AA | AAA
+reduced_motion: mandatory
+color_blindness: verified
+keyboard_nav: complete
+screen_reader: tested
+
+## Impact Hypotheses
+- metric: "{metric_1}"
+  prediction: "{direction}"
+  rationale: "{psychological principle}"
+- metric: "{metric_2}"
+  prediction: "{direction}"
+  rationale: "{psychological principle}"
+```
+
+---
+
+## Deliverable 2: Design Token System
+
+### Template
+
+```yaml
+# Design Tokens: {Project Name}
+
+tokens:
+  color:
+    accent:
+      50: "{hex}"
+      100: "{hex}"
+      # ... 200-800
+      900: "{hex}"
+    neutral:
+      0: "#ffffff"
+      50: "{hex}"
+      # ... 100-900
+      950: "{hex}"
+    semantic:
+      success: "{hex}"
+      warning: "{hex}"
+      error: "{hex}"
+      info: "{hex}"
+    surface:
+      bg-primary: "{hex}"
+      bg-secondary: "{hex}"
+      bg-tertiary: "{hex}"
+      fg-primary: "{hex}"
+      fg-secondary: "{hex}"
+      fg-tertiary: "{hex}"
+
+  typography:
+    font-heading: "{family}, {fallback}"
+    font-body: "{family}, {fallback}"
+    font-accent: "{family}, {fallback}"
+    scale:
+      5xl: "clamp({min}, {preferred}, {max})"
+      4xl: "clamp({min}, {preferred}, {max})"
+      # ... 3xl, 2xl, xl, lg, base, sm, xs
+    tracking:
+      tight: "-0.04em"
+      normal: "0"
+      wide: "0.08em"
+    leading:
+      tight: "1.1"
+      normal: "1.5"
+      relaxed: "1.75"
+
+  spacing:
+    1: "0.25rem"   # 4px
+    2: "0.5rem"    # 8px
+    3: "0.75rem"   # 12px
+    4: "1rem"      # 16px
+    # ... continue scale
+    48: "12rem"    # 192px
+
+  motion:
+    duration:
+      micro: "200ms"
+      entrance: "500ms"
+      exit: "300ms"
+      page: "500ms"
+      ambient: "8000ms"
+    easing:
+      out: "cubic-bezier(0.22, 1, 0.36, 1)"
+      in: "cubic-bezier(0.55, 0, 1, 0.45)"
+      inOut: "cubic-bezier(0.76, 0, 0.24, 1)"
+      dramatic: "cubic-bezier(0.16, 1, 0.3, 1)"
+      bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)"
+    stagger: "80ms"
+
+  layout:
+    container-max: "{value}"
+    grid-columns: 12
+    grid-gutter: "{value}"
+    border-radius:
+      sm: "4px"
+      md: "8px"
+      lg: "16px"
+      full: "9999px"
+```
+
+---
+
+## Deliverable 3: Motion Spec
+
+### Template
+
+```yaml
+# Motion Spec: {Project Name}
+
+philosophy: "{what personality motion expresses}"
+libs: ["{primary}", "{secondary}"]
+smooth_scroll:
+  enabled: true
+  lib: Lenis
+  config:
+    duration: 1.2
+    easing: "expo decay"
+
+hero:
+  technique: "{name}"
+  description: "{what it does}"
+  trigger: "{page load | scroll | click}"
+  duration: "{value}"
+  easing: "{value}"
+
+sections:
+  - name: "{section name}"
+    animations:
+      - element: "{selector}"
+        type: "{fade | slide | scale | clip-path | etc}"
+        direction: "{up | left | right | in}"
+        duration: "{value}"
+        easing: "{value}"
+        stagger: "{value if multiple}"
+        trigger: "{scroll enter | click | load}"
+        scrub: true | false
+        pin: true | false
+
+interactions:
+  - element: "{selector}"
+    state: "{hover | active | focus}"
+    properties:
+      - property: "{transform | opacity | etc}"
+        from: "{value}"
+        to: "{value}"
+        duration: "{value}"
+        easing: "{value}"
+
+reduced_motion:
+  strategy: "{remove all motion | fade only | instant appear}"
+  fallbacks:
+    - original: "{animation description}"
+      reduced: "{simplified version}"
+
+performance:
+  fps_target: "60fps desktop, 30fps mobile"
+  max_simultaneous: 30
+  gpu_only: true
+  will_change_strategy: "add before, remove after"
+```
+
+---
+
+## Deliverable 4: Annotated Wireflow
+
+### Template
+
+```
+# Annotated Wireflow: {Project Name}
+
+For each section:
+
+## Section {N}: {Name}
+- **Cognitive Role:** {HOOK | PROMISE | PROOF | QUALIFY | EDUCATE | DEMONSTRATE | COMPARE | OVERCOME | CONVERT | REINFORCE}
+- **Psychological Principle:** {principle name + brief explanation}
+- **Content Elements:** {list of content blocks}
+- **Layout:** {full-bleed | contained | split}
+- **Motion:** {entrance animation + scroll behavior}
+- **CTA:** {present? type? position?}
+- **Transition to Next:** {how this section connects to the next cognitively}
+- **Impact Hypothesis:** {metric + direction + rationale}
+```
+
+---
+
+## Deliverable 5: Component Library Spec
+
+### Template
+
+```yaml
+# Component Library Spec: {Project Name}
+
+components:
+  - name: "{ComponentName}"
+    description: "{what it does}"
+    variants: ["{variant1}", "{variant2}"]
+    states:
+      default: "{description}"
+      hover: "{description + animation}"
+      active: "{description + animation}"
+      focus: "{description — WCAG compliant}"
+      disabled: "{description}"
+      loading: "{description + animation}"
+    props:
+      - name: "{prop}"
+        type: "{type}"
+        default: "{value}"
+    accessibility:
+      role: "{ARIA role}"
+      label: "{aria-label strategy}"
+      keyboard: "{keyboard interaction}"
+    tokens_used: ["{token1}", "{token2}"]
+```
+
+---
+
+## Deliverable 6: CRO Patterns Map
+
+### Template
+
+```yaml
+# CRO Patterns Map: {Project Name}
+
+patterns:
+  - name: "{Pattern Name}"
+    location: "{Section N — Name}"
+    type: "{social_proof | comparison | scarcity | risk_reversal | cta | form | pricing}"
+    principle: "{psychological principle}"
+    implementation: "{brief description}"
+    impact_hypothesis:
+      metric: "{CTR | conversion | scroll_depth | time_on_page | bounce_rate}"
+      direction: "{increase | decrease}"
+      magnitude: "{estimated % change}"
+      rationale: "{why this prediction}"
+    priority: high | medium | low
+    effort: low | medium | high
+```
+
+---
+
+## Deliverable 7: Implementation Guide
+
+### Template
+
+```markdown
+# Implementation Guide: {Project Name}
+
+## Tech Stack Recommendations
+- Framework: {Next.js | Astro | etc}
+- Animation: {GSAP | Framer Motion | CSS}
+- Scroll: {Lenis | native}
+- Fonts: {loading strategy}
+- Images: {optimization strategy}
+
+## Critical Path (implement in this order)
+1. {Setup + layout + typography}
+2. {Color system + components}
+3. {Content + IA structure}
+4. {Motion + interactions}
+5. {CRO patterns}
+6. {Accessibility pass}
+7. {Performance optimization}
+8. {Testing + validation}
+
+## Developer Notes
+- {Specific technical considerations}
+- {Performance gotchas}
+- {Accessibility requirements}
+- {Browser support targets}
+```
+
+---
+
+## Deliverable 8: Validation Checklist
+
+### Template
+
+```markdown
+# Validation Checklist: {Project Name}
+
+## Pilar 1: Visual Hierarchy
+- [ ] Clear focal point per viewport
+- [ ] Consistent heading hierarchy
+- [ ] Von Restorff applied to CTAs
+- [ ] Reading pattern matches content type
+
+## Pilar 2: Color System
+- [ ] Max 1 accent + 1 neutral
+- [ ] WCAG AAA (7:1) on CTAs
+- [ ] WCAG AA (4.5:1) on body text
+- [ ] Semantic colors functional
+- [ ] Color-blindness safe
+
+## Pilar 3: Typography
+- [ ] Font pairing justified by positioning
+- [ ] Type scale consistent (modular)
+- [ ] Fluid typography with clamp()
+- [ ] Font loading optimized
+
+## Pilar 4: Motion
+- [ ] Every animation has psychological justification
+- [ ] GPU-only properties
+- [ ] 60fps desktop, 30fps+ mobile
+- [ ] prefers-reduced-motion fallbacks
+- [ ] No animation > 5s without user control
+
+## Pilar 5: Information Architecture
+- [ ] Section sequence follows cognitive roles
+- [ ] Progressive disclosure implemented
+- [ ] Zeigarnik loops present
+- [ ] Peak moment identified
+- [ ] End moment is strong
+
+## Pilar 6: CRO Patterns
+- [ ] Social proof present and verifiable
+- [ ] Multiple CTAs at different intent levels
+- [ ] Risk reversal addresses top objections
+- [ ] Comparison framed favorably
+- [ ] Impact hypotheses documented
+
+## Pilar 7: Layout & Spacing
+- [ ] 4px/8px baseline grid
+- [ ] Section spacing creates cognitive breathing
+- [ ] Full-bleed vs contained justified
+- [ ] Responsive breakpoints tested
+- [ ] Max content width enforced
+
+## WCAG Compliance
+- [ ] Contrast ratios verified
+- [ ] Keyboard navigation complete
+- [ ] Screen reader tested
+- [ ] Focus states visible
+- [ ] Skip link present
+- [ ] Alt text on all images
+- [ ] Form labels present
+
+## Performance
+- [ ] Lighthouse score > 90
+- [ ] FCP < 1.5s
+- [ ] LCP < 2.5s
+- [ ] CLS < 0.1
+- [ ] Total JS < 200KB gzipped
+```

package/squads/squad-artdir/knowledge-base/motion-technique-catalog.md

@@ -0,0 +1,247 @@
+# Motion Technique Catalog
+
+> Catalogo completo de tecnicas de motion para art direction.
+> Cada tecnica inclui: quando usar, lib recomendada, easing, duracao, performance e principio psicologico.
+
+---
+
+## Categorias de Motion
+
+### 1. Micro-interactions (150-400ms)
+
+Respostas imediatas a acoes do usuario. Devem ser quase imperceptiveis conscientemente, mas sentidas como "responsividade".
+
+| Tecnica | Duracao | Easing | Lib | Trigger | Principio |
+|---------|---------|--------|-----|---------|-----------|
+| Button hover brighten | 200ms | power2.out | CSS | mouseenter | Feedback (affordance) |
+| Button press scale | 100ms | power1.in | CSS | mousedown | Squash & Stretch |
+| Button release bounce | 200ms | back.out(1.2) | CSS | mouseup | Follow Through |
+| Input focus glow | 200ms | power1.out | CSS | focus | Feedback (state change) |
+| Toggle switch | 250ms | back.out(1.4) | GSAP | click | Slow In/Out |
+| Checkbox draw | 300ms | power2.out | SVG/CSS | change | Timing (confirmation) |
+| Tooltip appear | 200ms | power2.out | CSS | hover 300ms delay | Staging |
+| Icon morph | 300ms | power2.inOut | GSAP | state change | Appeal |
+| Link underline grow | 200ms | power2.out | CSS | mouseenter | Secondary Action |
+| Card hover lift | 250ms | power2.out | CSS | mouseenter | Exaggeration (subtle) |
+
+**Performance:** CSS transitions only. Nenhum JS necessario para micro-interactions basicas.
+
+### 2. Entrance Animations (300-800ms)
+
+Elementos que aparecem no viewport. Devem comunicar "eu cheguei" sem atrasar a leitura.
+
+| Tecnica | Duracao | Easing | Lib | Trigger | Principio |
+|---------|---------|--------|-----|---------|-----------|
+| Fade in | 400ms | power2.out | CSS/GSAP | scroll enter | Timing (peso minimo) |
+| Slide up + fade | 600ms | power3.out | GSAP | scroll enter | Slow In/Out |
+| Slide left/right + fade | 600ms | power3.out | GSAP | scroll enter | Staging |
+| Scale up + fade | 500ms | power2.out | GSAP | scroll enter | Squash & Stretch |
+| Stagger children | 400ms + 80ms stagger | power2.out | GSAP | scroll enter | Follow Through |
+| Clip-path reveal | 600ms | power3.out | GSAP | scroll enter | Staging (dramatic) |
+| Text split reveal | 800ms | power3.out | GSAP SplitText | scroll enter | Timing + Staging |
+| Counter increment | 1000ms | power2.out | GSAP | scroll enter | Anticipation (buildup) |
+| Draw SVG path | 800ms | power2.inOut | GSAP DrawSVG | scroll enter | Straight Ahead |
+| Blur to sharp | 500ms | power2.out | CSS/GSAP | scroll enter | Staging (focus) |
+
+**Performance:** GSAP ScrollTrigger com `start: "top 80%"` como default trigger. Intersection Observer como fallback.
+
+### 3. Scroll-Driven Animations (Scrubbed)
+
+Animacoes vinculadas ao scroll position. O usuario controla o ritmo — NUNCA auto-play.
+
+| Tecnica | Scrub | Pin | Lib | Principio |
+|---------|-------|-----|-----|-----------|
+| Parallax layers | true | false | GSAP ScrollTrigger | Depth (Solid Drawing) |
+| Pinned section | true | true | GSAP ScrollTrigger | Staging (palco fixo) |
+| Frame sequence | true | true | GSAP ScrollTrigger | Cinema (Straight Ahead) |
+| Horizontal scroll | true | true | GSAP ScrollTrigger | Staging (direcional) |
+| Text scramble on scroll | true | true | GSAP + custom | Anticipation |
+| Progress bar | true | false | CSS/JS | Zeigarnik, goal gradient |
+| Counter scrub | true | false | GSAP | Anchoring (numeros) |
+| Clip-path morph | true | true | GSAP | Staging (reveal) |
+| Opacity scrub | true | false | GSAP/CSS | Progressive disclosure |
+| Scale scrub | true | false | GSAP | Exaggeration |
+
+**Performance:** `scrub: true` usa `requestAnimationFrame` internamente. `pin: true` usa `position: fixed` — testar em mobile.
+
+### 4. Page Transitions (400-800ms)
+
+Transicoes entre paginas ou views. Devem comunicar continuidade, nao interrupacao.
+
+| Tecnica | Duracao | Easing | Lib | Principio |
+|---------|---------|--------|-----|-----------|
+| Crossfade | 400ms | power2.inOut | GSAP/Barba | Timing (simples) |
+| Slide + fade | 500ms | power2.inOut | GSAP/Barba | Arcs |
+| Clip-path wipe | 600ms | power3.inOut | GSAP | Staging (dramatic) |
+| Scale out/in | 500ms | power2.inOut | GSAP | Exaggeration |
+| Shared element morph | 600ms | power3.out | GSAP FLIP | Continuity |
+| View Transitions API | 300ms | ease-in-out | Native | Timing (native) |
+| Cover reveal (overlay) | 800ms | power3.inOut | GSAP | Staging |
+| Curtain (split) | 600ms | power2.inOut | GSAP | Appeal |
+
+**Performance:** Barba.js para MPA, View Transitions API para suporte nativo, GSAP para SPA custom.
+
+### 5. Ambient/Background (3000ms+)
+
+Motion continuo que cria atmosfera sem demandar atencao. Deve ser percebido subconscientemente.
+
+| Tecnica | Duracao | Loop | Lib | Principio |
+|---------|---------|------|-----|-----------|
+| Gradient shift | 8-15s | infinite | CSS | Appeal (atmosphere) |
+| Noise texture | continuous | infinite | GLSL/Canvas | Appeal (texture) |
+| Particle drift | continuous | infinite | Three.js/Canvas | Appeal (life) |
+| Floating elements | 5-10s | infinite | CSS/GSAP | Secondary Action |
+| Glow pulse | 2-4s | infinite | CSS | Secondary Action |
+| Cursor trail | continuous | n/a | JS | Appeal (interactivity) |
+| Live clock | 1s interval | infinite | JS | Secondary Action |
+| Subtle parallax | continuous | n/a | JS/CSS | Solid Drawing (depth) |
+
+**Performance:** Ambient animations DEVEM rodar em GPU. Testar FPS em mobile. Desativar em `prefers-reduced-motion`.
+
+---
+
+## Easing Reference Completo
+
+### REGRA: Nunca usar `linear` para motion de UI
+
+Linear e aceitavel APENAS para:
+- Marquee text (scroll continuo)
+- Loading spinner rotation
+- Progress bar fill
+- Ambient gradient shift
+
+### Easing por Intencao
+
+| Intencao | Easing | CSS cubic-bezier | GSAP |
+|----------|--------|-----------------|------|
+| Entrada natural | power2.out | (0.22, 1, 0.36, 1) | "power2.out" |
+| Entrada dramatica | power3.out | (0.16, 1, 0.3, 1) | "power3.out" |
+| Entrada explosiva | expo.out | (0.19, 1, 0.22, 1) | "expo.out" |
+| Saida suave | power2.in | (0.55, 0, 1, 0.45) | "power2.in" |
+| Saida dramatica | power3.in | (0.7, 0, 0.84, 0) | "power3.in" |
+| Transicao equilibrada | power2.inOut | (0.76, 0, 0.24, 1) | "power2.inOut" |
+| Transicao dramatica | power3.inOut | (0.85, 0, 0.15, 1) | "power3.inOut" |
+| Bounce/overshoot | back.out | (0.34, 1.56, 0.64, 1) | "back.out(1.7)" |
+| Elastic | elastic.out | N/A (spring-based) | "elastic.out(1, 0.3)" |
+| Suave/ambient | sine.inOut | (0.37, 0, 0.63, 1) | "sine.inOut" |
+
+### Duration Rules
+
+| Categoria | Range | Default |
+|-----------|-------|---------|
+| Micro (hover, click) | 100-300ms | 200ms |
+| Entrance (reveal) | 300-800ms | 500ms |
+| Exit (dismiss) | 200-400ms | 300ms |
+| Page transition | 400-800ms | 500ms |
+| Scroll scrub | viewport-based | N/A |
+| Ambient | 3000-15000ms | 8000ms |
+| Stagger delay | 30-120ms | 80ms |
+
+---
+
+## Performance Rules
+
+### GPU-Only Properties
+
+| USAR (GPU composited) | NUNCA USAR (layout thrashing) |
+|----------------------|------------------------------|
+| `transform: translate()` | `top`, `left`, `right`, `bottom` |
+| `transform: scale()` | `width`, `height` |
+| `transform: rotate()` | `margin`, `padding` |
+| `opacity` | `font-size` |
+| `filter` (com cuidado) | `border-width` |
+| `clip-path` (GPU em browsers modernos) | `box-shadow` (layout em alguns browsers) |
+
+### will-change Strategy
+
+```css
+/* Adicionar ANTES da animacao */
+.element-about-to-animate {
+  will-change: transform, opacity;
+}
+
+/* Remover APOS a animacao */
+.element-finished-animating {
+  will-change: auto;
+}
+
+/* NUNCA aplicar globalmente */
+* { will-change: transform; } /* PROIBIDO */
+```
+
+### Mobile Performance Budget
+
+| Metrica | Budget |
+|---------|--------|
+| Elementos animados simultaneamente | Max 30 |
+| Frame rate minimo | 30fps |
+| DOM nodes animados | Max 50 no viewport |
+| Texture size (Three.js) | Max 1024x1024 mobile |
+| Total JS para animacao | Max 100KB gzipped |
+
+### Intersection Observer Pattern
+
+```javascript
+// CORRETO: Intersection Observer para trigger
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      animateElement(entry.target);
+      observer.unobserve(entry.target); // Uma vez
+    }
+  });
+}, { threshold: 0.2 });
+
+// ERRADO: Scroll event listener
+window.addEventListener('scroll', () => { /* NUNCA */ });
+```
+
+---
+
+## prefers-reduced-motion Strategy
+
+### Abordagem Progressiva
+
+```css
+/* Nivel 1: Remover transitions e animations */
+@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;
+  }
+}
+```
+
+```javascript
+// Nivel 2: Desabilitar GSAP ScrollTrigger
+const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+if (prefersReduced) {
+  // Mostrar todo conteudo sem animacao
+  gsap.globalTimeline.clear();
+  ScrollTrigger.getAll().forEach(st => st.kill());
+
+  // Conteudo visivel imediatamente
+  document.querySelectorAll('[data-animate]').forEach(el => {
+    el.style.opacity = '1';
+    el.style.transform = 'none';
+  });
+}
+```
+
+### Substituicoes
+
+| Com Motion | Sem Motion |
+|-----------|-----------|
+| Slide + fade entrance | Instant appear (opacity 1) |
+| Parallax scroll | Static positioning |
+| Frame sequence | First frame static |
+| Text scramble | Text static visible |
+| Marquee scroll | Static grid of items |
+| Custom cursor | System cursor |
+| Hover scale | Hover color change |
+| Page transition | Instant page swap |
+| Loading spinner | "Loading..." text |
+| Background particles | Static background |