$ man content-wiki/neobot-avatar-creation
Tools and MCPsintermediate
NeoBot Avatar Pipeline
From MidJourney prompt to animated APNG on the web
by Shawn Tenam
Character Design with MidJourney
Each NeoBot starts as a MidJourney prompt. The characters are chibi-style with distinct color palettes: Nio is green with a sword, Rem is pink with content tools, Recon is orange with scout gear. MidJourney's CREF (character reference) and OREF (object reference) parameters are used to maintain visual consistency across generations. CREF locks the character's face and proportions. OREF locks specific objects like weapons or accessories. This means you can generate new poses and expressions while keeping the character recognizable.
PATTERN
Background Removal and Cleanup
Raw MidJourney outputs have backgrounds that need removal for web overlay use. The pipeline uses remove.bg or Photoshop's AI removal to extract the character. The result is a transparent PNG. Edge cleanup matters - artifacts around hair or weapon edges are visible against dark site backgrounds. Each character gets a static PNG (fallback) and source frames for animation.
PATTERN
Animation: GIF to APNG
The idle animations are subtle breathing or floating loops. Frames are created by slightly transforming the base image - small vertical translations and scale changes on a 2-second loop. GIFs work but have a 256-color limit that destroys the character's color depth. APNG (Animated PNG) supports full 24-bit color with alpha transparency. The final assets are served as .apng files with a CSS animation fallback (drop-shadow glow breathing effect) that runs independently of the image animation.
PRO TIP
Web Delivery
Each avatar lives in the site's /public/avatars/ directory. The chat wrapper component (NioChat, RemChat, ReconChat) loads the APNG and positions it fixed to the bottom-right, offset left of the chat panel. The avatar slides in with a CSS transform transition when chat opens and slides out when it closes. File sizes are kept under 200KB per avatar to avoid blocking the chat interaction. Browser support for APNG is universal in modern browsers - no polyfill needed.
related entries