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.
- 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.
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
"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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Keynote Bento Hero
heroesA 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.
Glass Bento Wall
sectionsA 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.
Bento Pricing Tiles
sectionsPricing 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.