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.

Your week

You ship onFridays.

Weekends took 9% of your work.

Seven columns, the busiest one lit.

Installation

bash

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

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

What a viewer can rewrite

These texts are the scene's fields. From the pencil on the timeline a viewer opens the 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.

In a real year

The sample counts contributions per weekday, Monday first, and lights the busiest one.

Your week

You ship onWednesdays.

Weekends took 5% of your work.

Last updated 2026-10-11. Read this page as Markdown.