Sizzle Report Playbook

Creating scrolly-telling reports to share feature launches, process improvements, and work summaries with teams and stakeholders. Used to announce new features, celebrate team achievements, and communicate the scale and scope of large changes through visually compelling, data-driven narratives.

Start with understanding the thesis, audience, and spectrum position (1-10 professional to flamboyant). Structure scenes before coding. Build a single self-contained HTML file with G2 design tokens at the top, responsive markup organized scene-by-scene, scroll-triggered reveals via IntersectionObserver or Scrollama, and inline SVG or D3 visualizations. Wire up animations and interactions based on spectrum position. Iterate with feedback by adjusting one file.

Point Claude to the data source (file, database, or API), reference the strategy document, specify a position on the flamboyancy scale (1–10), and let it generate a complete, self-contained HTML report. Open the file in a browser immediately to review. Iterate conversationally on design, pacing, and emphasis without rebuilding from scratch.

Use CSS custom properties for G2 Elevate design tokens. Always include Figtree font for body/display and JetBrains Mono for code/data. Implement scroll-triggered reveals with fade-in at minimum. For data viz, use animated counters (easeOutExpo), line-draw SVG paths (stroke-dashoffset), or D3 nested circles for complex data. Sticky chart + narrative sidebars use scroll-driven state changes. Dark mode inverts palette: neutral-5/neutral-0 becomes neutral-100/neutral-90, text inverts, accent colors lighten for contrast. Code evidence uses actual diffs, PR numbers, file paths—never hand-wavy.

SVG can work but is unpredictable and difficult to make deterministic across iterations. JavaScript and React components provide better control and more reliable, repeatable results for data visualizations. Prefer JavaScript-based viz over SVG.