← Back to Prompts
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。避免使用图标——依靠字体、边框和光线建立层级。
Depth Bento Grid screenshot 1
## 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