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.

Written in

TypeScript,mostly.

TypeScript0%

Go0%

CSS0%

Shell0%

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

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

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.

In a real year

The sample splits the year by language and lets the seed pick the last word of the headline.