animaxxing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Animaxxing

Portable vanilla TypeScript and GSAP effect recipes. Keep the project's fonts, colors, layout, and component styling; no style skill, token, or font is required.

Load the matching

gsap-<framework>

skill first (

gsap-vanilla

for plain sites), installing it if missing. It owns mount → initial state → intro → settled → outro → end state → unmount, initialization, navigation, recovery, interruption, and cleanup timing. This skill supplies builders its controller calls; do not invent lifecycle guidance here.

适用于原生 TypeScript 项目的可移植 GSAP 特效配方。保留项目的字体、颜色、布局和组件样式；不需要额外的 style skill、token 或字体。

先加载匹配的

gsap-<framework>

skill（纯静态站点使用

gsap-vanilla

），如尚未安装则先进行安装。该 skill 负责 mount → initial state → intro → settled → outro → end state → unmount、初始化、导航、恢复、中断和清理时机。本 skill 提供供框架控制器调用的构建器；不要在这里臆造生命周期规则。

Choose the scope

选择范围

Full treatment. "We're animaxxing", "animax this", or "full treatment" means every element on every screen animates, keeping the brand. Each element starts from a blank first paint, enters (intro), rests static or ambient (settled), and leaves (outro) on every requested navigation. Content below the fold enters when it is scrolled or tabbed to. Mark every element as a page item (route letters) or give it a pair from the shelf; the framework skill keeps the first paint blank. Record the decision in the project's plan or notes so later sessions keep it.
Single effects. A named effect gets only that effect. A particle button does not imply a page transition, font change, or hero sequence.
Unclear. Ask once before building: "Full treatment on every element, or only <effect>?"
The full treatment still follows reduced motion, no-script readability, and the framework skill's initialization and lifecycle.

全套动效。 "We're animaxxing"、"animax this" 或 "full treatment" 表示每个屏幕上的每个元素都参与动效，同时保留品牌风格。每个元素都从空白的首屏绘制开始，进入（intro），随后保持静态或呈现环境动效（settled），并在每次请求的导航中退出（outro）。首屏以下的内容会在滚动到或切换到相应标签页时执行进入效果。将每个元素标记为页面元素（路由字母），或从效果货架中为其选择一对进入和退出效果；框架 skill 会让首屏绘制保持空白。将此决定记录在项目计划或备注中，供后续会话延续。
单一特效。 指定名称的特效只应用该特效。粒子按钮并不意味着需要页面转场、字体变更或 hero 动画序列。
不明确。 构建前只询问一次："Full treatment on every element, or only <effect>?"（对所有元素执行全套动效，还是仅执行
```
<effect>
```
？）
全套动效仍须遵循 reduced motion（减少动态效果）、无脚本可读性，以及框架 skill 的初始化和生命周期要求。

Setup and adaptation

设置与适配

Read the installed GSAP version and types. Every plugin used is free since 3.13; SplitText recipes need 3.13+ (
```
SplitText.create
```
,
```
smartWrap
```
,
```
mask
```
,
```
aria
```
);
```
easeReverse
```
needs 3.15+. Each recipe lists its dependencies; register only those used. Use the official GSAP skills for API details.
Recipes register plugins at module scope, which is server-safe, but import them only from client code. Drop a copy's registration when the project registers plugins centrally.
Add only requested effects unless the full treatment applies; see Choose the scope.
Recipe constants are editable defaults, not brand rules. Tune timing, stagger, spread, and intensity to the surface; expose more constants only if the app needs runtime configuration.
Weight effects need a loaded variable weight axis, not a specific font. Match endpoints and resting weight to the face (examples use 400–800), or use transform-only effects.
Particle canvases take their CSS
```
color
```
; use an existing brand color with enough contrast. Keep control geometry and focus styling.
Use
```
style-animaxxing
```
only when its look is requested; it selects and configures these recipes.

读取已安装的 GSAP 版本及其类型定义。自 3.13 起，使用的所有插件均为免费；SplitText 配方需要 3.13+（
```
SplitText.create
```
、
```
smartWrap
```
、
```
mask
```
、
```
aria
```
）；
```
easeReverse
```
需要 3.15+。每个配方都会列出其依赖项；只注册实际使用的插件。API 细节请参阅官方 GSAP skills。
配方在模块作用域注册插件，因此在服务端是安全的，但这些插件只能从客户端代码导入。如果项目集中注册插件，请删除配方副本中的注册代码。
除非应用全套动效，否则只添加明确请求的效果；参见选择范围。
配方常量是可编辑的默认值，而不是品牌规则。根据具体界面调节时序、错峰、分布范围和强度；仅当应用需要运行时配置时，才公开更多常量。
字重效果需要已加载支持可变字重轴的字体，而不是指定某款字体。将动画起止字重和静止字重与字体本身匹配（示例使用 400–800），否则使用仅基于 transform 的效果。
粒子 canvas 使用其 CSS
```
color
```
；选用具有足够对比度的现有品牌色。保留控件几何形状和焦点样式。
仅当明确要求
```
style-animaxxing
```
的视觉风格时才使用它；该 skill 负责选择并配置这些配方。

Read only what you need

只阅读所需内容

Task	Reference
Choose in/out effects, configure defaults, coordinate with the controller	Motion vocabulary
A brand's signature curve for every `ease` option	Signature curves
Loading flashes, auth-dependent content, or layout shifts	Matching installed framework skill's `references/initialization.md` , Data readiness and layout stability
Character animation: font readiness, kerning, masks, stable split/revert	Text stability
Character, word, line, scramble, or glitch entrances/exits, ellipse line reveals, highlighter line sweeps	Split entrances
Page items, including scattering headlines	Route letters
Short display copy arriving at speaking pace	Speak-in
Text typed behind a caret, deleted, or a word that retypes through a list	Typewriter
Ambient headline ripple	Wave
Scroll reveals and pop-ins, scrubbed statements, parallax and footer reveals, pinned scenes, stacking cards, zoom-through to the next scene, horizontal runs and drift inside them, an element traveling between section waypoints, progress, velocity skew, header theme per section, hide-on-scroll headers	Scroll effects
Magnetic buttons, tilt cards, spotlight reveals, cursor follower and its scrolling label, momentum hover, proximity scaling and dock effects, image trails, drag-and-throw tracks, swipe to dismiss	Pointer effects
Endless drag galleries: a wrapping loop with snap, wheel, and drift; a 2D grid that wraps on both axes; a fanned card stack dealt by drag or flick	Endless drag
Lists reordered by dragging a handle or with the keyboard	Sortable
Full-screen sections changing on a wheel flick, swipe, or key	Section pager
Opt-in sound on interactions and timelines, ambient beds	Sound cues
Line drawing, icon morphs, a mark following a path, a section edge that morphs with scroll, text riding a path or turning around a badge	SVG effects
Count-up figures, odometer digits rolling to new values, looping marquees, logo walls that cycle	Counters and marquees
Eased page scrolling with Lenis or ScrollSmoother	Smooth scroll
Curtain page transitions, tilted, titled, clip-path wipe, or drifting covers, curved SVG swipe covers, first-visit preloaders	Page covers
Filter, reorder, and expand layouts; shared-element morphs across pages	Layout Flip
Image wipe reveals, hover image previews, scroll-scrubbed video, canvas frame sequences	Media effects
Label rolls, underline sweeps, direction-aware fills, image zoom on hover and focus
A control that squashes and ripples when pressed, by any input	Press feedback
A shake for an error or refused action	Accents
Menu overlays, interruptible enter/exit with reverse easing, dialog enter and exit, accordion height, sliding tab indicators, buttons that show loading, success, and failure	Component motion
Dispersal on a call to action	Blast-off
Confetti bursts and emoji rain thrown under gravity	Physics effects
Particle buttons, cards, links, or command fields	Particle effects plus field/attach helpers
Touch, focus, stuck hover, mobile particle budgets	Input and devices
Roll back partial setup and restore modified content	Effect restoration
Verify effects and reuse on another brand	Verification, then the framework's relevant checks

任务	参考资料
选择进入/退出效果、配置默认值并与控制器协调	动效词汇
为每个 `ease` 选项配置品牌标志性曲线	标志性曲线
加载闪烁、依赖身份验证的内容或布局偏移	已安装框架 skill 的 `references/initialization.md` 中的数据就绪与布局稳定性
字符动画：字体就绪、字距调整、遮罩，以及稳定的拆分/还原	文本稳定性
字符、单词、整行、字符扰乱或故障风的进入/退出，椭圆线条显现，高亮线扫过	拆分进入效果
页面元素，包括标题散开效果	路由字母
以说话节奏到达的短展示文案	说话式进入
在光标后键入、删除文本，或让一个单词在列表中循环重新键入	打字机
环境态标题波纹	波浪
滚动显现与弹出、scrub 驱动的文案、视差和页脚显现、固定场景、堆叠卡片、缩放穿越到下一场景、横向滚动及其内部漂移、元素在区段航点之间移动、进度、速度偏斜、按区段切换的页眉主题、滚动时隐藏的页眉	滚动特效
磁吸按钮、倾斜卡片、聚光灯显现、光标跟随及其滚动标签、动量悬停、接近缩放与停靠效果、图像拖尾、拖拽抛掷轨道、滑动关闭	指针特效
支持无限拖拽的画廊：带吸附、滚轮和漂移的循环布局；在两个轴向均可循环的 2D 网格；可通过拖拽或轻扫发牌并展开的扇形卡牌堆	无限拖拽
通过拖动手柄或键盘重新排序的列表	可排序
通过滚轮轻扫、手势滑动或按键切换的全屏区段	区段翻页器
交互和 timeline 中选择性启用的声音、环境音床	声音提示
线条绘制、图标变形、标记沿路径移动、区段边缘随滚动变形、文本沿路径移动或绕徽章旋转	SVG 特效
递增数字、里程表式数字滚动到新值、循环跑马灯、轮换的 Logo 墙	计数器与跑马灯
使用 Lenis 或 ScrollSmoother 实现缓动页面滚动	平滑滚动
幕布式页面转场、倾斜、带标题、clip-path 擦除或漂移式遮罩、弧形 SVG 手势滑动遮罩、首次访问预加载器	页面遮罩
筛选、重排和展开布局；跨页面的共享元素变形	布局 Flip
图像擦除显现、悬停图像预览、滚动 scrub 驱动的视频、canvas 帧序列	媒体特效
标签卷动、下划线扫过、方向感知填充、图像在悬停和聚焦时缩放
任意输入方式按下时都会压缩并产生涟漪的控件	按压反馈
用于错误或操作被拒绝时的抖动	动效词汇
菜单浮层、可中断且带反向缓动的进入/退出、对话框进入和退出、手风琴高度变化、滑动标签指示器、显示加载、成功和失败状态的按钮	组件动效
CTA 上的元素爆散	爆散效果
重力作用下的彩纸爆发和 emoji 雨	物理特效
粒子按钮、卡片、链接或命令输入框	粒子特效和 field/attach 辅助函数
触摸设备、键盘焦点、卡住的悬停状态、移动端粒子数量预算	输入与设备
回滚部分设置并恢复已修改的内容	特效还原
验证特效并将其复用于其他品牌	验证，然后执行框架的相关检查

Recipe contract

配方契约

Copy only the selected recipe and its named local helpers. Return shapes differ per recipe (timelines,

{ timeline, revert }

, stop functions, particle controls); assume no universal interface.

Framework phase	Effect responsibility
initial state	Targets prepared under the framework's pre-paint/no-script mechanism
intro	Entrance builder or `enter(delay)`
settled	Clear temporary styles; optional `idle()` or wave
outro	Exit builder, `exit()` , or `blastOff(...)`
end state	Notify completion; controller decides the next action
unmount	Controller calls the recipe's stop, `destroy` , or `revert` handle

Apply effect restoration when copying a recipe, including failure before a handle returns.
Builders never navigate, mount, subscribe to page lifecycle, or decide when they run. The controller calls them and owns phase state.
An invisible start does not make incomplete data ready. The controller supplies resolved targets or reserved regions; never use an entrance to disguise guest or empty content.
Keep split markup only while an effect needs it (speak-in finishes and an active wave persist). Revert at the controller's cleanup boundary; preserve accessible text and nested controls.
Use
```
overwrite: "auto"
```
; clear temporary styles and
```
will-change
```
when their phase ends.
Reduced motion reaches the documented settled or exit state and still fires completion callbacks; no ambient motion. Use the project's preference helper, including any app override. Builders read it when they build; on a change, the controller tears down and rebuilds.
Killing a parent timeline never reaches a nested builder's interrupt callback. Kill the parent, then call each builder's revert, such as
```
revertText
```
for split runners.
One effect per target: two owners must never write one element's transform. Stop pointer and ambient effects before an outro moves their target.
Ambient effects expose controls so the owner can pause them off screen and stop them on exit. Loops past five seconds need a user-facing pause (WCAG 2.2.2).
Particle input and density follow the field contract. Controls work without hover.
Width changes can invalidate split measurements (resize). The controller decides whether to rebuild; recipes never remount pages.

仅复制选定的配方及其指定的本地辅助函数。不同配方的返回形态不同（timeline、

{ timeline, revert }

、停止函数、粒子控件）；不要假设存在统一接口。

框架阶段	特效职责
initial state	在框架的预绘制/无脚本机制下准备目标元素
intro	进入效果构建器或 `enter(delay)`
settled	清除临时样式；可选执行 `idle()` 或 wave 效果
outro	退出效果构建器、 `exit()` 或 `blastOff(...)`
end state	通知完成；由控制器决定下一步操作
unmount	控制器调用配方的 stop、destroy 或 revert 句柄

复制配方时应用特效还原，包括在句柄成功返回前就发生失败的情况。
构建器绝不导航、挂载、订阅页面生命周期或决定何时运行。由控制器调用构建器，并管理阶段状态。
不可见的起始状态并不代表不完整的数据已经就绪。控制器应提供已解析的目标或预留区域；绝不能使用进入效果来掩饰访客内容或空内容。
仅在效果需要时保留拆分标记（speak-in 完成后不再需要，活动中的 wave 则持续保留）。在控制器的清理边界执行还原；保留无障碍文本和嵌套控件。
使用
```
overwrite: "auto"
```
；阶段结束时清除临时样式和
```
will-change
```
。
reduced motion 应到达文档规定的静止（settled）或退出（exit）状态，并且仍触发完成回调；不播放环境动效。使用项目的偏好辅助函数，包括任何应用级覆盖。构建器在构建时读取该偏好；偏好变化时，由控制器拆除并重建。
终止父 timeline 不会自动触发嵌套构建器的中断回调。先终止父 timeline，再调用每个构建器的 revert 句柄，例如 split runner 的
```
revertText
```
。
每个目标只能应用一个特效：两个所有者绝不能同时写入同一元素的 transform。在 outro 移动目标之前，先停止指针和环境特效。
环境特效公开控制接口，使所有者能在元素离屏时暂停，并在退出时停止。超过五秒的循环需要提供面向用户的暂停控制（WCAG 2.2.2）。
粒子的输入处理和密度遵循场域契约。控件无需悬停也能正常工作。
宽度变化可能使拆分测量结果失效（resize）。由控制器决定是否重建；配方绝不重新挂载页面。