Keynote Bento Hero
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.
DOM + CSS0 deps1 file · 16 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useId, useRef, useState } from "react";
import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactNode } from "react";
/**
* KeynoteBentoHero — a launch hero set like a keynote recap slide: the
* numbers are the image.
*
* One 2x2 hero tile carries the biggest figure on the page in the one accent
* colour; smaller tiles around it each carry one figure and a mono caption,
* or a line of copy. The first time the hero comes into view the grid
* ASSEMBLES: the hero tile settles first, then every other tile rises into
* its slot from the direction of the hero, nearest first, 60ms apart, and
* each figure counts up as its tile lands. As the hero scrolls away, the
* tiles drift gently apart and dim, like a slide being put away.
*
* A light follows the pointer across the grid and catches the hairline of
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this heroe
The keynote recap slide made the bento famous: a dark canvas, tiles of different sizes, and one figure so big it is the picture. This hero works the same way. The 2x2 tile carries the largest number on the page in the one accent colour, and the tiles around it each carry one figure and a mono caption, or one line of copy. The first time the hero comes into view, the grid assembles. The hero tile settles first, then every other tile rises into its slot from the direction of the hero, nearest first, sixty milliseconds apart, and each figure counts up as its tile lands. Scroll away and the tiles drift apart and dim, like a slide being put away. A light follows the pointer and catches the hairlines; nothing lifts and nothing casts a shadow. Figures are bold grotesque with tabular digits, and mono is kept for the labels. Tiles take a span, a figure or free content, and an optional link.
Curator’s note
Part of the Bento Box kit, drop 2, phase 4: the drop's featured hero. Pro because it composes a full first screen with a measured assembly, count-ups, a scroll timeline and a shared pointer light.
