Bento Grid

Written for the variant you picked above: Night

Build a bento grid section. Props: tiles [{id, title, body, visual, span {lg, md, sm: [columns, rows]}, textFirst, href}], eyebrow, title, lede, theme, rowHeight (default 244px) and onNavigate. The grid measures its own width: four columns from 900px, two from 560px, otherwise one; each tile's span is chosen for the current column count (falling back to the next size that's set) and clamped so it never overflows a row. 12px gaps, tiles 22px radius on a near-black ground, a 1px inner hairline, no shadows. Each tile stacks its visual and its text (title 1.04rem/600 and a muted line), visual first unless textFirst; a tile with href gets a small arrow link beside its title, so interactive visuals inside it stay usable. One light for the whole grid: on pointer move, give every tile the pointer position in its own coordinates (throttled to animation frames) and draw two radial gradients from it — a faint wash inside the tile and a brighter ring on its border only (a 1px masked border), so the light catches the edges of every tile near the pointer, including neighbours. It fades in on enter and out on leave, and is off on touch. The demo's tiles are small working pieces of interface: a requests-per-second area chart that ticks every 900ms with its value and change; a command palette that types queries and steps through results; overlapping teammate avatars with two drifting named cursors and '8 editing now'; three real switches; an install command with npm, pnpm and bun tabs and a copy button that only says Copied after the clipboard write succeeds; and a canvas globe of dots turning slowly with pulsing region pings. Every animation runs only on screen, stops in hidden tabs and is off under reduced motion. Selected variant — Night (night): Palette for this theme (Night): --bento-accent #6ea8ff; --bento-faint #858580; --bento-glow rgba(255, 255, 255, 0.045); --bento-good #4fd18b; --bento-ground #080808; --bento-ink #f3f3f1; --bento-light rgba(255, 255, 255, 0.5); --bento-line rgba(255, 255, 255, 0.075); --bento-muted #9c9c97; --bento-tile #111112; --bento-tile-2 #161617. Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "night". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Move the pointer across the grid and one soft light follows it, catching tile edges. Inside the tiles: flip the switches, change package manager, copy the command, follow the arrow links. Motion: The light follows the pointer every frame and fades in and out over 350ms. The chart ticks every 900ms, the palette types every 420ms, the globe turns continuously and the cursors drift. Everything pauses offscreen and stops under reduced motion. Accessibility: A labelled section of articles with real headings. The switches are role=switch with labels, the package managers are tabs, copy confirms only after it succeeds, and arrow links are named for their tile. The animated chart and palette are decorative and hidden from assistive tech. Responsive behavior: Four, two or one columns from the grid's own width, with spans per breakpoint; row height stays fixed so tiles keep their proportions. Touch: No light on touch; every control is a tap target and nothing needs hover. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Move the pointer across the grid and one soft light follows it, catching tile edges. Inside the tiles: flip the switches, change package manager, copy the command, follow the arrow links.

Motion

The light follows the pointer every frame and fades in and out over 350ms. The chart ticks every 900ms, the palette types every 420ms, the globe turns continuously and the cursors drift. Everything pauses offscreen and stops under reduced motion.

Accessibility

A labelled section of articles with real headings. The switches are role=switch with labels, the package managers are tabs, copy confirms only after it succeeds, and arrow links are named for their tile. The animated chart and palette are decorative and hidden from assistive tech.

Responsive

Four, two or one columns from the grid's own width, with spans per breakpoint; row height stays fixed so tiles keep their proportions.

On touch

No light on touch; every control is a tap target and nothing needs hover.