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 以： - 在附近点之间添加连接线 - 更改点间距和大小 - 用微妙波浪动画点 - 用方格替代点