Display
聚光灯卡片网格
一个深色卡片网格,径向光晕跟随光标移动,照亮边框和内容。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a 2x2 grid of dark feature cards with a cursor-following spotlight effect. Each card should have a near-black background, a 1px dark border, and a radial gradient glow that tracks the mouse position across the grid, lighting up borders and the area behind the cursor. Use React state to track mouse coordinates and CSS variables to position the glow. Inside each card, place a small icon, a bold headline, and a one-line description in muted gray. The cards should have subtle hover lift. Use Tailwind CSS. No images, focus on light and interaction.
中文提示词
创建一个 2x2 的深色功能卡片网格,带有跟随光标的聚光灯效果。每张卡片使用近黑色背景、1px 深色边框,以及一个径向渐变光晕,它随鼠标在网格上移动而照亮边框和光标后方区域。使用 React state 跟踪鼠标坐标,CSS 变量定位光晕。每张卡片内部放置小图标、粗体标题和柔和灰色的一行描述。卡片应有微妙的悬停提升效果。使用 Tailwind CSS。不要使用图片,专注于光线与交互。

Overview
使用跟踪式径向光晕营造探索感和高级照明效果的交互式卡片网格。
Features
- 2x2 深色卡片网格
- 通过 CSS 变量实现跟随光标的径向光晕
- 微妙的边框照明
- 每张卡片含图标、标题、描述
- 悬停提升
- 无图片,以光线为设计驱动
Usage
适用于深色产品页的功能区域、定价概览或能力网格。
Customization
修改 prompt 以:
- 将网格扩展为 3 列
- 根据卡片位置改变光晕颜色
- 悬停时添加玻璃反射层
- 高亮卡片时显示隐藏详情