sinapse-ai 9.3.0 → 9.5.0

package/squads/squad-artdir/knowledge-base/case-nyo-ia-reference.md

@@ -0,0 +1,289 @@
+# Case Study: nyo.ia.br — Canonical Art Direction Reference
+
+> Analise completa do site nyo.ia.br como referencia canonica de art direction para conversao.
+> Cada decisao estetica e desconstruida pelo principio psicologico que a sustenta.
+
+---
+
+## Overview
+
+**URL:** https://nyo.ia.br
+**Categoria:** AI Agents SaaS (B2B)
+**Audiencia:** Founders, CTOs, VPs de Vendas (Brasil)
+**Posicionamento:** "Seus agentes de IA nunca dormem" — automacao agressiva com resultado concreto
+
+---
+
+## 1. Visual Language Analysis
+
+### Dark Mode Decision
+
+| Decisao | Justificativa Psicologica |
+|---------|--------------------------|
+| Background: neutral-950 (#0a0a0a aprox.) | Sofisticacao tech, reducao de fadiga, imersao |
+| Nao e true black (#000) | Evita "void" feeling, mantém profundidade |
+| Text: neutral-100 (off-white) | Contraste alto sem glare de pure white |
+| Accent: red-orange (#E8402D) | Von Restorff — unico elemento quente em campo frio |
+
+**Principios em acao:** Von Restorff (accent destoa), Authority (dark = sofisticacao), Contrast (legibilidade)
+
+### Accent Color Strategy
+
+```
+Toda a pagina: neutral dark + neutral light
+UNICO elemento com cor quente: CTAs e highlights em red-orange
+
+→ Von Restorff effect maximizado
+→ Quando TUDO e frio, o QUENTE converte
+→ Accent usado em: botoes CTA, badges, hover states, progress indicators
+```
+
+**Principio:** Max 1 accent rule — restricao forca atencao para os pontos de conversao
+
+### Density Level
+
+- **Alta densidade de informacao** — cada viewport tem conteudo substancial
+- Nao ha secoes "vazias" — ate o espaco e intencional
+- Dados, metricas, agentes — informacao densa para audiencia tecnica
+- **Principio:** Audiencia tech/founder espera densidade — low-density pareceria "empty"
+
+### Visual Identity Signals
+
+| Sinal | O que Comunica | Como Comunica |
+|-------|---------------|---------------|
+| "//" prefix em textos | "Somos builders, somos codigo" | Estetica terminal/code |
+| Monospace accent | Precisao tecnica | JetBrains Mono / Space Mono |
+| Dark mode | Sofisticacao, tech-native | Ambiente dev-like |
+| Metrics visuals | Data-driven, transparencia | Numeros grandes, counters |
+| Live clock | Presenca real-time | Relogio local no header |
+
+---
+
+## 2. Motion Philosophy
+
+### Core Motion Decisions
+
+| Tecnica | Implementacao | Principio |
+|---------|--------------|-----------|
+| Lenis smooth scroll | Smooth scrolling nativo, nao browser default | Controle da experiencia, premium feel |
+| GSAP ScrollTrigger | Scroll-driven animations para reveals | Progressive disclosure via scroll |
+| Frame sequence | 60+ frames como image sequence pinned | Cinema-level hero, impressao de premium |
+| Text scramble | Caracteres randomicos → texto final | Tech aesthetic, anticipation principle |
+| Marquee scroll-direction | Inverte direcao baseado no scroll | Engagement, surpresa, interatividade |
+| Clip-path reveal | Sections revelam via clip-path morph | Staging, storytelling, drama |
+
+### Frame Sequence Hero
+
+```
+60+ imagens renderizadas
+Pinned section com ScrollTrigger
+Scroll position → frame index mapping
+Efeito: usuario "controla" a animacao com scroll
+
+Principios:
+- Anticipation: scroll como trigger cria expectativa
+- Control: usuario sente agency sobre a experiencia
+- Zeigarnik: scroll incompleto = narrativa incompleta → scroll mais
+```
+
+### Text Scramble Effect
+
+```
+"■▓▒░█▓▒" → "AGENTES" → "AGENTES DE IA"
+
+Sequence:
+1. Random chars aparecem (noise)
+2. Chars gradualmente resolvem para texto correto
+3. Left-to-right ou simultaneous reveal
+
+Principios:
+- Anticipation (Disney): buildup antes do reveal
+- Curiosity gap: o que esse texto vai dizer?
+- Tech aesthetic: "decodificando" — reforça posicionamento AI
+```
+
+### Marquee com Scroll Direction
+
+```
+Scroll para baixo → marquee move para direita
+Scroll para cima → marquee inverte para esquerda
+
+Principios:
+- Secondary action (Disney): movimento secundário ao scroll
+- Engagement: conteudo responde ao usuario
+- Continuity (Gestalt): direcao consistente com scroll
+```
+
+### Body Lock em Modals
+
+```
+Modal abre → body scroll trava
+Focus trap dentro do modal
+Escape ou click outside fecha
+
+Principios:
+- Staging (Disney): modal e o unico palco ativo
+- Focus: elimina distracao do background
+- Commitment: usuario engajou, agora complete a acao
+```
+
+### Progress Bars e Indicators
+
+```
+Barra fixa no topo que avanca com scroll
+Indica progresso na pagina
+
+Principios:
+- Zeigarnik: barra incompleta = tarefa incompleta → scroll mais
+- Goal gradient: "80% — quase la" → esforco aumenta
+- Cognitive fluency: usuario sabe onde esta
+```
+
+---
+
+## 3. IA as Psychological Tool
+
+### Information Architecture Breakdown
+
+| Secao | Papel Cognitivo | Principio |
+|-------|----------------|-----------|
+| 1. Hero com frame sequence | HOOK — impacto visual + curiosity gap | Von Restorff, Zeigarnik |
+| 2. "AI Agents never sleep" | PROMISE — beneficio central | Framing (always-on) |
+| 3. Agent showcase carousel | DEMONSTRATE — o que cada agente faz | Progressive disclosure |
+| 4. Agent modals | DEEP DIVE — expandir detalhes por agente | Zeigarnik (abrir = completar) |
+| 5. Metrics section | PROOF — numeros concretos | Anchoring, authority |
+| 6. Comparison table | COMPARE — nos vs alternativas | Framing, anchoring |
+| 7. Testimonials | PROOF (social) — clientes reais | Social proof |
+| 8. FAQ | OVERCOME — resolver objecoes | Risk reversal |
+| 9. CTA final | CONVERT — multiplas opcoes | Hick's (limitado), commitment |
+| 10. Footer com trust | REINFORCE — ultima impressao | Peak-end rule |
+
+### Progressive Disclosure via Agent Modals
+
+```
+Carousel → mostra 10 agentes como cards
+Cada card: nome + icone + one-liner
+Click → modal expande com:
+  - Descricao detalhada
+  - Features especificas
+  - Metricas de resultado
+  - CTA contextual
+
+Principios:
+- Progressive disclosure: L1 (card) → L2 (modal)
+- Zeigarnik: card mostra parcial → click para completar
+- Hick's Law: 10 opcoes MAS so uma por vez no modal
+```
+
+### Comparison Table Strategy
+
+```
+| Feature     | Eles   | NYO      |
+|-------------|--------|----------|
+| Agentes AI  | 3      | 10       |
+| Uptime      | 99.5%  | 99.97%   |
+| Resposta    | 2h     | 2min     |
+| Preco       | $$$    | $$       |
+
+Coluna NYO: highlighted com accent color
+
+Principios:
+- Anchoring: numeros concorrentes sao a ancora
+- Framing: features escolhidas favorecem NYO
+- Von Restorff: coluna highlight = focal point
+```
+
+### FAQ como Objecao Handling
+
+```
+Cada pergunta = uma objecao comum
+Respostas curtas, diretas, com link para proof
+
+"E se eu quiser cancelar?" → "Cancele quando quiser, sem multa"
+"Funciona com meu CRM?" → "Integramos com +50 CRMs. Lista completa"
+
+Principios:
+- Risk reversal: remove medo
+- Cognitive fluency: resposta simples = mais crivel
+- Commitment: ler FAQ = micro-compromisso com a decisao
+```
+
+### Multiple CTAs Strategy
+
+```
+CTA #1 (hero): "Agendar demonstracao" — alto compromisso
+CTA #2 (mid-page): "Comece gratis" — baixo compromisso
+CTA #3 (modal): "Fale com vendas" — personalizado
+CTA #4 (sticky bar): "Agende uma demo" — persistente
+CTA #5 (footer): "Comece agora" — ultima chance
+
+Principios:
+- Diferentes niveis de intencao: explore → learn → try → buy
+- Hick's Law respeitada: max 2 opcoes por viewport
+- Availability: CTA sempre visivel, sempre acessivel
+```
+
+### Real Social Handles
+
+```
+Testimonials incluem @username do Twitter/LinkedIn
+Verificavel — usuario pode checar se e real
+
+Principio:
+- Verifiability: proof que pode ser validado = mais confiavel
+- Authority: handles reais > "Joao, CEO"
+- Social proof: publico, nao anonimo
+```
+
+---
+
+## 4. CRO Patterns Applied
+
+### Pattern Map
+
+| Padrao | Localizacao | Principio | Impacto Estimado |
+|--------|-----------|-----------|-----------------|
+| Frame sequence hero | Topo | Engagement, premium perception | +20-30% time on page |
+| Live clock | Header | Real-time presence, tech signal | +5% credibility |
+| Agent carousel | Mid-page | Progressive disclosure | +15% engagement |
+| Comparison table | Pre-CTA | Anchoring, framing | +15-25% conversion |
+| Sticky CTA | After hero | Availability | +15-25% CTA visibility |
+| Testimonials + handles | Post-compare | Social proof (verifiable) | +10-20% trust |
+| FAQ accordion | Pre-footer | Objection handling | +10% reduction in bounce |
+| Multiple CTAs | Throughout | Intent capture | +10-15% total conversion |
+| Progress bar | Fixed top | Zeigarnik, goal gradient | +5-10% scroll depth |
+| Text scramble | Hero + sections | Tech aesthetic, curiosity | +10% time on page |
+
+---
+
+## 5. Lessons for Art Direction
+
+### O que Copiar (princípios)
+
+1. **Single accent color** — restricao maximiza Von Restorff
+2. **Dark mode + density** — match com audiencia tech
+3. **Scroll as narrative** — usuario controla o ritmo
+4. **Progressive disclosure via modals** — L1 overview → L2 detail on demand
+5. **Real social proof** — handles verificaveis, numeros concretos
+6. **Multiple intent CTAs** — capture diferentes niveis de compromisso
+7. **FAQ as objection handling** — cada pergunta e uma venda
+
+### O que NAO Copiar (execucao especifica)
+
+1. **Frame sequence exato** — necessita 60+ renders custom, high cost
+2. **Text scramble em tudo** — use com parcimonia, senao perde efeito
+3. **Custom cursor** — nao presente neste site, adicionar apenas se fizer sentido
+4. **Exata paleta de cor** — extract o principio (high contrast accent on dark), nao os hex codes
+
+### O que Entender (gatilhos)
+
+> "Nunca clone sem entender qual gatilho cada elemento ativa."
+
+| Elemento | Gatilho que Ativa | Se Remover, Perde |
+|---------|-------------------|-------------------|
+| Frame sequence | Agency do usuario + premium perception | Engagement hero, time on page |
+| Text scramble | Curiosity + tech positioning | Brand differentiation |
+| Live clock | Real-time trust | Subtle authority signal |
+| Marquee reversal | Engagement via interactivity | Secondary motion richness |
+| Progress bar | Zeigarnik + goal gradient | Scroll completion |
+| Agent modals | Progressive disclosure depth | Detail without overwhelm |