# Persona scene

The persona scene gives the year a name. Pixel art comes in from the centre, the name lands under it, and one line says why. Use it once, near the end, for the type you assign from the numbers: The Marathoner, The Night Pilot.

> Live preview: see the scene playing at https://bettertyped.github.io/react-wrapped/docs/scenes/persona/
>
> Pixel art from the centre out, then the name.

## Installation

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

## Usage

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

export const scene = personaScene(
  {
    eyebrow: "Your coder type",
    name: "The Marathoner",
    line: "48 days without a gap. You don't start things, you keep them going.",
    art: PIXEL_ART.mountain,
  },
  { key: "type", label: "Coder type", drop: "epic", locked: true },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `eyebrow` | `string` | The small line at the top. |
| `name` | `string` | The name. One that starts with "The " is set on two lines, with "The" on its own. |
| `line` | `string` | The line under the name: why this type, in this year's numbers. |
| `art` | `PixelArt` | Nine rows of nine characters: `x` lit, `o` half lit, `.` off. |

> `PIXEL_ART` in `@react-wrapped/core` has 25 ready pieces, from `mountain` to `question`. Your own is an array of nine strings.

## 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 |
| `name` | Coder type | One line |
| `line` | Line under it | One line |

## How it comes in

The art grows cell by cell from its centre and its lit cells pulse once. The name rises at 0.8 seconds and the line follows. 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 picks the first type in its catalog that the year fits, and writes the year's own number into the line.

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

## Related

- [Scenes](https://bettertyped.github.io/react-wrapped/docs/scenes/)
- [Fact scene](https://bettertyped.github.io/react-wrapped/docs/scenes/fact/)
- [Trophies scene](https://bettertyped.github.io/react-wrapped/docs/scenes/trophies/)
- [Summary scene](https://bettertyped.github.io/react-wrapped/docs/scenes/summary/)
- [Custom scene](https://bettertyped.github.io/react-wrapped/docs/guides/custom-scene/)

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