kinetograph.

A year of activity lights up week by week, then the camera leans in on the busiest day.

$npx kinetograph add heatmap-chart
Source

Props

Every prop has a default, so the component renders as it is. Change any of them in Studio or in code.

  • data

    list

    Counts: one array of seven days (Sunday first) per week, oldest week first.

  • startDate

    string = "2026-01-04"

    Date of the first cell, YYYY-MM-DD (a Sunday).

  • title

    string = "Contributions"

    Heading.

  • unit

    string = "contributions"

    What a count counts, for the tooltip and the subtitle.

  • mode

    light | dark = "light"

    Colour theme: light or dark.

  • palette

    primary | monochrome | ocean | sunset | grove | vivid = "primary"

    Chart palette: primary (indigo, yellow, fuchsia, mist, black), monochrome, ocean, sunset, grove or vivid.

  • sweepSeconds

    number = 4.4

    How long the camera takes along the weeks.

  • holdSeconds

    number = 1.6

    How long the last frame holds on the tooltip.

  • camera.tightZoom

    number = 2.4

    Zoom during the sweep.

  • camera.wideZoom

    number = 1

    Zoom of the whole grid.

  • camera.lag

    number = 0.3

    Seconds the camera trails the wave of light.

  • camera.motionBlur

    number = 1

    Strength of the motion blur on the fast moves; 0 turns it off.

  • camera.rackFocus

    number = 4

    Blur in pixels on the axis labels while the shot is tight.

Compositions

  • HeatmapChart