Bento 26 block design & features
Bento26 is a four-tile two-by-two bento on a white section, built with Shadcn UI bordered cards. Each cell stacks an animated interface preview on top, then a small icon beside a large headline, then a supporting paragraph. Topics cover modular block layout, drag-and-drop styling, responsive auto-fit, and smart adaptive sizing.
Pale hairline borders and generous internal padding give each card a brochure-like frame. The preview panels host code-driven UI scenes: a radial AI scoring gauge with counting numerals, layout manipulation mockups, responsive breakpoint demos, and density scaling examples. Icons come from a shared four-icon set in saturated color. Motion is scroll-triggered fade and count-up entrance.
A polished light feature grid close to a product-builder marketing pattern. All four tiles are equally weighted with identical caption structure, making it easy to swap copy while keeping the animated previews. Moderate complexity achieved through CSS and SVG-driven mini interfaces rather than photography.
Stacks to one column on smaller screens with the preview remaining above the icon headline row.