{"repo":"jeremy-prt/bloub","free":true,"listed":false,"github":"https://github.com/jeremy-prt/bloub","clone":"git clone https://github.com/jeremy-prt/bloub.git","description":"SVG recreation of the x.ai bot avatar. One shape morphing through 14 states, measured off the reference video frame by frame.","language":"TypeScript","stars":412,"topics":["animation","avatar","morphing","svg","svg-animation","typescript","vue"],"license":"MIT","category":"ui-components","readme_excerpt":"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. Running it Then open http://localhost:5190. 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: - #planche : the 14 states side by side, frozen. Quick visual check. - #etat=orbit&stop : opens one state directly, playback paused. 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 proj","default_branch":null,"files":null,"tree":[],"storefront":"/r/jeremy-prt","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/jeremy-prt/bloub/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}