Chart scene

The chart scene is the frame around any of the twenty-one charts: a small line above, a headline, the chart, and one line under it that says what the chart shows. Use it whenever a beat of the story is a picture of numbers.

Your day

Your best hour is10 pm.

Commits by hour of the day. The lit hour is your busiest.

A day clock chart inside the chart scene.

Installation

bash

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

Usage

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

export const scene = chartScene(
  {
    eyebrow: "Your day",
    title: ["Your best hour is", "*10 pm.*"],
    chart: {
      type: "clock",
      hours: [
        5, 3, 1, 0, 0, 0, 1, 3, 6, 10, 12, 11,
        // ...and 12 more
      ],
    },
    lede: "Commits by hour of the day. The lit hour is your busiest.",
  },
  { key: "day", label: "Your day" },
);

Props

Prop	Type	What it does
`eyebrow`	`string`	The small line above the headline.
`title`	`readonly string[]`	The headline, one entry per line.
`chart`	`SceneChart`	The chart as data: an object with `type` set and that chart's numbers.
`lede`	`string`	The line under the chart. It explains the picture, so the chart needs no caption of its own.

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 small line and the headline come in, then the chart plays its own entrance at 0.6 seconds: structure first, numbers next, the point last. The line under it rises once the chart has drawn. 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 uses it for the shape of the year, a radar chart of six measures, right before the coder type.

Your shape

Strongest onstreaks.

Six ways to measure a year, each against a mark that is hard to reach.

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