Bento Launch Template
A complete launch page from the Bento Box kit: keynote figures, product captures, proof, pricing and a footer set as tiles, broken once by a full-bleed race between two builds.
- Category
- Templates
- 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.
Launch week · Kiln 3.0
Read the changelogBuilds that remember.
Kiln caches every step of every build, on your laptop and in CI, so the only work left is the work you just did.
Remote cache
12×
faster than a cold build, measured across 40,000 production repositories in September.
Cache hit rate
97.4%
Median build
1.8s
Install
$ npx kiln init
Same commit · same runner · 214 packages
Twelve times sooner.
Both builds start together. Kiln restores every step it has already done, so only the new work runs.
Kiln finished 17 minutes 32 seconds earlier.
Features
Everything your CI does twice, done once.
- deploy prevDeploy previewDeploy to productionPromote buildRoll backPreview ready1.8s
Command palette
Every action is two keys away.
Deploy, promote or roll back without leaving the keyboard.
- BuildingReady
▸ restore cache hit 412/418
▸ install 0.2s
▸ typecheck 0.4s
▸ build web 0.9s
▸ build api 0.3s
▸ upload 48 files
▸ restore cache hit 412/418
▸ install 0.2s
▸ typecheck 0.4s
▸ build web 0.9s
▸ build api 0.3s
▸ upload 48 files
Builds
Logs that read like a checklist
Previews
A live URL for every pull request
0.9s
Median time to preview
Regions
Cache next to your runners
30 regions · 6 continents
Proof
Numbers from last month, not a pitch deck.
Builds today
48,210
Packages, largest repo
214
CI minutes savedSeptember
3.2M
Teams on 3.0
1,840
“We cut CI from nineteen minutes to ninety seconds, and nobody rewrote a pipeline.”
Priya N. · Platform lead, Ledgerline
Cache hit rate
97.4%
Pricing
Pay for what you ship.
- Unlimited projects
- Remote cache, 100 GB
- Branch previews
- Priority builds
Hobby
For side projects and trying things out.
$0/ month
Free forever
Start freeTeam
Shared cache, roles and one bill.
$24/ seat
Billed monthly
Start a teamEnterprise
Your own cache bucket, SSO and a 99.99% SLA.
Free trial
14 days
Card needed
None
FAQ
Questions, answered.
I'm on 2.x. What changes?
Nothing breaks. Kiln 3.0 reads your 2.x cache, and one command moves your config across. The changelog lists every change.
Does it work with my CI?
Yes. Kiln runs as one step in GitHub Actions, GitLab, Buildkite or CircleCI, and on your laptop, with the same cache.
What happens on a cache miss?
The step runs as it would without Kiln, and its result is stored for the next build. A miss is never slower than no cache.
Where is my cache stored?
In the region you pick, encrypted at rest. Enterprise plans can keep it in their own bucket.
Can I try it on a real repository?
The Hobby plan is free for good, and Pro has a 14-day trial with no card needed.
Get started
Your next build is already cached.
Props
"use client";
import { useEffect, useId, useRef, useState } from "react";
import type { CSSProperties, MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* BentoLaunchTemplate — a complete launch page built from the Bento Box kit,
* for a build tool's major release.
*
* Every section is a grid of tiles on the kit's near-black canvas, where
* size is the hierarchy: a nav cut into cells that share their hairlines, a
* keynote hero whose biggest tile is the headline figure, features whose
* pictures are cropped product captures that play on hover, proof figures
* that count up once, pricing where the recommended plan is the 2x2, an FAQ
* and a footer set as tiles. One moment breaks the grid on purpose: a
* full-bleed band where two builds of the same commit race edge to edge,
* and the cached one finishes twelve times sooner.
*
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this template
A kit proves itself when its pieces make one page, so this is that page: a launch for a build tool's 3.0, built entirely from the Bento Box kit. The nav is one row of cells that share their hairlines, and it tracks the section you are reading. The hero's biggest tile is the headline figure, twelve times, set like a keynote slide. Features are tiles whose pictures are tightly cropped product captures that play when you hover them. Proof figures count up once as they arrive, the recommended plan is the one 2x2 in pricing, and the footer is set as tiles with the name cropped huge at the bottom. One moment breaks the grid on purpose, because a page of nothing but tiles reads as a 2023 default: a full-bleed band where two builds of the same commit race edge to edge, and the cached one finishes twelve times sooner, its type inverting as the bar passes. Each screen holds one accent, nothing on the first screen runs on a timer, and under reduced motion every figure is final and still. As a route it scrolls with the page; in a fixed-height frame it can scroll inside its own box. It reflows from phone to desktop with container queries. Everything the page claims, from the figures and the quote to the race times, plans, questions and links, comes from one typed content object, so you replace it in one place; the demo content is for a fictional product and is marked as placeholder.
Curator’s note
Part of the Bento Box kit, drop 2, phase 6: the page the kit was built for. Pro because it is a full page assembled from the kit, with a scrollspy nav, capture loops, count-ups, billing and a scroll-triggered race.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Glass App Template
templatesA complete liquid-glass product page for a calendar app, where every glass surface shares one tint that adapts to the section under the nav as you scroll.
Hairline Tile Button
componentsA button built like a bento tile: a tonal step on hover, a hairline that catches a light under the pointer, keycaps, and nothing that lifts.
Pricing Page
templatesA pricing page that computes: seat slider, annual toggle and an expandable comparison matrix.