Skip to content
react-wrapped

Open sourceThe engine behind Hype Stack's Wrapped

Year in review videos, in React.

Turn a year of numbers into a short video that plays in the page. Scenes, charts and transitions on one timeline, with a player, an editor and MP4 export.

Get started

Live in the page. Not a recording.

21charts, each with its own entrance

19transitions between scenes

11ready-made scenes to fill with your numbers

10palettes, each in dark and light

How it works

A video is a list of scenes.A scene is a function.

You call each scene with what it should say. A chart is data you hand it. The library brings the stage, the motion, the transition after each scene, and the player around it all.

Your first Wrapped →
my-wrapped.tsx
import { bigNumberScene, chartScene, WrappedView } from "@react-wrapped/kit";
import "@react-wrapped/kit/styles.css";

const scenes = [
  bigNumberScene(
    { eyebrow: "This year you made", value: 1687, title: ["contributions."],
      lede: "That's **4.6 a day**.", counter: "climb", variant: 0 },
    { key: "total", label: "Total" },
  ),
  chartScene(
    { eyebrow: "Your year", title: ["Then came", "*launch week.*"],
      lede: "The busiest stretch, lit.",
      chart: { type: "spark", values: weeks, band: { from: 20, to: 27, label: "Launch week" } } },
    { key: "launch", label: "Launch week" },
  ),
];

<WrappedView subject={subject} seed="ada-2026" scenes={scenes}
  config={config} onConfigChange={setConfig} />

Charts

A chart is data.The motion comes with it.

All 21 charts →

Transitions

19 ways out of a scene.All on one timeline.

All 19 transitions →

Layers. Three flat bands in the palette's colours rise through the frame one after another. The old scene leaves behind them and they clear upward onto the next one. Read about Layers

Bars

Epic

Columns sharing one light, the ones that matter lit.

Rings

Epic
  • TypeScript55%
  • Go25%
  • CSS13%
  • Shell7%

Parts of a whole, biggest outside.

Bars

Epic

Columns sharing one light, the ones that matter lit.

Eight packages

Use it whole.Or take the parts.

WrappedView is the whole page in one component. Every piece of it is also a package of its own, so you can build a different page from the same parts.

Built from parts →

Ten palettes, dark and light. Pick one and the previews across this site follow. How theming works

  • @react-wrapped/coreThe stage, the motion kit, palettes, formats and transitions.
  • @react-wrapped/chartsTwenty-one charts and their entrances.
  • @react-wrapped/scenesEleven ready-made scenes and the pixel art set.
  • @react-wrapped/playerThe player, the timeline, the scene editor and the settings panel.
  • @react-wrapped/scanThe year scan that finds hidden drops.
  • @react-wrapped/graphicsShare cards, insight cards and the gallery under the video.
  • @react-wrapped/marksThe marks pressed into the bottom right corner of the stage.
  • @react-wrapped/kitAll of the above in one install, plus the whole page as one component.

From Hype Stack

See it running for real.

react-wrapped is a free tool from Hype Stack, the full stack React template. Hype Stack's Wrapped plays real years with it: sign in, and yours plays in a few seconds.

Make your WrappedWhat is Hype Stack?