# 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](https://bettertyped.github.io/react-wrapped/docs/scenes/) 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](https://bettertyped.github.io/react-wrapped/docs/transitions/) between each pair.
- A **chart** is data a scene hands over. There are [twenty-one](https://bettertyped.github.io/react-wrapped/docs/charts/), and they all animate on the same timeline.
- The [**player**](https://bettertyped.github.io/react-wrapped/docs/player/) puts controls and a timeline around the stage. Its timeline is also the editor.
- The [**scanner**](https://bettertyped.github.io/react-wrapped/docs/scanner/) hides some scenes in the year and lets the viewer find them.
- The [**graphics**](https://bettertyped.github.io/react-wrapped/docs/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](https://bettertyped.github.io/react-wrapped/docs/guides/config-in-the-url/).

## Built on GSAP

All motion runs on [GSAP](https://gsap.com) 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.

## Related

- [Installation](https://bettertyped.github.io/react-wrapped/docs/installation/)
- [Your first Wrapped](https://bettertyped.github.io/react-wrapped/docs/first-wrapped/)
- [Scenes](https://bettertyped.github.io/react-wrapped/docs/scenes/)
- [Player](https://bettertyped.github.io/react-wrapped/docs/player/)
- [Full Wrapped example](https://bettertyped.github.io/react-wrapped/examples/full-wrapped/)

Source: https://bettertyped.github.io/react-wrapped/docs/