Landing
Depth Bento Grid
A bento grid with layered cards, ambient glow, and staggered scroll reveals.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a dark-mode bento feature grid with 5 cards of varying sizes arranged in an asymmetric layout. Each card should have a near-black background, a 1px subtle border, and a faint inner glow on hover. Use one large hero card that spans two rows, with a gradient mesh background behind the text. The other cards should include a small label, bold headline, and a one-line description. Add staggered fade-up animations on scroll or load. Typography should be crisp and modern. Use Tailwind CSS. Avoid icons—rely on typography, border, and light for hierarchy.
Chinese Prompt
创建一个深色模式 bento 功能网格,包含 5 张大小不一的卡片,以不对称布局排列。每张卡片使用近黑色背景、1px 微妙边框,悬停时有 faint 内发光。使用一张跨两行的大号主卡片,文字后方有渐变网格背景。其他卡片包含小标签、粗体标题和一行描述。添加滚动或加载时的错开淡入上移动画。排版应清晰现代。使用 Tailwind CSS。避免使用图标——依靠字体、边框和光线建立层级。

Overview
A refined bento grid that uses depth, light, and staggered motion instead of flat cards and generic icons.
Features
- 5-card asymmetric dark bento layout
- Large hero card with gradient mesh
- Subtle 1px borders and hover inner glow
- Staggered fade-up reveals
- Typography-driven hierarchy
- No icons
Usage
Use for product feature sections on premium or creative landing pages.
Customization
Modify the prompt to:
- Add a spotlight cursor effect across the grid
- Change the mesh gradient colors
- Make one card contain a small data visualization
- Add a scroll-driven parallax offset between cards