Skip to content

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.

ProBento Boxminimal
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.

Preview

Launch week · Kiln 3.0

Read the changelog

Builds 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.

Kiln1:32
Cold build19:04

Kiln finished 17 minutes 32 seconds earlier.

Features

Everything your CI does twice, done once.

  • Command palette

    Every action is two keys away.

    Deploy, promote or roll back without leaving the keyboard.

  • 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.

  • ProMost popular

    $16/ month

    Billed monthly

    Start 14-day trial
  • Hobby

    For side projects and trying things out.

    $0/ month

    Free forever

    Start free
  • Team

    Shared cache, roles and one bill.

    $24/ seat

    Billed monthly

    Start a team
  • Enterprise

    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.

Start building

Props

No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

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

NewPro

A 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.

templatelanding pageproduct page
New

A 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.

buttonbentohairline
Pro

Pricing Page

templates

A pricing page that computes: seat slider, annual toggle and an expandable comparison matrix.

pricingsaasplans