Day clock chart
Day clock wraps a day around a clock face. Hand it 24 values, midnight first, and it lights the busiest hour or the hour you mark. Use it to show when someone works: a night owl, an early bird.
Day clock
EpicA day, hour by hour. The lit hour is the busiest.
A day, hour by hour. The lit hour is the busiest.
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: ["Day clock."],
lede: "A day, hour by hour. The lit hour is the busiest.",
chart: {
type: "clock",
hours: [
5, 3, 1, 0, 0, 0, 1, 3, 6, 10, 12, 11,
// ...and 12 more
],
},
},
{ key: "clock", label: "Day clock" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "clock" | Picks this chart. |
hours | readonly number[] | 24 values, midnight first. |
mark | number | The hour to light, 0 to 23. The busiest hour when left out. |
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.
