Repository navigation
feat: shaded mascot with a burning flame; ready and working icons move - #34
Merged
Merged
Conversation
…s move Brings over the mascot and state badge reworked in the Claude Design system. The avatar is now shaded artwork (a flat body with soft layers clipped to the outline) re-tinted to the bot's color, so every bot keeps the same light and shadow. With a mood its flame really burns: the outline morphs per mood, embers float off while working, eyes blink from top and bottom, heavy lids when tired, closed arcs when asleep. The state badge gets two moving icons: rings spread from the "Ready" dot, and a bright stretch runs along the "Working" line (whole under reduced motion). Spec 15.3 follows.
This was referenced Sep 29, 2026
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Brings into the app the mascot and state badge reworked in the Botloft design system on Claude Design.
Mascot (
BotAvatar)mascotArt.ts): a flat body with 13 soft light and shadow layers clipped to the outline, glossy eyes with glints. Everything is re-tinted to the bot's color by hue, saturation and lightness (retint.ts), so every bot keeps the same light and shadow. Pale colors keep the thinavatar-edge.mascot-flame.css, CSSd: path()), and the clipped shading follows it. Idle sways gently; working burns hard and throws embers off the top; waiting leans and hops; tired burns low with heavy lids that droop now and then; sleeping is a small ember with its eyes shut in two arcs. Eyes blink by closing from top and bottom, each bot on its own rhythm.color,size,framed,mood). Botloft's own mascot stays white on the black square, like the app icon.motion.cssintomascot.css(the oldblink,flickerandhopare gone or moved there).State badge
StateIcons.tsx;StateView.iconaccepts them or any lucide icon.Spec 15.3 (motion and identity) describes the new behavior. No new interface text.
Tests
pnpm check(137, after merging the currentmain).pnpm dev), dark and light: all eight colors, every mood and every state, next to the design system card; the flame's outline changes over time and every animation runs.Still to try by hand
pnpm tauri dev): the flame morph relies on CSSd: path(), which Chromium supports, so WebView2 should too.