Bento Grid Features with Live Cards

A services bento for an agency or product: six cards, each a small live product fragment (a wireframe turning into a page, a project thread, a search climb, an editable CMS field, uptime, a conversion chart).

npm install motion lucide-react clsx tailwind-merge

Features

A wireframe page turns into the finished design block by block while a named designer cursor moves through it
A project thread gains updates over a bar counting down to the launch date
A search query types itself and the client's result climbs from sixth to first, over Core Web Vitals scores
A real CMS field: type in it and the page preview beside it changes as you type
Ninety days of uptime bars and edge regions with live latency, plus a conversion chart you can scrub
Visuals play only while on screen, react to hover and keyboard focus, and hold still for reduced motion

Best for: Agencies, studios and productized services that want to show what a client gets, not list it.

Installation

npm install motion lucide-react clsx tailwind-merge

Then copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.

Props

Prop	Type	Default	Description
eyebrow	string	-	Optional mono label above the headline.
title	string	-	The headline.
subtitle	string	-	Optional second headline line, in grey.
description	string	-	Optional paragraph beside the headline on wide screens.
cards	{ title: string; description: string; visual: ReactNode; size?: "large" \| "tall" \| "small" \| "half"; isDark?: boolean }[]	-	The cards in order. A visual reads the card's state (in view, hovered, reduced motion) with useFeatureCard().
className	string	-	Extra classes for the section.

FAQ

Is the Bento Grid Features with Live Cards free to use?

Yes. Bento Grid Features with Live Cards is free to copy into your own projects. Open the Code tab and paste the files into your app.

Does Bento Grid Features with Live Cards work with Next.js and React?

Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).

Can I use Bento Grid Features with Live Cards in JavaScript instead of TypeScript?

Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.

What does Bento Grid Features with Live Cards need installed?

motion, lucide-react, clsx, tailwind-merge, plus the shared helpers from the Installation page.

Is Bento Grid Features with Live Cards accessible?

Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.