Repolode
Enviar
jeremy-prt

jeremy-prt/bloub

Recreación en SVG y Vue del avatar del bot de x.ai: una forma negra que cambia entre 14 estados, con ojos blancos animados de forma independiente.

Ver en GitHubSitio web
Estrellas
1,834
Forks
221
Issues abiertos
7
Último commit
hace 2 meses

¿Qué es?

bloub recrea el avatar del bot de x.ai como un conjunto de formas SVG: un único cuerpo negro relleno que cambia entre 14 estados y dos formas blancas para los ojos que se mueven de forma independiente. Está desarrollado con Vue 3, Vite, TypeScript y Tailwind 4, y no usa ninguna biblioteca de animación.

El proyecto incluye un pequeño editor para organizar estados en líneas de tiempo con tiempos de espera personalizados para cada estado, un panel de personalización para la forma del cuerpo, el color y la expresión en reposo, y exportación a SVG, PNG, GIF animado y MP4 para las líneas de tiempo. Los formatos estáticos no necesitan bibliotecas adicionales y el codificador de video solo se carga cuando se solicita por primera vez.

El motor de animación de src/bot/ no depende de ningún framework ni reloj: al muestrear un instante determinado siempre se obtiene el mismo fotograma, lo que facilita las imágenes estáticas y las pruebas. Las constantes numéricas son mediciones tomadas de un video de referencia, y el proyecto incluye documentación sobre cómo se obtuvieron.

Funciones clave

  • 01Hace que una única forma SVG del cuerpo cambie entre 14 estados sin usar una biblioteca de animación.
  • 02Anima de forma independiente dos formas blancas para los ojos sobre el cuerpo.
  • 03Ofrece 8 formas de cuerpo, 12 colores y 16 expresiones en reposo.
  • 04Incluye un editor de líneas de tiempo para secuenciar estados con tiempos de espera personalizados.
  • 05Exporta a SVG, PNG, GIF animado y MP4 para las líneas de tiempo.
  • 06Renderiza fotogramas deterministas en cualquier instante, útiles para pruebas y miniaturas.

Casos de uso

  • Añadir un avatar animado de bot a una aplicación Vue sin incorporar una biblioteca de animación.
  • Estudiar cómo implementar en SVG puro la transformación de formas basada en mediciones.
  • Generar clips de avatar en GIF animado o MP4 para presentaciones o publicaciones en redes sociales.
  • Crear una galería de estados estáticos para revisar el diseño del avatar.

Inicio rápido

  1. 1

    Instala las dependencias con pnpm

    pnpm install
  2. 2

    Inicia el servidor de desarrollo y luego abre localhost:5190

    pnpm dev

Antes de usarlo

  • El uso del diseño del avatar del bot de x.ai imita una marca de terceros, por lo que no está afiliado a x.ai.
  • El código tiene licencia MIT, pero el diseño imitado no está cubierto por esa licencia.

Temas

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

Preguntas frecuentes

¿Qué es bloub?
Recreación en SVG y Vue del avatar del bot de x.ai: una forma negra que cambia entre 14 estados, con ojos blancos animados de forma independiente. bloub recrea el avatar del bot de x.ai como un conjunto de formas SVG: un único cuerpo negro relleno que cambia entre 14 estados y dos formas blancas para los ojos que se mueven de forma independiente. Está desarrollado con Vue 3, Vite, TypeScript y Tailwind 4, y no usa ninguna biblioteca de animación.
¿bloub es gratuito? ¿Qué licencia tiene?
bloub es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿bloub sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de bloub fue el 17 ago 2026.
¿Para qué puedo usar bloub?
Añadir un avatar animado de bot a una aplicación Vue sin incorporar una biblioteca de animación. Estudiar cómo implementar en SVG puro la transformación de formas basada en mediciones. Generar clips de avatar en GIF animado o MP4 para presentaciones o publicaciones en redes sociales. Crear una galería de estados estáticos para revisar el diseño del avatar.
¿Cómo se instala bloub?
Instala las dependencias con pnpm: pnpm install Inicia el servidor de desarrollo y luego abre localhost:5190: pnpm dev
¿Dónde consigo bloub?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/jeremy-prt/bloub

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados