Skip to content

Metric Proof Tiles

A proof section set as bento tiles: 1x1 figures that count up once as they arrive, one accent tile that breaks the row, a quote, and a live figure that ticks slowly.

ProBento Boxminimal
Category
Sections
Added
2026-09-26
Deps
none
Updated
2026-09-26

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Preview

Proof

Numbers from last month, not a pitch deck.

Every figure here comes from builds that ran on Kiln in September.

  • Cache hit rate

    97.4%+4.1 pts

  • Median build

    1.8s−0.6s

  • Faster than a cold build

    12×Measured across 40,000 production repositories.

  • Builds today

    48,210

  • “We cut CI from nineteen minutes to ninety seconds, and nobody rewrote a pipeline.”

    Priya N. · Platform lead, Ledgerline

  • Regions

    30+4 this year

Props

No runtime dependencies
"use client";

import { useEffect, useRef, useState } from "react";
import type { CSSProperties, PointerEvent as ReactPointerEvent } from "react";

/**
 * MetricProofTiles — a proof section set as bento tiles: small 1x1 figures,
 * and one accent tile that breaks the row.
 *
 * Each stat is a single 1x1 tile: a mono label and a big bold figure, the
 * way keynote recap slides and live dashboards set their numbers. The one
 * figure you most want remembered is a 2x1 tile filled with the accent, the
 * only colour on the section, so it breaks the rhythm of the row. A 2x1
 * quote puts a person next to the numbers.
 *
 * The figures count up once, when the section scrolls into view (ease-out,
 * 900ms, 60ms apart), as the tiles rise into place. A section that is
 * already on screen when the page loads keeps its final numbers, so nothing

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}
Notes

About this section

Stats bands usually set four numbers in four equal boxes. Here each figure gets a 1x1 tile of its own, set big and bold like a keynote recap, and the one number you most want remembered takes a 2x1 tile filled with the section's only colour, so it breaks the row. A quote puts a person next to the numbers. The figures count up once, as the tiles rise into place 60 milliseconds apart, when the section scrolls into view. A section already on screen when the page loads keeps its final numbers, so nothing resets in front of the reader; client-rendered pages can ask it to count on load instead. A figure marked live then ticks on a slow interval, three seconds or more, only while it is on screen. Depth is luminance and a one-pixel hairline, and a light that follows the pointer catches the hairlines near it.

Curator’s note

Part of the Bento Box kit, drop 2, phase 6: the kit's second proof section (Bento has no signature background, so slot 2 went to proof). Pro because it is a composed section with arrival logic, count-ups that never reset in front of the reader, and a live figure that only ticks on screen.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Featured
NewPro

A launch hero set like a keynote recap slide: one huge figure in a 2x2 tile, and a bento grid that assembles around it as the numbers count up.

herobentokeynote
NewPro

A feature grid cut from one sheet of liquid glass: each tile is as thick as it is big, and one pointer light moves across every rim.

bentofeature gridsection
NewPro

Pricing set as a bento grid: the recommended plan is the one 2x2 tile with the biggest price and the only accent, surrounded by plans, reassurances and a sales tile.

pricingbentoplans