Year in Review Page

Add to a project

Pro item: the CLI needs a Pro account. See plans

Usage

// 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 (
    <YearInReviewPage
      linkComponent={Link}
      teamName="Northwind"
      year={2026}
      ctaTone="brand"
      shareUrl="https://acme.com/wrapped/northwind-2026"
      onShare={async (method, url) => {
        if (method === "copy") await navigator.clipboard.writeText(url)
        if (method === "download") window.open(`/api/wrapped/poster?team=northwind`, "_blank")
      }}
    />
  )
}

Props

• designdefault "classic"
  "classic" | "vivid" | "mono"

  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.

• modedefault "scroll"
  "scroll" | "stories"

  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.

• storyDurationdefault 6000
  number

  Milliseconds each story card stays before the next one (1500 or more).

• autoAdvancedefault true
  boolean

  Story cards move on by themselves with a filling progress bar. Reduced motion always turns it off.

• yeardefault 2026
  number

  The year in the title, the poster and the story.

• teamNamedefault "Northwind"
  string

  The team or workspace the year belongs to.

• statsdefault "WRAPPED_STATS"
  WrappedStats

  { tasks, docs, words, automationRuns, hoursSaved, comments, reactions, members, projects }: the year's totals.

• monthsdefault "WRAPPED_MONTHS"
  WrappedMonth[]

  { month (yyyy-mm), tasks, words, partial? } per month; partial hatches the month still in progress.

• activitydefault "WRAPPED_ACTIVITY"
  WrappedDay[]

  { date (yyyy-mm-dd), value } tasks shipped per day, for the heatmap, the busiest day and the streak.

• endDatedefault "2026-10-11"
  string

  The last day the year covers (yyyy-mm-dd): the heatmap's last column and its today ring.

• hoursdefault "WRAPPED_HOURS"
  number[]

  Tasks shipped per hour of the day, 12 AM first (24 values): the clock, the peak hour and the persona.

• projectsdefault "WRAPPED_PROJECTS"
  WrappedProject[]

  { id, name, tasks, lead }; the top five are ranked.

• reactionsdefault "WRAPPED_REACTIONS"
  WrappedReaction[]

  { emoji, label, count } most used reactions.

• automationsdefault "WRAPPED_AUTOMATIONS"
  WrappedAutomation[]

  { id, name, runs } top automations.

• peopledefault "WRAPPED_PEOPLE"
  WrappedPerson[]

  { id, name, role, title, value, unit, note, src? }: the MVPs and their superlatives.

• personalitydefault "WRAPPED_PERSONALITY"
  WrappedPersonality

  { name, tagline, description, rarity, traits: { label, score }[] } for the personality card.

• longestDocdefault "WRAPPED_LONGEST_DOC"
  WrappedDoc

  { title, author, words } named in the words chapter.

• accentColorsdefault "WRAPPED_ACCENTS"
  string[]

  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.

• shareUrldefault "https://acme.com/wrapped/northwind-2026"
  string

  The link the share buttons hand out.

• onShare
  (method: "copy" | "download" | "native", url: string) => (void | Promise<unknown>)

  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).

• labelsdefault "DEFAULT_YEAR_IN_REVIEW_PAGE_LABELS"
  Partial<YearInReviewPageLabels>

  Every visible string; {placeholders} are filled from the data.

• showAnnouncementdefault true
  boolean

  The strip above the header bar.

• showNavdefault true
  boolean

  The chapter strip under the hero and the sticky dot rail (from 1280px).

• showShippeddefault true
  boolean

  The tasks per month chapter.

• showRhythmdefault true
  boolean

  The daily activity heatmap chapter.

• showWordsdefault true
  boolean

  The words written chapter.

• showAutomationsdefault true
  boolean

  The hours saved chapter.

• showProjectsdefault true
  boolean

  The top projects chapter.

• showReactionsdefault true
  boolean

  The reactions chapter.

• showPersonadefault true
  boolean

  The hour of day clock with the early bird or night owl persona.

• showPeopledefault true
  boolean

  The MVPs chapter.

• showPersonalitydefault true
  boolean

  The personality card (and its story card).

• showSharedefault true
  boolean

  The share section with the poster.

• showCtadefault true
  boolean

  The closing call to action.

• ctaVariantdefault "inverted"
  "inverted" | "soft" | "split"

  The closing band: a solid band, a gray band, or copy beside the buttons on a raised panel. Applies to the classic design.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The active dot of the chapter rail and the personality score bars.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Play your story, Share, the header's Get started and the closing band; brand is the marketing orange.

• headerdefault true
  boolean

  The marketing header; off inside a site or app layout.

• footerdefault true
  boolean

  The marketing footer with its newsletter form.

• headerProps
  Partial<MarketingHeaderProps>

  Passed to MarketingHeader.

• footerProps
  Partial<MarketingFooterProps>

  Passed to MarketingFooter.

• ctaProps
  Partial<CtaSectionProps>

  Overrides for the closing CtaSection (hrefs, labels, variant...).

• onSubscribe
  (email: string) => (void | Promise<unknown>)

  The footer newsletter; a rejected promise shows an error.

• animateIndefault true
  boolean

  Big numbers roll up and charts grow the first time they scroll into view; false keeps the page still (thumbnails). Reduced motion always does.

• localedefault "en-US"
  string

  Intl locale for the numbers, months, days and hours.

• linkComponentdefault "<a>"
  (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<Record<YearInReviewPageSlot, string>>

  Classes for header, hero, title, counter, art, chapters, nav, chapter, panel, people, personality, share, poster, story, cta and footer.

Parts