Interactive Study Guide

Transform a static study guide markdown file into an immersive, interactive learning experience served as a local web app. The output should feel like a NYT interactive feature or a Pudding.cool essay — editorial typography, generous whitespace, purposeful animation, and visualizations that reveal structure rather than decorate.

Guiding Principles

• Restraint over spectacle. Every animation must earn its place by revealing something the static text cannot. Avoid gratuitous motion.
• Content determines form. Each section gets the layout and interactivity best suited to its content type — never force a visualization where prose works better.
• Scroll as narrative. The primary interaction is scrolling. Use scroll-driven reveals, sticky elements, and waypoint transitions to create a reading rhythm.
• Typographic confidence. Large serif headings, measured line lengths, and ample vertical rhythm. The text itself should feel beautiful before any interactivity loads.
• Progressive enhancement. The page is readable and useful even if JavaScript fails. Interactivity layers on top.

Workflow

Step 1: Locate and Parse the Study Guide

Accept a path to the study guide markdown file. Parse it into structured sections using the known template format from codebase-study-guide: