Display
点阵背景
带有径向淡出和光标附近接近发光的微妙动画点阵背景。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a dark section with an animated dot grid background. Dots should be arranged in a regular grid, dim by default, and brighten slightly in a radius around the cursor. Add a radial vignette so edges fade to black. Use CSS radial gradients and mask, or a lightweight canvas/SVG approach. Use Tailwind CSS. Center a headline over the grid.
中文提示词
创建一个带动画点阵背景的深色区域。点以规则网格排列,默认暗淡,光标周围半径内轻微变亮。添加径向暗角使边缘淡出至黑色。使用 CSS 径向渐变和遮罩,或轻量 canvas/SVG 方案。使用 Tailwind CSS。在网格上方居中放置标题。

Overview
响应注意力的技术感精确背景。常见于开发工具和 AI 产品页。
Features
- 规则点阵
- 光标接近发光
- 径向边缘暗角
- 深色背景
- 居中标题
- CSS/canvas 驱动
Usage
适用于 hero 背景、功能区域或代码/产品展示。
Customization
修改 prompt 以:
- 在附近点之间添加连接线
- 更改点间距和大小
- 用微妙波浪动画点
- 用方格替代点