Repolode
Submit
jeremy-prt

jeremy-prt/bloub

SVG and Vue recreation of the x.ai bot avatar: one black shape morphing through 14 states, with independently animated white eyes.

View on GitHubWebsite
Stars
1,834
Forks
221
Open issues
7
Last commit
2 months ago

What is it?

bloub reproduces the x.ai bot avatar as a set of SVG shapes: a single filled black body that morphs between 14 states, plus two white eye shapes that move independently. It is built with Vue 3, Vite, TypeScript and Tailwind 4, and uses no animation library.

The project includes a small editor for arranging states into timelines with per-state hold times, a customisation panel for body shape, colour and rest expression, and export to SVG, PNG, animated GIF, and MP4 for timelines. The still formats need no extra library, and the video encoder loads only when first requested.

The animation engine in src/bot/ has no framework or clock dependency: sampling at a given time always yields the same frame, which makes frozen renders and tests straightforward. The numeric constants are measurements taken from a reference video, and the project includes documentation on how they were extracted.

Key features

  • 01Morphs one SVG body shape through 14 states without an animation library.
  • 02Animates two white eye shapes independently over the body.
  • 03Offers 8 body shapes, 12 colours and 16 rest expressions.
  • 04Includes a timeline editor for sequencing states with custom hold times.
  • 05Exports to SVG, PNG, animated GIF, and MP4 for timelines.
  • 06Renders deterministic frames at any time, usable for tests and thumbnails.

Use cases

  • Adding an animated bot avatar to a Vue app without pulling in an animation library.
  • Studying how measured shape morphing can be implemented in plain SVG.
  • Generating animated GIF or MP4 avatar clips for presentations or social posts.
  • Building a frozen state gallery for design review of avatar states.

Quick start

  1. 1

    Install dependencies with pnpm

    pnpm install
  2. 2

    Start the dev server, then open localhost:5190

    pnpm dev

Things to know

  • Its use of the x.ai bot avatar design is an imitation of a third-party brand, so it is not affiliated with x.ai.
  • The code is MIT licensed but the imitated design is not covered by that license.

Topics

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

FAQ

What is bloub?
SVG and Vue recreation of the x.ai bot avatar: one black shape morphing through 14 states, with independently animated white eyes. bloub reproduces the x.ai bot avatar as a set of SVG shapes: a single filled black body that morphs between 14 states, plus two white eye shapes that move independently. It is built with Vue 3, Vite, TypeScript and Tailwind 4, and uses no animation library.
Is bloub free to use? What license does it have?
bloub is open source under the MIT license. Check the license terms before using it in commercial products.
Is bloub still maintained?
Updated within 6 months. The last commit to bloub was on Aug 17, 2026.
What can I use bloub for?
Adding an animated bot avatar to a Vue app without pulling in an animation library. Studying how measured shape morphing can be implemented in plain SVG. Generating animated GIF or MP4 avatar clips for presentations or social posts. Building a frozen state gallery for design review of avatar states.
How do I install bloub?
Install dependencies with pnpm: pnpm install Start the dev server, then open localhost:5190: pnpm dev
Where can I get bloub?
The source code and installation instructions are on GitHub: https://github.com/jeremy-prt/bloub

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects