Testing the BloomGardenEmbed component for embedding Bloom gardens on willworth.dev. This post demonstrates Phase 0-3 features: static embed with guided tours.
2 min read
Testing BloomGardenEmbed
This post tests the Bloom V2 implementation including guided tours. Below is an interactive concept map exploring Coherent Extrapolated Volition (CEV) — an AI alignment proposal from Eliezer Yudkowsky.
What You're Seeing
The embed above is a read-only React Flow viewer with guided tour support that:
- Lazy loads — React Flow only loads when you click "Click to explore"
- Shows tour availability — If the garden has tours, you'll see "1 guided tour available"
- Supports tour playback — Click "Start Tour" to begin a guided journey
- Spotlight dimming — During tours, nodes outside the current focus dim to 30%
- Camera animation — The view smoothly pans to each tour stop
- Renders content in a modal — Click any node to read its full description
How Tours Work
- Click "Start Tour" in the top-left corner
- Use the Next/Prev buttons or dots at the bottom to navigate
- Watch as the camera pans and nodes highlight
- Click the X to exit the tour at any time
Technical Details
This implements Phases 0-3 of the Bloom V2 roadmap:
- Phase 0: Static embed (distribution wedge)
- Phase 1: Spotlight overlays (dim-others effect)
- Phase 2: Saved views and tours (manual curation in Bloom UI)
- Phase 3: Tour playback in embeds (this page!)
The component lives in @willworth/blog-core and accepts a GardenExport JSON structure with optional tours array.