Background Animations 是一个技能（Skill），提供创建动态背景的专家知识，帮助为界面带来深度与活力。其覆盖的背景动画类型包括渐变流动、粒子系统、网格渐变、极光效果、波浪图案和动态纹理。
适用场景 当用户需要动态背景或 Hero 区域、构建带动态视觉的落地页、创建渐变动画或色彩流动、实现粒子系统或星空、需要网格渐变或极光风格效果、构建波浪图案或液态背景时，可激活该技能。
涉及的文件模式
- **/*.tsx 且包含背景组件
- */components/Background.tsx
- */components/Hero.tsx
- 使用 canvas 或 WebGL 的文件
背景动画类型与示例
- 动态渐变：包括流动渐变背景（FlowingGradient）、径向渐变脉冲（RadialPulse）、CSS 网格渐变（MeshGradient）。
- 粒子系统：包括漂浮粒子（FloatingParticles）、星空（Starfield）。
- 波浪图案：动画波浪（AnimatedWaves），使用 SVG 路径配合 Framer Motion 实现多层波浪。
- 极光/北极光：极光背景（AuroraBackground），通过多层模糊渐变叠加实现。
- 噪点/颗粒纹理：动画颗粒（GrainOverlay），使用 SVG feTurbulence 滤镜。
- 网格图案：动画网格（AnimatedGrid），配合中心发光效果。
- 斑点背景：变形斑点（MorphingBlobs），使用 SVG 路径变形。
性能提示
- 对移动元素使用 will-change: transform
- 移动端限制粒子数量（最多 50-100）
- 谨慎使用 CSS filter: blur()，其开销较大
- 对基于 canvas 的效果可考虑使用 requestAnimationFrame
- 在低端设备上测试
相关技能
- creative-effects：变形形状与液体
- accent-animations：漂浮装饰元素
- css-animations：基于关键帧的背景
作者 由 Brookside BI 创建，属于 React Animation Studio 的一部分。