more tutorials

[dompm]

The only tutorial is about segmenting an existing pattern, but the app has turned into a more general vector editor / 3d lamp creator.

we should have tutorials for those

[dompm]

Rethinking the Essence of Vitrai: From AI Tool to Virtual Glass Studio

As the app has evolved, it has outgrown its original description of a "stained-glass planning web app — segment pattern pieces from a photo using SAM2".

At its core, Vitrai is a precision design, material visualization, and fabrication studio for glass artists. It bridges the gap between digital vector design and physical glasswork, turning a stressful guessing game (where to cut variegated glass sheets, how pieces fit in 3D) into digital confidence.

Here is an expanded plan to align the presentation, documentation, and interactive tutorials with this broader scope.

---

1. The Key Architectural Shifts

• Tracing $\rightarrow$ Drawing: Moving from a photo-only workflow to a robust vector creator (Pen, Pencil, snapping, parametric curves, blank canvas).
• Flat 2D $\rightarrow$ 3D Form Composition: Designing flat pieces that assemble into complex 3D shapes (lampshades) with live 3D textured previews.
• Simple Texturing $\rightarrow$ Material Inventory & Nesting: Fitting, scaling, and rotating pattern pieces over real glass sheet photos at 1:1 scale.
• Visual Preview $\rightarrow$ Fabrication Prep: Custom solder/came line thickness, automated nesting, and print-to-scale multi-page layout exports.

---

2. Presenting the App (README & Landing Page)

We will reframe the narrative around the complete Design $\rightarrow$ Visualize $\rightarrow$ Fabricate workflow:

• Elevated Value Prop: Focus on "digital studio/CAD for glass artists."
• Highlight Features: Showcase the 3D viewer, custom vector drawing, and scale-honest printing alongside the SAM2 segmenter.

---

3. A Modular Onboarding & Tutorial System

Instead of a single linear tour, we should offer a welcome screen with modular tracks based on what the user wants to achieve:

• Track 1: Tracing & Auto-Segmentation (SAM2)
  • Upload a pattern image $\rightarrow$ Calibrate scale $\rightarrow$ Cut pieces using the box tool $\rightarrow$ Refine edges.
• Track 2: Designing from Scratch (Vector CAD)
  • Start with a blank canvas $\rightarrow$ Use Pen/Pencil tools $\rightarrow$ Snapping and angle constraints $\rightarrow$ Smooth or curve edges.
• Track 3: 3D Lamp Construction (Lamp Creator)
  • Edit a lamp's profile $\rightarrow$ Auto-unroll facets $\rightarrow$ Design symmetrical facets concurrently $\rightarrow$ Preview in 3D.
• Track 4: Glass Inventory & Print Layouts (Fabrication)
  • Set up multiple glass sheets $\rightarrow$ Calibrate sheet scales $\rightarrow$ Fit/nest pieces $\rightarrow$ Adjust solder widths $\rightarrow$ Print to scale.

---

4. Implementation Roadmap

We can tackle this in phases:

• Phase 1: Brand & Presentational Refresh (Update landing screen, README, and terminology).
• Phase 2: Modular Tutorial Architecture (Refactor Tutorial.tsx to handle branchable, non-linear tracks instead of the current index-based step order).
• Phase 3: Write New Tutorial Tracks (Create the step sequences and spotlight elements for Vector Drawing, 3D Lamp Mode, and Fabrication Prep).