Trophies scene
The trophies scene shows everything a year earned at once: a grid of plates, each with its pixel art, name and rarity, hardest first. The ones the scan has not found yet stay a question mark. Use it near the end, before the summary.
Your trophy case
5 achievementsand 1 easter egg.
2 still hiding in your year.
Four trophies found and two still hidden.
Installation
pnpm add @react-wrapped/scenes @react-wrapped/core gsapUsage
Call trophiesScene 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 { PIXEL_ART } from "@react-wrapped/core";
import { trophiesScene } from "@react-wrapped/scenes";
export const scene = trophiesScene(
{
eyebrow: "Your trophy case",
title: ["*5* achievements", "and *1* easter egg."],
lede: "**2** still hiding in your year.",
items: [
{ name: "All Weather", kind: "Achievement", rarity: "legendary", art: PIXEL_ART.crown },
{ name: "Long Haul", kind: "Achievement", rarity: "epic", art: PIXEL_ART.flame },
{ name: "Launch Day", kind: "Achievement", rarity: "rare", art: PIXEL_ART.rocket },
{ name: "Friday Shipper", kind: "Achievement", rarity: "common", art: PIXEL_ART.calendar },
{
name: "Night Watch",
kind: "Achievement",
rarity: "rare",
art: PIXEL_ART.owl,
hidden: true,
},
{
name: "Rubber Duck",
kind: "Easter egg",
rarity: "legendary",
art: PIXEL_ART.duck,
hidden: true,
},
],
},
{ key: "trophies", label: "Trophy case", locked: true },
);Props
| Prop | Type | What it does |
|---|---|---|
eyebrow | string | The small line above the headline. |
title | readonly string[] | The headline, one entry per line. |
lede | string | The line under the headline, above the case. |
items | readonly (WrappedToken & { hidden?: boolean })[] | The trophies, hardest first. A hidden one is drawn as a question mark. The first twelve are shown and the rest become "+N more". |
What a viewer can rewrite
Nothing. This scene has no fields, so the scene editor only offers the transition out of it.
How it comes in
The headline and the line come in, then the plates pop up one after another. The epic and legendary ones catch the light once everything has landed, and the hidden ones shake. 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 rebuilds the case every time the scan finds a drop, so a question mark turns into a trophy.
Your trophy case
10 achievementsand 1 easter egg.
The hardest 3 got scenes of their own.
