这是一套给 vibe coding 用的"网页动效词典"的中篇。上篇建立了三层模型：第一层是操作对象，第二层是触发方式 （悬停、点击、进入视口、跟随滚动），第三层是动效类型 ——知道"什么时候开始"还不等于知道"画面怎么动"。中篇从第 17 个词讲到第 36 个词，分三组：进阶文字动效、滚动与空间、鼠标与指针互动。
每个词条的结构是：名称 → 常见变体 → 适合什么场景 → 一句可以直接抄给 AI 的描述。下面按组梳理。
#一、进阶文字动效（17-20）
上篇的按行显现、按词显现适合大多数标题，这四个词条存在感更强，只该用在短词和视觉重点上——整段正文都用，读者会一直等动画播完。
17. Character reveal（按字符显现） ：把文字拆成单字符分别动画——依次淡入、从不同高度落入、旋转归位、从模糊变清晰、鼠标经过时逐字响应。适合短英文单词、Logo、数字、四到八字标题；中文长句和按钮文字不需要逐字动画。
18. Typewriter（打字机） ：模拟逐字输入，通常带闪烁光标，传达"内容正在生成"。适合命令行、AI 回答生成、搜索框示例、短句循环打删；正文不该让用户等逐字打完。
19. Scramble text（乱码解码） ：先显示随机字符再逐个替换成正确文字，像系统在解密。适合科技感标题、系统状态（Processing → Complete）、数据页、彩蛋；中文乱码容易难看，可以只让英文和数字部分变化。
20. Text morphing（文字变形） ：一个词平滑变成另一个词——职业轮换、Loading → Ready、数字平滑更新、SVG 字形互变。新旧文字长度差很大时要让容器宽度平滑过渡，避免旁边内容跳动。
#二、滚动与空间动效（21-28）
这组最容易混：同一个滚轮动作可以是"滚到某处再播放"（触发），也可以是"动画进度跟着滚动位置走"（跟随）。写提示词时仍要补一句是哪种。
21. Parallax scrolling（视差滚动） ：前中后景不同速度移动，眼睛把速度差读成深度差。适合品牌首页、产品介绍、带大图的故事页；正文阅读页只要很轻的速度差，大幅反向移动会眩晕。
22. Multi-layer parallax（多层视差） ：视差的扩展版，三层以上各自有不同方向、速度、移动范围，像橱窗里前后叠透明玻璃。适合视觉叙事、游戏宣传、氛围型首页；层数越多每层的移动幅度要越小，否则画面散掉。
23. Horizontal scroll（横向滚动） ：纵向滚轮转成横向浏览，展示一排作品、时间轴、连续章节。手机端横滑可能和系统返回手势冲突，通常要单独改回纵向。
24. Scroll zoom（滚动缩放） ：滚动进度映射到画面大小——首屏小卡片扩成全屏、产品从远处靠近、地图缩到一个城市、放大照片进入内部内容。文字跟大幅缩放容易糊，一般让图片或主物体承担缩放。
25. Sticky scrollytelling（固定式滚动叙事） ：一块区域钉在视口，继续滚动只替换其中的图片、数据或说明——经典形态是左侧章节推进、右侧产品图固定同步切换。适合产品拆解、数据故事、教程步骤；固定太久用户会以为页面卡住，要保留清楚的章节变化。
26. Image sequence（图片序列滚动） ：预备一组连续帧，按滚动位置切换，像滚轮控制的视频——产品转一圈、外壳逐层拆开、白天变夜晚。帧多时要提前加载，并备一张静态主图兜底。
27. Scroll snap（滚动吸附） ：停止滚动后自动对齐到最近章节或卡片，不停在两个区块中间。适合全屏故事、横向画廊、功能轮播；长正文强制整屏吸附会让用户停不到想读的位置。
28. Progress indicator（滚动进度提示） ：顶部进度条、章节编号、侧边目录高亮、圆环填充。给的是位置反馈，视觉必须比正文安静，不能抢阅读注意力。
#三、鼠标与指针动效（29-36）
这组读光标的位置、方向或距离，适合桌面端产品首页和作品集——手机没有持续悬停，提示词里要交代触屏怎么降级。
29. Magnetic button（磁吸按钮） ：光标靠近时按钮向光标轻微移动，离开后弹回。给首要行动按钮和重点链接用；一页保留一两个，个个磁吸界面会显得不稳定。
30. Tilt card（立体倾斜卡片） ：按光标在卡片内的位置轻微旋转，高光阴影同步变化产生厚度。适合作品卡片、产品卡片；字多的卡片不宜大幅倾斜。
31. Cursor follower（自定义光标跟随） ：圆点、圆环、短文字伴随或替代系统光标，跟随元素略落后于指针形成柔和追随——进入图片显示"查看"、进入视频变播放图标。系统光标必须保持可定位，不能因自定义效果变迟钝。
32. Cursor spotlight（光标聚光灯） ：亮区跟随鼠标，照亮深色背景或在浅色页揭示隐藏纹理、第二层内容。适合深色产品页和探索区域；正文区不适合持续追光。
33. Mouse-following eyes（鼠标跟随眼睛） ：瞳孔朝光标方向移动，眼白不动、瞳孔只在眼白内小范围活动，角色看起来在观察用户。适合吉祥物、登录页、404、角色 IP；移动范围过大会像眼睛坏掉。
34. Cursor trail（光标拖尾） ：经过处留下短暂痕迹——渐缩圆点、连续线条、小图片、文字残影、散开粒子。适合活动页和互动彩蛋；按钮和正文附近要清爽，拖尾太密会遮挡点击目标。
35. Pointer-reactive background（指针响应背景） ：背景的渐变、网格、粒子随鼠标位置变化，范围比聚光灯大，整个首屏都可轻微响应。响应要慢于光标，不能让页面像贴在鼠标上。
36. 3D object follow（3D 物体跟随） ：立体模型随鼠标旋转、偏移或换观察角度，常由 Three.js 实现——但效果名描述的是画面行为，工具名只决定怎么做。模型加载慢时用静态图兜底，手机端改自动缓旋。
#怎么组合着用
写提示词的顺序：先说由什么触发，再说画面怎么变 。一条完整描述至少交代四件事——操作对象、触发方式、动效名称、结束或替代状态。说清这四项，再让 AI 用项目里已有的工具去实现。
第三层还剩最后一组：组件展开、数字变化、加载反馈、布局过渡和页面转场，下篇讲完后进入第四层 UX 规则。