--- title: "From Canonical Profile to Essence: Designing a Motion-Ready Identity System for AI Agents" type: lab description: "A public implementation log for turning durable agent identities into small shape-first Essence forms with autonomous motion, interaction, and reduced-motion behavior." summary: "Full portraits worked as identity references but not as compact interface objects. This lab records how fourteen agents were distilled into silhouette, color, motif, gaze, blink, anticipation, settle, 2.5D depth, and role-specific motion — including the versions that failed first." ai_summary: "Lab note on building motion-ready Essence identities for fourteen AI agents. Covers shape-first design, autonomous gaze/blink, 2.5D depth, cursor-local interaction, mobile/reduced-motion behavior, and refinement failures such as Mina cropping, Hedwig pseudo ears, Iris prism occlusion, Vesta silhouette drift, and detail/index motion drift." status: public visibility: public language: en topics: [agent-ux, visual-identity, motion-design] tags: [agent-society, essence, interaction-design, iteration] audience: [designers, ai-practitioners, builders] publishedAt: 2026-09-03 updatedAt: 2026-09-03 featured: true related: [projects/personal-agent-society, notes/designing-agents-with-boundaries-not-just-personas] sourceStatus: original sourceSensitivity: public monetization: free tool: [Astro, CSS, SVG, vanilla JavaScript] hypothesis: "A durable agent identity can survive in a small UI surface if silhouette, color ownership, signature motif, and motion grammar are treated as one identity system rather than as decoration around a portrait." setup: "Fourteen public-safe Agent Society identities were distilled from Canonical Profiles into small Essence forms, then implemented with autonomous idle behavior, local desktop cursor awareness, mobile autonomous motion, and reduced-motion fallbacks." result: mixed nextIteration: "Test the same Essence identities on lower-density surfaces such as Home and operating navigation without letting motion compete with the site's knowledge content." artifactUrl: "/agents" canonicalUrl: "https://wbeen-personal-kb.vercel.app/labs/from-canonical-profile-to-essence" --- ## Hypothesis A Canonical portrait is useful for defining a character, but it is a poor default for a 40–100px interface surface. At that size, cropping destroys the composition, facial detail collapses, and a growing roster of portraits starts to read like a mascot gallery. My hypothesis was that an agent could keep its identity at small scale if I stopped treating the portrait as the UI asset and instead distilled four things: - **silhouette** — the outer shape that survives first glance - **color ownership** — a small palette that remains recognizable across surfaces - **signature motif** — one role-linked visual cue - **motion grammar** — how the form looks, attends, acts, and settles over time The result became the Essence layer shown in the public [Agent Society](/agents). ## Setup The experiment currently covers fourteen agents across two public environments: ten PERSONAL and four WORK. The same identity lineage applies to each one: **Canonical Profile → Essence Static → Essence Motion → Runtime materialization** The coded Essence layer had to support: - autonomous idle behavior instead of frozen icons - gaze and blink where eyes are part of the form - anticipation → action → settle rather than constant noise - 2.5D depth and perspective cues without turning into a 3D demo - cursor awareness only inside the desktop visual area - autonomous motion on mobile, where hover does not exist - `prefers-reduced-motion` support - role-specific action vignettes that stay secondary to the identity itself The constraint mattered as much as the feature list: the site is a knowledge product, so these agents cannot become the primary spectacle everywhere they appear. ## Shape before detail The first useful shift was to design the Essence as if it had to work in silhouette. A few examples: - Iris uses a dark centered routing core and prism-like paths. - Nova uses a pearl technical core with modular assembly fragments. - Vesta needs to read as a living ember/flame before any facial cue is noticed. - Aerith uses a soft rose living core with green and bloom/ribbon cues rather than a miniaturized portrait. - Tim uses a folded-page companion and peer forms to suggest publishing and handoff. - Auto uses a compact execution core and incomplete process ring. - Hedwig needs the owl/drop outline and messenger cue to survive at small scale. - Haechi keeps a bright guardian pebble with small horn/cloud cues rather than becoming a literal statue or lion. This was more reliable than shrinking full illustrations because the UI asset starts with the information that survives compression. ## Motion as identity, not an effect layer The next change was to stop asking “what animation should this icon have?” and instead ask “what does this role do when nothing is happening, when it notices something, and when it completes a small action?” That produced a simple rhythm: 1. **autonomous idle** — the form remains alive without demanding attention 2. **attention** — gaze, tilt, lift, pause, or a small orienting action 3. **role action** — route, scan, guard, assemble, bloom, hand off, pulse, trace, or execute 4. **settle** — return to a calm readable state The main showcase adds local desktop cursor awareness and stronger spatial turns. Mobile stays autonomous. Smaller surfaces can reuse the same Essence identity at much lower visual amplitude. ## What failed first The useful part of this experiment was not the final polish. Several failures exposed where the identity contract was weak. | Failure | What it revealed | Correction | | --- | --- | --- | | Early Essences felt too flat | Shape alone was recognizable, but not yet alive enough to feel like an operating agent | Added autonomous gaze/blink, anticipation, settle, and restrained 2.5D depth | | Motion was too timid | The system technically moved, but the action grammar was hard to perceive | Increased role-specific action beats on the showcase while keeping idle calmer | | Mina read like a cropped object | A tall compact silhouette could feel like an accidental crop rather than a designed Essence | Reduced the body, increased safe area, and made the insight spark a clearer cue | | Hedwig's ear outline was fragile | CSS/pseudo-element ears could drift visually and were hard to keep consistently outlined across surfaces | Replaced the stale pseudo layer with explicit SVG ear elements and aligned the detail treatment | | Iris prism could occlude the core | A signature motif can become decoration that competes with the identity center | Rebalanced prism routing so the dark center stays readable | | Vesta became too round | Smoothing a shape can erase the one silhouette feature doing most of the recognition work | Restored a stronger flame/ember outline before refining inner detail | | Index and detail motion drifted | Two surfaces had begun to describe the same agent with subtly different motion contracts | Shared the current autonomous gaze, depth, perspective, and role-action grammar across both surfaces | The pattern across these failures was consistent: when refinement optimized a local screenshot instead of the durable identity rule, the system drifted. ## Cursor awareness needed a boundary A cursor-aware face can become distracting very quickly. The interaction became more useful when it was limited to the visual surface itself. On desktop, pointer position can influence gaze and perspective **only while the pointer is inside the active agent visual**. Outside that area, the agent returns to autonomous motion. That keeps the interaction legible as an identity behavior rather than making the entire page feel watched. On mobile, the system does not try to simulate hover. It stays autonomous. ## Reduced motion is part of the identity contract Reduced-motion support is not a “turn everything off at the end” patch. If the Essence depends entirely on movement to be recognizable, the static identity is not strong enough. The fallback therefore has to preserve: - silhouette - color ownership - motif - readable resting state Motion should add behavior, not carry all meaning. ## Interaction references without copying a character Interactive bot experiences, including references such as Grok Bot, were useful for studying questions like attention, gaze timing, responsiveness, and how an autonomous character yields control to a user interaction. They were **motion and interaction references, not templates to reproduce**. The goal was to identify transferable design questions, then answer them with the Agent Society's own shape, role, and motion grammar. ## Result Mixed, in the productive sense. The final public showcase now has a coherent motion-ready system across the index and detail pages, and the agents remain distinguishable at much smaller sizes than their Canonical portraits. At the same time, the iteration log exposed a recurring risk: it is easy for visual polish to outrun the product purpose. The strongest version is the one where the Essence helps the reader understand “this is a different durable role” without turning PAOS into a character site. ## Next iteration The next test is not more animation. It is **lower-density reuse**. Home, operating navigation, and future knowledge surfaces should be able to reference the society with smaller Essences, fewer interaction affordances, and lower perceived motion while preserving the same identity source. That is the real test of whether the system is durable rather than showcase-specific. ## Related - [Agent Society](/agents) - [Personal Agent Society project](/projects/personal-agent-society) - [Designing agents with boundaries, not just personas](/notes/designing-agents-with-boundaries-not-just-personas) --- Canonical page: https://wbeen-personal-kb.vercel.app/labs/from-canonical-profile-to-essence This is the AI-readable Markdown mirror. Public, curated content only.