animaxxing

Animaxxing

可移植的原生 TypeScript 和 GSAP 特效配方。保留项目的字体、颜色、布局和组件样式；无需样式技能、令牌或字体。

先加载匹配的 gsap-<framework> 技能（普通网站使用 gsap-vanilla），如果缺少则安装。它负责 挂载 → 初始状态 → 入场 → 稳定状态 → 退场 → 结束状态 → 卸载、初始化、导航、恢复、中断和清理时机。本技能为构建器提供控制器调用；请勿在此处自行编写生命周期指南。

选择范围

• 完整处理。 “我们要做 animaxxing”“给这个 animax”或“完整处理”表示每个屏幕上的每个元素都会动，同时保留品牌风格。每个元素都从空白的首次绘制开始，随后入场（入场）、静止或持续轻动（稳定状态），并在每次请求的导航中离场（退场）。首屏以下的内容会在滚动到或切换到相应标签页时入场。将每个元素标记为页面项（路由字母），或从配对动效库中为其指定一组配对动效；框架技能会让首次绘制保持空白。将此决定记录在项目计划或笔记中，以便后续会话延续该方案。
• 单个特效。 指定名称的特效只添加该特效。粒子按钮并不意味着页面转场、字体变化或主视觉序列。
• 指定风格，或未指定特效。 “让它显得高级”“加点动画”：选择特效前请先阅读寻找风格。从项目中判断风格，然后用一两句话说明计划，再开始构建。
• 不明确。 如果项目本身的线索足以确定风格和动效范围，就用一两句话说明计划并开始构建。只有在线索不足时才询问，而且只问一次：“要为每个元素做完整处理，还是只做 ？”如果风格也不明确，则一并询问。
• 完整处理仍须遵循减少动态效果、无脚本时的可读性，以及框架技能的初始化和生命周期要求。

设置与适配

• 查看已安装的 GSAP 版本和类型定义。自 3.13 起，所有用到的插件均可免费使用；SplitText 配方需要 3.13+（SplitText.create、smartWrap、mask、aria）；easeReverse 需要 3.15+。每个配方都会列出依赖项；只注册实际使用的插件。API 详情请参考官方 GSAP 技能。
• 配方会在模块作用域注册插件，因此可安全用于服务端，但只能从客户端代码导入。若项目在中央位置注册插件，请移除复制代码中的注册部分。
• 除非适用完整处理，否则只添加请求的特效；参见选择范围。
• 配方常量是可编辑的默认值，不是品牌规范。根据界面调整时长、错开间隔、扩散范围和强度；只有应用需要运行时配置时，才公开更多常量。
• 字重特效需要已加载可变字体的字重轴，不限特定字体。根据字体选择端点和静止字重（示例使用 400–800），或仅使用变换特效。
• 粒子画布会使用其 CSS color；请选用对比度足够的现有品牌颜色。保留控件的几何形状和焦点样式。
• 仅在用户要求采用其视觉风格时使用 style-animaxxing；它会选择并配置这些配方。

只阅读所需内容

任务	参考资料
尚未确定整体感觉：完整的视觉方案、一个新项目，还是用户对某种氛围的描述	寻找氛围
选择进场／退场效果，配置默认值，并与控制器协调	动效词汇
为每个 ease 选项定义品牌标志性曲线	标志性曲线
加载闪烁、依赖身份验证的内容或布局偏移	匹配已安装框架技能的 references/initialization.md 中的数据就绪与布局稳定性
文字动画：字体就绪、字距调整、遮罩、稳定的拆分／还原；在一行文字中改变字重或字宽	文字稳定性
字符、单词、行、乱码或故障风格的进场／退场、内爆与爆炸、椭圆形行揭示、荧光笔式行扫过	拆分进场
页面元素，包括散开的标题	路由字母
以说话节奏呈现的短文案	逐字呈现
光标后逐字输入、删除，或在列表中逐个重新输入单词	打字机效果
环境标题波纹	波浪
滚动揭示和弹入、随滚动推进的语句、视差与页脚揭示、固定场景、叠放卡片、缩放穿越至下一场景、横向滚动及其中的漂移、元素在各分区路标之间移动、进度、速度倾斜、各分区对应的页眉主题、滚动时隐藏的页眉	滚动效果
磁吸按钮、倾斜卡片、聚光灯揭示、光标跟随及其滚动标签、带惯性的悬停、邻近缩放与停靠效果、图像轨迹、拖拽投掷轨道、滑动关闭	指针效果
无尽拖拽图库：支持吸附、滚轮和漂移的循环轮播；双轴循环的 2D 网格；通过拖拽或轻弹发牌的扇形卡片堆栈	无尽拖拽
通过拖动手柄或使用键盘重新排序列表	可排序列表
通过滚轮轻弹、滑动或按键切换的全屏分区	分区翻页
可选择启用的交互和时间轴音效、环境音	音效提示
线条绘制、图标变形、沿一系列形状流动的图形、沿路径移动的标记、随滚动变形的分区边缘、沿路径排列或绕着徽章弯曲的文字	SVG 效果
版画效果：用干刷涂绘图像或色块、通过颗粒显现的文字或用画笔写出的文字、错位滑入的第二次印刷、掀起并撕下的边角	印刷效果
门槛与拱门：从拱门中展开并填满画框的图片、滚动穿过门洞进入下一张图片、从卡片飞入拱门并呈现其形状的图片	门洞
吸引视线后归于平静的节拍（从动态圆点扩散出的圆环、心跳、徽章弹跳），以及在屏幕上浮动、漂移、呼吸或环绕的环境循环动效，并支持暂停	脉冲与环境动效
递增数字、滚动至新数值的里程表数字、循环滚动的字幕、循环展示的 Logo 墙	计数器与字幕
使用 Lenis 或 ScrollSmoother 实现带缓动的页面滚动	平滑滚动
幕布式页面过渡、倾斜、带标题、剪辑路径擦除或漂移覆盖、弯曲的 SVG 滑动覆盖、首次访问时的预加载器	页面覆盖效果
筛选、重新排序和展开布局；跨页面共享元素变形	布局翻转
图像擦除揭示、液体倾倒揭示、悬停图像预览、随滚动推进的视频、画布帧序列	媒体效果
标签滚动、下划线扫过、方向感知填充、连续文字中的字重或字宽悬停变化、悬停和聚焦时图像缩放、液态悬停效果（水滴下划线、倾倒式圆形填充、果冻按钮）	悬停效果
按下时会挤压并产生波纹的控件，支持任意输入方式	按压反馈
用于表示错误或拒绝操作的抖动效果	强调效果
菜单覆盖层、可中断并带反向缓动的进场／退场、对话框进场与退场、手风琴高度、滑动标签指示器、显示加载、成功和失败状态的按钮	组件动效
点击行动号召时的散开效果	升空
彩纸爆发和受重力影响抛出的表情符号雨	物理效果
粒子按钮、卡片、链接或命令字段	粒子效果 和 field/attach 辅助工具
触摸、焦点、悬停卡住、移动设备粒子预算	输入与设备
回滚部分设置并还原已修改的内容	效果还原
验证效果并将其复用于其他品牌	验证，然后运行框架相关检查

配方契约

仅复制选定的配方及其命名的本地辅助项。不同配方的返回形式各不相同（时间线、{ timeline, revert }、停止函数、粒子控件）；不要假设存在通用接口。

框架阶段	效果职责
初始状态	在框架的绘制前／无脚本机制下准备目标元素
入场	入场构建器或 enter(delay)
静止	清除临时样式；可选 idle() 或波浪效果
出场	出场构建器、exit() 或 blastOff(...)
结束状态	通知完成；由控制器决定下一步操作
卸载	控制器调用配方的停止、destroy 或 revert 句柄

• 复制配方时应用效果恢复，包括句柄返回前发生故障的情况。
• 构建器绝不导航、挂载、订阅页面生命周期，也不决定运行时机。由控制器调用它们并管理阶段状态。
• 不可见的初始状态并不意味着数据已准备就绪。控制器应提供已解析的目标元素或预留区域；切勿用入场效果掩饰占位内容或空内容。
• 仅在效果需要时保留拆分标记（口播入场动画完成后以及活动波浪效果持续期间）。在控制器的清理边界处还原；保留可访问文本和嵌套控件。
• 使用 overwrite: "auto"；在对应阶段结束时清除临时样式和 will-change。
• 使用 gsap.set 或 fromTo 设置初始位置，绝不要使用补间动画也会移动的 CSS transform：GSAP 会将 CSS translateY(100%) 读取为像素值 y，再将 yPercent 叠加其上，因此遮罩最终会差一个完整高度。CSS transform 可以作为静止姿态，由 from 补间动画落到该姿态。
• 减少动态效果时，应进入文档规定的静止或出场状态，并仍然触发完成回调；不要有环境动效。使用项目的偏好辅助函数，包括任何应用级覆盖设置。构建器在构建时读取该设置；设置变化时，控制器会拆除并重新构建。
• 终止父时间线不会触发嵌套构建器的中断回调。先终止父时间线，再调用每个构建器的还原函数，例如拆分文本运行器的 revertText。
• 每个目标元素只对应一个效果：两个所有者绝不能同时修改同一元素的 transform。在出场效果移动目标元素前，先停止指针效果和环境效果。
• 环境效果应提供控件，使所有者能够在效果移出屏幕时暂停，并在退出时停止。持续超过五秒的循环需要提供面向用户的暂停功能（WCAG 2.2.2）。
• 粒子输入和密度遵循场域契约。无需悬停即可使用控件。
• 文本从首次绘制到静止状态都应保持换行。测量或拆分前应等待字体加载完成，并在字体加载期间隐藏文本（且隐藏时间尽可能短）；绝不对会换行文本的字距、宽度或字重做补间动画。除非拆分后的行与静止状态下的换行一致，否则应将整个段落作为一个整体动画。验证中包含检查项。
• 宽度变化可能导致拆分测量失效（尺寸调整）。是否重新构建由控制器决定；配方绝不重新挂载页面。