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.
Drawing the card.
Drawn on a canvas just now, in the palette picked below.
Installation
pnpm add @react-wrapped/graphics @react-wrapped/core gsapimport "@react-wrapped/core/styles.css";
import "@react-wrapped/graphics/styles.css";What is in it
- Share cardThe handle, the year's grid, four numbers and two tokens on one 1200 by 630 card.
- Insight cardsOne finding each: a big number, the chart that shows it, and one line.
- Graphics galleryTiles 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. PassresolvePalette(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 from the same values and they always agree.
