# Split scene

The split scene shows how a whole divides. One wide bar is cut into coloured parts, and a legend under it names each part with its percentage. Use it for languages, plans, countries: a handful of shares that add up to 100.

> Live preview: see the scene playing at https://bettertyped.github.io/react-wrapped/docs/scenes/split/
>
> Four shares of one bar, drawn in a single stroke.

## Installation

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

## Usage

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

export const scene = splitScene(
  {
    eyebrow: "Written in",
    title: ["*TypeScript,*", "mostly."],
    parts: [
      { name: "TypeScript", color: "#3178c6", share: 54 },
      { name: "Go", color: "#00add8", share: 24 },
      { name: "CSS", color: "#663399", share: 14 },
      { name: "Shell", color: "#89e051", share: 8 },
    ],
  },
  { key: "languages", label: "Languages" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `eyebrow` | `string` | The small line above the headline. |
| `title` | `readonly string[]` | The headline, one entry per line. It usually names the biggest part. |
| `parts` | `readonly { name: string; color: string; share: number }[]` | The parts, biggest first. `share` is in percent and `color` is any CSS colour. |

> The parts bring their own colours, so this is the one scene that does not follow the palette. A part smaller than 1.5 percent is still drawn that wide, so it can be seen.

## 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 |

## How it comes in

The bar is drawn left to right in one stroke. The legend rows come up under it and each percentage counts to its share. 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 splits the year by language and lets the seed pick the last word of the headline.

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

## Related

- [Scenes](https://bettertyped.github.io/react-wrapped/docs/scenes/)
- [List scene](https://bettertyped.github.io/react-wrapped/docs/scenes/list/)
- [Chart scene](https://bettertyped.github.io/react-wrapped/docs/scenes/chart/)
- [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/split/