vividsites
Start building
Theme
Start building — free

Activity Heatmap — data display.

A contribution-style year heatmap whose squares ripple in on a spring, with one tooltip that springs from square to square and a legend that isolates an intensity when you hover it. It is a full keyboard grid, and on a phone it scrolls sideways inside itself, opened at the latest weeks.

by vividsites StudioUICSSJS
  • DM Mono (Google Fonts)
Use in Create
Installs
1,519
Kind
UI · Data display
Snippet
431lines
Weight
32.6KB
Dependencies
1CDN
Added
1 Oct 2026
vividsites.app/c/activity-heatmap
Starting the preview…

The component’s own demo at 1280 × 800. Hover, click and scroll inside the frame.

More in Data display

More data display, same paste.

See all