Opening scene
The opening scene is the first frame of a video. It draws the whole year as a grid of cells, brings them in, then sets the headline and one line under it. Use it once, first, to say whose year this is and which twelve months it covers.
My yearon Orbit.
@ada, Oct 2025 to Oct 2026
365 cells settling into a year, then the headline.
Installation
pnpm add @react-wrapped/scenes @react-wrapped/core gsapUsage
Call openingScene 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 } from "@react-wrapped/core";
import { openingScene } 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 = openingScene(
{ title: "My year on Orbit.", period: "@ada, Oct 2025 to Oct 2026", calendar, variant: 0 },
{ key: "opening", label: "Opening" },
);Props
| Prop | Type | What it does |
|---|---|---|
title | string | The headline. One line is split into two balanced lines at a word. A line break in the text is kept as it is. |
period | string | The line under the headline: who and when. |
calendar | CalendarLevels | The year as cells: a level from 0 to 4 per day, oldest first, and how many empty slots come before the first day. |
variant | number | 0 flies the cells in from everywhere and lets them settle. 1 types the year out week by week. |
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 |
|---|---|---|
title | Headline | One line |
period | Line under it | One line |
How it comes in
The cells come first, either from all sides or week by week. The headline rises out of its mask at 0.9 seconds and the line under it follows. Last, a ripple runs across the year from the first week to the 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 opens on this scene. The seed picks the variant, so two people rarely get the same entrance.
My yearon Orbit.
@ada, Oct 2025 to Oct 2026
