Bento Grid

Fluid responsive layout engine with dense auto-flow, asymmetric card spans, and subtle kinetic hover glow.

CLI Installation

React

$pnpm dlxexhumaaddbento-grid--flavor=react

// 01Workbench

Interactive Specification & Studio

layouts

Preset:

Viewport

Fluid 100%

ANALYTICAL KINETICS#01

Continuous Math Engine

Live Compositor Telemetry

Hardware-accelerated CSS custom properties driven directly by zero-allocation requestAnimationFrame loops.

BIG-OMEGA#02

Ω(120Hz)

120FPS

Guaranteed lower-bound execution with zero layout thrashing via cached bounding geometry.

COMPOSITOR#03

< 0.04ms

0.038ms

Sub-pixel compositor translation without main-thread jank or garbage collector pauses.

AUTO-PACKING#04

Dense Flow Backfill

CSS Grid automatically backfills empty track pockets, eliminating layout voids.

UNIVERSAL#05

13 Ecosystems

ReactVueSvelteSolidFlutter

Native zero-dependency implementations compiled for all tier-1 web frameworks.

Parameters

3 Props

cols

gap

rowHeight

// 02Usage

Quick Start & Consumer Example

Copy-paste ready implementation for React (.tsx). Automatically updates when you modify parameters in the Workbench above.

BentoGridDemo.tsx

React (.tsx)

import React from 'react';
import {
  BentoGrid,
  BentoCard,
  BentoHeader,
  BentoContent,
  BentoVisual,
} from '@/components/ui/BentoGrid';

export function BentoGridDemo() {
  return (
    <section className="p-8 bg-background text-foreground">
      <BentoGrid cols={3} gap={20} rowHeight={180} className="max-w-5xl mx-auto">
        <BentoCard colSpan={2} rowSpan={2}>
          <BentoHeader>
            <span className="text-3xs font-mono font-bold text-primary">ANALYTICAL KINETICS</span>
            <h3 className="text-xl font-bold mt-1">Continuous Math Engine</h3>
          </BentoHeader>
          <BentoVisual>
            <div className="w-full h-24 rounded-xl border border-primary/20 bg-primary/5 flex items-center justify-center">
              <span className="text-xs font-mono text-primary">Telemetry Visualization</span>
            </div>
          </BentoVisual>
          <BentoContent>Hardware-accelerated CSS custom properties driven by rAF loops.</BentoContent>
        </BentoCard>

        <BentoCard colSpan={1} rowSpan={1}>
          <BentoHeader>
            <span className="text-3xs font-mono font-bold text-emerald-500">BIG-OMEGA</span>
            <h4 className="text-base font-bold mt-1">Ω(120Hz)</h4>
          </BentoHeader>
          <BentoContent>Guaranteed lower-bound execution.</BentoContent>
        </BentoCard>

        <BentoCard colSpan={1} rowSpan={1}>
          <BentoHeader>
            <span className="text-3xs font-mono font-bold text-indigo-400">LATENCY</span>
            <h4 className="text-base font-bold mt-1">&lt; 0.04ms</h4>
          </BentoHeader>
          <BentoContent>Zero layout thrashing with cached geometry.</BentoContent>
        </BentoCard>

        <BentoCard colSpan={2} rowSpan={1}>
          <BentoHeader>
            <span className="text-3xs font-mono font-bold text-violet-400">AUTO-PACKING</span>
            <h4 className="text-base font-bold mt-1">Dense Flow Backfill</h4>
          </BentoHeader>
          <BentoContent>CSS Grid auto-packing prevents layout voids.</BentoContent>
        </BentoCard>

        <BentoCard colSpan={1} rowSpan={1}>
          <BentoHeader>
            <span className="text-3xs font-mono font-bold text-amber-500">ECOSYSTEMS</span>
            <h4 className="text-base font-bold mt-1">13 Flavors</h4>
          </BentoHeader>
          <BentoContent>Production-ready templates across all stacks.</BentoContent>
        </BentoCard>
      </BentoGrid>
    </section>
  );
}

// 03API Contract

Props & Configuration

Exhaustive parameter contract for Bento Grid. Validated in the live Studio workbench above and statically checked across all 13 ecosystem templates.

Prop	Type	Default	Description
cols	number	3	Maximum column count for desktop screens.
gap	number	20	Spacing between bento tiles.
rowHeight	number	180	Base auto-rows track height for vertical spans.

cols

number

Maximum column count for desktop screens.

Default:3

gap

number

Spacing between bento tiles.

Default:20

rowHeight

number

Base auto-rows track height for vertical spans.

Default:180

// 04Source Code

Component Source

Component source definition for React (.tsx). Toggle between the clean wrapper and the standalone ejected engine micro-kernel.

BentoGrid.tsx

import * as React from 'react';
import * as BentoGridPrimitive from '@exhuma/core';
import { clsx } from 'clsx';

export interface BentoGridProps extends React.ComponentPropsWithoutRef<typeof BentoGridPrimitive.BentoGrid> {
  className?: string;
}

export const BentoGrid = React.forwardRef<HTMLDivElement, BentoGridProps>(
  ({ className, children, ...props }, ref) => (
    <BentoGridPrimitive.BentoGrid
      ref={ref}
      className={clsx(
        'grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-[22rem] max-w-7xl mx-auto w-full',
        className
      )}
      {...props}
    >
      {children}
    </BentoGridPrimitive.BentoGrid>
  )
);
BentoGrid.displayName = 'BentoGrid';

export const BentoCard = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, children, ...props }, ref) => (
    <BentoGridPrimitive.BentoCard
      ref={ref}
      className={clsx('', className)}
      {...props}
    >
      {children}
    </BentoGridPrimitive.BentoCard>
  )
);
BentoCard.displayName = 'BentoCard';

export const BentoHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, children, ...props }, ref) => (
    <BentoGridPrimitive.BentoHeader
      ref={ref}
      className={clsx('', className)}
      {...props}
    >
      {children}
    </BentoGridPrimitive.BentoHeader>
  )
);
BentoHeader.displayName = 'BentoHeader';

export const BentoContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, children, ...props }, ref) => (
    <BentoGridPrimitive.BentoContent
      ref={ref}
      className={clsx('', className)}
      {...props}
    >
      {children}
    </BentoGridPrimitive.BentoContent>
  )
);
BentoContent.displayName = 'BentoContent';

export const BentoVisual = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, children, ...props }, ref) => (
    <BentoGridPrimitive.BentoVisual
      ref={ref}
      className={clsx('', className)}
      {...props}
    >
      {children}
    </BentoGridPrimitive.BentoVisual>
  )
);
BentoVisual.displayName = 'BentoVisual';

// 05Architecture

Lifecycle Safety & Performance

Engineered for high-frequency user interactions with zero memory leaks.

Teardown

Deterministic Cleanup

All pointer event listeners, scroll handlers, and resize observers are cleanly destroyed on component unmount, preventing lingering background processes.

Compositor

GPU Compositor Acceleration

Transform and opacity modifications run directly on the GPU compositor thread using will-change: transform without triggering browser layout recalculations.

// 06a11y

Accessibility Considerations

Fully compliant with WCAG guidelines and respects user motion preferences.

Motion

prefers-reduced-motion Support

When a user has prefers-reduced-motion: reduce enabled in their operating system, Exhuma components automatically disable 3D gyroscope tilt and spring animations, rendering static accessible content.

import React from 'react'; import { BentoGrid, BentoCard, BentoHeader, BentoContent, BentoVisual, } from '@/components/ui/BentoGrid'; export function BentoGridDemo() { return ( <section className="p-8 bg-background text-foreground"> <BentoGrid cols={3} gap={20} rowHeight={180} className="max-w-5xl mx-auto"> <BentoCard colSpan={2} rowSpan={2}> <BentoHeader> <span className="text-3xs font-mono font-bold text-primary">ANALYTICAL KINETICS</span> <h3 className="text-xl font-bold mt-1">Continuous Math Engine</h3> </BentoHeader> <BentoVisual> <div className="w-full h-24 rounded-xl border border-primary/20 bg-primary/5 flex items-center justify-center"> <span className="text-xs font-mono text-primary">Telemetry Visualization</span> </div> </BentoVisual> <BentoContent>Hardware-accelerated CSS custom properties driven by rAF loops.</BentoContent> </BentoCard> <BentoCard colSpan={1} rowSpan={1}> <BentoHeader> <span className="text-3xs font-mono font-bold text-emerald-500">BIG-OMEGA</span> <h4 className="text-base font-bold mt-1">Ω(120Hz)</h4> </BentoHeader> <BentoContent>Guaranteed lower-bound execution.</BentoContent> </BentoCard> <BentoCard colSpan={1} rowSpan={1}> <BentoHeader> <span className="text-3xs font-mono font-bold text-indigo-400">LATENCY</span> <h4 className="text-base font-bold mt-1">< 0.04ms</h4> </BentoHeader> <BentoContent>Zero layout thrashing with cached geometry.</BentoContent> </BentoCard> <BentoCard colSpan={2} rowSpan={1}> <BentoHeader> <span className="text-3xs font-mono font-bold text-violet-400">AUTO-PACKING</span> <h4 className="text-base font-bold mt-1">Dense Flow Backfill</h4> </BentoHeader> <BentoContent>CSS Grid auto-packing prevents layout voids.</BentoContent> </BentoCard> <BentoCard colSpan={1} rowSpan={1}> <BentoHeader> <span className="text-3xs font-mono font-bold text-amber-500">ECOSYSTEMS</span> <h4 className="text-base font-bold mt-1">13 Flavors</h4> </BentoHeader> <BentoContent>Production-ready templates across all stacks.</BentoContent> </BentoCard> </BentoGrid> </section> ); }

Prop

Type

Default

Description

cols

number

Maximum column count for desktop screens.

gap

number

Spacing between bento tiles.

rowHeight

number

180

Base auto-rows track height for vertical spans.

import * as React from 'react'; import * as BentoGridPrimitive from '@exhuma/core'; import { clsx } from 'clsx'; export interface BentoGridProps extends React.ComponentPropsWithoutRef<typeof BentoGridPrimitive.BentoGrid> { className?: string; } export const BentoGrid = React.forwardRef<HTMLDivElement, BentoGridProps>( ({ className, children, ...props }, ref) => ( <BentoGridPrimitive.BentoGrid ref={ref} className={clsx( 'grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-[22rem] max-w-7xl mx-auto w-full', className )} {...props} > {children} </BentoGridPrimitive.BentoGrid> ) ); BentoGrid.displayName = 'BentoGrid'; export const BentoCard = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( ({ className, children, ...props }, ref) => ( <BentoGridPrimitive.BentoCard ref={ref} className={clsx('', className)} {...props} > {children} </BentoGridPrimitive.BentoCard> ) ); BentoCard.displayName = 'BentoCard'; export const BentoHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( ({ className, children, ...props }, ref) => ( <BentoGridPrimitive.BentoHeader ref={ref} className={clsx('', className)} {...props} > {children} </BentoGridPrimitive.BentoHeader> ) ); BentoHeader.displayName = 'BentoHeader'; export const BentoContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( ({ className, children, ...props }, ref) => ( <BentoGridPrimitive.BentoContent ref={ref} className={clsx('', className)} {...props} > {children} </BentoGridPrimitive.BentoContent> ) ); BentoContent.displayName = 'BentoContent'; export const BentoVisual = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( ({ className, children, ...props }, ref) => ( <BentoGridPrimitive.BentoVisual ref={ref} className={clsx('', className)} {...props} > {children} </BentoGridPrimitive.BentoVisual> ) ); BentoVisual.displayName = 'BentoVisual';