Bento 6 block design & features
Bento6 is a four-tile bento on a black section, built with shadcn/ui card shells and custom animated SVG panels. A six-column grid places two equal half-width tiles on the top row, each pairing a tall visual area with a white headline and supporting paragraph below. The bottom row holds a wide tile spanning four columns and a narrower two-column tile, both following the same visual-then-caption structure.
Dashed white borders outline every tile against the black field. The top two cells render monochrome SVG interface diagrams with gradient fills and motion-driven reveals, while the lower cells use photographic webp panels that fade upward on scroll. White semibold headings and body copy sit in padded caption zones beneath each visual.
This reads as a premium dark enterprise layout with a dashboard or analytics product tone. The dashed wireframe borders and mixed SVG-plus-photo tiles give it more character than a standard light bento, though the overall pattern remains a familiar asymmetric grid. Moderate complexity: two tiles are fully code-driven illustrations and two rely on replaceable imagery.
The grid stacks to a single column on smaller screens, preserving each tile's visual-above-caption order.