Each tile in components.html follows the same shape: a tile shell with mono-uppercase label and serif title, a body that animates in when it scrolls into view, and a foot with metadata. Data lives in components-data.js; the inline script in components.html consumes window.HEARTWOOD_DATA and renders each chart.
Animations gate on an IntersectionObserver. When a tile crosses 20% of viewport, the script adds .visible — that's the class every component's CSS keys off of. To replay, the tile temporarily gets .replay-reset, snaps back to initial state, then re-applies .visible on the next animation frame.
Pick a chart below for the full walkthrough — when to use it, the data shape from components-data.js, the animation pattern, a build snippet, and (when there's a real gotcha) a watch-out callout.