Blob e Avatar Vivo Animações

O que é

Inspirado na arquitetura visual do bot da x.ai (Grok) e no projeto Bloub, o Blob e Avatar do SWCore renderiza um personagem vetorial orgânico inteiramente em SVG nativo. Sem dependências pesadas: o corpo morfa entre poses expressivas (idle, happy, curious, surprise, think, sleep), os olhos rastreiam o cursor do visitante com inércia física em tempo real e o avatar pisca espontaneamente.

Como funciona

O motor calcula o vetor do corpo via coordenadas cúbicas de Bézier com transição elástica. Em tempo real (60 FPS), calcula a posição relativa do cursor (Δx, Δy) em relação ao centro do avatar, projetando a pupila e o rosto na direção exata do olhar com amortecimento suave (LERP). Um temporizador biológico dispara piscadas naturais de 140ms.

Exemplos

<!-- 
  Arquitetura do Avatar Vivo:
  1. Corpo Bézier -> Curvas cúbicas (C) que morfam com física elástica
  2. Eye Tracking -> Cálculo de ângulo e distância (Δx, Δy) com LERP
  3. Expressões   -> 6 estados emocionais chave com boca e inclinação
  4. Vida Própria -> Piscar aleatório biológico a cada 3~6 segundos
-->

<!-- Avatar vivo que segue o mouse e morfa de estado emocional -->
<div 
  id="main-demo-avatar"
  data-sw="blob" 
  data-sw-state="idle"
  data-sw-track="mouse"
  data-sw-size="220"
  data-sw-color="#0f172a"
  data-sw-eye-color="#38bdf8"
  data-sw-pupil-color="#0f172a">
</div>

<script>
  // Altera o humor do avatar:
  SWMotion.setBlobState(document.getElementById('main-demo-avatar'), 'curious');
</script>

<!-- Redesenhando com presets ou passando seu próprio caminho SVG d="..." -->
<!-- 1. Usando um preset pronto (ghost, robot, cat, drop, star): -->
<div data-sw="blob" data-sw-preset="ghost" data-sw-color="#3b82f6" data-sw-size="180"></div>

<!-- 2. Passando um caminho SVG d="..." totalmente customizado: -->
<div 
  data-sw="blob" 
  data-sw-d="M 45,35 L 90,25 L 90,10 L 110,10 L 110,25 L 155,35 L 155,160 L 45,160 Z"
  data-sw-color="#6366f1"
  data-sw-size="180">
</div>

<!-- 3. Redesenhando dinamicamente via JavaScript: -->
<script>
  SWMotion.updateBlobDesign(avatarEl, {
    d: "M 100,20 C 150,20 175,55 175,110 C 175,155 100,170 25,110 Z",
    eyeY: 85,
    eyeDistance: 28,
    color: "#ec4899"
  });
</script>

<!-- Avatares reagindo contextualmente às ações da UI -->
<!-- 1. Avatar que fica curioso no hover -->
<div data-sw="blob" data-sw-state="idle" data-sw-hover-state="curious" data-sw-size="140"></div>

<!-- 2. Avatar de feedback que comemora ao clicar no botão -->
<button onclick="SWMotion.setBlobState(document.getElementById('feedback-blob'), 'happy')">
  Completar Tarefa
</button>

<!-- 
  Basta adicionar data-sw="blob" (ou data-sw="avatar"):
-->
<div 
  data-sw="blob"
  data-sw-state="idle"
  data-sw-preset="ghost"
  data-sw-track="mouse"
  data-sw-size="180"
  data-sw-color="#38bdf8"
  data-sw-eye-color="#ffffff"
  data-sw-pupil-color="#0f172a">
</div>

// Redesenhando o formato ou registrando nova silhueta:
const mascote = document.querySelector('#meu-avatar');

// Atualizando qualquer propriedade do vetor em tempo real:
SWMotion.updateBlobDesign(mascote, {
  d: "M 100,20 C 145,20 180,55 180,100 Z",
  color: "#a855f7",
  eyeY: 85,
  eyeDistance: 30
});

// Registrando um preset customizado no framework:
SWMotion.registerBlobShape("monstrinho", {
  idle: {
    d: "...",
    eyeY: 80,
    eyeDistance: 35,
    eyeRadius: 9
  }
});

Atributos

Variantes

Eventos

Nenhum.

API (JavaScript)

Requisitos

• Suporte a SVG 1.1 e requestAnimationFrame em 100% dos navegadores modernos.

Limitações — o que ele não faz

• O Blob utiliza renderização vetorial SVG nativa via GPU — não requer bibliotecas externas pesadas.
• Em dispositivos móveis sem mouse, o olhar centraliza e reage ao toque do visitante.