Hour heatmap

Q: What is the Hour heatmap block made of?

5 parts: key value and a delta chip against last week to date; week, Peak and Quietest facts; a dot per weekday and hour, sized by sessions, with a drop line on the peak; this week / Last week control; and quiet footer link. Keep them all, or drop the ones your product does not need; the rest of the block holds together without them.

Q: Is the Hour heatmap block responsive?

Yes. It is drawn at 760px and never stretched past that. Below it, its controls, text and spacing step down with the container the block sits in rather than the browser window, so it holds up in a sidebar, a tablet layout and a 390px phone without clipping or sideways scrolling.

Q: Is the Hour heatmap block accessible?

It ships with text labels on every icon-only button, full keyboard reach with a visible focus ring, states that never rely on colour alone, text contrast that holds when you retheme it, no animation for visitors who ask for reduced motion, and click targets of at least 24px.

Q: How do I add the Hour heatmap block to my project?

It is part of every Orvain Library plan: the React and Vue code, its frame in the Orvain Figma file, and the Orvain MCP server. With the MCP connected, an AI assistant such as Claude Code, Cursor or v0 can build it from one line: “Add the Orvain Hour heatmap block to this page.”

Hour heatmap is a Metrics block from Orvain UI, built for React and Vue with a matching Figma frame.

Best for

When in the week people show up, hour by hour

Anatomy

Key value and a delta chip against last week to date · Week, Peak and Quietest facts · a dot per weekday and hour, sized by sessions, with a drop line on the peak · This week / Last week control · quiet footer link

MCP

Busiest hours

184,285 sessions

up 6.1%, better vs last week to date

Week: 2–8 Nov
Peak: Wed 10:00 · 4,216
Quietest: Sun 02:00

Sessions per hour
Now, Sun 14:00

Sessions by weekday and hour
Row	00:00	01:00	02:00	03:00	04:00	05:00	06:00	07:00	08:00	09:00	10:00	11:00	12:00	13:00	14:00	15:00	16:00	17:00	18:00	19:00	20:00	21:00	22:00	23:00
Monday	114	128	115	120	119	134	234	611	1,552	2,885	3,872	3,821	2,422	2,103	3,084	3,659	2,926	2,071	1,025	729	863	742	518	265
Tuesday	132	121	135	134	133	155	239	672	1,664	3,482	4,091	3,884	2,502	2,332	3,558	3,985	3,442	2,087	1,081	766	912	846	590	301
Wednesday	118	129	116	131	127	139	244	679	1,762	3,266	4,216	3,746	2,419	2,202	3,256	3,956	3,148	2,115	1,098	819	889	829	563	284
Thursday	120	111	118	120	126	134	246	592	1,621	3,186	4,102	3,538	2,401	1,880	3,007	3,443	2,886	1,888	1,049	791	779	783	498	259
Friday	96	99	104	106	103	122	198	536	1,333	2,650	3,381	3,197	2,092	1,723	2,049	2,645	2,111	1,379	717	491	539	546	337	176
Saturday	87	86	92	89	92	96	136	208	381	644	995	1,220	1,192	956	600	384	246	248	346	536	653	562	379	202
Sunday	79	76	73	76	82	86	116	189	340	586	867	933	1,031	761	545	0	0	0	0	0	0	0	0	0

Updated 2 min ago

In the Orvain Library

Get Hour heatmap for your product

The block’s code in React and Vue, its frame in the Figma file, and the Orvain MCP so your AI tools build with it. Part of every Library plan, alongside every other block.

React
Vue
Figma frame
Orvain MCP

Get all access How the MCP works

About this block

Part of Metrics

What’s inside

05parts

The pieces it is built from. Keep them all, or drop the ones your product doesn’t need.

Key value and a delta chip against last week to date
Week, Peak and Quietest facts
A dot per weekday and hoursized by sessions, with a drop line on the peak
This week / Last week control
Quiet footer link

Responsive behaviour

760 px

Drawn at this width and never stretched past it. Below it, controls, text and spacing step down from the box the block sits in, not the window.

1440pxDesktop · 12 columns

When to use it

Where Metrics earns its place

Reach for Metrics

The top row of a dashboard, where each tile answers a single question
A report someone scans before deciding whether to open the table underneath
Comparing two series across a few categories, with a legend that can switch one off
Looking for a pattern across two axes, such as hour against weekday

Reach for something else

The reader needs the individual records: a chart shows shape and a table shows rows, so link one to the other rather than asking the chart to do both
There are only two or three values to compare; write them as a sentence, because a chart of three bars costs more attention than it returns
An operational signal that has to be acted on within seconds: a status page or an alert is the right surface, since a trend chart is read rather than watched

Notes for AI

1 line

Is all your assistant needs. With the Orvain MCP connected, it builds the block from your own tokens and components.

Add the Orvain “Hour heatmap” block to this page: key value and a delta chip against last week to date, Week, Peak and Quietest facts, a dot per weekday and hour, sized by sessions, with a drop line on the peak, This week / Last week control, quiet footer link.

Works in

Connect the MCP

Questions about Hour heatmap.

What is the Hour heatmap block?

Hour heatmap is a Metrics block from Orvain UI, built for React and Vue with a matching Figma frame. Best for when in the week people show up, hour by hour.

What is the Hour heatmap block made of?

Is the Hour heatmap block responsive?

Is the Hour heatmap block accessible?

How do I add the Hour heatmap block to my project?

When should I not use a Metrics block?

Previous← Launch plan NextDiverging months →

More Metrics blocks

All Metrics

Monthly spending

$27,496

up 12.4%, worse vs September

October 2026
Average $23,978
Highest Oct 2026

Monthly spending, November 2025 to October 2026
Category	Spending
November 2025	22,140
December 2025	25,860
January 2026	21,370
February 2026	20,915
March 2026	23,480
April 2026	22,760
May 2026	24,105
June 2026	23,390
July 2026	25,720
August 2026	26,040
September 2026	24,465
October 2026	27,496

October 2026$27,496
12-month average$23,978

Updated 2 min ago

Metric card

One headline figure with the months behind it: point at a month and it becomes the figure

Subscription revenue

$1.88 M

up 21.9%, better vs May–Oct 2025

May–Oct 2026
Average $314k a month
Best Oct

Subscription revenue by month, May to Oct 2026
Category	Revenue
May	284,000
Jun	297,000
Jul	305,000
Aug	318,000
Sep	331,000
Oct	347,000

Updated today, 09:12

Monthly rows

A short run of months you read down, like a table that draws

Hours by task

2,530 h

up 5.2%, better vs previous 30 days

People 14
Per person 181h
Top task Programming

Hours by task, last 30 days
Task	Windows	macOS	Total
Programming	386h	344h	730h
Design	412h	298h	710h
Meetings	240h	188h	428h
Research	162h	141h	303h
Writing	118h	96h	214h
Support	84h	61h	145h

Synced from 14 people

Ranked bars

Two series across a few categories: a legend that also switches them off

Day stack

A week of tracked time: what was booked and what was left

Donut breakdown

Where a total went: five parts at most, each named beside its share

Area trend

A running level over a year, with what is forecast set apart

Launch plan

A plan of tasks over weeks: what is done, what is late and where today falls

Diverging months

Money in against money out, month by month, with the balance

KPI card row

Four headline numbers over the same period, side by side

Figure strip

A few related figures read as one line, each against the period before

This week vs last week

A day-by-day comparison with the week before

Forecast with a target

Whether the year will land on its goal, with the likely range

Latency

A response time against its limit, with the traffic behind it

Noise level

A live reading on a fixed scale, from low to high

Score gauge

A score out of a total that is built from parts

Sign-up funnel

People moving through ordered steps, and who left at each

Service uptime

The health of a few services day by day, with the incidents behind it

The Orvain Dispatch

Premium components,
free in your inbox.

Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.

Just components, never spam. You can unsubscribe anytime.