Shareable result graphics for the free-tools family

Why

The free-tools family shipped 2026-07-25 with text-only result screens. The proven viral engine on FGPT is the “what kind of coach are you” identity share loop: a coach posts their result graphic, every viewer wants their own, the card carries the tool URL back. Kevin (2026-07-26): “we need to give the coaches involved the option to share a cool graphic.” A result that exists only as on-screen text cannot be shared; a branded card can.

What

Client-side canvas rendering of the visitor’s result into a downloadable 1080x1080 branded PNG, on four pages in the 360tft/360tft site repo:

  1. /dogmatic-quiz/ — the identity share. Band name huge, one-line band description, 360TFT branding, footer URL 360tft.co.uk/dogmatic-quiz so viewers can take it themselves. Strongest loop; build first.
  2. /time-audit/ — the quantified-pain stat card. The headline hours-per-week number huge, the existing clipboard share line as the supporting copy, footer URL back to the tool.
  3. /coaches-compass/day-1/ — the team profile card: the rated areas as a simple horizontal bar visual plus the identified priority, footer URL to 360tft.co.uk/coaches-compass.
  4. /session-plan/ — a SAVEABLE artifact, not an identity share: the generated session rendered as a clean session-card image a coach keeps and forwards. Button copy says save, not share.

Interaction per page: one button on the results screen (“Download your result card” / “Save your session card”) that renders the canvas and downloads the PNG; where navigator.share supports files, also offer native share. No backend, no external libraries, no analytics change.

Excluded on purpose: /player-diagnostic/ (a graphic naming a specific child’s weaknesses must never be nudged toward social) and /which-product/ (its result is a product recommendation; sharing it is sharing an advert, nobody does, and the PRD for it left share out of v1).

Design bar

Scope

In: the four pages above, canvas render code, buttons, this PRD mirrored to the site repo. Out: player-diagnostic and which-product (see above); any auto-post plumbing (coach chooses to share by hand, nothing posts anywhere); og:image changes; analytics.

Proof before Shipped

Live 200 on all four pages with the render code present; a real card PNG generated from each page on production via headless browser and visually inspected (frame-inspection rule applies to graphics: look at the actual output, not the code); extremes tested on the time audit (very low and very high hours).

Honesty artifact

Stated assumptions: canvas + system fonts render acceptably without loading web fonts (no external requests from a static page); the existing result state on each page exposes enough data to draw the card without refactoring scoring logic; coaches will share by hand, so no share tracking exists beyond the URL printed on the card.

Known gaps: no analytics on card downloads (site-wide gtag gap, already in OPEN-ITEMS); the compass card shows a team’s weaknesses, which some coaches will not want public — acceptable because sharing is opt-in and downloads locally; no og:image per result (would need a backend, out of scope).

Expected Experience