# Opening scene

The opening scene is the first frame of a video. It draws the whole year as a grid of cells, brings them in, then sets the headline and one line under it. Use it once, first, to say whose year this is and which twelve months it covers.

> Live preview: see the scene playing at https://bettertyped.github.io/react-wrapped/docs/scenes/opening/
>
> 365 cells settling into a year, then the headline.

## Installation

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

## Usage

Call `openingScene` 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 { openingScene } 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 = openingScene(
  { title: "My year on Orbit.", period: "@ada, Oct 2025 to Oct 2026", calendar, variant: 0 },
  { key: "opening", label: "Opening" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `title` | `string` | The headline. One line is split into two balanced lines at a word. A line break in the text is kept as it is. |
| `period` | `string` | The line under the headline: who and when. |
| `calendar` | `CalendarLevels` | The year as cells: a level from 0 to 4 per day, oldest first, and how many empty slots come before the first day. |
| `variant` | `number` | `0` flies the cells in from everywhere and lets them settle. `1` types the year out week by week. |

## 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 |
| --- | --- | --- |
| `title` | Headline | One line |
| `period` | Line under it | One line |

## How it comes in

The cells come first, either from all sides or week by week. The headline rises out of its mask at 0.9 seconds and the line under it follows. Last, a ripple runs across the year from the first week to the 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 opens on this scene. The seed picks the variant, so two people rarely get the same entrance.

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

## Related

- [Scenes](https://bettertyped.github.io/react-wrapped/docs/scenes/)
- [Big number scene](https://bettertyped.github.io/react-wrapped/docs/scenes/big-number/)
- [Summary scene](https://bettertyped.github.io/react-wrapped/docs/scenes/summary/)
- [Persona scene](https://bettertyped.github.io/react-wrapped/docs/scenes/persona/)
- [Custom scene](https://bettertyped.github.io/react-wrapped/docs/guides/custom-scene/)

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