2 cases built from this template
Same prompt, different [VARIABLES]. Click one to preview it above.About this template
This template turns a company's yearly results into a single scrolling page that reads like a magazine feature and behaves like a chart deck. It opens on a large photograph with the report year set in oversized serif numerals, then moves through seven chapters: the cover, the year in numbers, growth, revenue mix, global offices, a letter from the chief executive, and a download. Each chapter makes one point and says it plainly.
It suits finance and communications teams who want more than a PDF attachment, nonprofits reporting to donors, funds writing to their backers, and founders who publish their numbers in public. The demo follows an invented cold-chain freight company, and the second case swaps in a water charity to show the layout holds when the subject changes. Every figure is sample data and is labeled that way on the page.
The design pairs a warm paper background with deep ink text and a single cobalt accent. Full-screen numbers count up as they arrive, each with one sentence explaining what it means in everyday words. A sticky line chart stays in view while short notes step past and move the highlight from year to year. Bars rise from the baseline in sequence, donut segments sweep open before their labels appear, and a dot-grid world map pulses over each office and stays in sync with a list of cities and headcounts. All charts are hand-written SVG with no chart library, so you can restyle them directly.
To adapt it, replace the values in one content file: names, figures, chapter claims, office coordinates and the letter. The map markers, charts and downloadable PDF are all built from that file, so they update together. Visitors who prefer reduced motion see every number and chart in its final state.
The template prompt
The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].
# Annual Report Data Story Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else. ## Brief A single-page annual report for [BRAND], which runs [BUSINESS], told as a scroll data story in seven chapters: cover, the year in numbers, growth, revenue mix, offices, a letter from [LEADER], and a PDF download. Every chapter makes one clear point. Every figure, person and place is invented and labeled as sample data. - Audience: Customers, partners, staff and donors who will give a yearly report three minutes on a laptop or phone, and who are not financial specialists. - Goal: Have a reader finish knowing the year's four headline numbers and why they moved, then download the PDF. - Tone: Plainspoken, exact and a little dry, like a good business editor. Short sentences, real units, no corporate filler. It never reads as a regulated filing. ## Stack - Framework: Vite 5 + TypeScript (no UI framework) - Styling: Tailwind CSS 3.4 - Libraries: gsap 3 with ScrollTrigger (GSAP Standard (no charge, commercial use allowed)), pdf-lib (devDependency, build script only) (MIT), vite 5 (MIT), typescript 5 (Apache-2.0), tailwindcss 3.4, postcss, autoprefixer (MIT), @fontsource-variable/bodoni-moda (OFL-1.1), @fontsource-variable/newsreader (OFL-1.1), @fontsource/ibm-plex-sans (OFL-1.1) - Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs. - Setup: - Files: index.html, src/main.ts, src/style.css, src/content.json, src/charts/line.ts, src/charts/bars.ts, src/charts/donut.ts, src/charts/map.ts, src/countup.ts, src/rail.ts, scripts/make-pdf.mjs, public/favicon.svg, public/images/, ASSETS.md. - package.json scripts: dev is 'vite'; build is 'node scripts/make-pdf.mjs && tsc --noEmit && vite build'. Set 'type': 'module'. - vite.config.ts: base './', build.sourcemap false, build.outDir 'dist'. tsconfig.json: strict true, resolveJsonModule true. - tailwind.config.js: content ['./index.html', './src/**/*.ts']; theme.extend.colors paper, paper-deep, ink, slate, stone, hairline, accent with the hex values in Design; theme.extend.fontFamily display 'Bodoni Moda Variable', read 'Newsreader Variable', sans 'IBM Plex Sans', each with a serif or sans-serif fallback. - src/main.ts imports, in order: @fontsource-variable/bodoni-moda/opsz.css, @fontsource-variable/newsreader/opsz.css, @fontsource-variable/newsreader/opsz-italic.css, @fontsource/ibm-plex-sans/400.css, /500.css, /600.css, then ./style.css. Set font-optical-sizing: auto on html. - All copy and every figure live in src/content.json with top-level keys meta, cover, numbers, growth, quarters, mix, offices, letter, download, footer. main.ts fills the DOM from it, and all charts read their data from it. Figures must stay consistent with one another whenever they are rewritten. - Images referenced from TypeScript use import.meta.env.BASE_URL + 'images/hero.webp'. The PDF link is ./annual-report.pdf. - scripts/make-pdf.mjs reads src/content.json and uses pdf-lib to write public/annual-report.pdf: 3 US Letter pages with StandardFonts.TimesRoman and Helvetica. Page 1: Paper-colored background, a Cobalt rectangle 612 by 180 pt at the bottom, [BRAND], 'Annual Report [REPORT_YEAR]', 'Sample data'. Page 2: the four headline numbers, then the 8 quarterly bars drawn as rectangles. Page 3: the letter text, word-wrapped by hand with widthOfTextAtSize. Standard fonts only encode WinAnsi, so replace the minus sign U+2212 with a hyphen before drawing. The file stays under 100 KB. - Register once with gsap.registerPlugin(ScrollTrigger). Put every animation inside gsap.matchMedia() under the condition '(prefers-reduced-motion: no-preference)'. Initial hidden states are set by JavaScript inside that block only, so the HTML and CSS default is always the final state. Call ScrollTrigger.refresh() after document.fonts.ready and after window load. - Pulse keyframes and the scroll cue keyframes live in src/style.css, inside @media (prefers-reduced-motion: no-preference). html gets scroll-behavior: smooth under the same query. Every chapter has scroll-margin-top: 56px below 1024px. ## Variables - [BRAND] — Company or organization name (default: "Fennmark"). An invented company, nonprofit or fund. - [BUSINESS] — What it does, in a short phrase (default: "refrigerated freight and cold storage for food and medicine"). Rewrites the chapter claims, revenue segments, milestones and the letter. - [REPORT_YEAR] — The year being reported (default: "2025"). Four digits. Set on the cover in huge numerals and used as the last year of the charts. - [LEADER] — Letter writer, name and title (default: "Maren Aldous, Chief Executive"). A fictional person. Use a name that fits the portrait, or swap in your own portrait. - [HERO_IMAGE] — Cover photograph file (default: "hero-cold-yard.webp"). hero-cold-yard.webp or hero-water-tower.webp from the assets list, or your own wide dusk or dawn photo with a dark lower third. Saved to public/images/hero.webp. - [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/annual-report-data-story in the footer (default: yes; delete this line to remove it) The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described. Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.
Pro template. The design, sections, motion and assets parts of this prompt are for Pro members. The live demo and DESIGN.md stay free.
DESIGN.md
The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.
---
name: "Annual Report Data Story"
colors:
paper: "#F4EFE6"
paper_deep: "#EAE3D6"
ink: "#14171F"
slate: "#5A5E66"
stone: "#A9A294"
hairline: "#D3CBBC"
cobalt: "#1A3FE0"
typography:
display_big_numerals_headlines_chart_values_at_28px_and_above: { family: "Bodoni Moda Variable", weights: [500] }
long_read_letter_lede_takeaway_sentences_pull_quote_in_italic: { family: "Newsreader Variable", weights: [400, 500] }
interface_rail_labels_axis_text_tables_and_buttons_always_with_tabular_nums: { family: "IBM Plex Sans", weights: [400, 500, 600] }
spacing: "Chapters after the cover sit in a main column with 200px left margin at 1024px and up, and 48px inner padding. Below 1024px the margin is 0 and padding is 16px. Chapter vertical padding is 144px on desktop and 88px on mobile. Rules are 1px Hairline."
radius: "Sharp everywhere: 0px on images, charts, bars and panels. Only buttons use 2px."
---
# Annual Report Data Story — Design System
Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.
## Colors
- **Paper** `#F4EFE6` — Page background and the text color on photos and on Cobalt
- **Paper Deep** `#EAE3D6` — Alternating number panels and the donut chapter background
- **Ink** `#14171F` — Body text, numerals, primary chart series and bars
- **Slate** `#5A5E66` — Secondary text, axis labels and the third donut segment
- **Stone** `#A9A294` — Ghost line, prior-year bars, the fourth donut segment and land dots on the map
- **Hairline** `#D3CBBC` — 1px rules, chart gridlines and the rail track
- **Cobalt** `#1A3FE0` — The single accent: active line, highlighted bar and segment, markers, buttons and the closing chapter
## Typography
- **Display: big numerals, headlines, chart values at 28px and above** — Bodoni Moda Variable (OFL), weights 500. Self-host the font files.
- **Long read: letter, lede, takeaway sentences, pull quote in italic** — Newsreader Variable (OFL), weights 400/500. Self-host the font files.
- **Interface: rail, labels, axis text, tables and buttons, always with tabular-nums** — IBM Plex Sans (OFL), weights 400/500/600. Self-host the font files.
## Spacing & shape
- Spacing: Chapters after the cover sit in a main column with 200px left margin at 1024px and up, and 48px inner padding. Below 1024px the margin is 0 and padding is 16px. Chapter vertical padding is 144px on desktop and 88px on mobile. Rules are 1px Hairline.
- Radius: Sharp everywhere: 0px on images, charts, bars and panels. Only buttons use 2px.
## Motion
- Default ease power3.out, durations 0.5 to 1.2s. Text enters with a 24px rise and a fade. Nothing bounces. Every trigger plays once, except the line chart steps, the parallax and the rail, which follow the scroll in both directions.
- Count-up: 1.6s power2.out from 0 to the final value when the panel's top reaches 65% of the viewport. Each number is stacked in one grid cell over an invisible copy of its final text, so its width never changes while it counts.
- Reduced motion: every number shows its final value, the line is fully drawn with the last year highlighted, bars and donut are complete, map dots and markers are visible with no pulse, no parallax, no smooth scrolling. Stepping past notes in the line chapter still moves the highlight, with no transition. The rail still updates.
## Imagery
Three documentary-style photographs from one shoot at blue hour, plus one matching portrait: deep blue shadows, warm sodium light and fine film grain. They sit square-cornered with no filters added. All charts, the map, the signature and icons are drawn in code as inline SVG.
## Tone
Plainspoken, exact and a little dry, like a good business editor. Short sentences, real units, no corporate filler. It never reads as a regulated filing.
---
— Prompt by VibeFather · https://vibefather.ai/t/annual-report-data-story · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown
Make it yours
- A venture fund writing to its backers: set BRAND to the fund, BUSINESS to its thesis, swap revenue mix for portfolio sectors and the offices map for portfolio companies by city.
- A membership nonprofit reporting to donors: keep the seven chapters, recast the numbers as donors served and funds spent, and set LEADER to your executive director's letter.
- A public company founder publishing numbers in the open: use REPORT_YEAR on the cover, replace the invented figures with your reported ones and point the PDF download at your filing.
- A sustainability or impact team: set HERO_IMAGE to a wide site photo, rewrite the growth chapter as emissions or reach, and keep the dot-grid map for project locations.
Annual Report Data Story: questions and answers
How do I put my own numbers into the Annual Report Data Story template?
The Annual Report Data Story template keeps every figure in one content file, with sections for the cover, the year in numbers, growth, quarters, revenue mix, offices, the letter and the download. Replace the values there and the count-up numbers, line chart, bars, donut and dot-grid map all read from the same source. Keep the figures consistent with each other whenever you rewrite them, and leave the sample data label in place until they are real.
Can I use the Annual Report Data Story template for a nonprofit donor report instead of a company?
Yes. The Annual Report Data Story template ships with two demos, a cold chain freight company and a clean water nonprofit, and the second shows the layout holds when the subject changes. Set BRAND and BUSINESS to the cause, rewrite the chapter claims and revenue segments as donations and program spend, and swap the letter writer to your own LEADER. All figures must stay labeled as sample data until you replace them with audited numbers.
What do I change first in the Annual Report Data Story template?
Start with the five variables: BRAND, BUSINESS, REPORT_YEAR, LEADER and HERO_IMAGE. The Annual Report Data Story template uses REPORT_YEAR as the oversized numeral on the cover and as the last year on every chart, so set it before anything else. Then rewrite the chapter headlines and the letter so they argue about your business rather than the invented freight company.
Does the Annual Report Data Story template include a downloadable PDF, and how is it made?
Yes. The Annual Report Data Story template builds a three-page US Letter PDF from the same content file, with a cover carrying the brand and report year, a page of the four headline numbers and the quarterly bars, and a page with the letter. The build script writes it during the build, so the download stays in step with the page whenever you change a figure.
How do the charts and the office map behave for visitors who prefer reduced motion?
The Annual Report Data Story template shows every number and chart in its final state when a visitor has reduced motion turned on. The count-ups, the drawing line chart, the rising bars, the sweeping donut segments and the pulsing office markers only run for visitors who allow motion, so nobody loses a figure or an office because an animation was skipped.
How do I build an annual report data story with AI?
Copy the full prompt (Pro) from this page or run npx vibefather add annual-report-data-story, replace [BRAND], [LEADER], [BUSINESS] and [HERO_IMAGE] with your own content, and paste it into Claude Code, Codex, Cursor or another AI coding agent. The live demos were built from exactly that text.
Which AI model built the Annual Report Data Story demo?
The Cold chain freight company case was built by Claude Opus 5.5 in Claude Code; the Clean water nonprofit case was built by Claude Sonnet 5.5 in Claude Code. Each build used the published prompt with nothing added, so you can compare the models side by side.
What tech stack and pages does the Annual Report Data Story template use?
Annual Report Data Story is a single-page site built with Tailwind CSS, GSAP and Plain HTML, with scroll animation and micro-interactions. The prompt fixes the stack so every AI tool builds the same kind of project, and the result runs as a static site you can host anywhere.
Is the Annual Report Data Story template free to use?
Annual Report Data Story is a Pro template: the brief, stack and variables are public, and the full prompt, the source code of the live demo and a commercial license come with VibeFather Pro. Its DESIGN.md is free for personal projects.
Does the Annual Report Data Story template work on mobile?
Yes. Every Annual Report Data Story build was tested on a phone-sized screen as well as desktop before it went live, checking layout, text size and touch targets. Open the live demo on your phone, or switch the preview on this page to mobile view, to check it yourself.