1  # Tutorial Design: Shamanic Onboarding
  2  
  3  ## Core Philosophy
  4  **Depth over breadth. Slow is fast. Less is more.**
  5  
  6  The tutorial is an interactive DreamSong teaching sacred relationship with living stories through the Liminal Web.
  7  
  8  ---
  9  
 10  ## Phase 0: Philosophical Primer (Pre-Entry)
 11  
 12  **Duration**: 2-3 minutes max
 13  **Music**: Maggot Brain by Funkadelic
 14  **Medium**: Video (visual metaphors + narration)
 15  
 16  **Narrative Arc**:
 17  1. **The Problem**: Social media isolation despite connectivity — parasitic relationship with stories
 18  2. **Indigenous Wisdom**: Stories are living beings (sacred knowledge forgotten)
 19  3. **The Invitation**: Enter liminal space where stories are free, sovereign, anti-rivalrous
 20  4. **The Posture**: Come as a guest. Be humble. Serve these beings with respect and gratitude.
 21  
 22  **Final Frame**: Project Liminality logo on black background
 23  - Logo tilts toward mouse cursor
 24  - Text: "Click to enter liminal space"
 25  - Click triggers portal animation through logo into DreamSpace
 26  
 27  ---
 28  
 29  ## Phase 1: Foundation - The Liminal Web
 30  
 31  ### Step 1.1: Anchor Point
 32  **Visual**: InterBrain DreamNode at center (golden glow)
 33  **Text**: "This is the InterBrain itself. All source code lives inside this DreamNode. Your home position — the space anchors here."
 34  
 35  **Concepts Introduced**:
 36  - DreamNodes = ideas (like InterBrain)
 37  - DreamerNodes = people you care about
 38  - This DreamNode anchors your entire space
 39  
 40  ### Step 1.2: First Relationship
 41  **Prompt**: Create your first DreamerNode
 42  
 43  **Flow**:
 44  - If DreamerNode exists → click to select it
 45  - If none → "Drag an image named after someone you care about"
 46  - Golden dot guides attention to new DreamerNode
 47  
 48  **Text**: "DreamerNodes represent people you have deep conversations with. Video calls where you explore ideas together."
 49  
 50  ### Step 1.3: Constellation Emerges
 51  **Visual**: Selected DreamerNode shows related DreamNodes orbiting
 52  **Golden dot**: Moves from InterBrain → edge → related DreamNode
 53  **Text**: "Selecting a dreamer shows all ideas you share with them. Create DreamNodes for what connects you."
 54  
 55  ---
 56  
 57  ## Phase 2: Navigation - Existing Liminal Web
 58  
 59  **Setup**: Vault pre-populated with Alice, Bob, Charlie + Circle, Square, Cylinder (already woven)
 60  
 61  ### Step 2.1: Dreamgazing
 62  **Action**: Enter constellation view
 63  **Visual**: Night sky of all nodes without weather (no relationships visible yet)
 64  **Text**: "Constellation view — dreamgaze your entire vault at once."
 65  
 66  ### Step 2.2: Navigate Relationships
 67  **Golden dot sequence**:
 68  1. Click edge between Circle ↔ Square → invokes Cylinder DreamNode
 69  2. Flip Cylinder to DreamSong side
 70  3. Click media file in DreamSong → invokes Circle
 71  4. Click another reference → invokes Square
 72  
 73  **Text**: "References are living connections. Click edges. Click symbols in DreamSongs. Navigate through meaning."
 74  
 75  ---
 76  
 77  ## Phase 3: Creation - Your Liminal Web
 78  
 79  ### Step 3.1: Create DreamNodes
 80  **Methods to demonstrate**:
 81  - Drag image onto space (with DreamerNode selected)
 82  - AI-generated DreamTalk symbol (text description → image)
 83  - Search-to-DreamNode (drag artifact → search node → save as new)
 84  
 85  **Text**: "DreamNodes are universal. Projects. Trips. Recipes. Media. Anything meaningful."
 86  
 87  ### Step 3.2: Edit DreamNodes
 88  **Golden glow**: Highlights action buttons
 89  - Flip to edit
 90  - Add media to DreamTalk
 91  - Edit DreamSong canvas
 92  - Save changes
 93  
 94  **AI Integration Teaser**: "Scribbly handwritten recipe? AI agent makes it presentable. (Feature preview)"
 95  
 96  ### Step 3.3: Semantic Search
 97  **Demo**:
 98  - Drag online artifact onto search node
 99  - Shows closest existing DreamNodes
100  - Option A: Save as new DreamNode
101  - Option B: Add to existing close match
102  
103  **Text**: "Search shows what already resonates with new discoveries."
104  
105  ---
106  
107  ## Phase 4: Dreamweaving - Constellations
108  
109  ### Step 4.1: Canvas Editing
110  **Golden dot**: Guides through Circle/Square/Cylinder example
111  **Actions**:
112  - Flip DreamNode to DreamSong
113  - Open canvas view
114  - Add references between nodes
115  - See constellation form
116  
117  **Text**: "References create constellations. Weave stories into larger wholes."
118  
119  ---
120  
121  ## Phase 5: Collaboration - Peer-to-Peer
122  
123  ### Step 5.1: Radicle vs GitHub (DreamTalk Explainer)
124  **Medium**: Animated DreamTalk visuals (GIF/PNG/MP4)
125  
126  **Key Metaphors**:
127  - **Radicle**: Liminal space collaboration layer — sovereign versions, invitation-based, transitive trust
128  - **GitHub**: Publishing layer — broadcast knowledge to internet (free with account)
129  - **Copyleft License**: Default for all DreamNodes (strongest resemblance to sane relationship with stories)
130  
131  **Text**: "Stories increase when shared. Anti-rivalrous. Coherence emerges through resonance, not compromise."
132  
133  ### Step 5.2: Share Changes with Peers
134  **Demo** (if peer DID exists from invite):
135  1. Make change to shared DreamNode
136  2. Share with peer
137  3. Receive peer's changes
138  4. Merge or review
139  
140  **Text**: "Updates flow through trust relationships. You see changes from direct peers only."
141  
142  ### Step 5.3: Publish DreamSong to GitHub
143  **Action**: One-click share to GitHub
144  **Text**: "Share knowledge freely. Stories belong to no one."
145  
146  ---
147  
148  ## Phase 6: Co-Pilot Mode - Video Calls
149  
150  ### Step 6.1: Simulated Call Flow
151  **Golden dot**: Guides through UI without actual call
152  
153  **Actions**:
154  1. Select DreamerNode
155  2. Enter co-pilot mode
156  3. Navigate shared DreamNodes during "call"
157  4. Show how songlines auto-generate from session
158  
159  **Text**: "Share your screen. Navigate ideas together. Songlines capture your conversation's topology."
160  
161  ### Step 6.2: The Gift
162  **Final Invitation**:
163  
164  "Who are the 1-3 people truly meaningful in your life?
165  What 1-3 ideas mediate your relationship to them?
166  
167  Create representations. Give them a call.
168  Show them what they mean to you.
169  Share these DreamNodes.
170  
171  They'll receive an install link — your representation + shared ideas already cloned.
172  
173  The InterBrain spreads through gratitude and kindness.
174  Pass on the gift of appreciation."
175  
176  ---
177  
178  ## Implementation Components
179  
180  ### Visual Language
181  - **Golden glow**: Attention steering (3Blue1Brown style)
182  - **Golden dot**: Travels between UI elements, emerges from behind nodes
183  - **ManimText**: 3D space text (already implemented)
184  - **DreamTalk visuals**: Animated metaphors for abstract concepts
185  - **Music**: Maggot brain (Phase 0 only)
186  
187  ### Tutorial System Architecture
188  - **Full flow**: Triggered on first launch (localStorage flag)
189  - **Restart**: Settings panel option
190  - **Modular segments**: Each feature has mini-tutorial (re-triggerable)
191  - **Dummy vault**: Alice/Bob/Charlie + Circle/Square/Cylinder pre-populated
192  - **User freedom**: Delete placeholder nodes, populate with real relationships
193  
194  ### Feature Coverage (Epic Order)
195  1. ✅ Liminal Web basics (DreamNodes, DreamerNodes, relationships)
196  2. ✅ Constellation view
197  3. ✅ DreamNode creation methods
198  4. ✅ Semantic search
199  5. ✅ Dreamweaving (canvas editing)
200  6. ✅ Co-pilot mode
201  7. ✅ Radicle/GitHub collaboration
202  8. 🔮 AI integration (teaser for future)
203  
204  ---
205  
206  ## Open Questions
207  
208  1. **Single vs Multi-Phase Tutorial?**
209     - Option A: One seamless flow (liminal web → dreamweaving → collaboration)
210     - Option B: "Soft" intro (liminal web basics) + "Advanced" mode (dreamweaving/collaboration)
211     - **Decision pending**: Let implementation reveal natural breakpoints
212  
213  2. **AI Integration Timing**
214     - Placeholder for DreamTalk generation + agent-assisted editing
215     - Show early or save for advanced tutorial?
216  
217  3. **Networking Demo Feasibility**
218     - Requires peer DID from invite flow
219     - Fallback if no peer available?
220  
221  ---
222  
223  ## Next Steps
224  
225  1. Create Phase 0 video (maggot brain philosophical primer)
226  2. Build golden glow system (UI element highlighter + traveling dot)
227  3. Implement DreamTalk visual explainers (Radicle/GitHub metaphors)
228  4. Set up dummy vault template (Alice/Bob/Charlie seed data)
229  5. Expand TutorialService with full step sequence
230  6. Map tutorial phases to modular segments (for re-triggering)