# Clone Constellation — design plan (Gemini 2.5 Pro, Fable pending credit) Here is the design for the Clone Constellation experience. --- ### **TO:** Byron Arnao ### **FROM:** Fable // Design & Engineering ### **SUBJECT:** Project Constellation: Design & Phased Execution Plan ### **DATE:** 2026-08-05 Byron, This is the plan for Constellation. It’s a marquee feature, as you said. The vision is to transform the flat list of Clones into a living, navigable universe of relationships. This document outlines two conceptual directions, a deep dive into the UX/UI mechanics, the emotional core, a phased rollout plan starting with a dead-simple static prototype, and a brutal critique of our own work. This isn't just a feature; it's a new modality for interaction with AI and memory. It's ambitious, and the risks (uncanny valley, cognitive overload, ethical grief-tech) are significant. We tackle them head-on. *** ### 1. Concept: Two Directions, One Path Forward We propose two distinct, coherent frames for the Constellation experience. They are not mutually exclusive but represent different entry points and emotional tones. * **Direction 1 (Lead): The Hearth** * **Thesis:** A private, intimate space to explore, understand, and strengthen your personal universe of relationships—past, present, and future. * **Why Lead:** It's emotionally resonant, has a clear initial user base (families, close-knit groups), and forces us to solve the hardest Responsible AI (RAI) problems around grief and intimacy from day one. It’s the heart of the product. * **Direction 2 (Expand): The Pantheon** * **Thesis:** A grand, explorable hall of minds where you can assemble and consult with historical figures, fictional characters, and expert personas to solve problems and expand your thinking. * **Why Second:** It's a powerful business and intellectual use case that builds on the core mechanics established by The Hearth. It's the "wow" feature that comes after we’ve established trust and utility. We'll design the core system to support both, but our narrative, initial build, and marketing will focus on **The Hearth**. ### 2. The 3D Graph Made Legible: Interaction & Information Design The central challenge is making a 3D graph feel intuitive, not a chaotic mess of nodes and lines. We will be ruthless about managing cognitive load. Our approach is inspired by `info.arnao.ai`—layered information revealed through gesture. * **Entities as Objects:** * **Default State:** Nodes are semi-translucent, softly glowing spheres. They are abstract to reduce clutter. A faint, low-res portrait might be visible within. * **Focus State:** As a node is brought into focus (by tapping or centering it), the sphere resolves into a high-fidelity, subtly animated portrait or avatar, contained within a circular frame. This is a progressive-disclosure of detail. * **Relationships as Living Edges:** * **Color & Meaning:** Edges are colored, emissive splines connecting nodes. The color legend is simple and user-editable: * **Warm White/Gold:** Family (Parent, Sibling, Child) * **Cool Blue:** Professional (Colleague, Mentor, Manager) * **Vibrant Magenta:** Creative (Collaborator, Muse) * **Soft Green:** Friendship * **State Indication:** The edge's state communicates information. A slow, steady pulse indicates an active or recent interaction. A shimmering effect could denote a "live" conversation happening elsewhere. * **Navigation Without Chaos:** * **Gesture:** The core is Z-axis navigation. A vertical swipe/scroll pushes you "deeper" into the graph, with nodes in the foreground expanding and those in the background shrinking and fading. A two-finger drag rotates the entire constellation. * **Depth & Opacity:** This is our primary tool for clarity. The focal plane is sharp and bright. Everything else falls off into transparency and a subtle depth-of-field blur. The user *feels* like they are focusing on a single layer of relationships at a time. Your immediate family is sharp; their spouses and children are one step back and slightly dimmer. * **Tools to Cut, Filter, and Focus:** * **Isolate Branch (The "Pruning Shears"):** A long-press on a node reveals a radial menu. One option is "Isolate." This immediately dims all other nodes not directly descended from or parented to the selection (e.g., isolating your maternal family line). * **Focus Pair:** Select two nodes. The UI automatically reorients the graph to bring them front-and-center, dimming everything else. This is for exploring a single relationship. * **Search & Filter Bar:** A minimal, persistent search bar allows you to find a person by name, which highlights their node, or filter the entire view by relationship type (e.g., "Show only Professional"). ### 3. The Flow: From Browsing to Multi-Party Conversation The journey from passive graph exploration to active, multi-clone conversation must be seamless. 1. **Enter Mode:** The user is in their main list of Clones. A new "Constellation" icon transitions them into the 3D graph, centered on their own node ("You"). The view is immersive, pulling them into this new space. 2. **Browse & Select:** The user navigates the graph using the gestures described above. They tap on their "Brother" node. It comes into focus, and a small, non-intrusive card appears with his name and a "Chat" button. 3. **Single Conversation:** Tapping "Chat" initiates a standard, one-on-one conversation. The 3D graph recedes into the background, remaining visible but heavily dimmed, providing context without distraction. 4. **Flip to "Salon Mode":** This is the marquee interaction. * In the graph view, the user long-presses their "Brother" to enter a selection mode. The node gets a checkmark. * They then tap their "Sister" and their late "Father." A persistent UI element appears at the bottom: "Start Salon (3)." * Tapping this button transforms the space. The selected nodes glide from their positions in the graph to form a conversational arc in the foreground. The rest of the constellation fades almost completely. You, the user, are positioned at the head of this virtual table. 5. **Multi-Party Conversation in 3D:** * **Turn-Taking & Gaze:** This is critical to avoid uncanny chaos. We will *not* attempt perfect lip-sync initially. Instead, we use clear visual cues. The speaking avatar has a soft, glowing ring at its base and their head/gaze is subtly oriented towards the entity they are addressing (another clone or you). * **"Listening" Avatars:** Non-speaking avatars aren't static. They exhibit micro-animations (a slow blink, a slight shift in posture) and orient their gaze towards the current speaker. This creates a powerful illusion of a real-time conversation. * **User's Role:** The user types or speaks their contribution. The system determines who should "respond" next, or the user can direct a question "@Father...". The conversation flows between the AI agents. ### 4. The Emotional Core & Use Cases The "reunion of the departed" is the emotional anchor. But the system is a platform for many interactions. * **The Reunion (Grief & Remembrance):** * **Core:** A user convenes their late mother, father, and a grandparent for a conversation. They can ask questions they never got to ask, hear family stories, or simply feel their presence. * **RAI Care:** This is non-negotiable. * **Explicit Disclosure:** Every session begins with a clear, gentle statement: "You are interacting with AI representations. They are based on the data you've provided and are not the individuals themselves." * **Consent & Estate:** For deceased individuals, the platform requires explicit consent from the estate or a designated digital heir to create and interact with their Clone. This is a foundational ethical backstop. * **Grief-Safety Features:** The system will include a "Pause & Reflect" button. If a conversation becomes emotionally overwhelming (detected via sentiment analysis or user-invoked), the system can pause the interaction and offer grounding prompts or resources. The user has a "Reset Conversation" control at all times. * **Other Use Cases:** 1. **The Personal Boardroom (Pantheon):** A founder assembles Clones of Steve Jobs, her first mentor, and a futurist to workshop a difficult business decision. 2. **The Writer's Room (Creative):** A novelist puts Clones of her protagonist and antagonist in a room to argue, helping her work through a plot point. 3. **The Family Historian (Hearth):** A young person convenes Clones of their great-grandparents to ask about their immigration story, capturing oral history that was never recorded. 4. **Conflict Resolution Practice (Hearth/Professional):** Prepare for a difficult conversation with a family member or colleague by workshopping it with their Clone first. ### 5. Simplest-Static-First: The MVP We can ship a v0.1 of this experience quickly to validate the core navigation metaphor. * **Platform:** A simple web page using a 2.5D library like `three.js` or even pure CSS 3D transforms. * **Data:** A hard-coded JSON file representing a single family of 10-15 nodes. * **Entities:** Simple circles with profile pictures. No 3D models. * **Edges:** Static, colored lines. * **Interaction:** **One single interaction:** Click on a node. All other nodes and edges fade to `opacity: 0.2`. The selected node and its immediate 1st-degree connections remain at `opacity: 1.0`. A static information card appears next to the selected node. * **Goal:** To prove that the depth/opacity/focus mechanic is an effective way to navigate a relationship graph without causing overwhelm. This is buildable in a week. ### 6. CRITIQUE: What's Missing & The Hardest Problems A brutally honest assessment of the risks and missing pieces. * **The Hardest Problems:** 1. **3D Legibility at Scale:** Our focus/opacity system works for a family of 20. It breaks for a professional network of 200. The screen will become "node soup." We need aggressive automatic decluttering and level-of-detail systems. 2. **Uncanny Valley Hell:** The multi-avatar "Salon" is the single biggest risk. If the gaze, turn-taking, and animations are even slightly off, it will feel robotic and creepy, destroying the emotional core. We must prioritize stylized avatars and non-verbal cues (light, glow) over photorealistic lip-sync. 3. **Cognitive Overload:** We are asking the user to manage 3D navigation, relationship filters, *and* a multi-party conversation. The UI must be ruthlessly minimalist, with a very strong "one primary action at a time" philosophy. 4. **Performance on Mobile:** Rendering a complex, interactive 3D graph with multiple animated avatars is computationally expensive. This will require significant engineering effort in WebGL and careful performance profiling to avoid turning the user's phone into a space heater. 5. **The Grief Line is a Razor's Edge:** Our safety features are a start, but we are designing a product for people in a vulnerable state. A clone saying the "wrong thing" could cause real harm. This requires continuous red-teaming, input from grief counselors, and a permanent, easily accessible human support channel. * **Bold Additions to Make it Exceptional:** 1. **The Temporal Slider:** A timeline slider at the bottom of the screen. As you drag it from 2026 back to 1990, the constellation fluidly changes. Nodes appear (births) and fade (deaths), relationships form and dissolve. You could literally watch your family tree grow over time. This transforms the graph from a static snapshot into a 4D history. 2. **The Relationship Dynamics Engine:** The edges aren't just static labels; they are dynamic representations of the relationship. Based on the content of conversations within the Salon, edges could change. A simulated argument might cause an edge to turn a tense red and fibrillate. A reconciliation could make it glow a warm gold. The graph becomes a living, evolving system that reflects the interactions you create within it. 3. **Shared Constellations:** The ability to share a view of your constellation with a family member. You could both enter the same "Salon" with your late grandmother, sharing a memory-making experience together, mediated by the platform. ### 7. Render List for Nano Banana Pro These are 10 specific shots to capture the vision. 1. **[Phone, Eye-Level]** The initial view of "The Hearth." A beautiful, dark-mode UI. We see the "You" node in the center, glowing brightly. Emanating from it are warm white lines to "Mother," "Father," "Sister." These nodes are slightly less bright. Further out, "Grandmother" and "Uncle" are dimmer still, showing the depth/opacity effect. 2. **[Desktop, Close-up on Gesture]** A user's fingers are pinching-to-zoom on the screen. The constellation expands, and a previously distant cluster of "Professional" contacts (cool blue lines) comes into focus. 3. **[UI Detail Shot]** A close-up of the "Isolate Branch" interaction. The user has long-pressed on the "Mother" node, and a clean radial menu appears with options: "Isolate," "Start Salon," "View Profile." The rest of the graph is blurred in the background. 4. **[Phone, Split Screen]** On the left, the graph view with 3 nodes selected ("You," "Grandfather," "Mother"). On the right, the "Salon" view. The three corresponding avatars are arranged in a comfortable arc, with the dim, ghostly constellation in the far background. 5. **[Desktop, "Salon" in action]** The "Grandfather" avatar is speaking. A soft, glowing ring is at his base, and his stylized face is oriented toward the "Mother" avatar. A minimalist text bubble appears near him with the transcript. The "Mother" avatar's head is tilted slightly, in a listening pose. 6. **[Phone, Emotional Moment]** The "Reunion of the Departed" use case. A user is in a Salon with their late parents. The lighting is soft and intimate. The user's typed text is visible: "Tell me the story of how you two met again." The avatars are looking at each other warmly. 7. **[Desktop, "Pantheon" View]** The "Personal Boardroom." The user is in a Salon with stylized avatars of "Steve Jobs," "Marie Curie," and a generic "Mentor" figure. The edges connecting them in the background are a mix of blue and magenta. The user has asked a question about a product launch. 8. **[UI Detail Shot, Bold Feature]** The "Temporal Slider" UI. A clean, horizontal timeline from 1970-2026 is at the bottom of the screen. The user has dragged the handle to "1995." The graph above is smaller, showing only the user's parents and grandparents; the "Sister" node is gone, as she wasn't born yet. 9. **[Desktop, Bold Feature]** The "Relationship Dynamics Engine" visualized. A shot of a "Focus Pair" view between two nodes, "Alex" and "Ben." They've just had a simulated positive interaction. The green "Friendship" edge connecting them is glowing brightly with a warm, pulsing light. 10. **[Phone, Safety UI]** A gentle, full-screen overlay has appeared over a Salon. It says, "It sounds like this is a difficult moment. Would you like to pause and reflect?" Buttons below offer "Continue," "Pause Session," and "Talk to a Human Guide." This demonstrates the RAI grief-safety circuit breaker.