# Big number scene

The big number scene gives one count the whole frame. The number climbs in type 300 pixels tall, the headline says what was counted, and a calendar or a row of cells shows it. Use it for the total of the year, the longest streak, anything that is a single figure.

> Live preview: see the scene playing at https://bettertyped.github.io/react-wrapped/docs/scenes/big-number/
>
> The number counts while the year fills in under it.

## Installation

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

## Usage

Call `bigNumberScene` 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 } from "@react-wrapped/core";
import { bigNumberScene } 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 = bigNumberScene(
  {
    eyebrow: "In the last 12 months you made",
    value: 2052,
    title: ["contributions."],
    lede: "That's **5.6 a day**, on **241** active days out of 365.",
    calendar,
    counter: "climb",
    variant: 0,
  },
  { key: "total", label: "Total contributions" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `eyebrow` | `string` | The small line above the number. It reads on into the number: "This year you made". |
| `value` | `number` | The count. A decimal such as 69.9 climbs with its decimal. |
| `suffix?` | `string` | Set right after the number, for a count too big to show whole: `K`, `M`, `%`. |
| `title` | `readonly string[]` | The headline under the number, one entry per line. |
| `lede` | `string` | The line at the bottom. It says what the number means. |
| `calendar?` | `CalendarLevels` | Shows the year under the headline, with month names when it has them. |
| `cells?` | `number` | Shows a row of lit cells instead, one per unit, 60 at most. Made for a streak counted in days. |
| `counter` | `"climb" \| "slot"` | How the number counts: a smooth climb, or digits that spin and lock in from the left like a slot machine. |
| `variant` | `number` | `0` lets the number rise out of a blur. `1` springs it up from its bottom left corner. |

> The number is set in tabular figures, so it does not shiver while it climbs, and a count too wide for the frame is set smaller until it fits.

## 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 |
| --- | --- | --- |
| `eyebrow` | Line above | One line |
| `title` | Headline | Lines, one per line on screen |
| `lede` | Line under it | One line |

## How it comes in

The small lines rise in, the number starts counting at 0.2 seconds and takes two seconds to land, and the headline rises while it counts. A calendar pops in cell by cell from the left. A row of cells does the same and finishes with one small wave. 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 uses it twice. This is the second time, for the longest streak, with `cells` instead of a calendar.

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

## Related

- [Scenes](https://bettertyped.github.io/react-wrapped/docs/scenes/)
- [Big day scene](https://bettertyped.github.io/react-wrapped/docs/scenes/big-day/)
- [Bars scene](https://bettertyped.github.io/react-wrapped/docs/scenes/bars/)
- [Chart scene](https://bettertyped.github.io/react-wrapped/docs/scenes/chart/)
- [Custom scene](https://bettertyped.github.io/react-wrapped/docs/guides/custom-scene/)

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