Fact scene
The fact scene presents one named thing: an achievement that was earned, or an easter egg that was found. It shows the name, a tag coloured by rarity, one line, and either pixel art or a chart of the numbers behind it. Use it for every scene the scan adds to a video.
Rubber Duck
LegendaryYou explained the bug out loud and it fixed itself. Only about 1 in 50 scans turns this one up.
An easter egg: pixel art, the name, its rarity and one line.
Installation
pnpm add @react-wrapped/scenes @react-wrapped/core gsapUsage
Call factScene 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 { factScene } from "@react-wrapped/scenes";
export const scene = factScene(
{
stamp: "Legendary",
rarity: "legendary",
title: ["Rubber Duck"],
description: "You explained the bug out loud and it fixed itself. Only about **1 in 50** scans turns this one up.",
art: PIXEL_ART.duck,
variant: 0,
},
{ key: "drop-rubber-duck", label: "Rubber Duck", drop: "legendary", locked: true },
);Props
| Prop | Type | What it does |
|---|---|---|
stamp | string | The small tag under the name. Usually the rarity as a word. |
rarity? | "common" | "rare" | "epic" | "legendary" | Colours the tag and the chart's point with that rarity's colour from the palette. |
title | readonly string[] | The name, one entry per line. |
description | string | The one line under the name. With a chart, it says what the chart shows. |
art? | PixelArt | Nine rows of nine characters: x lit, o half lit, . off. |
chart? | SceneChart | A chart of the numbers behind the fact. It takes the place of the art. |
variant | number | Where the art sits: 0 above the name, 1 under the line. A chart ignores it. |
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 |
|---|---|---|
stamp | Tag | One line |
title | Headline | Lines, one per line on screen |
description | Line under it | One line |
How it comes in
Pixel art pops in cell by cell, from the centre, the edges, the start or at random (the seed picks). The name rises, the tag follows quietly under it, a chart plays its own entrance, and the line comes 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
In the sample every achievement the scan finds becomes a fact scene with a chart of its own numbers.
Long Haul
EpicContributions per week. The lit stretch is your streak: not one day missed.
