# Year in Review Page > A Wrapped-style year in review of a team's workspace: giant numbers, a chapter and chart per stat, a story player and a share poster. - Type: React template (Templates) - Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing) - Version: 1.0.0 - Install: `npx wingo-ui@latest add year-in-review-page` - Docs: https://wingo-ui.com/templates/year-in-review-page ## Interaction The hero sets "2026, wrapped." in giant type beside a stack of drawn stat cards, and the tasks total rolls up once on load. A chapter strip under the hero (and, from 1280px, a sticky dot rail that follows the chapter in view) jumps to eight chapters: tasks per month, a year of daily activity, words written, hours saved by automations, top projects, favorite reactions, the hour-of-day clock that names the team early birds or night owls, and the MVPs. Each chapter's big number rolls up and its chart grows the first time it scrolls into view (everything is final in the server markup). Hover, tap or Tab to a month, a day, an hour or a point for its value. The personality card flips to show the scores behind it. Play your story (hero, strip or rail) opens a full-screen story player: one card per chapter with a progress bar on top that moves on by itself (paused with Space or the pause button, never under reduced motion); tap the left third or press Left to go back, tap the rest or press Right to move on, swipe sideways on touch, swipe down or press Escape to return to the page. The share section shows a drawn poster with Share (the system sheet where there is one), Copy link and Download image, each confirming inline. ## Installation ```bash npx wingo-ui@latest add year-in-review-page ``` Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates. With shadcn: `npx shadcn@latest add @wingo-ui/year-in-review-page` (needs the @wingo-ui registry with your API key in components.json) Files: - `components/templates/year-in-review-page.tsx` - `components/templates/year-in-review-page-data.ts` npm dependencies: `npm i @radix-ui/react-dialog d3-scale d3-shape lucide-react motion` Wingo UI dependencies (installed automatically): - [Marketing Section](https://wingo-ui.com/components/marketing-section) ([Markdown](https://wingo-ui.com/components/marketing-section.md)) - [Marketing Header](https://wingo-ui.com/components/marketing-header) ([Markdown](https://wingo-ui.com/components/marketing-header.md)) - [Marketing Footer](https://wingo-ui.com/components/marketing-footer) ([Markdown](https://wingo-ui.com/components/marketing-footer.md)) - [CTA Section](https://wingo-ui.com/components/cta-section) ([Markdown](https://wingo-ui.com/components/cta-section.md)) - [Animated Counter](https://wingo-ui.com/components/animated-counter) ([Markdown](https://wingo-ui.com/components/animated-counter.md)) - [Avatar](https://wingo-ui.com/components/avatar) ([Markdown](https://wingo-ui.com/components/avatar.md)) - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [Heatmap calendar](https://wingo-ui.com/components/heatmap-calendar) ([Markdown](https://wingo-ui.com/components/heatmap-calendar.md)) - [Chart kit](https://wingo-ui.com/components/chart-kit) ([Markdown](https://wingo-ui.com/components/chart-kit.md)) - [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md)) - [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md)) - [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md)) - [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md)) ## Usage ```tsx // app/(app)/wrapped/page.tsx "use client" import Link from "next/link" import { YearInReviewPage } from "@/components/templates/year-in-review-page" export default function WrappedRoute() { return ( { if (method === "copy") await navigator.clipboard.writeText(url) if (method === "download") window.open(`/api/wrapped/poster?team=northwind`, "_blank") }} /> ) } ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `design?` | `"classic" \| "vivid" \| "mono"` | `"classic"` | The whole page's look. classic: a soft glow hero beside drawn cards, chapters washed in their color, raised chart cards; vivid: a dark mesh hero, every chapter a saturated color band with light charts, a pill header, a band CTA and a wordmark footer; mono: no color at all, ink charts, rules between chapters, giant type, a transparent header and a simple footer. ctaProps, headerProps and footerProps still win. | | `mode?` | `"scroll" \| "stories"` | `"scroll"` | scroll: the long page. stories: the full-screen story player opens over it; closing it (Escape, the X, a swipe down) returns to the page and calls onModeChange. | | `onModeChange?` | `(mode: YearInReviewPageMode) => void` | | Runs when the story player opens or closes. | | `storyDuration?` | `number` | `6000` | Milliseconds each story card stays before the next one (1500 or more). | | `autoAdvance?` | `boolean` | `true` | Story cards move on by themselves with a filling progress bar. Reduced motion always turns it off. | | `year?` | `number` | `2026` | The year in the title, the poster and the story. | | `teamName?` | `string` | `"Northwind"` | The team or workspace the year belongs to. | | `stats?` | `WrappedStats` | `"WRAPPED_STATS"` | { tasks, docs, words, automationRuns, hoursSaved, comments, reactions, members, projects }: the year's totals. | | `months?` | `WrappedMonth[]` | `"WRAPPED_MONTHS"` | { month (yyyy-mm), tasks, words, partial? } per month; partial hatches the month still in progress. | | `activity?` | `WrappedDay[]` | `"WRAPPED_ACTIVITY"` | { date (yyyy-mm-dd), value } tasks shipped per day, for the heatmap, the busiest day and the streak. | | `endDate?` | `string` | `"2026-10-11"` | The last day the year covers (yyyy-mm-dd): the heatmap's last column and its today ring. | | `hours?` | `number[]` | `"WRAPPED_HOURS"` | Tasks shipped per hour of the day, 12 AM first (24 values): the clock, the peak hour and the persona. | | `projects?` | `WrappedProject[]` | `"WRAPPED_PROJECTS"` | { id, name, tasks, lead }; the top five are ranked. | | `reactions?` | `WrappedReaction[]` | `"WRAPPED_REACTIONS"` | { emoji, label, count } most used reactions. | | `automations?` | `WrappedAutomation[]` | `"WRAPPED_AUTOMATIONS"` | { id, name, runs } top automations. | | `people?` | `WrappedPerson[]` | `"WRAPPED_PEOPLE"` | { id, name, role, title, value, unit, note, src? }: the MVPs and their superlatives. | | `personality?` | `WrappedPersonality` | `"WRAPPED_PERSONALITY"` | { name, tagline, description, rarity, traits: { label, score }[] } for the personality card. | | `longestDoc?` | `WrappedDoc` | `"WRAPPED_LONGEST_DOC"` | { title, author, words } named in the words chapter. | | `accentColors?` | `string[]` | `"WRAPPED_ACCENTS"` | One CSS color per chapter (shipped, rhythm, words, autopilot, projects, reactions, persona, MVPs); also lights the hero, the personality card and the poster. Defaults to the chart palette. mono ignores it. | | `shareUrl?` | `string` | `"https://acme.com/wrapped/northwind-2026"` | The link the share buttons hand out. | | `onShare?` | `(method: "copy" \| "download" \| "native", url: string) => (void \| Promise)` | | Copy link, Download image and Share; a returned promise keeps the button loading, a rejection shows an error. Without it the page copies the link, pretends the download (900 ms) and opens the system share sheet where there is one (else copies). | | `labels?` | `Partial` | `"DEFAULT_YEAR_IN_REVIEW_PAGE_LABELS"` | Every visible string; {placeholders} are filled from the data. | | `showAnnouncement?` | `boolean` | `true` | The strip above the header bar. | | `showNav?` | `boolean` | `true` | The chapter strip under the hero and the sticky dot rail (from 1280px). | | `showShipped?` | `boolean` | `true` | The tasks per month chapter. | | `showRhythm?` | `boolean` | `true` | The daily activity heatmap chapter. | | `showWords?` | `boolean` | `true` | The words written chapter. | | `showAutomations?` | `boolean` | `true` | The hours saved chapter. | | `showProjects?` | `boolean` | `true` | The top projects chapter. | | `showReactions?` | `boolean` | `true` | The reactions chapter. | | `showPersona?` | `boolean` | `true` | The hour of day clock with the early bird or night owl persona. | | `showPeople?` | `boolean` | `true` | The MVPs chapter. | | `showPersonality?` | `boolean` | `true` | The personality card (and its story card). | | `showShare?` | `boolean` | `true` | The share section with the poster. | | `showCta?` | `boolean` | `true` | The closing call to action. | | `ctaVariant?` | `"inverted" \| "soft" \| "split"` | `"inverted"` | The closing band: a solid band, a gray band, or copy beside the buttons on a raised panel. Applies to the classic design. | | `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | The active dot of the chapter rail and the personality score bars. | | `ctaTone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Play your story, Share, the header's Get started and the closing band; brand is the marketing orange. | | `header?` | `boolean` | `true` | The marketing header; off inside a site or app layout. | | `footer?` | `boolean` | `true` | The marketing footer with its newsletter form. | | `headerProps?` | `Partial` | | Passed to MarketingHeader. | | `footerProps?` | `Partial` | | Passed to MarketingFooter. | | `ctaProps?` | `Partial` | | Overrides for the closing CtaSection (hrefs, labels, variant...). | | `onSubscribe?` | `(email: string) => (void \| Promise)` | | The footer newsletter; a rejected promise shows an error. | | `animateIn?` | `boolean` | `true` | Big numbers roll up and charts grow the first time they scroll into view; false keeps the page still (thumbnails). Reduced motion always does. | | `locale?` | `string` | `"en-US"` | Intl locale for the numbers, months, days and hours. | | `linkComponent?` | `(props: LinkComponentProps) => ReactNode` | `""` | The router link for every link on the page (next/link in an app). | | `className?` | `string` | | Classes for the root. | | `classNames?` | `Partial>` | | Classes for header, hero, title, counter, art, chapters, nav, chapter, panel, people, personality, share, poster, story, cta and footer. | ## Parts ### YEAR_IN_REVIEW_SAMPLE (constant) All the sample content in one object: stats, months, activity, hours, projects, reactions, automations, people, personality and longestDoc. ### WRAPPED_STATS (constant) Northwind's totals: 12,480 tasks, 1,284 docs, 612,400 words, 48,920 automation runs, 1,860 hours saved. ### WRAPPED_MONTHS (constant) January to October 2026, October still in progress. ### WRAPPED_ACTIVITY (constant) 284 days of seeded activity that add up to each month's total. ### WRAPPED_END_DATE (constant) "2026-10-11", the last day of the sample. ### WRAPPED_HOURS (constant) Tasks per hour of the day, peaking at 10 AM. ### WRAPPED_PROJECTS (constant) The five busiest projects with their leads. ### WRAPPED_REACTIONS (constant) Six reactions, ๐Ÿš€ first. ### WRAPPED_AUTOMATIONS (constant) The four automations that ran the most. ### WRAPPED_PEOPLE (constant) Six MVPs with a superlative each. ### WRAPPED_PERSONALITY (constant) The Steady Shippers, with four trait scores. ### WRAPPED_LONGEST_DOC (constant) The longest doc of the year. ### WRAPPED_ACCENTS (constant) The default chapter colors: the chart palette's series vars, ordered so neighbours differ. ### DEFAULT_YEAR_IN_REVIEW_PAGE_LABELS (constant) The English strings. ### YEAR_IN_REVIEW_PAGE_DESIGNS (constant) The design names, classic first: ["classic", "vivid", "mono"]. ### YearInReviewPageProps (type) Props of YearInReviewPage. ### YearInReviewPageDesign (type) "classic" | "vivid" | "mono". ### YearInReviewPageMode (type) "scroll" | "stories". ### YearInReviewChapter (type) The chapter keys, in page order. ### YearInReviewShareMethod (type) "copy" | "download" | "native". ### YearInReviewPageLabels (type) The strings labels can override. ### YearInReviewPageSlot (type) The classNames keys. ### WrappedStats (type) The year's totals. ### WrappedMonth (type) One month: tasks, words, partial. ### WrappedDay (type) One day of activity. ### WrappedProject (type) One ranked project. ### WrappedReaction (type) One reaction and its count. ### WrappedAutomation (type) One automation and its runs. ### WrappedPerson (type) One MVP and the superlative. ### WrappedPersonality (type) The personality card's content. ### WrappedTrait (type) One personality score. ### WrappedDoc (type) A doc named in the words chapter. ## Examples - **Vivid design**: design="vivid": a dark mesh hero, every chapter a saturated color band with light charts, a pill header and a wordmark footer. - **Mono design**: design="mono": no color at all. Ink charts, hairline rules between chapters, giant type and a transparent header. - **Story mode**: mode="stories": the full-screen player opens on load. Tap the sides, swipe or use the arrow keys; Escape returns to the page. - **Brand orange, custom colors**: ctaTone and tone brand, with accentColors swapped for a warm palette and the closing band split. - **Embedded, short**: Without the marketing header and footer, the people and reactions chapters hidden: a Wrapped inside your app. ## See also - [Landing Page](https://wingo-ui.com/templates/landing-page) ([Markdown](https://wingo-ui.com/templates/landing-page.md)) - [Launch Page](https://wingo-ui.com/templates/launch-page) ([Markdown](https://wingo-ui.com/templates/launch-page.md)) - [Heatmap calendar](https://wingo-ui.com/components/heatmap-calendar) ([Markdown](https://wingo-ui.com/components/heatmap-calendar.md)) - [Animated Counter](https://wingo-ui.com/components/animated-counter) ([Markdown](https://wingo-ui.com/components/animated-counter.md)) - [Bar chart](https://wingo-ui.com/components/bar-chart) ([Markdown](https://wingo-ui.com/components/bar-chart.md)) --- Canonical: https://wingo-ui.com/templates/year-in-review-page More components: https://wingo-ui.com/components ยท Index for agents: https://wingo-ui.com/llms.txt