# Big day scene

The big day scene is about one date. A single calendar cell grows to fill the middle of the frame with the day's count inside it, and the date is the headline. Use it for the busiest day, a launch day, a personal record.

> Live preview: see the scene playing at https://bettertyped.github.io/react-wrapped/docs/scenes/big-day/
>
> One cell of the year, grown to the size of the frame.

## Installation

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

## Usage

Call `bigDayScene` 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 { bigDayScene } from "@react-wrapped/scenes";

export const scene = bigDayScene(
  {
    eyebrow: "Your biggest day",
    count: 58,
    unit: "CONTRIBUTIONS",
    title: ["Thursday,", "April 16"],
    lede: "That's not a day, that's a release.",
  },
  { key: "biggest-day", label: "Biggest day" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `eyebrow` | `string` | The small line above the tile. |
| `count` | `number` | The number inside the tile. |
| `suffix?` | `string` | After the count, for one too big to show whole: `K`, `M`. |
| `unit` | `string` | The small word under the count, inside the tile. Short and in capitals reads best. |
| `title` | `readonly string[]` | The headline, usually the date on two lines. |
| `lede` | `string` | The line at the bottom. |

## 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 tile springs up from a single small cell with a turn, and eighteen sparks burst out of it. The count runs inside the tile, climbing or as a slot machine (the seed picks), then the date rises. The tile rocks once before the scene rests. 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

In the sample the line under the date changes with the size of the day: 40 or more gets a joke about a release.

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

## Related

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

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