动效与动画

何时使用：为应用添加手绘/素描风格图表与白板视觉——流程图、线框图、笔记与有人情味的协作画布。

何时使用：在 Web 应用中嵌入 Lottie（After Effects）或 Rive（矢量）动画——加载态、插画、启动屏与可交互动画图标。

何时使用：构建滚动驱动体验：随滚动 scrub 的英雄区、固定叙事面板、视差效果与滚动触发出场动画。

何时使用：为 Next.js 或 React 应用添加电影感页面过渡——淡入/滑动式路由切换、共享元素形变和导航顶部进度条。

何时使用：用 Framer Motion 构建 React 界面：手势驱动 UI、弹性物理动画、布局过渡，以及路由或条件内容的进出场动画。

何时使用：在 React 应用中添加 GSAP 动画，需要生命周期管理（挂载/卸载清理）和可直接使用的动画组件。

何时使用：在跨产品建立一致的动效——定义时长、缓动曲线与编排规则，让动画看起来属于同一套设计体系。

何时使用：为 Web 应用添加高冲击力 WebGL 视觉：液体/流体动画背景、粒子系统、扭曲特效与生成艺术表面。

何时使用：为任何界面做收尾：悬停/按压状态、开关弹性、点赞动画、按钮波纹等让产品活起来的小交互。

何时使用：构建长页面滚动叙事体验：产品发布页讲故事、说明性叙事、数据故事与「Apple 风格」滚动页。

何时使用：添加精致的 toast 与通知体验：成功/错误提示、推送式通知、成就横幅，以及带动效的优先级堆叠提醒。

何时使用：构建需要高性能动画的界面——英雄区出场、悬停效果、进度指示器，或需要精确时序控制的 UI 微动画。