滚动揭示
元素进入视口时淡入上移，配合 IntersectionObserver 实现高性能触发，让长页面拥有节奏感与呼吸感。
MOTION / S11
灵动交互动效 / 60fps 流畅叙事
滚动揭示、视差、磁吸光标、微交互一揽子方案，60fps 流畅运行，不喧宾夺主只服务叙事，让品牌官网拥有恰到好处的灵动质感。
MOTION DESIGN / 动效设计
动效不是炫技，是叙事工具
很多站点堆砌动效只为「看着酷」，结果拖累性能、干扰阅读。芭彼小镇的动效设计遵循「服务叙事」原则——每一个动效都有明确的叙事目的：引导视线、强调重点、反馈操作、传递情绪。流畅 60fps，移动端自动降级。
- 叙事优先：每个动效服务于内容传递，不为动而动
- 性能优先：requestAnimationFrame+GPU 加速，60fps 不掉帧
- 移动端降级：低端设备自动关闭非必要动效，保流畅
- 无障碍：尊重 prefers-reduced-motion，照顾敏感用户
MOTION TYPES / 六类动效库
从滚动到微交互的完整动效体系
06 TYPES
视差滚动
多层元素以不同速度滚动，营造空间纵深感，控制幅度在 10-30px 内避免眩晕，移动端自动关闭。
磁吸光标
按钮、卡片等可交互元素对鼠标产生磁吸效果，配合自定义光标增强桌面端的「操控感」与品牌识别。
微交互反馈
按钮按压、表单聚焦、加载状态、提交反馈等微交互，让每个操作都有即时回应，提升操作确定感。
数字滚动
数据指标进入视口时从 0 滚动到目标值，配合缓动函数让数字「跳」出来，强化数据可信度与记忆点。
页面转场
SPA 式页面切换动效，配合 View Transitions API 实现优雅的页面过渡，减少跳转突兀感，提升整体流畅度。