用什么实现
CSS 做基础反馈，Motion 服务 React，GSAP 编排时间线，Three.js 构建 3D，Lottie 播放矢量动画，Rive 管理交互状态。
可观察 / 可调节 / 可复用
46个交互词条
种动效变体 ＋ 188 个设计实验
种动效变体 ＋ 188 个设计实验
CSS + JAVASCRIPT
01 — 动手调一调改变参数，观察差异
03 — 带走这段实现
下载 Demo ↓当前变体的真实代码，可下载为独立网页。
查看 HTML / CSS / JavaScript ＋
BEFORE YOU ANIMATE
先把四层分清楚。
工具、触发、动作、体验，各自回答一个问题。
什么时候开始
悬停、聚焦、点击、滚动或状态变化。相同的淡入，可以由完全不同的行为触发。
具体怎样运动
淡入、滑入、交错、裁剪、文字显现。描述方向、幅度、节奏，以及结束后的状态。
怎样帮助用户
让反馈清楚，阅读稳定。照顾键盘与触屏，尊重减少动效偏好，让重要信息始终可用。
UI、UX 和 Vibe coding，分别是什么？ ＋
UI / 用户界面：看得到、能操作的按钮、文字、色彩与布局。
UX / 用户体验：用户是否理解操作、得到反馈，并顺利完成目标。
Vibe coding：用自然语言与 AI 协作构建页面。明确描述触发、动作、参数和边界，能减少反复猜测。
中篇：怎样把多个动效组合成一句清楚的要求？ ＋
按「作用对象 → 触发方式 → 具体效果 → 结束与替代」描述，避免只要求“更高级”。下面四个组合对应本篇的实际 Demo。
背景的轻视差 ↗：用户滚动时，背景以较低速度移动，标题按正常速度经过；范围有限，手机减弱，减少动效时静止。
卡片交错进入 ↗ ＋ 悬停倾斜 ↗：卡片进入视口时依次出现；显示完成后再根据指针轻微倾斜，移出回正。不要让两个阶段同时争夺同一个 transform。
靠近按钮时磁吸 ↗：指针接近后视觉内容轻微靠拢，外部感应区域固定；离开弹簧回位，触屏改为按压反馈。
滚动推进图片序列 ↗：先预加载帧图，滚动距离映射为帧编号；向上滚动倒放，加载失败保留静态海报。