Display
Dot Grid Background
A subtle animated dot grid background with a radial fade and proximity glow near the cursor.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
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.
Chinese Prompt
创建一个带动画点阵背景的深色区域。点以规则网格排列，默认暗淡，光标周围半径内轻微变亮。添加径向暗角使边缘淡出至黑色。使用 CSS 径向渐变和遮罩，或轻量 canvas/SVG 方案。使用 Tailwind CSS。在网格上方居中放置标题。
Overview
A technical, precise background that responds to attention. Common on developer tools and AI product pages.
Features
- Regular dot grid
- Cursor-proximity glow
- Radial edge vignette
- Dark background
- Centered headline
- CSS/canvas-driven
Usage
Use for hero backgrounds, feature sections, or code/product showcases.
Customization
Modify the prompt to:
- Add connecting lines between nearby dots
- Change dot spacing and size
- Animate dots with a subtle wave
- Use a square grid instead of dots