Bento Grids 01

Bento Grids

Most bento sections are a picture of an interface. This one is the interface.

Tick a task and the open counter drops. Type in the command palette and it filters as you go, with arrow keys and a keycap hint. Drag the seam on the review card and the rewrite slides in over the original. The live file carries selections, collaborator cursors and a publish state that actually completes.

Eight colour presets travel inside the component, each in light and dark, plus an Auto mode that follows the visitor's system setting. The layout reads its own container rather than the window, so it moves from three columns to two to one without a breakpoint to wire.

It is one self-contained code component: no external packages, no shared styles, nothing to install. The component URL alone carries the whole product.

What is inside

• Four cards, four real mechanics: task board, command palette, drag-to-reveal diff, live file
• Eight colour presets: Default, Nocturne, Editorial, Brutal, Terracotta, Forest, Cobalt, Mono
• Light, Dark and Auto, where Auto follows the visitor's system setting
• Responsive by container width, three columns to two to one, no breakpoints to wire
• Twelve property controls, four of them full card content objects
• Ambient light painted on canvas, so it costs no WebGL context
• One self-contained file, no external packages and no shared styles