Bento 40 block design & features
Bento40 is a two-row bento built with shadcn/ui on a black section. The top row splits into a tall left tile with two stacked product cards for Real-Time Insights and Smart Automation, footer badges, and a Realistic Human-Like Voices headline, plus a right column with a wide language keyboard tile and a shorter language-support image tile beneath it. The bottom row spans eight columns with a wide voice customization mockup on the left and a narrower instant voice generation card on the right showing an API key sweep, fingerprint scan graphic, and user credentials.
Black cards with hairline white borders and near-black inner wells define the look, with red as the primary accent on keyboard highlights, badge pills, and a pulsing glow behind the auth area. Keys drop in sequentially on scroll, illustrations fade and scale in, and the API key string gets a continuous gradient highlight sweep with a red cursor. Typography is headline-forward with muted supporting copy anchored to the bottom of several tiles.
This targets an AI voice or speech product with a polished, slightly cinematic dark aesthetic. The keyboard animation and fingerprint auth panel are the standouts, giving it more interactive weight than a static screenshot grid. Complexity is elaborate and mixed: webp mockups carry the upper visuals while the keyboard, key sweep, and pulsing glow are CSS and animation driven.
The grid collapses to a single column on smaller screens with each tile keeping its portrait or wide framing before stacking.