# Summary scene

The summary scene closes a video with everything on one card: who it is about, the year as a grid, up to four headline numbers, and the tokens for what this person got. Use it last. It holds the longest, so it is the frame people screenshot.

> Live preview: see the scene playing at https://bettertyped.github.io/react-wrapped/docs/scenes/summary/
>
> The whole year on one card, held for two and a half seconds.

## Installation

```bash
pnpm add @react-wrapped/scenes @react-wrapped/core gsap
```

## Usage

Call `summaryScene` with what the scene says, then with the key and the label it goes by. What comes back is a scene placed in a video: put it in the `scenes` array of a [player](https://bettertyped.github.io/react-wrapped/docs/player/wrapped-player/). The code below places the scene in the preview above.

```tsx
import { type CalendarLevels, PIXEL_ART } from "@react-wrapped/core";
import { summaryScene } from "@react-wrapped/scenes";

// The year as a grid of cells. `calendarFromCounts` makes one from a count per day.
declare const calendar: CalendarLevels;

export const scene = summaryScene(
  {
    handle: "ada",
    avatarUrl: null,
    caption: "Orbit Wrapped, Oct 2025 to Oct 2026",
    calendar,
    stats: [
      { label: "Contributions", value: "2,052" },
      { label: "Longest streak", value: "48 days" },
      { label: "Biggest day", value: "58" },
      { label: "Top language", value: "TypeScript" },
    ],
    tokens: [
      { name: "The Marathoner", kind: "Coder type", rarity: "epic", art: PIXEL_ART.mountain },
      { name: "Rubber Duck", kind: "Easter egg", rarity: "legendary", art: PIXEL_ART.duck },
    ],
  },
  { key: "share-card", label: "Share card" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `handle` | `string` | Shown as @handle at the top of the card. |
| `avatarUrl` | `string \| null` | A picture for the corner of the card. With `null`, the first two letters of the handle. |
| `caption` | `string` | The line under the handle. |
| `calendar?` | `CalendarLevels` | The year as a grid of cells, under the name. |
| `stats` | `readonly { label: string; value: string }[]` | The headline numbers, already formatted. Four fit one row. |
| `tokens?` | `readonly WrappedToken[]` | What this person got, as tinted plates: pixel art, a name and a rarity each. |

> The [share card](https://bettertyped.github.io/react-wrapped/docs/graphics/share-card/) is the same content as a PNG. Build both from one set of numbers and they always agree.

## What a viewer can rewrite

These texts are the scene's fields. From the pencil on the [timeline](https://bettertyped.github.io/react-wrapped/docs/player/timeline/) a viewer opens the [scene editor](https://bettertyped.github.io/react-wrapped/docs/player/scene-editor/) and rewrites them. Numbers, charts and pictures stay yours. Place the scene with `locked: true` and it offers none of them.

| Field | In the editor | Edited as |
| --- | --- | --- |
| `caption` | Line under your name | One line |

## How it comes in

The card comes up with a slight turn. The year sweeps in left to right as one stroke, the numbers rise one by one, and the tokens spring in last. The scene then holds for at least as long as its text takes to read. The way out is not the scene's: the player adds a [transition](https://bettertyped.github.io/react-wrapped/docs/transitions/).

## In a real year

The sample shows the coder type and the rarest drop found so far, so the card changes as the scan finds more.

> Live preview: see the scene playing at https://bettertyped.github.io/react-wrapped/docs/scenes/summary/

## Related

- [Scenes](https://bettertyped.github.io/react-wrapped/docs/scenes/)
- [Trophies scene](https://bettertyped.github.io/react-wrapped/docs/scenes/trophies/)
- [Persona scene](https://bettertyped.github.io/react-wrapped/docs/scenes/persona/)
- [Opening scene](https://bettertyped.github.io/react-wrapped/docs/scenes/opening/)
- [Custom scene](https://bettertyped.github.io/react-wrapped/docs/guides/custom-scene/)

Source: https://bettertyped.github.io/react-wrapped/docs/scenes/summary/