Bento Preview Hero
Copy beside an asymmetric bento grid of small feature-glimpse tiles.
- Category
- Heroes
- Added
- 2026-09-01
- Deps
- 1
- Updated
- 2026-09-01
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.
One workspace. Every tool your team opens daily.
Props
"use client";
// Full-size shippable hero. The registry preview above is a scaled-down
// stand-in for this component at normal type scale.
import { motion } from "framer-motion";
function BentoGrid({ tileCount }: { tileCount: string }) {
return (
<div className="grid grid-cols-2 grid-rows-2 gap-4">
<motion.div
initial={{ opacity: 0, scale: 0.96 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
className="col-span-2 flex flex-col justify-center gap-2 rounded-2xl border border-slate-200 bg-white p-6"
>
<div className="h-3 w-1/2 rounded-full bg-blue-100" />
<div className="flex items-end gap-2 pt-2">
<div className="h-10 w-3 rounded-sm bg-blue-600" />
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this heroe
Where product-shot-hero bets on one dominant screenshot, this hero deliberately fragments the product into an asymmetric mosaic of small, unrelated glimpses — a chart corner, a loading state, a list — so the implication is breadth of capability rather than depth of one feature. It's the right structural idea for an all-in-one workspace or platform product with several features worth teasing, and it's actively misleading for a single-feature tool, where a four-tile mosaic invents complexity that isn't there. The non-obvious detail is that each tile is a self-contained fragment rather than four crops of the same screenshot — real product screenshots cropped into a bento grid tend to look accidentally cut off, while independently-composed glimpses read as intentional. The `tileCount` prop (3 or 4) is a genuine layout decision, not cosmetic: dropping to three tiles removes the bottom-right cell entirely rather than stretching a tile to fill it, which keeps the asymmetry intentional instead of accidental. Caveat: needs at least two visually distinct tile types (chart + spinner + skeleton, not three near-identical bar charts) or the mosaic reads as repetition.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Product Shot Hero
heroesA dominant framed app-window screenshot mock with the headline as a caption above it.
Split Screen Hero
heroesA copy-left, product-right split with a floating stacked dashboard card.
Spotlight Card Grid
patternsA card grid with a soft red spotlight that follows the cursor across it.