---
name: bento-product-tour
description: Product tour page built from a bento grid of tiny interactive cards. Use when the user asks for product tour or similar.
---

# Bento Product Tour

Turns a feature list into a bento-grid product tour where each tile demonstrates its feature with a tiny, looping interaction.

## When to use

- Feature-rich products
- Launch announcements
- Pricing-page companions

## Workflow

1. List features and the single most visual moment for each.
2. Assign tile sizes by importance on a 12-col grid.
3. Build each tile's micro-demo with CSS-only where possible.
4. Collapse to a 1-column stack on mobile in reading order.
5. Pause all loops when off-screen.

## What you deliver

- Bento grid page with six demo tiles
- Looping micro-interactions
- Responsive tile rearrangement

## Not for

- One-feature apps
- Text-heavy docs
- Pages that must work without JS

## Quality bar

- State assumptions you made and ask before overwriting existing files.
- Never invent facts, numbers, logos or quotes — use placeholders and say so.
- Follow `references/style-guide.md` for colour and type decisions.
- Finish with a short checklist of what the user should review or replace.