前端特效
收集常用前端动效模板，快速查看效果方向并沉淀为可复用实现思路。
背景/粒子前端特效模板
粒子动线背景
适合技术封面、工具入口和 AI 主题区域，营造数据流动感。
详情
- 粒子数量要按容器尺寸和设备性能控制，不追求堆满画面。
- 用 opacity、transform 或 canvas 绘制动线，避免频繁创建 DOM。
- 背景层级要弱于标题和操作区，不能影响阅读和点击。
提示词
请在当前 React/Next.js 项目中实现「粒子动线背景」前端特效。 使用场景： 适合技术封面、工具入口和 AI 主题区域，营造数据流动感。 实现要求： - 保持现有页面结构、设计系统和响应式规则，不新增无关依赖。 - 动效优先使用 transform、opacity、CSS 变量或现有 motion 能力，避免频繁改 width、height、top、left。 - 桌面端要有清晰 hover/focus 状态，移动端要有合理降级。 - 控制动画时长和节奏，补充 prefers-reduced-motion 降级。 - 输出完整可运行的组件和样式代码，并解释关键参数。