Summary scene
The summary scene closes a video with everything on one card: who it is about, the year as a grid, up to four headline numbers, and the tokens for what this person got. Use it last. It holds the longest, so it is the frame people screenshot.
@ada
Orbit Wrapped, Oct 2025 to Oct 2026
The whole year on one card, held for two and a half seconds.
Installation
pnpm add @react-wrapped/scenes @react-wrapped/core gsapUsage
Call summaryScene 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.
import { type CalendarLevels, PIXEL_ART } from "@react-wrapped/core";
import { summaryScene } 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 = summaryScene(
{
handle: "ada",
avatarUrl: null,
caption: "Orbit Wrapped, Oct 2025 to Oct 2026",
calendar,
stats: [
{ label: "Contributions", value: "2,052" },
{ label: "Longest streak", value: "48 days" },
{ label: "Biggest day", value: "58" },
{ label: "Top language", value: "TypeScript" },
],
tokens: [
{ name: "The Marathoner", kind: "Coder type", rarity: "epic", art: PIXEL_ART.mountain },
{ name: "Rubber Duck", kind: "Easter egg", rarity: "legendary", art: PIXEL_ART.duck },
],
},
{ key: "share-card", label: "Share card" },
);Props
| Prop | Type | What it does |
|---|---|---|
handle | string | Shown as @handle at the top of the card. |
avatarUrl | string | null | A picture for the corner of the card. With null, the first two letters of the handle. |
caption | string | The line under the handle. |
calendar? | CalendarLevels | The year as a grid of cells, under the name. |
stats | readonly { label: string; value: string }[] | The headline numbers, already formatted. Four fit one row. |
tokens? | readonly WrappedToken[] | What this person got, as tinted plates: pixel art, a name and a rarity each. |
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 |
|---|---|---|
caption | Line under your name | One line |
How it comes in
The card comes up with a slight turn. The year sweeps in left to right as one stroke, the numbers rise one by one, and the tokens spring in last. 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 shows the coder type and the rarest drop found so far, so the card changes as the scan finds more.
@ada
Orbit Wrapped, Oct 2025 to Oct 2026
