Build a Year-in-Review Page With AI That People Actually Scroll

TLDR: You can build a year-in-review page with AI in one conversation: a big hero number, a row of key metrics, a chart or two, a short milestone timeline, and scroll animations that make it feel alive. The build is the easy part now. The real work is editing your numbers down to the five or six that tell the true story, each paired with a comparison so a reader knows whether it is good. Describe the page, hand the model your data, ask for one self-contained HTML file, then publish it as a live link so every counter still counts up.

Every December the same thing happens. Someone volunteers to put together the year-end recap, opens a slide template, and three hours later has fourteen slides of bullet points that one person will skim. The numbers were good. The telling was flat.

A year-in-review page fixes the telling. Instead of static slides, you get a page that counts up as it loads, reveals each section as you scroll, and ends on a number people actually remember. And you can build a year-in-review page with AI without a designer, a template, or a line of code you wrote yourself. This guide covers what to put on the page, how to pick numbers that mean something, the prompt that builds it, and how to get it in front of people with the animations intact.

What is a year-in-review page, and why build one?

It is a single scrollable page that sums up a stretch of time, usually a calendar year, in numbers and moments. Think of the “Wrapped” style recaps you get from music apps, but for your company, your side project, your nonprofit, your team, or even your own year. The format works because it does three things a slide deck cannot:

• It moves. Numbers count up from zero. Sections fade in as you scroll. Motion signals “this was a year of momentum” before anyone reads a word.
• It is one thing. No deck to flip through, no PDF to download. One link, one scroll, done in ninety seconds.
• It is honest when you make it honest. A page forces you to pick what matters. You cannot hide a weak year behind forty slides.

People build these for year-end customer updates, investor recaps, internal all-hands, community milestones, and personal reflection. The audience changes; the shape stays the same.

What goes on the page?

A strong year-in-review page is a stack of sections, each with one job. Here is the anatomy that works, top to bottom:

1. One headline number. The single stat that captures the year. Not five numbers fighting for attention, one, huge, at the top. “1,284 new customers.” “11 million meals served.” “A 40 percent faster ship time.”
2. A metric row. Five to eight supporting numbers, each with a comparison so the reader knows whether it is good. A number alone is trivia; a number next to “up 2x from last year” is a story.
3. A chart or two. One trend over the twelve months. Revenue by quarter, signups by month, something that goes up and to the right, or honestly shows where it dipped.
4. A milestone timeline. Three to six real moments with rough dates. The launch, the hire, the thousandth customer, the day you broke even.
5. One human highlight. A quote, a photo, a single story. Numbers prove the year happened; one human moment makes people feel it.
6. A close. A thank-you and a line about what comes next, then a clear next step if there is one.

Which numbers actually belong on the page?

This is where most recaps go wrong. People reach for the biggest-sounding number instead of the truest one. The fix is to pick numbers a reader can judge, and to kill the ones that only sound impressive.

The rule: every number on the page should sit next to a comparison, a baseline, last year, or a goal. If you cannot say whether a number is good, the reader cannot either, and it does not belong on the page. For more on this, see how to make AI charts that actually say something and which chart to use for which story.

The prompt that builds the page

Once you know your numbers and your story, the build is one prompt. Write it like a brief, not a wish. Name the sections, hand over the data, set the feel, and ask for a single self-contained file. Here is a full prompt you can copy, paste your numbers into, and run in Claude, ChatGPT, or any capable model:

Build me a year-in-review page as ONE complete, self-contained HTML
file with all CSS and JavaScript inlined, no external libraries, no
external images or fonts.

Audience: our customers. Tone: celebratory but grounded, confident,
not hypey.

Structure, top to bottom:
1. A full-height hero with one giant headline number that counts up
   from zero on load: 1,284 new customers in 2026.
2. A row of metric cards, each with the number and a comparison line:
   - Reply rate: 18% (up from 9%)
   - Signup conversion: 5% (up from 2%)
   - Customers renewed: 94%
   - Avg response time: 2.1 hrs (down from 6)
3. A bar chart of signups by quarter: Q1 180, Q2 240, Q3 360, Q4 504.
4. A vertical timeline with four milestones:
   - Feb: shipped the new onboarding
   - May: hired our first support lead
   - Aug: crossed 1,000 customers
   - Nov: broke even
5. A short highlight section with a customer quote.
6. A closing thank-you and a single call-to-action button.

Feel: generous white space, one bold accent color, big display
headings, a calm neutral background. Animate each section so it
fades and slides up as it scrolls into view. Counters animate up
when they enter the viewport. Make it fully responsive for phones.

Every line is doing a job. The structure list stops the model from inventing its own layout. The data inline means it builds with your real numbers, not placeholders. The feel section is the art direction, and “fades and slides up as it scrolls into view” is what turns a static page into one that feels alive. For the vocabulary to describe a mood precisely, see feel words that art-direct AI output.

If your numbers live in a spreadsheet, you do not have to retype them. Paste the rows straight in and let the model pull the story out. There is a whole approach to this in turning a spreadsheet into a report with AI.

How do you make it feel alive, not static?

The difference between a page people skim and one they scroll all the way down is motion, used with restraint. Two effects carry almost all the weight:

• Counters that count up. A number that animates from zero to 1,284 when it scrolls into view reads as an achievement. The same number printed flat reads as a fact. Ask for counters tied to the viewport, not to page load, so they fire as the reader reaches them.
• Scroll reveals. Each section fades and slides up as it enters the screen. It paces the story and keeps the reader moving down.

Resist the urge to add more. Confetti on every scroll, five different transitions, numbers spinning like a slot machine: that reads as a demo, not a recap. One reveal style, one counter animation, applied consistently, is what looks intentional. If you want to go deeper on tasteful motion, adding animation to AI pages and scrollytelling with AI both cover it.

How do you fix what the AI gets wrong?

The first draft will be close but not right. Fix it in plain language, one change at a time:

Good start. Three changes:
1. The hero number is too small on mobile. Make it fill most of the
   screen width.
2. The counters animate too fast. Slow them to about 1.5 seconds.
3. The accent color is too neon. Use a deeper, warmer tone.

Keep each round small and specific. “Make it better” gives the model nothing to act on; “slow the counters to 1.5 seconds” gives it a target. This is the same habit that works for every AI page: short, concrete, one thing at a time.

Getting it in front of people, with the motion intact

Here is the trap at the finish line. You built a page that counts up and animates, and then you screenshot it and paste the image into an email. Now it is a frozen number. The animation, the whole reason the format works, is gone.

To keep it alive, the page has to stay a real, living page when you send it. That is the natural last step, and it is where VisiblePage fits. Paste your HTML or drop a ZIP and you get a live URL in seconds, with every counter still counting and every chart still drawing. Serve it fast from the edge, keep it public or put it behind a password for an internal recap, and point a custom domain like 2026.yourcompany.com at it so it lives at a real address. Best part: it is one canonical link, so when the December numbers finalize, you update the page and everyone who has the link sees the new version. No “recap_v2_final.html” making the rounds.

Try it now: Publish your AI-generated HTML with VisiblePage and get a live link in seconds.

Frequently asked questions

Can AI really build a whole year-in-review page? Yes. A year-in-review page is a stack of numbers, a few charts, a timeline, and some scroll animation, which is exactly the kind of self-contained page AI builds reliably in one conversation. You bring the numbers and the story; the model writes the HTML, CSS, and JavaScript into a single file you can refine with plain-language feedback.

What should go on a year-in-review page? Lead with one headline number that captures the year, then a row of five to eight supporting metrics, each with a comparison to last year or a target. Add one or two charts that show a trend, a short timeline of real milestones, one human highlight, and a closing thank-you or call to action. Cut anything that only sounds impressive but means nothing.

How do I keep the counters and charts animating when I share it? Share the real page, not a screenshot. A picture of an animated counter is a frozen number. Publish the HTML as a live page and the counters still count up, the charts still draw, and the scroll reveals still fire for whoever opens the link, on any device. With VisiblePage you paste the HTML or drop a ZIP and get that live link immediately.

What data do I need before I start? Less than you think. A plain list works: total customers or revenue or signups, the growth versus last year, three to five milestones with rough dates, and one or two moments worth calling out. You can paste a messy spreadsheet and ask the AI to pull the story out of it.

The short version

A year-in-review page is one of the best things you can build with AI because it is small, self-contained, and genuinely better as a live page than as anything you could print. Pick the five or six numbers that tell your true story, pair each with a comparison, ask the AI for one self-contained HTML file with animated counters and scroll reveals, refine it in small plain-language passes, and publish it as a link that keeps every number moving. The year was the hard part. The recap is one conversation.