@react-wrapped/scan

The year scan for react-wrapped: a beam sweeps the year and finds the scenes hidden in it.

Part of react-wrapped, the library behind Hype Stack's Wrapped.

YearScan shows a year as a blank grid. A beam sweeps it, locks onto a day, and a card flies out and turns over: a scene that now joins the video. useOpenedDrops remembers what has been found, and cutDrops decides which finds a year gets.

Install

pnpm add @react-wrapped/scan @react-wrapped/core gsap

GSAP is a peer dependency: you install it yourself. Every @react-wrapped package is released under one version number, so install them all at the same version.

Use

import { useOpenedDrops, YearScan } from "@react-wrapped/scan";
import "@react-wrapped/core/styles.css";
import "@react-wrapped/scan/styles.css";

export function Scan({ calendar, drops, palette }) {
  const { opened, open } = useOpenedDrops("my-wrapped:ada:2026");
  return (
    <YearScan
      calendar={calendar}
      palette={palette}
      drops={drops}
      found={opened}
      onOpen={open}
      describeDay={(day) => `Day ${day + 1}`}
    />
  );
}

Docs

• Documentation
• Every design on one page
• A full Wrapped, playing

License

MIT