Persona scene
The persona scene gives the year a name. Pixel art comes in from the centre, the name lands under it, and one line says why. Use it once, near the end, for the type you assign from the numbers: The Marathoner, The Night Pilot.
Your coder type
TheMarathoner
48 days without a gap. You don't start things, you keep them going.
Pixel art from the centre out, then the name.
Installation
pnpm add @react-wrapped/scenes @react-wrapped/core gsapUsage
Call personaScene 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 { personaScene } from "@react-wrapped/scenes";
export const scene = personaScene(
{
eyebrow: "Your coder type",
name: "The Marathoner",
line: "48 days without a gap. You don't start things, you keep them going.",
art: PIXEL_ART.mountain,
},
{ key: "type", label: "Coder type", drop: "epic", locked: true },
);Props
| Prop | Type | What it does |
|---|---|---|
eyebrow | string | The small line at the top. |
name | string | The name. One that starts with "The " is set on two lines, with "The" on its own. |
line | string | The line under the name: why this type, in this year's numbers. |
art | PixelArt | Nine rows of nine characters: x lit, o half lit, . off. |
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 |
name | Coder type | One line |
line | Line under it | One line |
How it comes in
The art grows cell by cell from its centre and its lit cells pulse once. The name rises at 0.8 seconds and the line follows. 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 picks the first type in its catalog that the year fits, and writes the year's own number into the line.
Your coder type
TheMarathoner
55 days without a gap. You don't start things, you keep them going.
