This post demonstrates the interactive layout. The text remains normal Markdown, while each section can pin a drawing beside it and update that drawing as the reader scrolls.

Scroll-linked diagrams

Use the scrollytelling layout when a post needs a sticky visual column. Each section names a scene, and assets/js/scrollytelling.js renders the matching SVG.

The runtime exposes helpers for SVG nodes, paths, captions, and progress values from 0 to 1.

A diagram scene can fade nodes and draw arrows as the section progresses.

Custom drawing scenes

Scenes are just JavaScript functions registered with ScrollyDraw.register(name, scene). A scene can draw SVG paths, move markers, reveal labels, or delegate to a canvas renderer.

For a one-off essay, add a page-specific script in front matter with scrolly_script: /assets/js/my-post-scenes.js.

The same hook supports continuous animation, not only static reveals.

That is enough to start drafting. The rest of the page can return to ordinary Markdown whenever a full-width visual is not needed.