Feature bentoPro
A bento grid of features, each with a small live visual and a pointer spotlight.
What's inside
- Bento layout with wide and tall cells
- Live mini-visuals
- Pointer spotlight
- Reveal on scroll
When to use
- Showing 4–6 features with personality.
When not to use
- Long feature lists: use a comparison table.
Installation
Usage
Import it from @/components/blocks/feature-bento after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.
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 /> },
]}
/>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.
This page as Markdown, for assistants and coding agents:
/blocks/feature-bento/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt