# Bars scene

The bars scene sets a short series of columns under a headline, with the ones that matter lit. Use it for the days of the week or the months of the year, when the story is which one stands out.

> Live preview: see the scene playing at https://bettertyped.github.io/react-wrapped/docs/scenes/bars/
>
> Seven columns, the busiest one lit.

## Installation

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

## Usage

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

export const scene = barsScene(
  {
    eyebrow: "Your week",
    title: ["You ship on", "*Fridays.*"],
    bars: [
      { label: "M", value: 312 },
      { label: "T", value: 341 },
      { label: "W", value: 330 },
      { label: "T", value: 352 },
      { label: "F", value: 398, peak: true },
      { label: "S", value: 84 },
      { label: "S", value: 61 },
    ],
    lede: "Weekends took **9%** of your work.",
  },
  { key: "week", label: "Your week" },
);
```

## 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 column that is lit. |
| `bars` | `readonly { label: string; value: number; peak?: boolean }[]` | One column each, left to right. Heights are set against the tallest. `peak` lights a column. |
| `lede` | `string` | The line under the columns. |

> These are the scene's own columns. For columns with a value in a pill, or any other picture, hand a chart to the [chart scene](https://bettertyped.github.io/react-wrapped/docs/scenes/chart/).

## 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 headline rises first. The columns spring up from the baseline one after another, starting from the left, the middle or the right (the seed picks), with their labels fading in under them. The lit columns swell once at the end. 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 counts contributions per weekday, Monday first, and lights the busiest one.

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

## Related

- [Scenes](https://bettertyped.github.io/react-wrapped/docs/scenes/)
- [Chart scene](https://bettertyped.github.io/react-wrapped/docs/scenes/chart/)
- [List scene](https://bettertyped.github.io/react-wrapped/docs/scenes/list/)
- [Split scene](https://bettertyped.github.io/react-wrapped/docs/scenes/split/)
- [Custom scene](https://bettertyped.github.io/react-wrapped/docs/guides/custom-scene/)

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