Heatmap

A half-year of days as a grid of squares. Cells arrive in a wave from the left; hover one (or arrow through them) and it brightens while a tooltip glides to it.

Heatmap is part of Pro.

Get Pro to try it live and copy its code, along with every other element in the library.

Get Pro Already Pro? Sign in

CountdownFlip-clock digits. Each digit is a card split at the middle; when its number changes the upper half folds down carrying the new value and the lower half catches it.
TimelineOne dot vocabulary. Done is filled ink, the current step breathes, pending is a hairline.
Schema · JSON viewerJSON as a tree you can fold. Chevrons turn, children fold on a grid track and arrive 25ms apart out of a blur; a folded node shows its size in place of its children.
StreakAdding a day rolls the number, scatters and reassembles the flame, and fills today's cell; a full week slides away. [x, y, heat]: heat 0 = --ts-warning (tip), 1 = --ts-danger (base); edges run hotter than the core
Liquid storageA storage bar that behaves like liquid. Segments pour in on a wobbly spring, the one you hover swells while the rest fade back, and pressing a segment drains it out until you restore.
Self-filling dashboardA dashboard whose loading state is the reveal. Two cards land one after the other, the revenue number rolls in digit by digit, the heat grid pops cell by cell, and the channel bars sweep to their share.

Heatmap

Heatmap is part of Pro.

Related