Big day scene

The big day scene is about one date. A single calendar cell grows to fill the middle of the frame with the day's count inside it, and the date is the headline. Use it for the busiest day, a launch day, a personal record.

Your biggest day

0CONTRIBUTIONS

Thursday,April 16

That's not a day, that's a release.

One cell of the year, grown to the size of the frame.

Installation

bash

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

Usage

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

export const scene = bigDayScene(
  {
    eyebrow: "Your biggest day",
    count: 58,
    unit: "CONTRIBUTIONS",
    title: ["Thursday,", "April 16"],
    lede: "That's not a day, that's a release.",
  },
  { key: "biggest-day", label: "Biggest day" },
);

Props

Prop	Type	What it does
`eyebrow`	`string`	The small line above the tile.
`count`	`number`	The number inside the tile.
`suffix?`	`string`	After the count, for one too big to show whole: `K`, `M`.
`unit`	`string`	The small word under the count, inside the tile. Short and in capitals reads best.
`title`	`readonly string[]`	The headline, usually the date on two lines.
`lede`	`string`	The line at the bottom.

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 tile springs up from a single small cell with a turn, and eighteen sparks burst out of it. The count runs inside the tile, climbing or as a slot machine (the seed picks), then the date rises. The tile rocks once before the scene rests. 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

In the sample the line under the date changes with the size of the day: 40 or more gets a joke about a release.