# Fact scene

The fact scene presents one named thing: an achievement that was earned, or an easter egg that was found. It shows the name, a tag coloured by rarity, one line, and either pixel art or a chart of the numbers behind it. Use it for every scene the scan adds to a video.

> Live preview: see the scene playing at https://bettertyped.github.io/react-wrapped/docs/scenes/fact/
>
> An easter egg: pixel art, the name, its rarity and one line.

## Installation

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

## Usage

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

export const scene = factScene(
  {
    stamp: "Legendary",
    rarity: "legendary",
    title: ["Rubber Duck"],
    description: "You explained the bug out loud and it fixed itself. Only about **1 in 50** scans turns this one up.",
    art: PIXEL_ART.duck,
    variant: 0,
  },
  { key: "drop-rubber-duck", label: "Rubber Duck", drop: "legendary", locked: true },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `stamp` | `string` | The small tag under the name. Usually the rarity as a word. |
| `rarity?` | `"common" \| "rare" \| "epic" \| "legendary"` | Colours the tag and the chart's point with that rarity's colour from the palette. |
| `title` | `readonly string[]` | The name, one entry per line. |
| `description` | `string` | The one line under the name. With a chart, it says what the chart shows. |
| `art?` | `PixelArt` | Nine rows of nine characters: `x` lit, `o` half lit, `.` off. |
| `chart?` | `SceneChart` | A chart of the numbers behind the fact. It takes the place of the art. |
| `variant` | `number` | Where the art sits: `0` above the name, `1` under the line. A chart ignores it. |

> The scene holds three kinds of text and no more: one tag, the name, one line. Place it with `drop` set to its rarity so the timeline colours its segment, and with `locked` so nobody rewrites what was assigned.

## 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 |
| --- | --- | --- |
| `stamp` | Tag | One line |
| `title` | Headline | Lines, one per line on screen |
| `description` | Line under it | One line |

## How it comes in

Pixel art pops in cell by cell, from the centre, the edges, the start or at random (the seed picks). The name rises, the tag follows quietly under it, a chart plays its own entrance, and the line comes 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

In the sample every achievement the scan finds becomes a fact scene with a chart of its own numbers.

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

## 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/)
- [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/fact/