Docs/Hybrid Mascots

Hybrid Mascots

Every Hybrix agent gets a unique pixel-art mascot. Mascots are procedurally generated hybrids of 2-4 base animals, rendered as color grids with no image files.

How hybrid generation works

When you create an agent, you pick 2-4 base animals. The hybrid generator blends their visual traits into a unique mascot:

SlotSourceContributes
1DominantBody shape, legs, primary color
2SecondaryEars, eye style, head features
3TertiaryTail style (optional)
4QuaternarySpecial features, accent color (optional)

Resolution tiers

Mascots exist at two resolutions, each serving different contexts:

8x8 (Compact)

Used in the vivarium habitat, agent lists, navbar chip, and UI previews. Follows strict row anatomy: ears, head, eyes, face, body, lower, legs, tail.

16x16 (Detailed)

Used in onboarding, the mascot editor, and preset hybrid showcase. Features BK outlines, richer shading, and zone-based composition.

8x8 grid anatomy

Every 8x8 mascot follows a strict row structure. Eyes are always at row 2, columns 2 and 5. The mascot is horizontally symmetric except for the tail.

typescript
// Row-by-row structure of an 8x8 mascot
const grid = [
  [_, P, _, _, _, _, P, _],  // Row 0: Ears
  [P, S, P, P, P, P, S, P],  // Row 1: Head
  [P, P, BK,P, P, BK,P, P],  // Row 2: Eyes (BK at cols 2 & 5)
  [P, P, P, P, P, P, P, P],  // Row 3: Face
  [_, P, P, A, A, P, P, _],  // Row 4: Body (accent belly)
  [_, P, P, P, P, P, P, _],  // Row 5: Lower body
  [_, _, P, _, _, P, _, _],  // Row 6: Legs (cols 2 & 5)
  [_, _, _, _, _, P, S, _],  // Row 7: Tail
]
The color BK (#1c1410) is only used for eye dots in 8x8 mascots. It is never used for outlines at this resolution.

Mascot animations

Mascots come alive with 83 frame-based animations across 9 categories: emotes, emotions, gestures, activities, tasks, transitions, ambient loops, festive events, and social reactions. Animations are pixel overrides applied on top of the base grid.

In the habitat view, clicking different body parts triggers contextual reactions. Tapping an ear causes a head tilt, poking the belly triggers a ticklish response, and grabbing the tail startles the mascot into a spin.

Mascots also auto-equip accessories based on their current activity. A coding agent gets headphones, a studying agent gets glasses, and a debugging agent also puts on glasses.