# Feature bento

> A bento grid of features, each with a small live visual and a pointer spotlight.

Block · Pro · https://lodeui.com/blocks/feature-bento

## When to use

- Showing 4–6 features with personality.

## When not to use

- Long feature lists: use a comparison table.

## Installation

```bash
npx shadcn@latest add @lode/feature-bento
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { FeatureBento } from "@/components/blocks/feature-bento";

<FeatureBento
  title="Built for speed"
  items={[
    { title: "Fast", description: "Under 100ms everywhere.", visual: <SpeedChart />, span: "tall" },
    { title: "Secure", description: "SOC 2 and SSO.", visual: <Badges /> },
  ]}
/>
```

Built from: Number ticker, Spotlight card

## API reference

### FeatureBento

A grid of feature cards. The default items include five live visuals. Also the default export.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| eyebrow / title / description | `string` | – | Section heading. |
| items | `{ title; description; visual?; span?: "wide" \| "tall" \| "normal" }[]` | – | Cards; span sizes them on large screens. |

## Accessibility

- Each card has a heading and description as real text; visuals are supplementary.

## Motion

- Cards rise in with a stagger; a spotlight follows the pointer; visuals animate (counters, cycling command list, AI reply).

## Responsive behavior

- One column on phones, two on tablets, a 3-column bento from 1024px.

## Performance

- Animations start when the section scrolls into view.
- No data fetching; pass your copy as props.
- Default visuals use light timers that stop on unmount.

## Notes for AI

- Use span="wide" or "tall" on one or two cards to create rhythm.

## Related

- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.
- [Spotlight card](https://lodeui.com/components/spotlight-card) — A card lit by a spotlight that follows the pointer, border included.
- [Stats section](https://lodeui.com/blocks/stats-section) — Headline numbers that count up when they scroll into view.