1  # Tutorial MVP: Quick Start Onboarding
  2  
  3  ## Purpose
  4  
  5  Minimal viable tutorial for private beta. Delivers foundational concepts clearly and beautifully without the full shamanic immersion of the comprehensive vision. Think "elegant demo" rather than "transformative journey."
  6  
  7  **Scope**: Everything except Songlines. Based on live demo flow that successfully introduced InterBrain in ~5 minutes.
  8  
  9  ---
 10  
 11  ## Visual Toolkit
 12  
 13  Three decoupled primitives (can be synchronized but not coupled):
 14  
 15  1. **ManimText** - 3D text that fades in/out in space
 16  2. **GoldenDot** - Attention-steering animated dot (Bezier curves through 3D)
 17  3. **GoldenGlow** - Unified hover/focus highlight on UI elements
 18  
 19  ---
 20  
 21  ## Tutorial Flow
 22  
 23  ### Segment 1: Anchor Point
 24  
 25  **Start State**: InterBrain DreamNode at center (liminal-web view)
 26  
 27  **Narration** (ManimText):
 28  > "This blue circle is the InterBrain looking at itself."
 29  > "It anchors your DreamSpace."
 30  
 31  **Visual**:
 32  - GoldenGlow pulses on InterBrain node
 33  - GoldenDot circles the node once
 34  
 35  **Concept**: DreamNode = idea (blue border)
 36  
 37  ---
 38  
 39  ### Segment 2: Dreamer Nodes
 40  
 41  **Action**: Click through to show connected DreamerNodes
 42  
 43  **Narration**:
 44  > "Red circles are Dreamers - people you care about."
 45  
 46  **Visual**:
 47  - GoldenDot travels from InterBrain → edge → DreamerNode
 48  - GoldenGlow on DreamerNode
 49  
 50  **Concept**: DreamerNode = person (red border), edges = shared relationships
 51  
 52  ---
 53  
 54  ### Segment 3: DreamTalk Symbol
 55  
 56  **Action**: Show DreamTalk side of InterBrain node (logo visible)
 57  
 58  **Narration**:
 59  > "Every DreamNode has a DreamTalk - a symbolic representation."
 60  > "This is the InterBrain's logo."
 61  
 62  **Visual**:
 63  - Node flips to DreamTalk side
 64  - GoldenGlow on the symbol
 65  
 66  **Concept**: DreamTalk = thumbnail/symbol representing the idea
 67  
 68  ---
 69  
 70  ### Segment 4: Navigate the Web
 71  
 72  **Action**: Click through existing liminal web (pre-populated nodes)
 73  
 74  **Narration**:
 75  > "Click any node to explore its connections."
 76  > "Navigate through meaning."
 77  
 78  **Visual**:
 79  - GoldenDot traces path through 2-3 node transitions
 80  - Show ring layout with related nodes
 81  
 82  **Concept**: Liminal web = self-organizing knowledge graph
 83  
 84  ---
 85  
 86  ### Segment 5: DreamSong Canvas
 87  
 88  **Action**: Flip node to DreamSong side, show canvas
 89  
 90  **Narration**:
 91  > "The other side is the DreamSong."
 92  > "A canvas where you weave references to other ideas."
 93  
 94  **Visual**:
 95  - Node flips to DreamSong side
 96  - GoldenDot points to embedded references
 97  
 98  **Concept**: DreamSong = detailed explanation with references (Obsidian canvas)
 99  
100  ---
101  
102  ### Segment 6: Edit Canvas
103  
104  **Action**: Enter canvas edit mode
105  
106  **Narration**:
107  > "Edit the canvas to add new connections."
108  
109  **Visual**:
110  - Show canvas with existing nodes
111  - GoldenGlow on editable elements
112  
113  **Concept**: Canvas editing = manual relationship building
114  
115  ---
116  
117  ### Segment 7: Add Relationships
118  
119  **Action**: Add DreamerNode to DreamNode's liminal web
120  
121  **Narration**:
122  > "Connect people to ideas they share."
123  
124  **Visual**:
125  - GoldenDot guides to relationship editor
126  - Show toggle interaction
127  - Edge appears between nodes
128  
129  **Concept**: Relationships are bidirectional (Dream ↔ Dreamer)
130  
131  ---
132  
133  ### Segment 8: Create New Node
134  
135  **Action**: Create a new DreamNode
136  
137  **Narration**:
138  > "Create new ideas by dragging images into space."
139  > "Or use the search node."
140  
141  **Visual**:
142  - GoldenGlow on creation zone or search node
143  - New node appears with DreamTalk
144  
145  **Concept**: DreamNodes can be created multiple ways
146  
147  ---
148  
149  ### Segment 9: Weave References
150  
151  **Action**: Add references to DreamSong canvas
152  
153  **Narration**:
154  > "Weave other DreamTalks into your DreamSong."
155  > "These become navigable connections."
156  
157  **Visual**:
158  - Show adding a reference in canvas
159  - GoldenDot traces: DreamSong reference → invokes that DreamNode
160  
161  **Concept**: References in canvas = edges in liminal web
162  
163  ---
164  
165  ### Segment 10: Co-Pilot Mode
166  
167  **Action**: Enter co-pilot mode with DreamerNode
168  
169  **Narration**:
170  > "Video call a Dreamer."
171  > "Navigate ideas together while you talk."
172  
173  **Visual**:
174  - GoldenGlow on video call button
175  - Show co-pilot interface
176  - Transcription preview
177  
178  **Concept**: Co-pilot = shared navigation during video calls
179  
180  ---
181  
182  ### Segment 11: The Invitation
183  
184  **Narration** (final):
185  > "Who are 1-3 people meaningful to you?"
186  > "What ideas connect you to them?"
187  > "Create. Call. Share."
188  > "Pass on the gift."
189  
190  **Visual**:
191  - Fade to constellation view
192  - All nodes visible as night sky
193  
194  ---
195  
196  ## Pre-Populated Demo Vault
197  
198  Nodes needed for tutorial:
199  - **InterBrain** (Dream) - anchor point, has logo DreamTalk
200  - **Alice** (Dreamer) - example person
201  - **Bob** (Dreamer) - example person
202  - **Circle** (Dream) - simple shape idea
203  - **Square** (Dream) - simple shape idea
204  - **Cylinder** (Dream) - composite idea with Circle+Square woven in DreamSong
205  
206  Relationships:
207  - InterBrain ↔ Alice, Bob
208  - Circle ↔ Alice
209  - Square ↔ Bob
210  - Cylinder ↔ Circle, Square (demonstrated in DreamSong weaving)
211  
212  ---
213  
214  ## Implementation Notes
215  
216  ### What's Included (MVP)
217  - Liminal web navigation
218  - DreamNode/DreamerNode distinction
219  - DreamTalk/DreamSong duality
220  - Relationship editing
221  - Node creation
222  - Canvas editing
223  - Co-pilot mode (brief)
224  
225  ### What's Deferred (Full Vision)
226  - Phase 0 philosophical video (Maggot Brain)
227  - Radicle vs GitHub explainer
228  - Semantic search deep dive
229  - Songlines
230  - AI integration preview
231  - Peer sharing demo
232  
233  ### Timing
234  - Target: ~3-5 minutes total
235  - Each segment: 15-30 seconds
236  - User can skip/replay segments
237  
238  ---
239  
240  ## Open Questions
241  
242  1. **Interactivity level**: Does user perform actions, or watch guided demo?
243     - Option A: Fully guided (golden dot shows, text explains)
244     - Option B: Semi-interactive (user clicks when prompted)
245     - Option C: Hybrid (some segments guided, some interactive)
246  
247  2. **Skip/replay**: Per-segment or whole tutorial?
248  
249  3. **Trigger**: First launch only, or available from settings?
250  
251  ---
252  
253  ## Relationship to Full Vision
254  
255  This MVP covers **Phases 1-2 and partial Phase 6** of `TUTORIAL_VISION_FULL.md`:
256  - Phase 1: Foundation (Segments 1-5)
257  - Phase 2: Navigation (Segments 4-6)
258  - Phase 6: Co-Pilot (Segment 10)
259  
260  The full vision adds:
261  - Phase 0: Philosophical primer video
262  - Phase 3: Deep creation workflows
263  - Phase 4: Dreamweaving details
264  - Phase 5: Collaboration/sharing