Animated Grid

Background grid pattern with glassmorphic cells and radial fade mask

Animated Grid

A decorative background grid component featuring glassmorphic cells with radial gradient masking. Perfect for creating depth and visual interest behind content.

Usage

import { AnimatedGrid, GridCell, Grid3x3 } from "@/components/ui/animated-grid";

export default function Example() {
  return (
    <AnimatedGrid>
      <GridCell />
      <GridCell />
      <GridCell />
      <GridCell />
      <GridCell span={2} />
      <GridCell />
      <GridCell />
      <GridCell />
    </AnimatedGrid>
  );
}

Components

AnimatedGrid

The container component that provides radial masking and positioning.

GridCell

Individual grid cell with glassmorphic border styling.

Grid3x3

Convenience component that renders the Bento10 3×3 grid pattern automatically.

Props

AnimatedGrid Props

Prop	Type	Default	Description
size	"sm" | "default" | "lg" | "full"	"default"	Grid container size
centered	boolean	true	Center grid horizontally
rows	number	3	Number of rows
cols	number	3	Number of columns
gap	number	4	Gap between cells (px)
padding	number	42	Inner padding (px)

GridCell Props

Prop	Type	Default	Description
size	"sm" | "default" | "lg"	"default"	Cell size
variant	"default" | "glow"	"default"	Visual style
span	number	1	Horizontal span (columns)
spanHeight	number	1	Vertical span (rows)

Grid3x3 Props

Prop	Type	Default	Description
cellSize	GridCell["size"]	"default"	Size of all cells
cellVariant	GridCell["variant"]	"default"	Variant of all cells
customCells	ReactNode	-	Custom cell layout

Variants

Size Variants

// Small - 280px container
<AnimatedGrid size="sm">...</AnimatedGrid>

// Default - 336px container
<AnimatedGrid size="default">...</AnimatedGrid>

// Large - 400px container
<AnimatedGrid size="lg">...</AnimatedGrid>

// Full - 100% width/height
<AnimatedGrid size="full">...</AnimatedGrid>

Cell Variants

// Default - simple border
<GridCell variant="default" />

// Glow - with radial gradient overlay
<GridCell variant="glow" />

Examples

Basic 3×3 Grid

<Grid3x3 />

This renders the Bento10 pattern automatically with proper cell spanning.

Custom Grid Layout

<AnimatedGrid rows={4} cols={4} gap={8}>
  <GridCell />
  <GridCell span={2} />
  <GridCell />
  <GridCell spanHeight={2} />
  <GridCell />
  <GridCell />
  <GridCell spanHeight={2} />
  <GridCell span={2} />
  <GridCell />
  <GridCell />
  <GridCell />
  <GridCell span={2} />
</AnimatedGrid>

With Content Overlay

<div className="relative">
  <AnimatedGrid size="full" className="absolute inset-0 -z-10" />
  <div className="relative z-10 p-8">
    <h2>Content on top of grid</h2>
  </div>
</div>

Custom Cell Sizes

<AnimatedGrid>
  <GridCell size="sm" />
  <GridCell size="default" />
  <GridCell size="lg" />
</AnimatedGrid>

Spanning Cells

<AnimatedGrid>
  {/* Spans 2 columns */}
  <GridCell span={2} />
  <GridCell />
  
  {/* Spans 2 rows */}
  <GridCell spanHeight={2} />
  
  {/* Spans 2 columns and 2 rows */}
  <GridCell span={2} spanHeight={2} />
</AnimatedGrid>

With Glow Effect

<Grid3x3 cellVariant="glow" />

Design Tokens

Dimensions

Size	Container	Cell Size	Gap
sm	280px × 280px	48px	4px
default	336px × 336px	60px	4px
lg	400px × 400px	80px	4px

Effects

Token	Value	Description
Border	var(--ui-stroke-subtle)	rgba(248, 248, 248, 0.1)
Border width	var(--border-width-default)	1.5px
Border radius	var(--radius-lg)	16px
Mask	var(--gradient-radial-center)	Radial fade to transparent
Glow	var(--gradient-radial-center-90)	Radial gradient overlay

Cell Spanning

The span and spanHeight props automatically calculate dimensions:

width = cellSize × span + gap × (span - 1)
height = cellSize × spanHeight + gap × (spanHeight - 1)

Example:

• Cell size: 60px
• Gap: 4px
• Span: 2
• Width: 60 × 2 + 4 × 1 = 124px

Bento10 Pattern

The Grid3x3 component recreates the exact Bento10 grid layout:

┌─────────┬───┐
│  Cell 1 │ 3 │  ← Cell 1 spans 2 columns
├───┬─────┴───┤
│ 4 │  Cell 5 │  ← Cell 4, 5, 6 span 2 rows
│   ├─────┬───┤  ← Cell 5 spans 2×2 (hidden in Bento10)
│   │  6  │ 7 │
├───┴─────┴───┤
│ 8 │ Cell 9  │  ← Cell 9 spans 2 columns
└───┴─────────┘

Found In

• Bento1 - Grid background with cursor overlay
• Bento10 - Collaboration grid with avatars
• Bento18 - File system grid
• Bento21 - Team workspace grid

Accessibility

• Decorative background element (no interactive content)
• Uses aria-hidden="true" when purely decorative
• Does not interfere with content focus order
• Radial mask ensures content remains readable

Performance

• Pure CSS implementation (no JavaScript animations)
• Uses CSS Grid for efficient layout
• Radial mask applied via CSS (hardware accelerated)
• Minimal DOM nodes (container + cells)