Introduction
react-wrapped turns a year of numbers into a short video that plays in the page. It is the engine behind Hype Stack's Wrapped, split into packages you can use whole or take apart: the stage, the scenes, the charts, the transitions, the player with its timeline editor, the year scan and the graphics people keep.
What is in it
| Package | What it holds |
|---|---|
@react-wrapped/core | The stage, the motion kit, palettes, formats and transitions. |
@react-wrapped/charts | Twenty-one charts and their entrances. |
@react-wrapped/scenes | Eleven ready-made scenes and the pixel art set. |
@react-wrapped/player | The player, the timeline, the scene editor and the settings panel. |
@react-wrapped/scan | The year scan that finds hidden drops. |
@react-wrapped/graphics | Share cards, insight cards and the gallery under the video. |
@react-wrapped/marks | The marks pressed into the bottom right corner of the stage. |
@react-wrapped/kit | All of the above in one install, plus the whole page as one component. |
How it fits together
- A scene is a React node and a GSAP timeline that brings it in. Use one of the eleven ready-made ones or declare your own with
defineScene. - A cut is a list of scenes. The stage plays them in order on one master timeline, with a transition between each pair.
- A chart is data a scene hands over. There are twenty-one, and they all animate on the same timeline.
- The **player** puts controls and a timeline around the stage. Its timeline is also the editor.
- The **scanner** hides some scenes in the year and lets the viewer find them.
- The **graphics** are the cards a viewer keeps: one for the whole year and one per finding.
- Everything a viewer can change (palette, format, speed, transitions, edited texts) is one config object that fits in a URL.
Built on GSAP
All motion runs on GSAP timelines. That is what makes a video seekable, scrubbable from the timeline, and exportable frame by frame. GSAP is a peer dependency and you install it yourself.
