# React Wrapped

> React components for year in review videos: animated scenes, 21 charts, 19 transitions, a player with a timeline editor, a scanner and share cards.

react-wrapped is a set of React packages published under the @react-wrapped scope on npm. Every motion runs on GSAP timelines, so a video can be seeked, scrubbed and exported frame by frame. Source: https://github.com/BetterTyped/react-wrapped

## Get started

- [Introduction](https://bettertyped.github.io/react-wrapped/docs/index.md): react-wrapped is a set of React packages for year in review videos: scenes, charts, transitions, a player with an editor, a scanner and share cards.
- [Installation](https://bettertyped.github.io/react-wrapped/docs/installation/index.md): Install react-wrapped in a React 19 app with pnpm, npm or yarn. One package for everything, or only the parts you need. GSAP is a peer dependency.
- [Your first Wrapped](https://bettertyped.github.io/react-wrapped/docs/first-wrapped/index.md): Build a first year in review video with react-wrapped in five steps: install, name the subject, bring your numbers, place three scenes, render WrappedView.
- [Theming](https://bettertyped.github.io/react-wrapped/docs/theming/index.md): Theme a react-wrapped video with ten built-in palettes, a dark or light switch, or one accent colour of your own. Everything reads CSS variables.
- [Formats](https://bettertyped.github.io/react-wrapped/docs/formats/index.md): One react-wrapped video plays in three formats: 9:16 for stories, 1:1 for feeds and 16:9 for screens. Scenes are fitted to the frame for you.

## Scenes

- [Scenes](https://bettertyped.github.io/react-wrapped/docs/scenes/index.md): Eleven ready-made scenes for a React year in review video: opening, big number, big day, bars, chart, list, split, fact, persona, trophies and summary.
- [Opening scene](https://bettertyped.github.io/react-wrapped/docs/scenes/opening/index.md): The opening scene of a React year in review video: the whole year as a grid of cells that fly in and settle, a headline and one line under it.
- [Big number scene](https://bettertyped.github.io/react-wrapped/docs/scenes/big-number/index.md): A React scene for one big number: it counts up in giant type over a headline, with the year's calendar or a row of cells under it.
- [Big day scene](https://bettertyped.github.io/react-wrapped/docs/scenes/big-day/index.md): A React scene for the single biggest day of a year: one giant calendar cell with the count inside it and the date as the headline.
- [Bars scene](https://bettertyped.github.io/react-wrapped/docs/scenes/bars/index.md): A React scene with a row of columns under a headline: seven weekdays, twelve months, any short series with one or two columns lit.
- [Chart scene](https://bettertyped.github.io/react-wrapped/docs/scenes/chart/index.md): A React scene that tells one beat of the story with any of the 21 charts: a line above, a headline, the chart, and one line under it.
- [List scene](https://bettertyped.github.io/react-wrapped/docs/scenes/list/index.md): A React scene for a ranked list: each row has a rank, a name, a meter set against the first row, and a count that climbs.
- [Split scene](https://bettertyped.github.io/react-wrapped/docs/scenes/split/index.md): A React scene for parts of a whole: one wide bar cut into coloured shares, with a legend whose percentages count up.
- [Fact scene](https://bettertyped.github.io/react-wrapped/docs/scenes/fact/index.md): A React scene for one named thing about a year: an achievement or an easter egg with its rarity, pixel art or a chart, and one line.
- [Persona scene](https://bettertyped.github.io/react-wrapped/docs/scenes/persona/index.md): A React scene that gives a year a character: a piece of pixel art, a name such as The Marathoner, and the line that explains it.
- [Summary scene](https://bettertyped.github.io/react-wrapped/docs/scenes/summary/index.md): The closing scene of a React year in review video: one card with the handle, the year's grid, four headline numbers and what was found.
- [Trophies scene](https://bettertyped.github.io/react-wrapped/docs/scenes/trophies/index.md): A React scene that lays out every achievement of a year as a trophy case: pixel art, a name and a rarity each, with the unfound ones hidden.

## Charts

- [Charts](https://bettertyped.github.io/react-wrapped/docs/charts/index.md): Twenty-one animated React charts made for year in review videos: line, bars, funnel, radar, heatmaps and more, each with its own GSAP entrance.
- [Spark chart](https://bettertyped.github.io/react-wrapped/docs/charts/spark/index.md): A React line chart for a year of weekly values, with one stretch lit and an optional line to cross. Animated with GSAP.
- [Bars chart](https://bettertyped.github.io/react-wrapped/docs/charts/bars/index.md): A React bar chart where every column shares one light and the bars that matter are lit. Good for weekdays, months and one towering day.
- [Funnel chart](https://bettertyped.github.io/react-wrapped/docs/charts/funnel/index.md): A React funnel chart: a flow that narrows step by step, each stage labelled with its own number. Three or four steps read best.
- [Pulse chart](https://bettertyped.github.io/react-wrapped/docs/charts/ticks/index.md): A React tick chart: every day of a stretch as one stroke, with the quiet gap bracketed and named. Made for breaks and comebacks.
- [Rings chart](https://bettertyped.github.io/react-wrapped/docs/charts/rings/index.md): A React rings chart: parts of a whole as concentric rings, the biggest outside. Each ring is drawn to its share in percent.
- [Donut chart](https://bettertyped.github.io/react-wrapped/docs/charts/donut/index.md): A React donut chart for exactly two parts of a whole, with the second one lit and a number in the centre.
- [Days chart](https://bettertyped.github.io/react-wrapped/docs/charts/days/index.md): A React day strip: a short run of dates as cells with their counts, the days that matter ringed. Made for holidays and launch weeks.
- [Dial chart](https://bettertyped.github.io/react-wrapped/docs/charts/gauge/index.md): A React gauge chart: a dial of segments filled up to a share between 0 and 1. It carries no number, the scene's words say it.
- [Meter chart](https://bettertyped.github.io/react-wrapped/docs/charts/meter/index.md): A React meter chart: a row of slim pills, each lit by how much there was. Every Friday of a year, every week, every release.
- [Pixel area chart](https://bettertyped.github.io/react-wrapped/docs/charts/pixels/index.md): A React area chart built from square cells, like a contribution graph filling up. One cell can be marked with a label.
- [Wheel chart](https://bettertyped.github.io/react-wrapped/docs/charts/wheel/index.md): A React radial chart: a ring cut into segments, each as bright as it was busy, with the biggest one named in the middle.
- [Day clock chart](https://bettertyped.github.io/react-wrapped/docs/charts/clock/index.md): A React clock chart: 24 values around a clock face, midnight first, with the busiest hour lit and named.
- [River chart](https://bettertyped.github.io/react-wrapped/docs/charts/river/index.md): A React stream chart: parts of a whole as stacked ribbons over time. One stream can be the point, with a note at a moment on it.
- [Dot share chart](https://bettertyped.github.io/react-wrapped/docs/charts/dots/index.md): A React dot chart: a share from 0 to 1 drawn as a hundred dots, the lit ones the part that counts, with both ends named.
- [Then and now chart](https://bettertyped.github.io/react-wrapped/docs/charts/dumbbell/index.md): A React dumbbell chart: one row per thing counted, a ring where it was and a dot where it is now. The biggest jump is lit.
- [Bubbles chart](https://bettertyped.github.io/react-wrapped/docs/charts/bubbles/index.md): A React bubble chart: parts of a whole as packed discs sized by their share, biggest first. At most five are drawn.
- [Month up close chart](https://bettertyped.github.io/react-wrapped/docs/charts/month/index.md): A React month calendar chart: one cell per day laid out Monday to Sunday, with the biggest day lit.
- [Radar chart](https://bettertyped.github.io/react-wrapped/docs/charts/radar/index.md): A React radar chart: one outline over several axes, turned so the strongest axis is on top, with everyone else's shape underneath.
- [Where you stand chart](https://bettertyped.github.io/react-wrapped/docs/charts/standing/index.md): A React distribution chart: how many people sit at each step, fewest to most, with the bar where one person stands lit.
- [Mirror chart](https://bettertyped.github.io/react-wrapped/docs/charts/mirror/index.md): A React mirrored bar chart: two things pulling against each other per period, one above the line and one below it.
- [Week by hour chart](https://bettertyped.github.io/react-wrapped/docs/charts/hours/index.md): A React heatmap chart: seven rows of 24 cells, Monday first, with the busiest slot of the week lit.

## Transitions

- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/index.md): Nineteen GSAP scene transitions for React videos: fourteen covers drawn in the palette's colours and five moves that take the scene out itself.
- [Layers transition](https://bettertyped.github.io/react-wrapped/docs/transitions/layers/index.md): Layers is a scene transition for React year in review videos: flat bands rising up the frame. Built on GSAP, seekable, drawn in the palette's own colours.
- [Slash transition](https://bettertyped.github.io/react-wrapped/docs/transitions/slash/index.md): Slash is a scene transition for React year in review videos: slanted bands across the frame. Built on GSAP, seekable, drawn in the palette's own colours.
- [Arrow transition](https://bettertyped.github.io/react-wrapped/docs/transitions/arrow/index.md): Arrow is a scene transition for React year in review videos: a pointed band across the frame. Built on GSAP, seekable, drawn in the palette's own colours.
- [Wave transition](https://bettertyped.github.io/react-wrapped/docs/transitions/wave/index.md): Wave is a scene transition for React year in review videos: water coming up from below. Built on GSAP, seekable, drawn in the palette's own colours.
- [Drip transition](https://bettertyped.github.io/react-wrapped/docs/transitions/drip/index.md): Drip is a scene transition for React year in review videos: paint running down from the top. Built on GSAP, seekable, drawn in the palette's own colours.
- [Bloom transition](https://bettertyped.github.io/react-wrapped/docs/transitions/bloom/index.md): Bloom is a scene transition for React year in review videos: discs growing out of a corner. Built on GSAP, seekable, drawn in the palette's own colours.
- [Pulse transition](https://bettertyped.github.io/react-wrapped/docs/transitions/pulse/index.md): Pulse is a scene transition for React year in review videos: rings out of the middle. Built on GSAP, seekable, drawn in the palette's own colours.
- [Blink transition](https://bettertyped.github.io/react-wrapped/docs/transitions/blink/index.md): Blink is a scene transition for React year in review videos: an eye shutting and opening. Built on GSAP, seekable, drawn in the palette's own colours.
- [Spin transition](https://bettertyped.github.io/react-wrapped/docs/transitions/spin/index.md): Spin is a scene transition for React year in review videos: a clock hand going once round. Built on GSAP, seekable, drawn in the palette's own colours.
- [Fan transition](https://bettertyped.github.io/react-wrapped/docs/transitions/fan/index.md): Fan is a scene transition for React year in review videos: a wiper hinged at the bottom. Built on GSAP, seekable, drawn in the palette's own colours.
- [Doors transition](https://bettertyped.github.io/react-wrapped/docs/transitions/doors/index.md): Doors is a scene transition for React year in review videos: two doors shutting on the scene. Built on GSAP, seekable, drawn in the palette's own colours.
- [Brush transition](https://bettertyped.github.io/react-wrapped/docs/transitions/brush/index.md): Brush is a scene transition for React year in review videos: one wide brush stroke. Built on GSAP, seekable, drawn in the palette's own colours.
- [Scan transition](https://bettertyped.github.io/react-wrapped/docs/transitions/scan/index.md): Scan is a scene transition for React year in review videos: a beam crossing the frame. Built on GSAP, seekable, drawn in the palette's own colours.
- [Flash transition](https://bettertyped.github.io/react-wrapped/docs/transitions/flash/index.md): Flash is a scene transition for React year in review videos: light swelling from the middle. Built on GSAP, seekable, drawn in the palette's own colours.
- [Iris transition](https://bettertyped.github.io/react-wrapped/docs/transitions/iris/index.md): Iris is a scene transition for React year in review videos: the scene closing to a point. Built on GSAP, seekable, drawn in the palette's own colours.
- [Wipe transition](https://bettertyped.github.io/react-wrapped/docs/transitions/wipe/index.md): Wipe is a scene transition for React year in review videos: the scene wiped away upward. Built on GSAP, seekable, drawn in the palette's own colours.
- [Lift transition](https://bettertyped.github.io/react-wrapped/docs/transitions/lift/index.md): Lift is a scene transition for React year in review videos: the scene rising out of frame. Built on GSAP, seekable, drawn in the palette's own colours.
- [Drop transition](https://bettertyped.github.io/react-wrapped/docs/transitions/drop/index.md): Drop is a scene transition for React year in review videos: the scene falling out of frame. Built on GSAP, seekable, drawn in the palette's own colours.
- [Zoom transition](https://bettertyped.github.io/react-wrapped/docs/transitions/zoom/index.md): Zoom is a scene transition for React year in review videos: the scene rushing at the camera. Built on GSAP, seekable, drawn in the palette's own colours.

## Player

- [Player](https://bettertyped.github.io/react-wrapped/docs/player/index.md): The react-wrapped player package: a video player for React with a timeline that edits the cut, a scene editor, a settings panel and MP4 export.
- [WrappedPlayer](https://bettertyped.github.io/react-wrapped/docs/player/wrapped-player/index.md): WrappedPlayer is the React component that plays a year in review video: the stage, play and pause, a scrubbable timeline, full screen and a ref handle.
- [Timeline](https://bettertyped.github.io/react-wrapped/docs/player/timeline/index.md): The react-wrapped timeline: one segment per scene, scrubbable, with a hover still. With editing on, a viewer hides, reorders and edits scenes from it.
- [SceneEditor](https://bettertyped.github.io/react-wrapped/docs/player/scene-editor/index.md): SceneEditor is a React dialog for one scene of a Wrapped video: its editable texts and the transition out of it, with a live preview of the pick.
- [WrappedConfigurator](https://bettertyped.github.io/react-wrapped/docs/player/configurator/index.md): WrappedConfigurator is the settings panel of a react-wrapped video: palette, dark or light, format, cell shape, speed and film grain in one component.
- [Loading](https://bettertyped.github.io/react-wrapped/docs/player/loading/index.md): WrappedPlayerLoading and LoadingStage draw the video's frame while its data is still loading: a scan beam over a blank year and lines that take turns.
- [Video export](https://bettertyped.github.io/react-wrapped/docs/player/video-export/index.md): Export a react-wrapped video as an MP4 in the browser: renderVideo draws every frame at full resolution and encodes H.264 at 60 frames a second.
- [ShareActions](https://bettertyped.github.io/react-wrapped/docs/player/share-actions/index.md): ShareActions is the row beside a react-wrapped video: Copy link and Download. Download makes an MP4 in the browser, with progress and a stop button.

## Scanner

- [Scanner](https://bettertyped.github.io/react-wrapped/docs/scanner/index.md): The react-wrapped scanner: a beam sweeps the year's calendar, finds hidden scenes with a rarity each, and adds them to the video as they are opened.
- [YearScan](https://bettertyped.github.io/react-wrapped/docs/scanner/year-scan/index.md): YearScan is the React component that sweeps a year's calendar with a beam, reveals hidden scenes as cards with a rarity, and lists what was found.
- [Rarity and drops](https://bettertyped.github.io/react-wrapped/docs/scanner/drops/index.md): Drops are the hidden scenes of a react-wrapped video. Each has one of four rarities, a colour from the palette, and becomes a scene once the scan finds it.
- [useOpenedDrops](https://bettertyped.github.io/react-wrapped/docs/scanner/use-opened-drops/index.md): useOpenedDrops is a React hook that remembers which hidden scenes of a Wrapped were opened, in local storage or for one visit, and fails soft.
- [useScanGate](https://bettertyped.github.io/react-wrapped/docs/scanner/use-scan-gate/index.md): useScanGate is the React hook behind the scan first flow: the year scan is the page until it has run once, then the video and settings take over.

## Graphics

- [Graphics](https://bettertyped.github.io/react-wrapped/docs/graphics/index.md): The react-wrapped graphics package: a share card, insight cards with a chart each, and a gallery to download them from, all drawn in the browser as PNG.
- [Share card](https://bettertyped.github.io/react-wrapped/docs/graphics/share-card/index.md): renderShareCard draws a year in review as one PNG in the browser: the handle, the year's calendar, four headline numbers and two tokens, in any palette.
- [Insight cards](https://bettertyped.github.io/react-wrapped/docs/graphics/insight-cards/index.md): Insight cards put one finding of a year on a card: the headline number, any react-wrapped chart and one line. Shown as a React component or saved as PNG.
- [Graphics gallery](https://bettertyped.github.io/react-wrapped/docs/graphics/gallery/index.md): GraphicsGallery lays out everything a Wrapped gives its owner to keep as tiles with a download button, and shows locked tiles for what is still hidden.

## Marks

- [Marks](https://bettertyped.github.io/react-wrapped/docs/marks/index.md): Marks are logos pressed into the bottom right corner of a react-wrapped frame, as SVG path data. Use one from the marks package or pass your own path.

## Guides

- [Guides](https://bettertyped.github.io/react-wrapped/docs/guides/index.md): Guides for react-wrapped: write a custom scene, add a transition, bring your own palette and chrome colours, keep the config in the URL, render on a server.
- [Custom scene](https://bettertyped.github.io/react-wrapped/docs/guides/custom-scene/index.md): Write your own react-wrapped scene with defineScene: a render, a GSAP timeline that brings it in, editable fields, and the rules that keep it seekable.
- [Custom transition](https://bettertyped.github.io/react-wrapped/docs/guides/custom-transition/index.md): Add a custom scene transition to react-wrapped with defineTransition: a cover drawn in the palette's colours with coverCut, or a move of the scene itself.
- [Custom palette and chrome colours](https://bettertyped.github.io/react-wrapped/docs/guides/palette-and-chrome/index.md): Give a react-wrapped video your own palette from one accent colour, and recolour the player, the settings and the scan with ten CSS custom properties.
- [The config in the URL](https://bettertyped.github.io/react-wrapped/docs/guides/config-in-the-url/index.md): Keep a react-wrapped config in the URL with parseWrappedSearch, configFromSearch and searchFromConfig, so a shared link plays the video as its owner set it.
- [Server rendering](https://bettertyped.github.io/react-wrapped/docs/guides/server-rendering/index.md): Render react-wrapped on a server or as static HTML: what is in the markup, what waits for the browser, where the client boundary goes in Next.js.
- [Build the page from parts](https://bettertyped.github.io/react-wrapped/docs/guides/from-parts/index.md): Rebuild the WrappedView page by hand from the single react-wrapped packages: the player, the settings, the scan, the scene editor and the gallery.
- [Labels and translation](https://bettertyped.github.io/react-wrapped/docs/guides/labels/index.md): Translate or reword everything react-wrapped shows: 106 labels in one object, replaced through WrappedProvider, with plural forms as functions.
- [Styling](https://bettertyped.github.io/react-wrapped/docs/guides/styling/index.md): Restyle the react-wrapped player, settings, scan and gallery by hand: CSS tokens for colour, a class per slot with classNames, and one layer line for Tailwind.

## Optional

- [Every page in one file](https://bettertyped.github.io/react-wrapped/llms-full.txt)
- [Designs](https://bettertyped.github.io/react-wrapped/designs/): every chart and transition playing live