Marketing Blueprint

Sizzle Report Playbook

Mike WheelerCTO - CofounderG2.comApril 2026

Create visually compelling, interactive reports that announce features and celebrate achievements through scrollytelling narratives with data visualizations and scroll-triggered animations.

1 File Included

STRATEGY.md
20 KB

What problem does this solve?

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.

How does it work?

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.

What's the biggest win?

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.

What should I know technically?

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.

What are the constraints?

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.