@react-wrapped/core
v1.0.1
Published
The stage, the motion kit, palettes, formats and transitions behind a Wrapped: a year in review played as a video, in React.
Maintainers
prc5Readme
@react-wrapped/core
The stage, the motion kit, palettes, formats and transitions of react-wrapped.
Part of react-wrapped, the library behind Hype Stack's Wrapped.
Everything else in @react-wrapped stands on this: WrappedStage, defineScene and the motion helpers (linesIn,
riseIn, countUp, hold), the palettes and the three formats, the nineteen transitions and defineTransition, and
the config that fits in a URL.
Install
pnpm add @react-wrapped/core gsapGSAP 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 { defineScene, hold, Lines, linesIn } from "@react-wrapped/core";
import "@react-wrapped/core/styles.css";
import { gsap } from "gsap";
export const helloScene = defineScene<{ title: readonly string[] }>({
render: ({ title }) => <Lines lines={title} />,
animate: ({ root }) => {
const tl = gsap.timeline();
linesIn(tl, root, { at: 0 });
hold(tl, 1.5);
return tl;
},
});