Pulse chart
Pulse draws one stroke per day, as tall as the day was busy, growing out from a centre line. The quiet stretch is bracketed and named, so a holiday reads at a glance.
Pulse
EpicEvery day a stroke, the quiet stretch lit.
Every day a stroke, the quiet stretch lit.
Installation
pnpm add @react-wrapped/charts @react-wrapped/core gsapUsage
A chart is data, not markup. Hand a scene an object with type set and the numbers to draw, and the scene draws it and plays its entrance on the video's timeline.
import { chartScene } from "@react-wrapped/scenes";
export const scene = chartScene(
{
eyebrow: "Your year",
title: ["Pulse."],
lede: "Every day a stroke, the quiet stretch lit.",
chart: {
type: "ticks",
values: [
1, 8, 6, 4, 2, 9, 7, 5, 3, 1, 8, 6,
// ...and 108 more
],
gap: { from: 53, to: 64, label: "12 days off" },
},
},
{ key: "ticks", label: "Pulse" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "ticks" | Picks this chart. |
values | readonly number[] | One value per day, oldest first. |
gap | { from: number; to: number; label: string } | The quiet stretch, as two indexes into values, and its name. |
How it comes in
Every chart plays in the order it is read: what it is made of stands first, the numbers arrive with a direction, and the one thing the chart is about lands last with its pill. Nothing is on screen before its own entrance. See how charts animate for the shared rules.
