Display
粒子星座
深色画布上粒子漂移并在靠近时连接成星座线。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a particle constellation background. Use a canvas or SVG to render small drifting dots that connect with thin lines when they are close to each other. Particles should also gently move away from the cursor. Use a dark background and subtle white/blue particles. Keep the number of particles modest for performance. Use JavaScript for the particle system and Tailwind CSS for the container.
中文提示词
创建一个粒子连线星座背景。使用 canvas 或 SVG 渲染小漂移点,当彼此靠近时用细线连接。粒子还应轻微远离光标移动。使用深色背景和微妙的白/蓝色粒子。为性能保持粒子数量适中。使用 JavaScript 实现粒子系统,Tailwind CSS 设置容器样式。

Overview
暗示连接、数据或智能的生动网络背景。常见于 AI、安全和网络产品。
Features
- 漂移粒子
- 基于接近度的连接线
- 光标排斥
- 深色背景
- Canvas/SVG 渲染
- 注重性能的粒子数量
Usage
适用于 hero 背景、加载界面或科技焦点区域。
Customization
修改 prompt 以:
- 将粒子颜色改为品牌强调色
- 连接线添加颜色渐变
- 大屏增加粒子数量
- 让粒子形成特定形状