Repolode
Enviar
jeremy-prt

jeremy-prt/bloub

Recriação em SVG e Vue do avatar do bot da x.ai: uma forma preta que se transforma entre 14 estados, com olhos brancos animados de forma independente.

Ver no GitHubSite
Estrelas
1,834
Forks
221
Issues abertas
7
Último commit
há 2 meses

O que é?

bloub recria o avatar do bot da x.ai como um conjunto de formas SVG: um único corpo preto preenchido que se transforma entre 14 estados, além de duas formas brancas para os olhos, que se movem de forma independente. O projeto foi desenvolvido com Vue 3, Vite, TypeScript e Tailwind 4, sem usar biblioteca de animação.

O projeto inclui um editor simples para organizar estados em linhas do tempo com tempos de pausa por estado, um painel de personalização da forma e da cor do corpo e da expressão em repouso, além de exportação para SVG, PNG, GIF animado e MP4 para linhas do tempo. Os formatos estáticos não precisam de bibliotecas extras, e o codificador de vídeo só é carregado quando solicitado pela primeira vez.

O mecanismo de animação em src/bot/ não depende de framework nem de relógio: amostrar um instante específico sempre produz o mesmo quadro, o que facilita gerar imagens estáticas e executar testes. As constantes numéricas são medidas extraídas de um vídeo de referência, e o projeto inclui documentação sobre como elas foram obtidas.

Recursos principais

  • 01Transforma uma única forma SVG do corpo entre 14 estados, sem biblioteca de animação.
  • 02Anima duas formas brancas dos olhos de forma independente em relação ao corpo.
  • 03Oferece 8 formas de corpo, 12 cores e 16 expressões em repouso.
  • 04Inclui um editor de linha do tempo para sequenciar estados com tempos de pausa personalizados.
  • 05Exporta para SVG, PNG, GIF animado e MP4 para linhas do tempo.
  • 06Renderiza quadros determinísticos em qualquer instante, que podem ser usados em testes e miniaturas.

Casos de uso

  • Adicionar um avatar animado de bot a um app Vue sem incluir uma biblioteca de animação.
  • Estudar como implementar transformações de formas com medidas precisas usando SVG puro.
  • Gerar clipes de avatar em GIF animado ou MP4 para apresentações ou publicações em redes sociais.
  • Criar uma galeria de estados estáticos para revisar o design do avatar.

Início rápido

  1. 1

    Instale as dependências com pnpm

    pnpm install
  2. 2

    Inicie o servidor de desenvolvimento e depois abra localhost:5190

    pnpm dev

Antes de usar

  • O uso do design do avatar do bot da x.ai é uma imitação de uma marca de terceiros, portanto, não há afiliação com a x.ai.
  • O código é licenciado sob MIT, mas o design imitado não está coberto por essa licença.

Tópicos

#svg#svg-animation#morphing#avatar#vue#typescript#animation

Perguntas frequentes

O que é bloub?
Recriação em SVG e Vue do avatar do bot da x.ai: uma forma preta que se transforma entre 14 estados, com olhos brancos animados de forma independente. bloub recria o avatar do bot da x.ai como um conjunto de formas SVG: um único corpo preto preenchido que se transforma entre 14 estados, além de duas formas brancas para os olhos, que se movem de forma independente. O projeto foi desenvolvido com Vue 3, Vite, TypeScript e Tailwind 4, sem usar biblioteca de animação.
bloub é gratuito? Qual é a licença?
bloub é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
bloub ainda é mantido?
Atualizado nos últimos 6 meses. O último commit de bloub foi em 17 de ago. de 2026.
Para que posso usar bloub?
Adicionar um avatar animado de bot a um app Vue sem incluir uma biblioteca de animação. Estudar como implementar transformações de formas com medidas precisas usando SVG puro. Gerar clipes de avatar em GIF animado ou MP4 para apresentações ou publicações em redes sociais. Criar uma galeria de estados estáticos para revisar o design do avatar.
Como instalar bloub?
Instale as dependências com pnpm: pnpm install Inicie o servidor de desenvolvimento e depois abra localhost:5190: pnpm dev
Onde consigo bloub?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/jeremy-prt/bloub

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados