Interactive Diagram Demo

Step One: Introduction

This post now uses the Scrollama sticky-side layout directly from MDX.

Each section is marked with data-step, and the layout script handles activation, step highlighting, and sticky figure updates.

Key Features:

• Sticky side figure updates as you move through sections
• Active step styling is toggled automatically
• Uses Scrollama + IntersectionObserver under the hood
• Authoring stays simple: write MDX sections with data-step

Scroll to see the step number update in the sticky panel.

Step Two: The Mechanism

Synchronization works like this:

1. The layout queries all sections inside the article using [data-step]
2. Scrollama watches those sections with an offset trigger
3. On each enter event, the layout marks one section as active
4. The sticky figure text updates to the current step index + 1

The layout also recalculates dimensions on resize to preserve the sticky-side behavior.

Performance notes:

• IntersectionObserver is event-driven (not scroll-listener spam)
• Small JS surface area and no custom diagram controller
• Consistent behavior across pages that reuse this layout

Step Three: Authoring in MDX

This pattern is ideal for:

• Technical tutorials with accompanying diagrams
• Storytelling with visual progression
• Process documentation with step-by-step visuals
• Educational content where concepts build on each other

Each section can include regular markdown and components, as long as you keep data-step on each step block.

The sticky figure remains visible while the content column scrolls.

To create your own article:

1. Use <SlideBlogLayout> in your MDX post
2. Write one <section data-step="n"> per step
3. Keep steps in order (0, 1, 2, …)
4. The layout handles Scrollama setup and active state automatically

This is now fully MDX-first with the old diagram-controller stack removed.