# Graphics

A video gets watched once. A picture gets posted. The graphics package draws what a viewer takes away: one share card with the whole year on it, an insight card for each finding with its own chart, and a gallery under the video to download them from. Everything is drawn in the browser, in the palette the viewer picked.

> Live preview: try it at https://bettertyped.github.io/react-wrapped/docs/graphics/
>
> Drawn on a canvas just now, in the palette picked below.

## Installation

```bash
pnpm add @react-wrapped/graphics @react-wrapped/core gsap
```

```tsx
import "@react-wrapped/core/styles.css";
import "@react-wrapped/graphics/styles.css";
```

## What is in it

- [Share card](https://bettertyped.github.io/react-wrapped/docs/graphics/share-card/): The handle, the year's grid, four numbers and two tokens on one 1200 by 630 card.
- [Insight cards](https://bettertyped.github.io/react-wrapped/docs/graphics/insight-cards/): One finding each: a big number, the chart that shows it, and one line.
- [Graphics gallery](https://bettertyped.github.io/react-wrapped/docs/graphics/gallery/): Tiles under the video with a download button each, and locked ones for what the scan has not found.

## One size, one palette

- Every card is 1200 by 630, the size link previews use, and is saved at twice that so it stays sharp.
- A card takes a `WrappedPalette`, the same object the stage reads. Pass `resolvePalette(config)` and the card wears the theme of the video it came from.
- Cards are drawn in the browser. On a server there is no canvas and no layout, so draw them in an effect or on a click.
- The numbers on a card are strings you formatted. Build the card and the [summary scene](https://bettertyped.github.io/react-wrapped/docs/scenes/summary/) from the same values and they always agree.

## Related

- [Share card](https://bettertyped.github.io/react-wrapped/docs/graphics/share-card/)
- [Insight cards](https://bettertyped.github.io/react-wrapped/docs/graphics/insight-cards/)
- [Graphics gallery](https://bettertyped.github.io/react-wrapped/docs/graphics/gallery/)
- [Summary scene](https://bettertyped.github.io/react-wrapped/docs/scenes/summary/)
- [Theming](https://bettertyped.github.io/react-wrapped/docs/theming/)

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