---
title: "动态加载器"
description: "137 个源定义加载场景，支持独立播放、本地化和可见性控制。"
category: MotionLoaders
status: beta
since: 0.6.3
tags: [motion, loading, animation]
syncStatus: reviewed
verified: false
---
## 概述
`TxMotionLoader` 保留 Amicro 的 134 个命名加载实现，再加入 3 个 CSS 加载器。每个变体都有对应源码的几何结构、运动轨迹、相位和节奏。下表保留原始 ID 和导出名。组件用于进度未知的等待状态，不会报告业务完成。
根节点是礼貌播报的状态区域，带有稳定的无障碍名称。动画画面不进入无障碍树。只有 `playing=true`、组件已挂载且可见、页面可见、用户未要求减少动态效果时才播放。任意条件关闭后，组件取消原生动画，保留可读静态画面。恢复时重新开始对应源码的节奏。
## 用法
### 全部命名场景
筛选完整目录，逐项或批量控制播放，并调整尺寸、速度和本地化状态文字。滚动目录包含全部 137 项，离开可见区域的项目不会播放动画。
:::TuffDemoWrapper{demo="MotionLoaderDemo" code-lang="vue"}
---
code: |
---
:::
### 受控播放
`playing` 表示播放请求，可见性和减少动态效果设置仍优先。修改源 ID 会切换几何结构。旧场景先释放资源，新场景再开始播放。
```vue
```
### 最佳实践
- 首次加载的内容占位优先使用 `TxSkeleton` 或 `TxRowSkeleton`。短时间、进度未知的等待状态可以选择适合当前界面的动态加载器。
- 让 `playing` 跟随真实等待状态。暂停动画不代表请求完成，因此状态区域仍标记为忙碌。
- 按当前语言提供 `label` 和 `labels`。文本变体使用这些文字，包括逐字波浪和弹起场景。
- 进度可计算时使用 `TxProgressBar`。加载器不会模拟百分比，也不会在定时器到期后伪报成功。
- 保持适中的速度。离屏、隐藏页面、KeepAlive 和减少动态效果的暂停由组件统一处理。
## API 参考
### 属性
| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `variant` | `MotionLoaderVariant` | `'classic-spinner'` | 下方 137 项目录中的原始源 ID。 |
| `playing` | `boolean` | `true` | 请求播放。设为 false 会取消全部原生轨道，保留可读静态画面。 |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'` | 源几何缩放倍率分别为 0.65、0.85、1 和 1.25。长宽比和相位距离仍来自源码。 |
| `speed` | `number` | `1` | 正数播放倍率。非有限值或非正数按 1 处理。 |
| `label` | `string` | `labels.loading` | 无障碍状态名称和可见状态文字，独立于动画画面中的词语。 |
| `labels` | `MotionLoaderLabels` | 见下表 | 文本场景和暂停状态使用的本地化词语。 |
| `showLabel` | `boolean` | `true` | 显示状态文字。设为 false 仅在视觉上裁切，仍保留在无障碍树中。 |
#### 文字配置
| 字段 | 默认值 | 使用位置 |
| --- | --- | --- |
| `loading` | `'Loading'` | 状态文字、AppleTextReveal、Typing、TextMorph 和 SpringTextPop。SpringTextPop 保留源码追加的三个点。 |
| `thinking` | `'Thinking'` | TextBlink、TextDots、TextShimmer 和 TextShimmerWave。 |
| `waiting` | `'Wait'` | TextMorph 的第二个文字层。 |
| `unlock` | `'Slide to unlock'` | AppleUnlock 的两个扫光层。 |
| `terminal` | `'loading...'` | TerminalLoader 的命令文字。光标和提示符保留源几何结构。 |
| `paused` | `'Paused'` | `playing=false` 时的状态文字。 |
### 事件
无组件专属事件。宿主控制真实等待状态和 `playing` 属性。
### 插槽
无插槽。文本场景从 `labels` 读取内容，不以通用画面替代缺失内容。
### 导出
- `TxMotionLoader` 和可安装的 `MotionLoader` 组件。
- `MOTION_LOADER_VARIANTS`：枚举全部 137 个源 ID 的只读元组。`MotionLoaderVariant` 从这个元组推导。
- `MOTION_LOADER_SOURCES`：每项包含 `id`、原始导出名 `name` 和固定上游路径 `source` 的类型化记录。
- `MotionLoaderProps`、`MotionLoaderLabels`、`MotionLoaderSize`、`MotionLoaderSource` 和 `TxMotionLoaderInstance`。
## 来源映射
来源固定在 Amicro 提交 `43c29ce9cdd16459e3eab4992381b8d35b38776a`，遵循 MIT 许可，Copyright (c) 2026 SYED SUBHAN UDDIN。下表记录源码的运动值和逐节点相位，不按名称推测动画。原生 spin 工具类保留一秒线性旋转。源码未指定缓动时使用原有的 ease-out 默认值。
| 变体 ID | 原始导出 | 固定源文件 | 源轨迹与节奏 |
| --- | --- | --- | --- |
| `accordion-loader` | AccordionLoader | [`registry/ui/loading/accordion-loader.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/accordion-loader.tsx) | scaleX=[1,0.2,1] · 1.5s/easeInOut
scaleX=[1,0.2,1] · 1.5s/easeInOut, 相位 0.15s
scaleX=[1,0.2,1] · 1.5s/easeInOut, 相位 0.3s
scaleX=[1,0.2,1] · 1.5s/easeInOut, 相位 0.45s |
| `app-icon-load` | AppIconLoad | [`registry/ui/loading/app-icon-load.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/app-icon-load.tsx) | strokeDashoffset=[125,0] · 2s/easeInOut |
| `apple-breathe` | AppleBreathe | [`registry/ui/loading/apple-breathe.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/apple-breathe.tsx) | scale=[1,1.75,1]; x=[0,11,0]; y=[0,0,0] · 3.6s/easeInOut
scale=[1,1.75,1]; x=[0,5.5,0]; y=[0,9.526279,0] · 3.6s/easeInOut
scale=[1,1.75,1]; x=[0,-5.5,0]; y=[0,9.526279,0] · 3.6s/easeInOut
scale=[1,1.75,1]; x=[0,-11,0]; y=[0,0,0] · 3.6s/easeInOut
scale=[1,1.75,1]; x=[0,-5.5,0]; y=[0,-9.526279,0] · 3.6s/easeInOut
scale=[1,1.75,1]; x=[0,5.5,0]; y=[0,-9.526279,0] · 3.6s/easeInOut |
| `apple-equalizer` | AppleEqualizer | [`registry/ui/loading/apple-equalizer.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/apple-equalizer.tsx) | height=["20%","100%","20%"] · 0.8s/circInOut, 相位 0.06s
height=["20%","100%","20%"] · 0.8s/circInOut, 相位 0.41s
height=["20%","100%","20%"] · 0.8s/circInOut, 相位 0.19s
height=["20%","100%","20%"] · 0.8s/circInOut, 相位 0.32s |
| `apple-icon-morph` | AppleIconMorph | [`registry/ui/loading/apple-icon-morph.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/apple-icon-morph.tsx) | borderRadius=["20%","50%","50%","20%"]; rotate=[0,90,180,270] · 2s/easeInOut |
| `apple-pulse-dots` | ApplePulseDots | [`registry/ui/loading/apple-pulse-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/apple-pulse-dots.tsx) | scale=[0.5,1,0.5]; opacity=[0.3,1,0.3] · 1.2s/easeInOut
scale=[0.5,1,0.5]; opacity=[0.3,1,0.3] · 1.2s/easeInOut, 相位 0.15s
scale=[0.5,1,0.5]; opacity=[0.3,1,0.3] · 1.2s/easeInOut, 相位 0.3s |
| `anim-apple-spinner` | AppleRadialSpinner | [`src/components/css-animations/whimsical/AppleLoaders.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/src/components/css-animations/whimsical/AppleLoaders.tsx) | opacity=[1,0.15] · 0.8s/linear, 相位 -0.8s
opacity=[1,0.15] · 0.8s/linear, 相位 -0.7s
opacity=[1,0.15] · 0.8s/linear, 相位 -0.6s
opacity=[1,0.15] · 0.8s/linear, 相位 -0.5s
opacity=[1,0.15] · 0.8s/linear, 相位 -0.4s
opacity=[1,0.15] · 0.8s/linear, 相位 -0.3s
opacity=[1,0.15] · 0.8s/linear, 相位 -0.2s
opacity=[1,0.15] · 0.8s/linear, 相位 -0.1s |
| `apple-scale-pulse` | AppleScalePulse | [`registry/ui/loading/apple-scale-pulse.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/apple-scale-pulse.tsx) | scale=[0,1]; opacity=[1,0] · 1.5s/easeOut
scale=[0,1]; opacity=[1,0] · 1.5s/easeOut, 相位 0.5s |
| `apple-sound-wave` | AppleSoundWave | [`registry/ui/loading/apple-sound-wave.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/apple-sound-wave.tsx) | height=[4,8,4] · 1s/easeInOut
height=[4,16,4] · 1s/easeInOut, 相位 0.1s
height=[4,24,4] · 1s/easeInOut, 相位 0.2s
height=[4,16,4] · 1s/easeInOut, 相位 0.3s
height=[4,8,4] · 1s/easeInOut, 相位 0.4s |
| `apple-text-reveal` | AppleTextReveal | [`registry/ui/loading/apple-text-reveal.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/apple-text-reveal.tsx) | y=["100%","0%","-100%"] · 2s/easeInOut |
| `apple-unlock` | AppleUnlock | [`registry/ui/loading/apple-unlock.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/apple-unlock.tsx) | backgroundPosition=["200% 0","-200% 0"] · 2.2s/linear |
| `arc-tracer` | ArcTracer | [`registry/ui/loading/arc-tracer.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/arc-tracer.tsx) | strokeDashoffset=[125,0,-125] · 2s/easeInOut |
| `bar-cascade` | BarCascade | [`registry/ui/loading/bar-cascade.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/bar-cascade.tsx) | height=["8px","24px","8px"] · 1s/easeInOut
height=["8px","24px","8px"] · 1s/easeInOut, 相位 0.1s
height=["8px","24px","8px"] · 1s/easeInOut, 相位 0.2s
height=["8px","24px","8px"] · 1s/easeInOut, 相位 0.3s
height=["8px","24px","8px"] · 1s/easeInOut, 相位 0.4s |
| `bar-sweep` | BarSweep | [`registry/ui/loading/bar-sweep.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/bar-sweep.tsx) | x=[0,24,0] · 1.5s/easeInOut |
| `bobbing-dots` | BobbingDots | [`registry/ui/loading/bobbing-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/bobbing-dots.tsx) | y=[0,-10,0] · 1.2s/easeInOut
y=[0,-10,0] · 1.2s/easeInOut, 相位 0.15s
y=[0,-10,0] · 1.2s/easeInOut, 相位 0.3s |
| `bounce-dots` | BounceDots | [`registry/ui/loading/bounce-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/bounce-dots.tsx) | y=[0,-8,0] · 0.6s/easeInOut
y=[0,-8,0] · 0.6s/easeInOut, 相位 0.1s
y=[0,-8,0] · 0.6s/easeInOut, 相位 0.2s |
| `bouncing-bars` | BouncingBars | [`registry/ui/loading/bouncing-bars.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/bouncing-bars.tsx) | scaleY=[0.3,1,0.3] · 1s/easeInOut
scaleY=[0.3,1,0.3] · 1s/easeInOut, 相位 0.2s
scaleY=[0.3,1,0.3] · 1s/easeInOut, 相位 0.4s |
| `bouncing-dots` | BouncingDots | [`registry/ui/loading/bouncing-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/bouncing-dots.tsx) | y=[0,-20,0]; scaleY=[0.8,1.1,0.8] · 0.8s/easeInOut
y=[0,-20,0]; scaleY=[0.8,1.1,0.8] · 0.8s/easeInOut, 相位 0.1s
y=[0,-20,0]; scaleY=[0.8,1.1,0.8] · 0.8s/easeInOut, 相位 0.2s |
| `bouncing-lines` | BouncingLines | [`registry/ui/loading/bouncing-lines.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/bouncing-lines.tsx) | scaleX=[0.3,1,0.3] · 1s/easeInOut
scaleX=[0.3,1,0.3] · 1s/easeInOut, 相位 0.2s
scaleX=[0.3,1,0.3] · 1s/easeInOut, 相位 0.4s |
| `bouncing-square` | BouncingSquare | [`registry/ui/loading/bouncing-square.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/bouncing-square.tsx) | y=[0,-24,0]; scaleY=[0.8,1.1,0.8]; scaleX=[1.2,0.9,1.2] · 0.6s/easeInOut |
| `breathe-ring` | BreatheRing | [`registry/ui/loading/breathe-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/breathe-ring.tsx) | scale=[0.8,1.1,0.8]; borderWidth=[6,2,6] · 3s/easeInOut |
| `breathing-glow` | BreathingGlow | [`registry/ui/loading/breathing-glow.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/breathing-glow.tsx) | scale=[1,1.5,1]; opacity=[0.5,0.8,0.5] · 2s/easeInOut |
| `breathing-square` | BreathingSquare | [`registry/ui/loading/breathing-square.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/breathing-square.tsx) | scale=[1,1.2,1]; borderRadius=["0%","50%","0%"]; rotate=[0,90,180] · 2s/easeInOut |
| `circular-bars` | CircularBars | [`registry/ui/loading/circular-bars.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/circular-bars.tsx) | scaleY=[0.5,1.5,0.5] · 1.2s/easeInOut
scaleY=[0.5,1.5,0.5] · 1.2s/easeInOut, 相位 0.15s
scaleY=[0.5,1.5,0.5] · 1.2s/easeInOut, 相位 0.3s
scaleY=[0.5,1.5,0.5] · 1.2s/easeInOut, 相位 0.45s
scaleY=[0.5,1.5,0.5] · 1.2s/easeInOut, 相位 0.6s
scaleY=[0.5,1.5,0.5] · 1.2s/easeInOut, 相位 0.75s
scaleY=[0.5,1.5,0.5] · 1.2s/easeInOut, 相位 0.9s
scaleY=[0.5,1.5,0.5] · 1.2s/easeInOut, 相位 1.05s |
| `classic-spinner` | ClassicSpinner | [`registry/ui/loading/classic-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/classic-spinner.tsx) | opacity=[1,0.2] · 1s/linear
opacity=[1,0.2] · 1s/linear, 相位 0.083s
opacity=[1,0.2] · 1s/linear, 相位 0.167s
opacity=[1,0.2] · 1s/linear, 相位 0.25s
opacity=[1,0.2] · 1s/linear, 相位 0.333s
opacity=[1,0.2] · 1s/linear, 相位 0.417s
opacity=[1,0.2] · 1s/linear, 相位 0.5s
opacity=[1,0.2] · 1s/linear, 相位 0.583s
opacity=[1,0.2] · 1s/linear, 相位 0.667s
opacity=[1,0.2] · 1s/linear, 相位 0.75s
opacity=[1,0.2] · 1s/linear, 相位 0.833s
opacity=[1,0.2] · 1s/linear, 相位 0.917s |
| `clock-spinner` | ClockSpinner | [`registry/ui/loading/clock-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/clock-spinner.tsx) | rotate=360 · 2s/linear
rotate=360 · 12s/linear |
| `comet-spinner` | CometSpinner | [`registry/ui/loading/comet-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/comet-spinner.tsx) | rotate=360 · 1s/linear |
| `concentric-pulse` | ConcentricPulse | [`registry/ui/loading/concentric-pulse.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/concentric-pulse.tsx) | width=48; height=48; opacity=0 · 2s/easeOut, 相位 0.6s
width=48; height=48; opacity=0 · 2s/easeOut, 相位 1.2s
width=48; height=48; opacity=0 · 2s/easeOut, 相位 1.8s |
| `concentric-ring` | ConcentricRing | [`registry/ui/loading/concentric-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/concentric-ring.tsx) | rotate=360 · 2s/linear
rotate=-360 · 1.5s/linear
rotate=360 · 1s/linear |
| `concentric-squares` | ConcentricSquares | [`registry/ui/loading/concentric-squares.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/concentric-squares.tsx) | rotate=[0,90,90]; scale=[1,1,0.8,1] · 2s/easeInOut
rotate=[0,-90,-90]; scale=[1,1,1.2,1] · 2s/easeInOut |
| `conveyor-loop` | ConveyorLoop | [`registry/ui/loading/conveyor-loop.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/conveyor-loop.tsx) | x=[0,-32] · 1s/linear |
| `cross-spinner` | CrossSpinner | [`registry/ui/loading/cross-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/cross-spinner.tsx) | rotate=[0,90,180,270,360] · 2s/easeInOut |
| `cube-flip-spring` | CubeFlipSpring | [`registry/ui/loading/cube-flip-spring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/cube-flip-spring.tsx) | rotateX=[0,180,180]; rotateY=[0,0,180] · 2s/spring, bounce=0.2 |
| `dash-ring` | DashRing | [`registry/ui/loading/dash-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/dash-ring.tsx) | rotate=360 · 4s/linear |
| `dashed-spiral` | DashedSpiral | [`registry/ui/loading/dashed-spiral.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/dashed-spiral.tsx) | rotate=360; scale=[1,1.1,1] · 4s/linear |
| `diamond-grid` | DiamondGrid | [`registry/ui/loading/diamond-grid.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/diamond-grid.tsx) | scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 0.2s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 0.4s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 0.6s |
| `diamond-rotate-spring` | DiamondRotateSpring | [`registry/ui/loading/diamond-rotate-spring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/diamond-rotate-spring.tsx) | rotate=[45,135,225,315] · 2s/spring, bounce=0.4 |
| `dot-spinner` | DotSpinner | [`registry/ui/loading/dot-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/dot-spinner.tsx) | opacity=[1,0.2] · 1s/linear
opacity=[1,0.2] · 1s/linear, 相位 0.125s
opacity=[1,0.2] · 1s/linear, 相位 0.25s
opacity=[1,0.2] · 1s/linear, 相位 0.375s
opacity=[1,0.2] · 1s/linear, 相位 0.5s
opacity=[1,0.2] · 1s/linear, 相位 0.625s
opacity=[1,0.2] · 1s/linear, 相位 0.75s
opacity=[1,0.2] · 1s/linear, 相位 0.875s |
| `dots-ring` | DotsRing | [`registry/ui/loading/dots-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/dots-ring.tsx) | scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 0.15s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 0.3s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 0.45s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 0.6s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 0.75s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 0.9s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 1.05s |
| `double-ring` | DoubleRing | [`registry/ui/loading/double-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/double-ring.tsx) | rotate=360 · 1.5s/linear
rotate=-360 · 1s/linear |
| `drop-dot` | DropDot | [`registry/ui/loading/drop-dot.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/drop-dot.tsx) | y=[0,24,0]; scaleY=[1,1.2,1]; scaleX=[1,0.8,1] · 1s/circIn |
| `dual-arc` | DualArc | [`registry/ui/loading/dual-arc.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/dual-arc.tsx) | rotate=360; scale=[1,0.82,1] · (rotate 1.2s/linear, scale 1.2s/easeInOut) |
| `dynamic-island` | DynamicIsland | [`registry/ui/loading/dynamic-island.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/dynamic-island.tsx) | width=[80,110,80] · 2.2s/easeInOut
opacity=[0.4,1,0.4] · 1.1s/easeInOut
height=[3,8,3] · 0.8s/easeInOut
height=[3,8,3] · 0.8s/easeInOut, 相位 0.15s
height=[3,8,3] · 0.8s/easeInOut, 相位 0.3s |
| `elastic-bars` | ElasticBars | [`registry/ui/loading/elastic-bars.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/elastic-bars.tsx) | height=[8,36,8] · 1.1s/easeInOut
height=[8,36,8] · 1.1s/easeInOut, 相位 0.15s
height=[8,36,8] · 1.1s/easeInOut, 相位 0.3s |
| `elastic-square` | ElasticSquare | [`registry/ui/loading/elastic-square.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/elastic-square.tsx) | y=[0,-20,0]; scaleY=[0.7,1.2,0.7]; scaleX=[1.3,0.8,1.3] · 0.8s/easeInOut |
| `expanding-cross` | ExpandingCross | [`registry/ui/loading/expanding-cross.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/expanding-cross.tsx) | scaleX=[0.2,1,0.2] · 1.5s/easeInOut
scaleY=[0.2,1,0.2] · 1.5s/easeInOut, 相位 0.75s |
| `face-id-scan` | FaceIDScan | [`registry/ui/loading/face-id-scan.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/face-id-scan.tsx) | top=["-100%","100%","-100%"] · 2.5s/linear |
| `fade-arc` | FadeArc | [`registry/ui/loading/fade-arc.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/fade-arc.tsx) | rotate=0→360 · 1s/linear |
| `fade-dots` | FadeDots | [`registry/ui/loading/fade-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/fade-dots.tsx) | opacity=[0,1,0] · 1.5s/linear
opacity=[0,1,0] · 1.5s/linear, 相位 0.2s
opacity=[0,1,0] · 1.5s/linear, 相位 0.4s
opacity=[0,1,0] · 1.5s/linear, 相位 0.6s |
| `flip-square` | FlipSquare | [`registry/ui/loading/flip-square.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/flip-square.tsx) | rotateX=[0,180,180,0]; rotateY=[0,0,180,180] · 2s/easeInOut |
| `floating-diamonds` | FloatingDiamonds | [`registry/ui/loading/floating-diamonds.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/floating-diamonds.tsx) | y=[0,-10,0] · 1s/easeInOut
y=[0,-10,0] · 1s/easeInOut, 相位 0.2s
y=[0,-10,0] · 1s/easeInOut, 相位 0.4s |
| `fluid-bars` | FluidBars | [`registry/ui/loading/fluid-bars.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/fluid-bars.tsx) | rotate=[-15,15,-15]; scaleY=[0.8,1,0.8] · 1.5s/easeInOut
rotate=[-15,15,-15]; scaleY=[0.8,1,0.8] · 1.5s/easeInOut, 相位 0.1s
rotate=[-15,15,-15]; scaleY=[0.8,1,0.8] · 1.5s/easeInOut, 相位 0.2s
rotate=[-15,15,-15]; scaleY=[0.8,1,0.8] · 1.5s/easeInOut, 相位 0.3s |
| `fluid-diamond` | FluidDiamond | [`registry/ui/loading/fluid-diamond.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/fluid-diamond.tsx) | scaleX=[1,1.5,1]; scaleY=[1,0.5,1] · 1.5s/easeInOut |
| `fluid-dot-orbit` | FluidDotOrbit | [`registry/ui/loading/fluid-dot-orbit.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/fluid-dot-orbit.tsx) | rotate=360 · 2s/linear |
| `fluid-skeleton` | FluidSkeleton | [`registry/ui/loading/fluid-skeleton.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/fluid-skeleton.tsx) | x=["-100%","200%"] · 1.5s/linear |
| `gears` | Gears | [`registry/ui/loading/gears.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/gears.tsx) | rotate=360 · 4s/linear
rotate=-360 · 3s/linear |
| `glassmorphic-card` | GlassmorphicCard | [`registry/ui/loading/glassmorphic-card.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/glassmorphic-card.tsx) | x=[-20,20,-20]; y=[-10,10,-10] · 3s/easeInOut
rotate=0→360 · 1s/linear |
| `gradient-arc` | GradientArc | [`registry/ui/loading/gradient-arc.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/gradient-arc.tsx) | rotate=360 · 1.2s/linear |
| `grid-dots` | GridDots | [`registry/ui/loading/grid-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/grid-dots.tsx) | scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 0.2s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 0.4s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 0.6s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 0.8s |
| `haptic-ring` | HapticRing | [`registry/ui/loading/haptic-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/haptic-ring.tsx) | rotate=[0,90,180,270,360] · 2s/spring, bounce=0.4 |
| `heartbeat` | Heartbeat | [`registry/ui/loading/heartbeat.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/heartbeat.tsx) | strokeDashoffset=[100,-100] · 2s/linear |
| `hexagon-spinner` | HexagonSpinner | [`registry/ui/loading/hexagon-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/hexagon-spinner.tsx) | strokeDashoffset=[120,-120] · 2s/linear |
| `hourglass` | Hourglass | [`registry/ui/loading/hourglass.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/hourglass.tsx) | rotate=[0,180,180,360,360] · 3s/easeInOut |
| `infinity-path` | InfinityPath | [`registry/ui/loading/infinity-path.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/infinity-path.tsx) | strokeDashoffset=[100,-100] · 2s/linear |
| `intersecting-rings` | IntersectingRings | [`registry/ui/loading/intersecting-rings.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/intersecting-rings.tsx) | rotateX=360; rotateY=180 · 2.2s/linear
rotateX=180; rotateY=360 · 2.2s/linear |
| `ios-spinner` | IOSSpinner | [`registry/ui/loading/ios-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/ios-spinner.tsx) | opacity=[1,0.2] · 1s/linear
opacity=[1,0.2] · 1s/linear, 相位 0.083s
opacity=[1,0.2] · 1s/linear, 相位 0.167s
opacity=[1,0.2] · 1s/linear, 相位 0.25s
opacity=[1,0.2] · 1s/linear, 相位 0.333s
opacity=[1,0.2] · 1s/linear, 相位 0.417s
opacity=[1,0.2] · 1s/linear, 相位 0.5s
opacity=[1,0.2] · 1s/linear, 相位 0.583s
opacity=[1,0.2] · 1s/linear, 相位 0.667s
opacity=[1,0.2] · 1s/linear, 相位 0.75s
opacity=[1,0.2] · 1s/linear, 相位 0.833s
opacity=[1,0.2] · 1s/linear, 相位 0.917s |
| `line-spinner` | LineSpinner | [`registry/ui/loading/line-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/line-spinner.tsx) | rotate=360 · 1.2s/linear |
| `liquid-dots` | LiquidDots | [`registry/ui/loading/liquid-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/liquid-dots.tsx) | x=[-16,16,-16] · 2s/easeInOut
x=[16,-16,16] · 2s/easeInOut |
| `mac-terminal` | MacTerminal | [`registry/ui/loading/mac-terminal.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/mac-terminal.tsx) | opacity=[1,0,1] · 1s/linear |
| `magnetic-dots` | MagneticDots | [`registry/ui/loading/magnetic-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/magnetic-dots.tsx) | x=[0,8,0] · 1.5s/easeInOut
x=[0,-8,0] · 1.5s/easeInOut |
| `anim-matrix-loader` | MatrixGridLoader | [`src/components/css-animations/whimsical/MatrixGridLoader.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/src/components/css-animations/whimsical/MatrixGridLoader.tsx) | opacity=[0.25,0.55,0.8,1]; backgroundColor=["var(--tx-color-primary-dark-2)","var(--tx-color-primary)","var(--tx-color-primary-light-3)","var(--tx-color-primary-light-5)"] · 0.8s/easeInOut, 相位 0.2s
opacity=[0.25,0.55,0.8,1]; backgroundColor=["var(--tx-color-primary-dark-2)","var(--tx-color-primary)","var(--tx-color-primary-light-3)","var(--tx-color-primary-light-5)"] · 0.8s/easeInOut, 相位 0.4s
opacity=[0.25,0.55,0.8,1]; backgroundColor=["var(--tx-color-primary-dark-2)","var(--tx-color-primary)","var(--tx-color-primary-light-3)","var(--tx-color-primary-light-5)"] · 0.8s/easeInOut, 相位 0.8s
opacity=[0.25,0.55,0.8,1]; backgroundColor=["var(--tx-color-primary-dark-2)","var(--tx-color-primary)","var(--tx-color-primary-light-3)","var(--tx-color-primary-light-5)"] · 0.8s/easeInOut, 相位 0.6s |
| `minimal-triangle` | MinimalTriangle | [`registry/ui/loading/minimal-triangle.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/minimal-triangle.tsx) | strokeDashoffset=[120,0,-120] · 2s/easeInOut |
| `morph-dot-ring` | MorphDotRing | [`registry/ui/loading/morph-dot-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/morph-dot-ring.tsx) | rotate=180; gap=["4px","0px","4px"] · 2s/easeInOut |
| `morph-loader` | MorphLoader | [`registry/ui/loading/morph-loader.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/morph-loader.tsx) | borderRadius=["25%","50%","50%","25%","25%"]; rotate=[0,90,180,270,360]; scale=[1,0.8,1.1,0.8,1] · 2.2s/easeInOut |
| `morphing-bars` | MorphingBars | [`registry/ui/loading/morphing-bars.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/morphing-bars.tsx) | gap=["4px","0px","4px"] · 2s/easeInOut
height=[32,16,32] · 2s/easeInOut |
| `morphing-infinity` | MorphingInfinity | [`registry/ui/loading/morphing-infinity.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/morphing-infinity.tsx) | x=[0,24,0]; scale=[1,0.5,1] · 2s/easeInOut
x=[24,0,24]; scale=[0.5,1,0.5] · 2s/easeInOut |
| `morphing-ring` | MorphingRing | [`registry/ui/loading/morphing-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/morphing-ring.tsx) | rotate=180; borderRadius=["10%","50%","10%"] · 2s/easeInOut |
| `morphing-shape` | MorphingShape | [`registry/ui/loading/morphing-shape.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/morphing-shape.tsx) | borderRadius=["10%","50%","10%"]; rotate=[0,90,180]; scale=[1,0.8,1] · 2s/easeInOut |
| `newtons-cradle` | NewtonsCradle | [`registry/ui/loading/newtons-cradle.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/newtons-cradle.tsx) | rotate=[25,0,0,0,0,25] · 1.5s/easeInOut
rotate=[0,0,0,-25,0,0] · 1.5s/easeInOut |
| `offset-rings` | OffsetRings | [`registry/ui/loading/offset-rings.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/offset-rings.tsx) | rotate=[0,180,360] · 2s/easeInOut
rotate=[0,-180,-360] · 2s/easeInOut, 相位 0.2s |
| `orbiting-circles` | OrbitingCircles | [`registry/ui/loading/orbiting-circles.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/orbiting-circles.tsx) | rotate=360 · 2s/linear
rotate=-360 · 2s/linear |
| `orbiting-dot` | OrbitingDot | [`registry/ui/loading/orbiting-dot.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/orbiting-dot.tsx) | rotate=360 · 2s/linear |
| `origami-shape` | OrigamiShape | [`registry/ui/loading/origami-shape.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/origami-shape.tsx) | rotateY=[0,180,0] · 2s/easeInOut |
| `pendulum` | Pendulum | [`registry/ui/loading/pendulum.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/pendulum.tsx) | rotate=[-45,45,-45] · 1.5s/easeInOut |
| `pulsating-dots` | PulsatingDots | [`registry/ui/loading/pulsating-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/pulsating-dots.tsx) | scale=[1,1.5,1]; opacity=[0.5,1,0.5] · 1.2s/easeInOut
scale=[1,1.5,1]; opacity=[0.5,1,0.5] · 1.2s/easeInOut, 相位 0.2s
scale=[1,1.5,1]; opacity=[0.5,1,0.5] · 1.2s/easeInOut, 相位 0.4s |
| `pulse` | Pulse | [`registry/ui/loading/pulse.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/pulse.tsx) | scale=2.8; opacity=0 · 1.8s/easeOut
scale=2.8; opacity=0 · 1.8s/easeOut, 相位 0.6s |
| `pulse-dot` | PulseDot | [`registry/ui/loading/pulse-dot.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/pulse-dot.tsx) | scale=[0,1]; opacity=[0.8,0] · 1.5s/easeOut |
| `pulse-dots` | PulseDots | [`registry/ui/loading/pulse-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/pulse-dots.tsx) | opacity=[0.2,1,0.2] · 1.4s
opacity=[0.2,1,0.2] · 1.4s, 相位 0.2s
opacity=[0.2,1,0.2] · 1.4s, 相位 0.4s |
| `anim-pulse-dots` | PulseOrbitDots | [`src/components/css-animations/whimsical/AppleLoaders.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/src/components/css-animations/whimsical/AppleLoaders.tsx) | scale=[0.6,1.15,0.6]; opacity=[0.3,1,0.3] · 1.2s/easeInOut
scale=[0.6,1.15,0.6]; opacity=[0.3,1,0.3] · 1.2s/easeInOut, 相位 0.2s
scale=[0.6,1.15,0.6]; opacity=[0.3,1,0.3] · 1.2s/easeInOut, 相位 0.4s |
| `pulse-square` | PulseSquare | [`registry/ui/loading/pulse-square.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/pulse-square.tsx) | scale=[1,1.2,1]; opacity=[1,0.3,1]; borderRadius=["20%","50%","20%"] · 1.5s/easeInOut |
| `pumping-heart` | PumpingHeart | [`registry/ui/loading/pumping-heart.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/pumping-heart.tsx) | scale=[1,1.25,1,1.25,1] · 1.5s/easeInOut |
| `radar-sweep` | RadarSweep | [`registry/ui/loading/radar-sweep.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/radar-sweep.tsx) | rotate=360 · 1.8s/linear |
| `ring-sweep` | RingSweep | [`registry/ui/loading/ring-sweep.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/ring-sweep.tsx) | rotate=360 · 1s/linear |
| `ripple-effect` | RippleEffect | [`registry/ui/loading/ripple-effect.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/ripple-effect.tsx) | scale=1.6; opacity=0 · 2.2s/easeOut
scale=1.6; opacity=0 · 2.2s/easeOut, 相位 0.7s
scale=1.6; opacity=0 · 2.2s/easeOut, 相位 1.4s |
| `rotating-cross` | RotatingCross | [`registry/ui/loading/rotating-cross.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/rotating-cross.tsx) | rotate=180 · 0.8s/easeInOut |
| `rotating-triangle` | RotatingTriangle | [`registry/ui/loading/rotating-triangle.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/rotating-triangle.tsx) | rotate=360 · 2s/linear |
| `shape-shift-grid` | ShapeShiftGrid | [`registry/ui/loading/shape-shift-grid.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/shape-shift-grid.tsx) | borderRadius=["10%","50%","10%"]; scale=[1,0.8,1] · 1.5s/easeInOut
borderRadius=["10%","50%","10%"]; scale=[1,0.8,1] · 1.5s/easeInOut, 相位 0.1s
borderRadius=["10%","50%","10%"]; scale=[1,0.8,1] · 1.5s/easeInOut, 相位 0.2s
borderRadius=["10%","50%","10%"]; scale=[1,0.8,1] · 1.5s/easeInOut, 相位 0.3s |
| `shimmer-line` | ShimmerLine | [`registry/ui/loading/shimmer-line.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/shimmer-line.tsx) | x=["-100%","300%"] · 1.5s/easeInOut |
| `siri-wave` | SiriWave | [`registry/ui/loading/siri-wave.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/siri-wave.tsx) | height=[4,24,4] · 1.2s/easeInOut
height=[4,24,4] · 1.2s/easeInOut, 相位 0.1s
height=[4,24,4] · 1.2s/easeInOut, 相位 0.2s
height=[4,24,4] · 1.2s/easeInOut, 相位 0.3s
height=[4,24,4] · 1.2s/easeInOut, 相位 0.4s |
| `skeleton` | Skeleton | [`registry/ui/loading/skeleton.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/skeleton.tsx) | x="150%" · 1.6s/easeInOut |
| `skeleton-loader` | SkeletonLoader | [`registry/ui/loading/skeleton-loader.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/skeleton-loader.tsx) | opacity=[0.5,1,0.5] · 1.5s/easeInOut
opacity=[0.5,1,0.5] · 1.5s/easeInOut, 相位 0.2s
opacity=[0.5,1,0.5] · 1.5s/easeInOut, 相位 0.4s
opacity=[0.5,1,0.5] · 1.5s/easeInOut, 相位 0.6s |
| `sliding-bars` | SlidingBars | [`registry/ui/loading/sliding-bars.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/sliding-bars.tsx) | y=[0,24,0] · 1.5s/easeInOut
y=[0,-24,0] · 1.5s/easeInOut |
| `smooth-dot-shift` | SmoothDotShift | [`registry/ui/loading/smooth-dot-shift.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/smooth-dot-shift.tsx) | x=[0,18,36,18,0] · 2s/easeInOut |
| `smooth-ring` | SmoothRing | [`registry/ui/loading/smooth-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/smooth-ring.tsx) | rotate=0→360 · 1s/linear |
| `smooth-rounded-square` | SmoothRoundedSquare | [`registry/ui/loading/smooth-rounded-square.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/smooth-rounded-square.tsx) | borderRadius=["10%","50%","10%"] · 2s/easeInOut |
| `spinning-squares` | SpinningSquares | [`registry/ui/loading/spinning-squares.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/spinning-squares.tsx) | x=[0,24,24,0,0]; y=[0,0,24,24,0] · 2s/easeInOut
x=[0,-24,-24,0,0]; y=[0,0,-24,-24,0] · 2s/easeInOut |
| `spiral-spinner` | SpiralSpinner | [`registry/ui/loading/spiral-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/spiral-spinner.tsx) | rotate=360; scale=[1,0.8,1] · 1.5s/easeInOut |
| `spring-bars` | SpringBars | [`registry/ui/loading/spring-bars.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/spring-bars.tsx) | scaleX=[0.2,1,0.2] · 1.4s/easeInOut
scaleX=[0.2,1,0.2] · 1.4s/easeInOut, 相位 0.15s
scaleX=[0.2,1,0.2] · 1.4s/easeInOut, 相位 0.3s |
| `spring-dot-matrix` | SpringDotMatrix | [`registry/ui/loading/spring-dot-matrix.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/spring-dot-matrix.tsx) | scale=[1,0.4,1] · 1.5s/easeInOut
scale=[1,0.4,1] · 1.5s/easeInOut, 相位 0.15s
scale=[1,0.4,1] · 1.5s/easeInOut, 相位 0.3s
scale=[1,0.4,1] · 1.5s/easeInOut, 相位 0.45s
scale=[1,0.4,1] · 1.5s/easeInOut, 相位 0.6s |
| `spring-hexagon` | SpringHexagon | [`registry/ui/loading/spring-hexagon.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/spring-hexagon.tsx) | scale=[1,1.15,1]; rotate=[0,60,60] · 2s/spring, bounce=0.3 |
| `spring-ring-expand` | SpringRingExpand | [`registry/ui/loading/spring-ring-expand.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/spring-ring-expand.tsx) | scale=1.25; opacity=0 · 1.6s/easeOut
scale=1.25; opacity=0 · 1.6s/easeOut, 相位 0.8s |
| `spring-text-pop` | SpringTextPop | [`registry/ui/loading/spring-text-pop.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/spring-text-pop.tsx) | y=[0,-6,0] · 1.2s/easeInOut
y=[0,-6,0] · 1.2s/easeInOut, 相位 0.08s
y=[0,-6,0] · 1.2s/easeInOut, 相位 0.16s
y=[0,-6,0] · 1.2s/easeInOut, 相位 0.24s
y=[0,-6,0] · 1.2s/easeInOut, 相位 0.32s
y=[0,-6,0] · 1.2s/easeInOut, 相位 0.4s
y=[0,-6,0] · 1.2s/easeInOut, 相位 0.48s
y=[0,-6,0] · 1.2s/easeInOut, 相位 0.56s
y=[0,-6,0] · 1.2s/easeInOut, 相位 0.64s
y=[0,-6,0] · 1.2s/easeInOut, 相位 0.72s |
| `square-accordion` | SquareAccordion | [`registry/ui/loading/square-accordion.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/square-accordion.tsx) | height=[12,32,12] · 1.5s/easeInOut
height=[12,32,12] · 1.5s/easeInOut, 相位 0.2s
height=[12,32,12] · 1.5s/easeInOut, 相位 0.4s |
| `square-grid` | SquareGrid | [`registry/ui/loading/square-grid.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/square-grid.tsx) | scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 0.2s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 0.4s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, 相位 0.6s |
| `square-snake` | SquareSnake | [`registry/ui/loading/square-snake.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/square-snake.tsx) | opacity=[0.1,1,0.1] · 1.5s/easeInOut
opacity=[0.1,1,0.1] · 1.5s/easeInOut, 相位 0.15s
opacity=[0.1,1,0.1] · 1.5s/easeInOut, 相位 0.3s
opacity=[0.1,1,0.1] · 1.5s/easeInOut, 相位 0.45s
opacity=[0.1,1,0.1] · 1.5s/easeInOut, 相位 0.6s |
| `square-spinner` | SquareSpinner | [`registry/ui/loading/square-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/square-spinner.tsx) | rotate=90 · 0.6s/easeInOut |
| `stacked-bar-pulse` | StackedBarPulse | [`registry/ui/loading/stacked-bar-pulse.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/stacked-bar-pulse.tsx) | opacity=[0.2,1,0.2]; width=["50%","100%","50%"] · 1.5s/easeInOut
opacity=[0.2,1,0.2]; width=["50%","100%","50%"] · 1.5s/easeInOut, 相位 0.2s
opacity=[0.2,1,0.2]; width=["50%","100%","50%"] · 1.5s/easeInOut, 相位 0.4s |
| `swapping-dots` | SwappingDots | [`registry/ui/loading/swapping-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/swapping-dots.tsx) | x=[0,32,0] · 1.5s/easeInOut
x=[0,-32,0] · 1.5s/easeInOut |
| `swirling-spinner` | SwirlingSpinner | [`registry/ui/loading/swirling-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/swirling-spinner.tsx) | rotate=360 · 1.3s/linear
rotate=-360 · 0.9s/linear |
| `symmetric-wave` | SymmetricWave | [`registry/ui/loading/symmetric-wave.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/symmetric-wave.tsx) | height=[8,24,8] · 1.2s/easeInOut
height=[8,24,8] · 1.2s/easeInOut, 相位 0.1s
height=[8,24,8] · 1.2s/easeInOut, 相位 0.2s
height=[8,24,8] · 1.2s/easeInOut, 相位 0.3s
height=[8,24,8] · 1.2s/easeInOut, 相位 0.4s |
| `terminal-loader` | TerminalLoader | [`registry/ui/loading/terminal-loader.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/terminal-loader.tsx) | opacity=[1,0,1] · 0.8s/linear |
| `text-blink` | TextBlink | [`registry/ui/loading/text-blink.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/text-blink.tsx) | opacity=[1,0.2,1] · 1.5s/easeInOut |
| `text-dots` | TextDots | [`registry/ui/loading/text-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/text-dots.tsx) | opacity=[0,1,1,0] · 2s
opacity=[0,0,1,0] · 2s |
| `text-morph` | TextMorph | [`registry/ui/loading/text-morph.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/text-morph.tsx) | opacity=[1,0,0,1]; y=[0,-16,16,0] · 3s/easeInOut
opacity=[0,1,1,0]; y=[16,0,0,-16] · 3s/easeInOut |
| `text-shimmer` | TextShimmer | [`registry/ui/loading/text-shimmer.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/text-shimmer.tsx) | WebkitMaskPosition=["100% 0%","-100% 0%"] · 1.5s/linear |
| `text-shimmer-wave` | TextShimmerWave | [`registry/ui/loading/text-shimmer-wave.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/text-shimmer-wave.tsx) | opacity=[0.3,1,0.3]; y=[0,-2,0] · 1.5s/easeInOut
opacity=[0.3,1,0.3]; y=[0,-2,0] · 1.5s/easeInOut, 相位 0.1s
opacity=[0.3,1,0.3]; y=[0,-2,0] · 1.5s/easeInOut, 相位 0.2s
opacity=[0.3,1,0.3]; y=[0,-2,0] · 1.5s/easeInOut, 相位 0.3s
opacity=[0.3,1,0.3]; y=[0,-2,0] · 1.5s/easeInOut, 相位 0.4s
opacity=[0.3,1,0.3]; y=[0,-2,0] · 1.5s/easeInOut, 相位 0.5s
opacity=[0.3,1,0.3]; y=[0,-2,0] · 1.5s/easeInOut, 相位 0.6s
opacity=[0.3,1,0.3]; y=[0,-2,0] · 1.5s/easeInOut, 相位 0.7s |
| `trailing-dots` | TrailingDots | [`registry/ui/loading/trailing-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/trailing-dots.tsx) | rotate=360 · 1.5s/easeInOut
rotate=360 · 1.5s/easeInOut, 相位 0.1s
rotate=360 · 1.5s/easeInOut, 相位 0.2s
rotate=360 · 1.5s/easeInOut, 相位 0.3s
rotate=360 · 1.5s/easeInOut, 相位 0.4s |
| `triple-dot-spinner` | TripleDotSpinner | [`registry/ui/loading/triple-dot-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/triple-dot-spinner.tsx) | rotate=360 · 2s/linear |
| `twin-orbit` | TwinOrbit | [`registry/ui/loading/twin-orbit.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/twin-orbit.tsx) | rotate=360 · 1.5s/linear
rotate=-360 · 1.5s/linear |
| `typing` | Typing | [`registry/ui/loading/typing.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/typing.tsx) | opacity=[1,0,1] · 0.8s/linear |
| `typing-indicator` | TypingIndicator | [`registry/ui/loading/typing-indicator.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/typing-indicator.tsx) | y=[0,-4,0] · 0.6s/easeInOut
y=[0,-4,0] · 0.6s/easeInOut, 相位 0.15s
y=[0,-4,0] · 0.6s/easeInOut, 相位 0.3s |
| `wandering-cube` | WanderingCube | [`registry/ui/loading/wandering-cube.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/wandering-cube.tsx) | x=[0,24,24,0,0]; y=[0,0,24,24,0]; rotate=[0,-90,-180,-270,-360] · 2.5s/easeInOut |
| `watch-spinner` | WatchSpinner | [`registry/ui/loading/watch-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/watch-spinner.tsx) | rotate=360 · 1s/easeInOut
rotate=360 · 1.5s/easeInOut
rotate=360 · 2s/easeInOut |
| `wave-dots` | WaveDots | [`registry/ui/loading/wave-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/wave-dots.tsx) | y=[4,-4,4] · 1s/easeInOut
y=[4,-4,4] · 1s/easeInOut, 相位 0.15s
y=[4,-4,4] · 1s/easeInOut, 相位 0.3s
y=[4,-4,4] · 1s/easeInOut, 相位 0.45s
y=[4,-4,4] · 1s/easeInOut, 相位 0.6s |
| `wave-physics-loader` | WavePhysicsLoader | [`registry/ui/loading/wave-physics-loader.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/wave-physics-loader.tsx) | 15 根柱条与小球；201 个相位；4 次弹跳；4s |
| `waveform-loader` | WaveformLoader | [`registry/ui/loading/waveform-loader.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/waveform-loader.tsx) | height=[4,24,4] · 1s/easeInOut
height=[4,24,4] · 1s/easeInOut, 相位 0.421s
height=[4,24,4] · 1s/easeInOut, 相位 0.455s
height=[4,24,4] · 1s/easeInOut, 相位 0.071s
height=[4,24,4] · 1s/easeInOut, 相位 -0.378s
height=[4,24,4] · 1s/easeInOut, 相位 -0.479s
height=[4,24,4] · 1s/easeInOut, 相位 -0.14s
height=[4,24,4] · 1s/easeInOut, 相位 0.328s |
| `zig-zag-pulse` | ZigZagPulse | [`registry/ui/loading/zig-zag-pulse.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/zig-zag-pulse.tsx) | opacity=[0.2,1,0.2] · 1.2s/easeInOut
opacity=[0.2,1,0.2] · 1.2s/easeInOut, 相位 0.1s
opacity=[0.2,1,0.2] · 1.2s/easeInOut, 相位 0.2s
opacity=[0.2,1,0.2] · 1.2s/easeInOut, 相位 0.3s
opacity=[0.2,1,0.2] · 1.2s/easeInOut, 相位 0.4s
opacity=[0.2,1,0.2] · 1.2s/easeInOut, 相位 0.5s |
## 技术实现
源声明渲染为原生 HTML 和 SVG，不依赖 React、Framer Motion 或 Tailwind 运行时。Web Animations 保留独立属性轨道、明确的关键帧停点和错峰延迟。标记为 spring 的场景使用 TuffEx 共享 `resolveTransition` 编译器。文字值变化使用 `TxTextMorph`。Skeleton、SkeletonLoader 和 FluidSkeleton 组合现有 `TxSkeleton` 的几何结构，不创建第二个失去控制的骨架屏循环。
WavePhysicsLoader 保留 15 根柱条、201 个采样相位、每次横穿的 4 次抛物线弹跳、余弦影响半径、落点压入和小球挤压伸展。四秒往返轨迹不替换为通用波浪。292px 源场景先应用 0.38 的展示倍率，再应用公共尺寸倍率。
TextDots 保留三个源停点列表：`[0, 0.2, 0.8, 1]`、`[0, 0.4, 0.8, 1]` 和 `[0, 0.6, 0.8, 1]`。MatrixGridLoader 保留 `[0, 0.5, 0.75, 1]` 和 0.2、0.4、0.8、0.6 秒的四个延迟。AppleEqualizer 固定源码随机延迟的采样值为 0.06、0.41、0.19、0.32 秒，使服务端渲染保持确定性，不在水合时生成新的随机节奏。颜色使用主题令牌。SVG 黏连滤镜的 ID 使用 Vue 水合稳定的 `useId()`。
共享 `useMotionActivity` 负责可见性、减少动态效果和 KeepAlive 生命周期。每个场景持有自己的原生动画，在暂停、切换源和卸载时取消。不支持 Web Animations 的浏览器保留相同的静态画面。