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.
DOM + CSS0 deps1 file · 66 KB TSXreduced-motion aware
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
// ---------------------------------------------------------------
}Details
About this page 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.
