用途：为网页添加现代感动效层，按“动效即信号”原则，用动效引导视线到核心信息、强化层级，而非纯装饰。
主要能力：
- Hero 背景动画三选一：WebGL Shader Gradient（推荐，GPU 加速、轻量、可不用库直接写 GLSL 片元着色器，颜色取自 design-tokens 的 accent-primary/secondary）；Canvas Particle Network（点连接网络，适合 HBM/AI 数据流隐喻，canvas 2D，100~150 粒子、移动端 50）；Animated Orbs（3~5 个大模糊圆缓慢运动混合颜色，可纯 CSS 或 Canvas）。
- 滚动进入动画：用 GSAP ScrollTrigger（CDN：cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js 与 dist/ScrollTrigger.min.js），对 .section 内标题、段落、摘要卡、图表做 fade + slide-up，也可做 Hero 逐字 reveal 与指标卡 stagger。
- 微交互：基于 IntersectionObserver + requestAnimationFrame 的数字 countUp（easeOutCubic），卡片鼠标跟随 3D tilt。
- CSS 动画工具类：滚动指示器脉冲、高亮指标发光、无 JS 的 fade-up 兜底。
- 性能与无障碍：prefers-reduced-motion 时停用非必要动效并把背景换成静态渐变；用 IntersectionObserver 让画布离开视口时暂停；WebGL 不支持时降级为 CSS 渐变。
使用方式：按工作流步骤实施，背景动画建议放在 web/scripts/background-animation.js，滚动动画放 web/scripts/scroll-animations.js，微交互放 web/scripts/microinteractions.js，CSS 放 web/styles/animations.css；最后在 web/_design/motion-notes.md 记录库与版本、背景方案理由、各动效触发/时长/缓动、性能测量、reduced-motion 与兜底。
适用场景：需要突出核心指标的 Hero、数据报告页、图表进入动效、指标卡强调等。
限制与原则：动效需保持 60fps，WebGL 负载高时简化；所有非必要动效必须响应 prefers-reduced-motion；背景与内容用 position: fixed、z-index: -1 分层；颜色与时长缓动需遵循设计令牌；需与 design-lead、frontend-engineer、visualization-engineer、web-qa 协作。未提供具体价格、平台与收费信息。