Big number scene

The big number scene gives one count the whole frame. The number climbs in type 300 pixels tall, the headline says what was counted, and a calendar or a row of cells shows it. Use it for the total of the year, the longest streak, anything that is a single figure.

In the last 12 months you made

contributions.

OctNovDecJanFebMarAprMayJunJulAugSepOct

That's 5.6 a day, on 241 active days out of 365.

The number counts while the year fills in under it.

Installation

bash

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

Usage

Call bigNumberScene 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 type { CalendarLevels } from "@react-wrapped/core";
import { bigNumberScene } from "@react-wrapped/scenes";

// The year as a grid of cells. `calendarFromCounts` makes one from a count per day.
declare const calendar: CalendarLevels;

export const scene = bigNumberScene(
  {
    eyebrow: "In the last 12 months you made",
    value: 2052,
    title: ["contributions."],
    lede: "That's **5.6 a day**, on **241** active days out of 365.",
    calendar,
    counter: "climb",
    variant: 0,
  },
  { key: "total", label: "Total contributions" },
);

Props

Prop	Type	What it does
`eyebrow`	`string`	The small line above the number. It reads on into the number: "This year you made".
`value`	`number`	The count. A decimal such as 69.9 climbs with its decimal.
`suffix?`	`string`	Set right after the number, for a count too big to show whole: `K`, `M`, `%`.
`title`	`readonly string[]`	The headline under the number, one entry per line.
`lede`	`string`	The line at the bottom. It says what the number means.
`calendar?`	`CalendarLevels`	Shows the year under the headline, with month names when it has them.
`cells?`	`number`	Shows a row of lit cells instead, one per unit, 60 at most. Made for a streak counted in days.
`counter`	`"climb" \| "slot"`	How the number counts: a smooth climb, or digits that spin and lock in from the left like a slot machine.
`variant`	`number`	`0` lets the number rise out of a blur. `1` springs it up from its bottom left corner.

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 lines rise in, the number starts counting at 0.2 seconds and takes two seconds to land, and the headline rises while it counts. A calendar pops in cell by cell from the left. A row of cells does the same and finishes with one small wave. 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 twice. This is the second time, for the longest streak, with cells instead of a calendar.

Longest streak

days in a row.

May 10 to Jul 3, without missing a day.

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