bloub README

The project's README from github.com/jeremy-prt/bloub. As one markdown file: README.md.

bloub

An SVG recreation of the x.ai bot avatar: one filled black shape that morphs between 14 states, two white shapes for the eyes that morph independently, on a plain background. No animation library.

The avatar going through idle, wink, orbit and burst

Running it

pnpm install
pnpm dev

Then open http://localhost:5190.

pnpm test     # vitest
pnpm build    # vue-tsc --noEmit && vite build

Vue 3, Vite, TypeScript, Tailwind 4. No ESLint and no Prettier: vue-tsc is the only gate, so run pnpm build before you call something done.

What's in it

The rail on the left switches between three views. Customise offers 8 body shapes, 12 colours and 16 rest expressions, kept between visits. Animations is a small editor: arrange states into a timeline, set how long each is held, save the result. Settings holds the language (French, English or Chinese) and the credits.

Anything on screen can be exported: the avatar as SVG, PNG or an animated GIF, and a whole timeline as GIF or MP4. The still formats need no library at all, and the video encoder is only fetched the first time you ask for one.

Two URLs are worth knowing:

The 14 states, frozen side by side

Why the numbers look arbitrary

They're measured, not chosen. The reference video was cut at 10 fps and each state measured off the frames: silhouettes by sub-pixel ray casting, eyes by capsule fitting, colours and stroke widths by direct sampling.

So the constants in the code are measurements, and rounding them to friendlier values breaks the resemblance, which is the only thing this project is trying to get right. A few are counter-intuitive enough to be worth knowing before you correct anything:

What you'd assume What the video shows
The eyes lean // They lean \\, around 26° off vertical
The body is a squircle It's a perfect circle, radial deviation under 0.7%
Transitions are springs Exponential ease-outs; the body never overshoots
The comet crosses the screen The dot stays put, the trail orbits it
The avatar floats at rest It doesn't. The life is gaze drift and blinking

docs/measurements.md has the rest, including how to regenerate the extracted profiles.

How it's put together

src/bot/ is framework-free and clock-free: engine.sample(t) is a pure function of time. Pausing, resuming, jumping to an arbitrary date and running tests all produce the same image, which is what makes the frozen state board and the DOM-less test suite possible.
docs/architecture.md The engine, radial-profile morphing, eyes as mask holes
docs/measurements.md What was measured, and regenerating profiles.ts
docs/intro.md The arrival sequence, and why it only plays one state
docs/interface.md Layout, the three-column scene, CSS traps
docs/export.md Exporting to SVG, PNG, GIF and MP4
docs/i18n.md The hand-rolled translation layer

Using the component

<BloubBot v-model:block="block" v-model:state="state" v-model:playing="playing" />
<BloubBot state="orbit" :size="120" :frozen-at="1.2" />

block is the playback cursor: a montage can play the same state twice, so the index is what identifies where you are; state follows it as an output. Pass frozenAt and the component renders one exact frame with no animation loop, which is how the thumbnails and the state board are drawn.

Props: size, shape, color, expression, paper, frozenAt, cycle, follow, gaze. Models: block, state, playing, elapsed. See BloubBot.vue for the details.

Changes

CHANGELOG.md, one entry per release — which is how you tell whether the copy you have carries a given fix.

License

MIT. See LICENSE.

Not affiliated with, endorsed by or connected to x.ai. It recreates the visual behaviour of their bot avatar as an exercise; "Grok" and "x.ai" belong to their owners. The MIT licence covers the code in this repository, not the design it imitates.

bloub (jeremy-prt/bloub)

vue3
Searching Database…

1.8K ·GitHub
Bloub
What is this?An SVG recreation of the x.ai bot avatar: one black shape that morphs through 14 states plus two independently animated white eye shapes, with every pose measured frame-by-frame off the reference video rather than hand-designed.
Is this a Vue component I embed, or a standalone app?Both: BloubBot.vue is a reusable Vue component (props like size, shape, color, expression, frozenAt) you can drop into another project, and the repo itself is a full app with Customise, Animations and Settings panels for designing and exporting the avatar.
How do I get it running?It's a Vue 3, Vite, TypeScript, Tailwind 4 project: use the pnpm scripts, dev for a dev server, build (which runs vue-tsc --noEmit then vite build) to produce a build, and preview to check it.
Do I need an animation library to use this?No, the core engine in src/bot/ is framework-free and clock-free (engine.sample(t) is a pure function of time). The only external dependency, mediabunny for video encoding, is fetched lazily only the first time you export a GIF or MP4.
Can I just round the animation numbers to cleaner values?No, the constants aren't arbitrary: they were measured by sub-pixel ray casting, capsule fitting and direct colour sampling off a 10fps reference video, so rounding them to friendlier-looking numbers breaks the resemblance to the original avatar.
What can I customize about the avatar?The Customise panel offers 8 body shapes, 12 colours and 16 rest expressions, and your choices are kept between visits.
What formats can I export?Still images as SVG or PNG, and animated output as GIF; a whole timeline can be exported as GIF or MP4. Still exports need no library, video export lazily loads an encoder.
What are the #planche and #etat URLs for?#planche freezes all 14 states side by side for a quick visual check, and #etat=orbit&stop opens one named state directly with playback paused — handy for development and debugging.
How does the Animations editor work?It's a small timeline editor where you arrange the 14 states in sequence, set how long each is held, and save the resulting animation.
What are similar projects?vuestic-admin, bible-strong-avatar-lab, vue-pure-admin, lottie, aora-bot, moveable, soybean-admin, vant
Which topics is it in?export, svg-animation, mp4, design-tool, gif, vue3, grok, svg, tailwindcss, vite, i18n, vue
Creator
jeremy-prt
Size
1.2 MB
Stars
1.8K
Updated
CommitAug 17Releasev0.1.1Aug 17
Age
2mo
Commits · 90 Days