## Bento Features (S—034)

An asymmetric bento grid where each feature is demonstrated by a small live interaction, not an icon.

- URL: https://sundaeui.dev/components/bento-features
- Category: Page sections · Art direction: Understated
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, Tailwind CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/bento-features.json`
- Tags: tailwind, saas, section, animated, react, bento, landing-page, features

Feature sections usually show an icon and two lines of text. In this one, every cell proves its claim: the search types and returns results, the sync badge cycles from syncing to synced, the shortcut keys press themselves, and the chart breathes on a slow loop and lifts on hover.
The layout alternates wide and narrow cells on a six-column grid, so the rhythm never feels like a spreadsheet. On small screens it collapses to a single column. Each demo is a small, self-contained component you can replace with your own product’s micro-moments.
Use it as the main feature section on a product landing page. Keep it to four or five cells.

### Usage

```tsx
import { BentoFeatures } from '@/components/sundae/bento-features'

<BentoFeatures eyebrow="Features" title="Built for the way teams actually work." intro="Four things we obsessed over." />
```

### Props

- `title` (`ReactNode`, required): Section heading.
- `eyebrow` (`string`, default `'Features'`): Small label above the title.
- `intro` (`string`): Supporting paragraph.

### Accessibility

- Demos are aria-hidden decoration. Each cell’s heading and text carry the meaning.
- With prefers-reduced-motion, every loop stops on its finished state: search filled, sync complete.