Orvain UI

Latency

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

Best for

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

Anatomy

Average latency in seconds with P95 and P99 · delta chip where lower is better · tick strip against a dotted limit · 24h / 7d control

MCPConnect the MCP server

Avg latency

1.8 seconds
up +0.3s, worse vs yesterday
P95
3.6s
P99
5.9s

  • Avg latency
  • Over the 2s limit
  • Requests
Average latency over the last 24 hours, against a 2 second limit
TimeAvg latencyRequests
15:001.08s2.2k
16:001.40s2.5k
17:001.19s2.8k
18:001.55s3.2k
19:001.59s3.7k
20:001.67s4.2k
21:001.58s4.7k
22:001.90s5.1k
23:001.63s5.2k
00:001.85s5.1k
01:001.87s4.7k
02:001.80s4.3k
03:001.64s3.8k
04:001.83s3.3k
05:001.49s3.1k
06:001.58s3.2k
07:001.46s3.6k
08:001.27s4.2k
09:001.26s4.9k
10:001.35s5.4k
11:001.31s5.6k
12:002.30s5.4k
13:002.05s4.8k
Now1.80s4.1k
API gateway · eu-central

In the Orvain Library

Get Latency 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 accessHow the MCP works

About this block

Part of Metrics

What’s inside

04parts

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

  1. Average latencyin seconds with P95 and P99
  2. Delta chip where lower is better
  3. Tick strip against a dotted limit
  4. 24h / 7d control

Responsive behaviour

560 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

Accessibility

06to keep

What the block ships with. Hold on to these as you make it yours.

  • Named controlsEvery icon-only button keeps a text label, so a screen reader can say what it does.
  • Keyboard firstEvery control is reachable with Tab, and its focus ring stays visible.
  • More than colourA state never rides on colour alone; a mark or a word goes with it.
  • Contrast holdsRetheme freely, but keep text at or above the contrast it ships with.
  • Calm motionFor visitors who ask for reduced motion, things simply appear.
  • Room to hitTargets stay at least 24px, with space between neighbours.

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 “Latency” block to this page: average latency in seconds with P95 and P99, delta chip where lower is better, tick strip against a dotted limit, 24h / 7d control.

Works in
Connect the MCP

Questions about Latency.

What is the Latency block?

Latency is a Metrics block from Orvain UI, built for React and Vue with a matching Figma frame. Best for a response time against its limit, with the traffic behind it.

What is the Latency block made of?

Is the Latency block responsive?

Is the Latency block accessible?

How do I add the Latency block to my project?

When should I not use a Metrics block?

Previous← Forecast with a targetNextNoise level →

More Metrics blocks

All Metrics

Metric card

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

Monthly rows

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

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

Hour heatmap

When in the week people show up, hour by hour

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

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.