@linhey/rhine-design 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 版本记录
 
+## 0.6.0（2026-10-24）
+
+- 对应 [#8](https://github.com/linhay/rhine-design/issues/8)：新增 `OrbitBackdrop`，将授权移交的轨道艺术维护为公共组件，保留 420 个环节点、185 条空间曲线、箭头、光晕与透视；公共组件增至 60 个，无新增运行时依赖。
+- 内置暂停 / 继续，遵循系统、显式及祖先减少动态偏好；窄窗、页面隐藏、离屏与零尺寸停帧，恢复沿冻结时间继续，卸载清理资源；Canvas 不可用时保留静态艺术与内容。逻辑尺寸使用 client size，保持 CSS 缩放后的描线和静态重绘一致。
+- 固定深色艺术仅调整继承文字和 Logo，不覆写宿主控件的主题 tokens；表单、按钮及 Surface 保持各主题前景与背景成对。新增 `#orbit` 真实展台、[轨道背景契约](docs/ORBIT_BACKDROP.md)、生命周期测试与三主题组合示例。
+- 保留 0.5.0 的全部应用组件、受控状态与 Ant Design / MUI 契约改进。`OrbitBackdrop` 自 0.6.0 提供，0.5.0 及以前不包含此组件；建议固定精确版本并提交 lockfile。
+
 ## 0.5.0（2026-10-24）
 
 - 完成 [Ant Design / MUI 逐项对标](docs/ANTD_MUI_AUDIT.md)：补齐表单只读/校验/键盘、连续多选、树字符导航、数据表单选/排序清除/自动固定列、分页首末页/边界焦点、受控左右抽屉、媒体方向键/首尾焦点、图表受控逐点查看与格式化、健康历史稳定 ID 与受控详情。RemoteMultiSelect 默认连续选择，`closeOnSelect=true` 可恢复选完关闭；原单选 Combobox 默认不变。无新增运行时依赖。

package/README.md

@@ -16,10 +16,10 @@
   <a href="CHANGELOG.md">版本记录</a>
 </p>
 
-Rhine Design 是面向 React 应用的开源设计系统，适合桌面工具、管理界面和数据密集型应用。它将设计规范、48 个组件和动效示例放在一起，帮助团队建立一致、可复用的界面语言。
+Rhine Design 是面向 React 应用的开源设计系统，适合桌面工具、管理界面和数据密集型应用。它将设计规范、60 个组件和动效示例放在一起，帮助团队建立一致、可复用的界面语言。
 
 - **一致的视觉语言**：色彩、字体、文字层级、间距、几何与焦点规则。
-- **48 个可组合组件**：覆盖布局、表单、数据、导航、浮层和反馈。
+- **60 个可组合组件**：覆盖布局、表单、数据、导航、浮层和反馈。
 - **可验证的动效**：12 组播放 / 重播 / 复位演示，以及三角构架启动编排。
 - **面向开发协作**：组件契约、交互展台和 AI skill 帮助设计与实现保持一致。
 
@@ -29,6 +29,8 @@ Rhine Design 是面向 React 应用的开源设计系统，适合桌面工具、
 
 **0.5.0 新增能力**：新增背景与多侧栏、复杂表单、受控数据表、媒体与监控图表，共 59 个组件。API、最小接入与版本边界见[应用组件契约](docs/APPLICATION_COMPONENTS.md)。npm 0.4.0 不含这些能力。
 
+**0.6.0 新增能力**：新增 `OrbitBackdrop` 轨道艺术组件，提供暂停、减少动态与静态降级，总数增至 60。安装前核对[版本记录](CHANGELOG.md)与 registry；在线展台跟随 main。
+
 本轮新增 API 与交互已逐项核对 Ant Design / MUI，修复及明确保留的差异见[对标清单](docs/ANTD_MUI_AUDIT.md)。
 
 <a id="quick-start"></a>
@@ -40,7 +42,7 @@ Rhine Design 是面向 React 应用的开源设计系统，适合桌面工具、
 在你的 React 项目中安装：
 
 ```sh
-npm install --save-exact @linhey/rhine-design@0.5.0
+npm install --save-exact @linhey/rhine-design@0.6.0
 ```
 
 包与版本信息见 [npm](https://www.npmjs.com/package/@linhey/rhine-design)。如需使用未发版的源码，可安装 `git+https://github.com/linhay/rhine-design.git#<commit>`；建议固定版本并提交 lockfile。
@@ -73,6 +75,10 @@ export function Welcome() {
 
 0.5.0 提供 Background 与 AppShell，npm 0.4.0 不含这两项能力。背景层级、最小接入及兼容范围见[背景与应用外壳契约](docs/APPLICATION_COMPONENTS.md)，真实展台见 [场景背景](https://linhay.github.io/rhine-design/#backgrounds) 和 [背景与侧栏](https://linhay.github.io/rhine-design/#app-shell)。
 
+### 轨道背景（0.6.0）
+
+OrbitBackdrop 承接授权移交的轨道动画，保留环节点、曲线、箭头、光晕与透视，并提供暂停、减少动态和离屏停帧。它是纯装饰，不表示加载或业务进度。契约与接入见[轨道背景](docs/ORBIT_BACKDROP.md)，真实展台见[轨道星空](https://linhay.github.io/rhine-design/#orbit)。
+
 ### 一键切换主题（0.4.0）
 
 展台右上角可切换并记忆主题。新增 **橙趣 · 粗描边**：浅灰蓝点阵背景、米白圆角卡片、黑色粗边、向右下偏移的硬阴影与亮橙主按钮。打开 [在线订阅管理示例](https://linhay.github.io/rhine-design/?theme=neo-brutalism#subscriptions)，体验卡片详情、管理菜单与演示表单；本地开发访问 `http://127.0.0.1:18309/?theme=neo-brutalism#subscriptions`。
@@ -118,14 +124,14 @@ export function App() {
 | --- | --- |
 | 品牌与文字 | Logo · Text |
 | 操作 | Button · Icon · IconButton · Link · CopyButton |
-| 布局 | Surface · Toolbar · Divider · Stack · Inline · Grid |
-| 表单与选择 | TextField · Fieldset¹ · ErrorSummary¹ · Textarea · Select · Checkbox · RadioGroup · Switch · SearchField · Combobox · SelectionCard |
+| 布局与背景 | Surface · Toolbar · Divider · Stack · Inline · Grid · Background² · AppShell² · OrbitBackdrop³ |
+| 表单与选择 | TextField · Fieldset¹ · ErrorSummary¹ · Textarea · Select · Checkbox · RadioGroup · Switch · SearchField · Combobox · SelectionCard · DateField² · DateRangePicker² · NumberField² · TreeSelect² · RemoteMultiSelect² |
 | 导航与展开 | SideNav¹ · Breadcrumbs¹ · Steps¹ · Tabs · SegmentedControl · Disclosure |
-| 数据 | Metric · KeyValue · DataTable · Pagination · StatusTimeline¹ · TimelineLegend¹ |
+| 数据与媒体 | Metric · KeyValue · DataTable · Pagination · StatusTimeline¹ · TimelineLegend¹ · TrendChart² · StackedBar² · MediaCard² · MediaViewer² |
 | 浮层 | Drawer¹ · Dialog · ConfirmDialog · Popover · Menu · Tooltip |
 | 状态与反馈 | Badge · Notice · Toast · Progress · Skeleton · EmptyState |
 
-¹ 自 0.4.0 提供。
+¹ 自 0.4.0 提供。² 自 0.5.0 提供。³ 自 0.6.0 提供。
 
 参数、状态和组合示例见[组件 API](components/README.md)与[常用组件契约](components/COMMON_COMPONENTS.md)。
 
@@ -143,6 +149,7 @@ export function App() {
 | 品牌几何与 Logo | [Logo 契约](components/README.md#品牌标志) | [品牌标志](https://linhay.github.io/rhine-design/#brand) |
 | 动效、交互与减少动态 | [Motion](components/MOTION.md) | [动效实验室](https://linhay.github.io/rhine-design/#motion) |
 | 启动动画与就绪衔接 | [Startup](components/STARTUP.md) | [启动动画](https://linhay.github.io/rhine-design/#startup) |
+| 轨道装饰、暂停与静态降级 | [OrbitBackdrop](docs/ORBIT_BACKDROP.md) | [轨道星空](https://linhay.github.io/rhine-design/#orbit) |
 | 场景与交互选型 | [使用规范](docs/INTERACTION_PATTERNS.md) | [场景指南](https://linhay.github.io/rhine-design/#patterns) |
 | 导航与表单流程 | [组件契约](docs/INTERACTION_PATTERNS.md#新组件契约) | [导航](https://linhay.github.io/rhine-design/#navigation) · [表单](https://linhay.github.io/rhine-design/#form-workflow) |
 | 系统覆盖与演进方向 | [组件系统对照](docs/DESIGN_SYSTEM_AUDIT.md) | — |

package/components/MOTION.md

@@ -63,6 +63,14 @@
 
 参考站是设计来源，组件复用入口仍是本仓库。当前CSS/Web Animations及Radix已能承载上述方案，本次不引入额外动画库、CLI、远程Builder或评分流程。未来需要复用外部源码时单独核对许可与依赖，参考授权不等于已取得代码授权。
 
+### 轨道装饰的复用边界（0.6.0）
+
+授权移交的 `OrbitBackdrop` 是独立艺术背景，保留原有环节点、曲线、发射箭头、光晕与透视；不修改通用 Logo、加载或交互配方。组件拥有 Canvas 绘制和生命周期，默认提供暂停 / 继续按钮；业务只组合布局，不另写一套动画。它不表示加载、进度或操作成功，普通业务刷新不触发重播。
+
+系统、显式 prop 和祖先的减少动态偏好均可停帧，内层跟随系统不覆盖外层减少动态，`reducedMotion={false}` 不能覆盖系统偏好。窗口不超过 760px、页面隐藏、组件离屏或零尺寸时也保持静态；恢复沿冻结时间继续，不追赶。resize 静态重绘，DPR 上限为 2，卸载清理 rAF、监听器与 observers；Canvas 不可用时保留静态艺术和内容。
+
+展台 `/#orbit` 使用真实公开组件，提供暂停 / 继续、局部重播、手动减少动态及系统 / 全局偏好继承。重播只重建艺术组件，外层业务内容不重建。此艺术背景不计入 `/#motion` 的 12 组配方；npm 0.5.0 及以前不包含它。API、三主题可读性与验收清单见[轨道背景契约](../docs/ORBIT_BACKDROP.md)。
+
 ## 后续验收
 
 每项候选先在真实组件展台展示，再更新实现状态。检查鼠标/键盘、快速反向、重复点击、加载成功与失败、长文本、400/520/880宽度、200%缩放、系统/手动减少动态；浮层额外检查四向避让与嵌套Escape。对比前后截图核对布局，对动画全过程录屏或采样核对时序，中间帧与最终帧分别记录。
@@ -71,6 +79,6 @@
 
 2026-10-22展台验证：Chrome通过400/520/880/1200宽度、200%缩放、10组播放/复位、快速重播取消旧结果、四向位置/位移采样、菜单键盘、弹窗内重播保焦点与关闭归还、折叠中途反向、通知关闭、Tooltip Escape、逐例/全局/系统减少动态。采样确认4倍慢放的内容淡入720ms、反馈480ms、浮层640ms、折叠800ms及品牌960ms；未将合成浏览器结果扩展为原生或业务验收。
 
-## 导航与流程动效（main，未发布）
+## 导航与流程动效（0.4.0）
 
 新增抽屉与步骤两组示例，实验室现为12组。Drawer继承160ms浮层token，从右侧3px淡入；弹层内重播只重启CSS动画，焦点与内容不重建。Steps当前段使用180ms/3px进入，由业务校验推进。表单错误直接呈现并定位，无抖动效果。完整适用场景、减少动态与告警规则见[交互规范](../docs/INTERACTION_PATTERNS.md)。

package/components/OrbitBackdrop.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState, type HTMLAttributes } from 'react';
+import { Button } from './components';
+import { mountOrbit, type OrbitRenderer, type OrbitState } from './orbitRenderer';
+
+export interface OrbitBackdropProps extends HTMLAttributes<HTMLDivElement> {
+  /** Adds a static preference; false never overrides the system or an ancestor. */
+  reducedMotion?: boolean;
+}
+
+export function OrbitBackdrop({ reducedMotion = false, children, className = '', ...props }: OrbitBackdropProps) {
+  const canvas = useRef<HTMLCanvasElement>(null);
+  const renderer = useRef<OrbitRenderer | null>(null);
+  const [paused, setPaused] = useState(false);
+  const [state, setState] = useState<OrbitState>('empty');
+
+  useEffect(() => {
+    const scene = mountOrbit(canvas.current!, setState);
+    renderer.current = scene;
+    return () => { scene.dispose(); renderer.current = null; };
+  }, []);
+  useEffect(() => { renderer.current?.setPaused(paused); }, [paused]);
+  useEffect(() => { renderer.current?.setReducedMotion(reducedMotion); }, [reducedMotion]);
+
+  const canControl = state === 'playing' || state === 'paused';
+  const label = state === 'reduced' ? '已减少动态' : state === 'compact' ? '窄屏静态画面'
+    : canControl ? paused ? '继续动效' : '暂停动效' : '静态画面';
+
+  return <div {...props} className={`rhine-orbit ${className}`} data-rhine-orbit-state={state}>
+    <canvas ref={canvas} className="rhine-orbit-canvas" aria-hidden="true" />
+    <div className="rhine-orbit-content">{children}</div>
+    <div className="rhine-orbit-controls"><Button variant="secondary" disabled={!canControl} onClick={() => setPaused(value => !value)}>{label}</Button></div>
+  </div>;
+}

package/components/README.md

@@ -2,7 +2,7 @@
 
 本目录提供[莱茵设计 · Rhine Design](../README.md)的 React 组件、设计变量和 API 契约。组件接收应用传入的数据与动作，不绑定特定后端或原生平台。包名为`@linhey/rhine-design`；样式变量和类名使用`rhine-`命名空间。
 
-0.5.0 共59个组件；0.4.0为48个，0.3.0为40个。新增导航、表单流程及健康时间轴组件见[场景与交互规范](../docs/INTERACTION_PATTERNS.md)，原24个扩展组件见[常用组件契约](./COMMON_COMPONENTS.md)。[字体与文字规范](./TYPOGRAPHY.md)与[主流系统对照与缺口](../docs/DESIGN_SYSTEM_AUDIT.md)共同约束复用。静态页面样稿也使用同源Toolbar/Select CSS，不运行React。
+0.6.0 共60个组件；0.5.0为59个，0.4.0为48个，0.3.0为40个。新增导航、表单流程及健康时间轴组件见[场景与交互规范](../docs/INTERACTION_PATTERNS.md)，原24个扩展组件见[常用组件契约](./COMMON_COMPONENTS.md)。[字体与文字规范](./TYPOGRAPHY.md)与[主流系统对照与缺口](../docs/DESIGN_SYSTEM_AUDIT.md)共同约束复用。静态页面样稿也使用同源Toolbar/Select CSS，不运行React。
 
 页面改动遵循：优先复用组件 → 先在设计稿/展台修改并验证 → 再按任务授权实现到App。缺组件先补组件与展台，不在业务页另写同用途样式；同一任务已授权设计和实现时连续推进，无需重复确认。
 
@@ -150,3 +150,7 @@ export function Example() {
 ## 背景与外壳（0.5.0）
 
 新增 `Background` 与 `AppShell`，0.5.0 共 59 个组件；npm 0.4.0 仍为 48 个。Background 支持六类 roleTone、auto/theme/none 装饰策略及 appearance 局部覆盖；AppShell 提供组合展台使用的固定顶部操作区与响应式侧栏。完整 API、最小接入、背景滚动及 Portal 边界见[背景与应用外壳契约](../docs/APPLICATION_COMPONENTS.md)。
+
+## 轨道背景（0.6.0）
+
+`OrbitBackdrop` 接收 `HTMLAttributes<HTMLDivElement>` 和 `reducedMotion?: boolean`，包含可选 `children`。它提供固定深色轨道艺术与内置暂停 / 继续按钮，Canvas 为 `aria-hidden` 装饰。系统、显式减少动态、祖先偏好、窄窗、页面隐藏、离屏及零尺寸时停帧；恢复沿冻结时间继续，不追赶。Canvas 不可用时保留静态艺术与内容。宿主只组合布局，不复制动画或覆盖组件状态。完整生命周期、主题及接入约束见[轨道背景契约](../docs/ORBIT_BACKDROP.md)，真实组件展台为 `/#orbit`。自 0.6.0 起共 60 个组件。

package/components/index.ts

@@ -1,4 +1,6 @@
 import './styles.css';
+export { OrbitBackdrop } from './OrbitBackdrop';
+export type { OrbitBackdropProps } from './OrbitBackdrop';
 export { Background } from './Background';
 export type { BackgroundProps, BackgroundRole, BackgroundDecoration, BackgroundAppearance } from './Background';
 export { AppShell } from './AppShell';

package/components/orbit.css

@@ -0,0 +1,42 @@
+.rhine-orbit {
+  position:relative; isolation:isolate; display:flex; flex-direction:column;
+  min-width:0; min-height:280px; overflow:hidden;
+  border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card);
+  background:
+    radial-gradient(ellipse at 90% 78%, #15508066 0, transparent 43%),
+    radial-gradient(ellipse at 8% 54%, #84603626 0, transparent 35%),
+    radial-gradient(ellipse at 62% 18%, #213b653b 0, transparent 48%),
+    linear-gradient(155deg, #03070f 12%, #081426 58%, #030a13);
+}
+.rhine-orbit::before, .rhine-orbit::after { content:''; position:absolute; inset:0; pointer-events:none; }
+.rhine-orbit::before {
+  background-image:
+    radial-gradient(circle at 17px 37px, #d7eaffb3 .7px, transparent 1.4px),
+    radial-gradient(circle at 73px 19px, #8bb8e780 .6px, transparent 1.2px),
+    radial-gradient(circle at 41px 89px, #d7ba8f80 .7px, transparent 1.3px),
+    radial-gradient(circle at 113px 157px, #c4dcff66 .5px, transparent 1.2px);
+  background-size:173px 211px, 127px 181px, 251px 239px, 97px 139px;
+  opacity:.55;
+}
+.rhine-orbit::after {
+  background:
+    radial-gradient(ellipse at 77% 66%, #52a4f21a 0, transparent 28%),
+    radial-gradient(ellipse at 24% 84%, #b8874220 0, transparent 30%),
+    linear-gradient(125deg, transparent 40%, #6295d109 49%, transparent 58%);
+}
+.rhine-orbit-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
+/* Keep host control tokens intact; only unpainted content inherits the artwork foreground. */
+.rhine-orbit-content {
+  position:relative; z-index:1; flex:1; min-width:0;
+  display:flex; flex-direction:column; justify-content:space-between; gap:var(--rhine-space-6);
+  padding:var(--rhine-space-6); padding-bottom:calc(44px + var(--rhine-space-6) * 2);
+  color:#f2f7ff;
+}
+.rhine-orbit-content :is(.rhine-text--muted, .rhine-field__hint) { color:inherit; opacity:.8; }
+.rhine-orbit-content .rhine-logo:not(.rhine-logo--icon) { color:inherit; }
+/* Transparent actions follow their backdrop; painted hover/disabled states retain the host palette. */
+.rhine-orbit-content .rhine-button--quiet:not(:disabled):not(:hover),
+.rhine-orbit-content .rhine-button--quiet[aria-disabled=true]:not(:disabled) { color:inherit; }
+.rhine-orbit .rhine-orbit-content .rhine-button--quiet:focus-visible { outline:none; box-shadow:inset 0 0 0 2px currentColor; }
+.rhine-orbit-controls { position:absolute; right:var(--rhine-space-4); bottom:var(--rhine-space-4); z-index:2; max-width:calc(100% - var(--rhine-space-4) * 2); }
+.rhine-orbit-controls .rhine-button { max-width:100%; }

package/components/orbitRenderer.ts

@@ -0,0 +1,230 @@
+type Point = { x: number; y: number; depth: number; perspective: number };
+type Edge = { a: number; sweep: number; phase: number; waist: number; lift: number; color: number; speed: number };
+type Layer =
+  | { kind: 'void'; points: Point[] }
+  | { kind: 'line'; p: Point; q: Point; color: number }
+  | { kind: 'particle'; p: Point; color: number }
+  | { kind: 'spike'; p: Point; q: Point; i: number; pulse: number };
+type CanvasScene = { el: HTMLCanvasElement; ctx: CanvasRenderingContext2D; w: number; h: number };
+export type OrbitState = 'playing' | 'paused' | 'reduced' | 'compact' | 'hidden' | 'offscreen' | 'empty' | 'unavailable';
+export interface OrbitRenderer { setPaused(value: boolean): void; setReducedMotion(value: boolean): void; dispose(): void }
+
+/** The seeded artwork is stable across mounts; only elapsed visible time advances it. */
+export function mountOrbit(canvas: HTMLCanvasElement, onState: (state: OrbitState) => void): OrbitRenderer {
+  let ctx: CanvasRenderingContext2D | null = null;
+  try { ctx = canvas.getContext('2d'); } catch { /* Canvas may be disabled by the host. */ }
+  if (!ctx) {
+    onState('unavailable');
+    return { setPaused() {}, setReducedMotion() {}, dispose() {} };
+  }
+  const TAU = Math.PI * 2, colors = ["#51b7f6", "#e5b94d", "#2ec7a1", "#bdcbe1"];
+  let seed = 1823;
+  function rand() {
+    seed = seed * 1664525 + 1013904223 >>> 0;
+    return seed / 4294967296;
+  }
+  const nodes = Array.from({ length: 420 }, (_, i) => ({ a: i / 420 * TAU, r: 1.025 + rand() * 0.07, z: (rand() - 0.5) * 0.34, length: 0.035 + rand() * 0.19, color: i % 7 === 0 ? 1 : i % 11 === 0 ? 2 : 3 }));
+  const emissions = nodes.map(() => ({ phase: rand(), rate: 0.28 + rand() * 0.3 }));
+  const edges = Array.from({ length: 185 }, () => ({ a: rand() * TAU, sweep: 2.1 + rand() * 3.8, phase: rand() * TAU, waist: 0.5 + rand() * 0.32, lift: (rand() - 0.3) * 0.6, color: rand() < 0.32 ? 1 : rand() < 0.1 ? 2 : 0, speed: 0.026 + rand() * 0.024 }));
+  function edgePoint(e: Edge, t: number) {
+    const a = e.a + t * e.sweep, envelope = Math.sin(Math.PI * t);
+    return { a, r: 1.035 - (1.035 - e.waist) * Math.pow(envelope, 0.72), z: e.lift * envelope + 0.06 * Math.sin(e.phase + t * TAU) * envelope };
+  }
+  const paths = edges.map((e) => Array.from({ length: 81 }, (_, i) => edgePoint(e, i / 80)));
+  const canvases = { network: { el: canvas, ctx, w: 0, h: 0 } };
+  let time = 0, orbit = 0, projected: Point[] = [], last: number | null = null, frame = 0;
+  const yaw = -0.72, tilt = 0.22;
+  let paused = false, manualReduced = false, disposed = false, visible = true;
+  let previousState: OrbitState | undefined;
+  function resize() {
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    // Layout CSS pixels exclude CSS zoom; visual scaling must not change stroke proportions.
+    const c = canvases.network;
+    c.w = c.el.clientWidth;
+    c.h = c.el.clientHeight;
+    c.el.width = Math.round(c.w * dpr);
+    c.el.height = Math.round(c.h * dpr);
+    c.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    draw();
+  }
+  function line(ctx2: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number, color: string | CanvasGradient, width = 1) {
+    ctx2.strokeStyle = color;
+    ctx2.lineWidth = width;
+    ctx2.beginPath();
+    ctx2.moveTo(x1, y1);
+    ctx2.lineTo(x2, y2);
+    ctx2.stroke();
+  }
+  function dot(ctx2: CanvasRenderingContext2D, x: number, y: number, r: number, color: string | CanvasGradient) {
+    ctx2.fillStyle = color;
+    ctx2.beginPath();
+    ctx2.arc(x, y, r, 0, TAU);
+    ctx2.fill();
+  }
+  function clear(c: CanvasScene) {
+    c.ctx.clearRect(0, 0, c.w, c.h);
+  }
+  function project(a: number, r = 1, z = 0) {
+    const c = canvases.network, scale = Math.min(c.w * 0.66, c.h * 0.39), x = Math.cos(a) * r, y = Math.sin(a) * r;
+    const yy = y * Math.cos(tilt) - z * Math.sin(tilt), zz = y * Math.sin(tilt) + z * Math.cos(tilt);
+    const xx = x * Math.cos(yaw) + zz * Math.sin(yaw), depth = -x * Math.sin(yaw) + zz * Math.cos(yaw);
+    const spin = 0.34, px = xx * Math.cos(spin) - yy * Math.sin(spin), py = xx * Math.sin(spin) + yy * Math.cos(spin), perspective = 3.6 / (3.6 - depth);
+    return { x: c.w * 0.62 + px * scale * perspective, y: c.h * 0.57 + py * scale * perspective * 1.08, depth, perspective };
+  }
+  function network() {
+    const c = canvases.network, { ctx: ctx2 } = c;
+    clear(c);
+    const buckets: Layer[][] = Array.from({ length: 80 }, () => []), offset = orbit;
+    function add(item: Layer, depth: number) {
+      buckets[Math.max(0, Math.min(79, Math.floor((depth + 1.5) / 3 * 80)))].push(item);
+    }
+    const horizon = Array.from({ length: 101 }, (_, i) => project(i / 100 * TAU, 0.46, -0.06));
+    add({ kind: "void", points: horizon }, -0.04);
+    edges.forEach((e, index) => {
+      const pts = paths[index].map((p) => project(p.a + offset, p.r, p.z));
+      for (let i = 1; i < pts.length; i++) add({ kind: "line", p: pts[i - 1], q: pts[i], color: e.color }, (pts[i - 1].depth + pts[i].depth) / 2 + 7e-3);
+      if (index % 3 === 0) {
+        const t = (time * e.speed + e.phase / TAU) % 1, p3 = edgePoint(e, t), p = project(p3.a + offset, p3.r, p3.z);
+        add({ kind: "particle", p, color: e.color }, p.depth + 0.012);
+      }
+    });
+    projected = nodes.map((n) => project(n.a + offset, n.r, n.z));
+    nodes.forEach((n, i) => {
+      const emission = emissions[i], pulse = (time * emission.rate + emission.phase) % 1, breath = 1 + 0.18 * Math.sin(time * 1.7 + n.a * 5), p = projected[i], q = project(n.a + offset, n.r + n.length * breath, n.z * 1.1);
+      add({ kind: "spike", p, q, i, pulse }, (p.depth + q.depth) / 2);
+    });
+    const palette = ["104,178,244", "223,187,92", "72,182,179"];
+    for (const bucket of buckets) for (const item of bucket) {
+      if (item.kind === "void") {
+        ctx2.beginPath();
+        item.points.forEach((p2, i) => i ? ctx2.lineTo(p2.x, p2.y) : ctx2.moveTo(p2.x, p2.y));
+        ctx2.closePath();
+        ctx2.fillStyle = "#010205";
+        ctx2.fill();
+        continue;
+      }
+      const p = item.p, near = Math.max(0, Math.min(1, (p.depth + 1) / 2));
+      if (item.kind === "line") {
+        ctx2.strokeStyle = "rgba(" + palette[item.color] + "," + (0.07 + near * near * 0.57) + ")";
+        ctx2.lineWidth = 0.35 + near * 0.65;
+        ctx2.beginPath();
+        ctx2.moveTo(p.x, p.y);
+        ctx2.lineTo(item.q.x, item.q.y);
+        ctx2.stroke();
+      } else if (item.kind === "spike") {
+        const q = item.q, bright = near > 0.48, rgb = bright ? "173,218,255" : "225,161,71", dx = q.x - p.x, dy = q.y - p.y, len = Math.hypot(dx, dy) || 1, ux = dx / len, uy = dy / len;
+        line(ctx2, p.x, p.y, q.x, q.y, bright ? "rgba(213,224,241," + (0.16 + near * 0.35) + ")" : "rgba(181,118,53," + (0.12 + near * 0.3) + ")", 0.4 + near * 0.4);
+        const t = item.pulse, fade = Math.sin(Math.PI * t), alpha = fade * (0.25 + near * 0.75), x = p.x + dx * t, y = p.y + dy * t, tail = Math.max(0, t - 0.38), tx = p.x + dx * tail, ty = p.y + dy * tail;
+        const trail = ctx2.createLinearGradient(tx, ty, x + 1e-3, y + 1e-3);
+        trail.addColorStop(0, "rgba(" + rgb + ",0)");
+        trail.addColorStop(1, "rgba(" + rgb + "," + alpha + ")");
+        line(ctx2, tx, ty, x, y, trail, 0.7 + near * 0.9);
+        const size = (1.6 + near * 1.5) * q.perspective;
+        ctx2.strokeStyle = "rgba(" + rgb + "," + alpha + ")";
+        ctx2.lineWidth = 0.65 + near * 0.5;
+        ctx2.beginPath();
+        ctx2.moveTo(x - ux * size - uy * size * 0.55, y - uy * size + ux * size * 0.55);
+        ctx2.lineTo(x, y);
+        ctx2.lineTo(x - ux * size + uy * size * 0.55, y - uy * size - ux * size * 0.55);
+        ctx2.stroke();
+        if (item.i % 3 === 0) {
+          const radius = (4 + near * 4) * q.perspective, glow = ctx2.createRadialGradient(x, y, 0, x, y, radius);
+          glow.addColorStop(0, "rgba(" + rgb + "," + alpha * 0.45 + ")");
+          glow.addColorStop(1, "rgba(" + rgb + ",0)");
+          dot(ctx2, x, y, radius, glow);
+          dot(ctx2, x, y, 0.65 + near * 0.45, "rgba(242,247,255," + alpha + ")");
+        }
+        const flash = Math.pow(Math.max(0, 1 - Math.abs(t - 0.88) / 0.12), 2);
+        dot(ctx2, q.x, q.y, (0.55 + flash * 1.1) * q.perspective, "rgba(" + rgb + "," + (0.18 + near * 0.25 + flash * 0.35) + ")");
+      } else {
+        ctx2.shadowBlur = 5;
+        ctx2.shadowColor = colors[item.color];
+        dot(ctx2, p.x, p.y, 1.1 * p.perspective, colors[item.color]);
+        ctx2.shadowBlur = 0;
+      }
+    }
+    for (let i = 0; i < 8; i++) {
+      const e = edges[i * 19], v = edgePoint(e, 0.4), p = project(v.a + offset, v.r, v.z);
+      if (p.depth < -0.1) continue;
+      ctx2.shadowColor = "#f25380";
+      ctx2.shadowBlur = 10;
+      dot(ctx2, p.x, p.y, 2.2 * p.perspective, "#ff658c");
+      ctx2.shadowBlur = 0;
+    }
+  }
+  const reduced = window.matchMedia?.('(prefers-reduced-motion: reduce)');
+  const compact = window.matchMedia?.('(max-width: 760px)');
+  function draw() {
+    if (canvases.network.w && canvases.network.h) network();
+  }
+  function state(): OrbitState {
+    if (manualReduced || reduced?.matches || canvas.closest('[data-rhine-motion="reduced"]')) return 'reduced';
+    if (compact?.matches) return 'compact';
+    if (document.hidden) return 'hidden';
+    if (!visible) return 'offscreen';
+    if (canvases.network.w <= 0 || canvases.network.h <= 0) return 'empty';
+    return paused ? 'paused' : 'playing';
+  }
+  function animate(now: number) {
+    frame = 0;
+    if (disposed) return;
+    // A frame can observe a media change before its change event is delivered.
+    if (state() !== 'playing') { sync(); return; }
+    const dt = last === null ? 0 : Math.min((now - last) / 1e3, 0.1);
+    last = now;
+    time += dt;
+    orbit += dt * 0.028;
+    draw();
+    frame = requestAnimationFrame(animate);
+  }
+  function sync() {
+    if (disposed) return;
+    cancelAnimationFrame(frame);
+    frame = 0;
+    last = null;
+    resize();
+    const next = state();
+    if (next !== previousState) { previousState = next; onState(next); }
+    if (next === 'playing') frame = requestAnimationFrame(animate);
+  }
+  const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(sync);
+  observer?.observe(canvas);
+  const intersection = typeof IntersectionObserver === 'undefined' ? null : new IntersectionObserver(entries => {
+    visible = entries.some(entry => entry.target === canvas && entry.isIntersecting);
+    sync();
+  });
+  intersection?.observe(canvas);
+  const motion = new MutationObserver(sync);
+  // Observe ancestors only: canvas sizing and React state writes must not retrigger drawing.
+  for (let ancestor = canvas.parentElement; ancestor; ancestor = ancestor.parentElement) {
+    motion.observe(ancestor, { attributes: true, attributeFilter: ['data-rhine-motion'] });
+  }
+  reduced?.addEventListener?.('change', sync);
+  compact?.addEventListener?.('change', sync);
+  window.addEventListener('resize', sync);
+  document.addEventListener("visibilitychange", sync);
+  sync();
+  return {
+    setPaused(value) {
+      if (paused === value) return;
+      paused = value;
+      sync();
+    },
+    setReducedMotion(value) {
+      if (manualReduced === value) return;
+      manualReduced = value;
+      sync();
+    },
+    dispose() {
+      disposed = true;
+      cancelAnimationFrame(frame);
+      observer?.disconnect();
+      intersection?.disconnect();
+      motion.disconnect();
+      reduced?.removeEventListener?.('change', sync);
+      compact?.removeEventListener?.('change', sync);
+      window.removeEventListener('resize', sync);
+      document.removeEventListener("visibilitychange", sync);
+    }
+  };
+}

package/components/styles.css

@@ -5,6 +5,7 @@
 @import './timeline.css';
 @import './extensions.css';
 @import './background.css';
+@import './orbit.css';
 @import './charts.css';
 
 .rhine-theme { color:var(--rhine-ink); background:var(--rhine-bg); font:var(--rhine-text-body)/var(--rhine-leading-body) var(--rhine-font); font-synthesis:none; }

package/docs/ORBIT_BACKDROP.md

@@ -0,0 +1,81 @@
+# OrbitBackdrop · 轨道背景（0.6.0）
+
+`OrbitBackdrop` 将授权移交的轨道动画作为通用装饰组件维护：固定深色星空衬底、420 个环节点、185 条曲线、80 个深度桶，以及发射箭头、光晕和透视关系。它适合登录、欢迎等入口区域；不包含产品文案、账号逻辑或网络请求。需求与移交记录见 [Issue #8](https://github.com/linhay/rhine-design/issues/8)。
+
+**版本边界：**此组件自 `@linhey/rhine-design@0.6.0` 提供，0.5.0 及以前不包含它。采用前核对安装版本与 `components/index.ts`，固定精确版本并提交 lockfile。组件源于 [OrbitBackdrop.tsx](../components/OrbitBackdrop.tsx)，绘制实现在 [orbitRenderer.ts](../components/orbitRenderer.ts)；后者是内部实现，不作为公共 API 导入。
+
+## 使用与契约
+
+```tsx
+import { Logo, OrbitBackdrop, Text } from '@linhey/rhine-design';
+
+// 此示例要求 0.6.0 或以上，并放在现有主题根内。
+export function WelcomeArtwork() {
+  return (
+    <OrbitBackdrop className="welcome-artwork" style={{ minHeight: 360 }}>
+      <Logo decorative />
+      <Text as="h1" variant="title">开始新的工作</Text>
+      <Text>从这里进入你的工作空间。</Text>
+    </OrbitBackdrop>
+  );
+}
+```
+
+| 输入 | 契约 |
+| --- | --- |
+| `HTMLAttributes<HTMLDivElement>` | 接收容器原生属性，如 `className`、`style`、`id`；宿主负责尺寸、位置和相邻内容布局 |
+| `reducedMotion?: boolean` | `true` 加强减少动态偏好；`false` 或省略均不能覆盖系统、祖先或环境的停帧条件 |
+| `children` | 放入 `.rhine-orbit-content` 内容层，可组合 Logo、标题、正文、表单、动作和页脚，也可用 Surface 分组；宿主 class 控制内容布局，避免遮挡主要艺术或暂停控件 |
+
+组件持有绘制配方、内部类名、样式与暂停状态。宿主不复制 Canvas 实现，不另写同用途动画，不通过覆盖内部样式重建其视觉。没有速度、节点数量、业务进度或主题配色参数；需要新能力时先在设计系统中补契约与展台。
+
+Canvas 绝对定位在内容层下方。内容层为直接置于星空上的文字提供浅色前景，普通 Text 与非 icon Logo 继承当前前景，muted Text 沿当前前景降低透明度；不修改宿主颜色 tokens，也不新建或嵌套 `ThemeProvider`。Surface、Notice 等有底色的组件继续使用自己的语义前景，表单与按钮保留宿主主题的前景 / 背景组合。默认内置 Rhine `Button`，在独立控件区域提供“暂停 / 继续”的明确操作。Canvas 为 `aria-hidden` 纯装饰，不接收键盘焦点，不提供进度或业务状态。有效信息仍由普通 HTML 内容表达；动画暂停、减少动态或 Canvas 不可用均不影响内容与业务操作。
+
+## 动效生命周期
+
+下列任一条件成立时停止逐帧调度，保留静态画面：
+
+- 用户主动暂停；
+- 系统 `prefers-reduced-motion: reduce`，或 `reducedMotion` 为 `true`；
+- 祖先的 `data-rhine-motion="reduced"` 偏好生效（内层跟随系统不覆盖外层减少动态）；
+- 当前窗口宽度不超过 760px；
+- `document.hidden`、组件离屏或可用绘制尺寸为零。
+
+“暂停 / 继续”使用随当前动作变化的按钮名称，不同时声明 `aria-pressed` 切换语义。“继续”只解除用户主动暂停，不越过其他停帧条件。恢复时沿冻结的动画时间继续，不累计隐藏期间的时间，也不追赶错过的帧。偏好或可见性改变时即时重新判断；窗口调整会以当前冻结时间重绘静态画面。设备像素比上限为 2，卸载清理 rAF、监听器和 observers，离开页面不会继续后台绘制。
+
+Canvas 不可用时保留静态艺术 fallback 与 `children`。此降级不表示浏览器或页面业务失败，也不以加载提示掩盖缺失的装饰能力。
+
+## 主题与可读性
+
+轨道采用同一固定深色美术配方；切换 Rhine、Arknights 或 Neo Brutalism 时保留动画构图。艺术文字采用浅色前景，控件、语义容器、独立操作区与外框继续使用完整宿主主题 tokens；不能只改控件的前景而保留白色背景。直接叠加的提示和透明 quiet 操作继承当前内容前景；quiet 的有底色 hover / disabled 状态保持宿主配色，键盘焦点使用当前文字颜色的内描边。可按产品分组需要使用 Surface，不以它作为控件可读性的前提。宿主应提供足够的布局空间，避免正文与主要曲线重叠，也不能遮住暂停入口。
+
+轨道动画不替代 `Progress`、`Skeleton` 或 `Logo`。登录提交、校验失败、数据刷新不重播动画；动画时间不决定业务何时就绪。仅为重播装饰而更换 key 时，将 key 限于 `OrbitBackdrop`，输入状态由重播边界外的宿主持有，不能因重播重置表单或其他业务状态。
+
+## 真实组件展台与验收
+
+本地展台 `http://127.0.0.1:18309/#orbit` 复用公开组件，提供暂停 / 继续、局部重播、手动减少动态，以及系统和全局偏好继承。重播只重新挂载装饰组件，不重执行业务动作、不清空外层内容。此条目与 `/#motion` 的 12 组交互配方、`/#startup` 的启动编排分别维护。
+
+验收应覆盖以下行为；本节是验收要求，不代表浏览器检查已执行：
+
+1. 原动画的环节点、曲线、箭头、光晕与透视仍可辨识；采样不同时间的中间帧，不能只检查单张截图。
+2. 鼠标与键盘可暂停 / 继续；暂停时画面冻结，恢复不跳过冻结期间的时间。
+3. 系统、显式 prop、祖先偏好均可中断动画；将 `reducedMotion` 设为 `false` 不能覆盖系统减少动态。
+4. 检查 400 / 520 / 880 宽度、200% 缩放和三套主题，确认窄窗静态呈现、控件可见、焦点可读且无横向溢出。组合 TextField、主 / 次按钮及 Surface，检查输入文字、placeholder、默认 / hover / disabled 状态和容器内 Text 的前景与背景。
+5. 页面隐藏、离屏、零尺寸时停帧，恢复及 resize 行为一致；卸载无残留调度或监听。
+6. Canvas 不可用时仍显示静态艺术和内容；业务表单、请求与路由不依赖动画。
+
+宿主接入后仍需验证自己的页面布局与业务交互；单元测试、展台检查不等于宿主原生平台或完整辅助技术验收。
+
+### 2026-10-24 初始源码候选验证
+
+`npm ci`、`npm run check` 通过：65 项测试（轨道新增 10 项）、TypeScript 类型检查、展台生产构建及 CSS / SVG 产物检查。轨道测试覆盖完整节点绘制、DPR 上限、暂停时间冻结、系统 / prop / 祖先偏好、隐藏 / 离屏 / 窄窗 / 零尺寸、resize、Strict Mode 清理、Canvas 失败降级和重播保焦点。逻辑绘制尺寸使用 CSS client size，避免 CSS zoom 后暂停或 resize 改变线宽；真实浏览器验证固定画幅在 zoom 1→2→1 及 resize 后静态像素保持一致。
+
+本地 Chromium 真实展台通过 19 项检查：跨时间像素采样可见轨道运动；Space 键暂停 / 继续；系统、显式及祖先减少动态与恢复；三主题 × 400 / 520 / 880 宽度的静态 / 播放和无横向溢出；200% CSS 缩放与局部重播。另验证真实滚动离屏后像素冻结，返回可见区域后继续。页面错误为 0。页面隐藏与卸载由单元测试覆盖，不宣称已验证真实业务入口或原生平台。
+
+0.6.0 发布审阅发现初始候选的局部前景 tokens 会污染嵌入控件；现已移除这组覆盖。非 icon Logo 使用默认写法并继承所在内容的前景，无需按艺术底色另设 `theme="dark"`。上述初始截图与 19 项浏览器证据不代替修正后的组合控件验证。
+
+合并 0.5.0 应用能力并准备 0.6.0 后，重新执行 `npm ci` 与 `npm run check`：16 个测试文件、136 项测试、TypeScript、展台构建及 CSS / SVG 产物检查全部通过。真实展台已加入 Surface 内的正文、提示、TextField 与主 / 次按钮，供发布时单独验证三主题可读性。
+
+仓库外生产构建验证进一步发现：动画帧可先于媒体 `change` 事件观察到减少动态，此时只停帧会留下过期的播放状态。帧检查现复用同一同步路径，更新按钮与状态并清空上一帧时间；不增加停帧后的轮询。新增该事件顺序与恢复不追赶的回归后，16 个测试文件、137 项测试（`--maxWorkers=2`）、类型检查及构建通过。
+
+![真实组件展台](assets/orbit-backdrop.png)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linhey/rhine-design",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

package/preview/GalleryShell.tsx

@@ -10,7 +10,7 @@ export const galleryGroups = [
   { label: '应用能力', items: [['app-shell', '背景与多侧栏'], ['advanced-forms', '复杂表单'], ['advanced-data', '受控数据表'], ['media', '媒体卡片与查看器'], ['monitoring', '健康详情与图表']] },
   { label: '设计语言', items: [['foundation', '视觉基础'], ['backgrounds', '场景背景'], ['spacing', '间距与组合'], ['typography', '字体与文字'], ['brand', '品牌标志']] },
   { label: '通用组件', items: [['actions', '按钮与输入'], ['selection', '选择与切换'], ['feedback', '状态与加载'], ['disclosure', '展开与组合'], ['data', '数据与分页'], ['forms', '表单与选择'], ['utilities', '操作与布局'], ['overlays', '浮层与反馈'], ['navigation', '导航与步骤'], ['form-workflow', '表单流程']] },
-  { label: '交互与动效', items: [['patterns', '场景与交互指南'], ['motion', '动效实验室'], ['startup', '启动动画']] },
+  { label: '交互与动效', items: [['patterns', '场景与交互指南'], ['motion', '动效实验室'], ['startup', '启动动画'], ['orbit', '轨道星空']] },
 ] as const;
 export type GallerySection = typeof galleryGroups[number]['items'][number][0];
 const entries = galleryGroups.flatMap(group => [...group.items]);
@@ -94,7 +94,7 @@ function GalleryContent({ motion, onMotionChange, children }: GalleryShellProps)
       <SideNav id="gallery-navigation" className="ds-sidebar-nav" aria-label="组件目录" currentId={section} groups={galleryGroups.map(group=>({label:group.label,items:group.items.map(([id,label])=>({id,label,href:`#${id}`}))}))} onNavigate={item=>{
         setMenuOpen(false); if(section===item.id) main.current?.focus({preventScroll:true});
       }}/>
-      <div className="ds-sidebar-foot"><span>COMPONENT LIBRARY</span><span>59 个组件 · 持续演进</span><span className="ak-readout">{readout}</span></div>
+      <div className="ds-sidebar-foot"><span>COMPONENT LIBRARY</span><span>60 个组件 · 持续演进</span><span className="ak-readout">{readout}</span></div>
     </aside>
     <main className="ds-workspace" id="gallery-content" ref={main} tabIndex={-1} aria-label={label}>
       <header className="ds-workspace-head"><Breadcrumbs label="展台位置" items={[{label:"组件展台",href:"#top"},{label}]} /><div className="ds-head-controls"><SegmentedControl label="动效偏好" items={[{value:'system',label:'跟随系统'},{value:'reduced',label:'减少动态'}]} value={motion} onValueChange={onMotionChange} /><Select label="界面主题" value={theme} onChange={event => {

package/preview/OrbitGallery.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { Badge, Button, Inline, Logo, OrbitBackdrop, Stack, Surface, Switch, Text, TextField } from '../components';
+
+export function OrbitGallery() {
+  const [replay, setReplay] = useState(0);
+  const [reduced, setReduced] = useState(false);
+  const [artworkName, setArtworkName] = useState('Orbit workspace');
+  const [workspaceName, setWorkspaceName] = useState('Rhine Studio');
+  return <section id="orbit">
+    <div className="ds-section-title"><span>ORBIT</span><h2>轨道星空 · 品牌艺术背景</h2></div>
+    <p className="ds-caption">420 个环节点、185 条空间曲线与发射箭头组成同一幅画面。用于入口和品牌叙事，内容可立即阅读，不表示加载或业务进度。</p>
+    <Inline gap={3}>
+      <Badge>0.6.0</Badge>
+      <Button variant="secondary" onClick={() => setReplay(value => value + 1)}>重播轨道</Button>
+      <Switch label="减少轨道动态" checked={reduced} onCheckedChange={setReduced} />
+    </Inline>
+    <OrbitBackdrop key={replay} className="ds-gap-top" reducedMotion={reduced} style={{ minHeight: 560 }}>
+      <Logo variant="lockup" size={40} />
+      <Stack gap={3}>
+        <Text as="h3" variant="title">连接彼此，探索更多。</Text>
+        <Text tone="muted">在有序的轨迹中，留下新的可能。<br />艺术背景不阻挡内容与操作。</Text>
+        <TextField label="直接叠加的输入框" value={artworkName} onChange={event => setArtworkName(event.target.value)} hint="提示文字随当前内容前景保持可读。" />
+        <Inline gap={2}>
+          <Button>开始探索</Button>
+          <Button variant="secondary">查看轨道</Button>
+          <Button variant="quiet">了解更多</Button>
+          <Button variant="quiet" busy busyLabel="示例处理中">示例处理中</Button>
+          <Button variant="quiet" disabled>暂不可用</Button>
+        </Inline>
+      </Stack>
+      <Surface>
+        <Stack gap={3}>
+          <Text as="h3" variant="heading">带底色的内容保持宿主主题</Text>
+          <Text tone="muted">也可组合到 Surface，保留完整的前景、背景与状态配色。</Text>
+          <TextField label="工作空间名称" value={workspaceName} onChange={event => setWorkspaceName(event.target.value)} hint="这是可编辑的本地展台示例。" />
+          <Inline gap={2}>
+            <Button>继续探索</Button>
+            <Button variant="secondary">查看介绍</Button>
+            <Button variant="quiet">更多介绍</Button>
+          </Inline>
+        </Stack>
+      </Surface>
+      <Text variant="caption" tone="muted">空间、连接与持续探索。</Text>
+    </OrbitBackdrop>
+    <p className="ds-caption">暂停后在原画面继续；系统、顶部或本节减少动态均保留静态画面。视口不超过 760px、页面隐藏或画面离屏时停帧。重播只重建这幅艺术，不执行任何业务操作。</p>
+  </section>;
+}

package/preview/main.tsx

@@ -11,6 +11,7 @@ import { SpacingGallery } from './SpacingGallery';
 import { LineHeightGallery } from './LineHeightGallery';
 import { SubscriptionGallery } from './SubscriptionGallery';
 import { BackgroundGallery } from './BackgroundGallery';
+import { OrbitGallery } from './OrbitGallery';
 import { AdvancedDataGallery, AdvancedFormsGallery, MediaGallery, ShellGallery } from './ExtensionsGallery';
 import { MonitoringGallery } from './MonitoringGallery';
 
@@ -34,12 +35,13 @@ function Gallery() {
     {section === 'monitoring' && <MonitoringGallery />}
     {section === 'backgrounds' && <BackgroundGallery />}
     {section === 'app-shell' && <ShellGallery />}
+    {section === 'orbit' && <OrbitGallery />}
     {section === 'advanced-forms' && <AdvancedFormsGallery />}
     {section === 'advanced-data' && <AdvancedDataGallery />}
     {section === 'media' && <MediaGallery />}
     {section === 'subscriptions' && <SubscriptionGallery />}
     {section === 'top' && <>
-      <div className="ds-hero"><div><p className="ds-kicker">FOUNDATIONS / COMPONENTS / MOTION</p><h1>精密，有序。<br /><span>每一次交互都有回应。</span></h1><p>59 个通用组件，共用一套视觉变量和动效规则。<br />这里运行的就是后续业务页面可直接导入的 React 组件。</p></div></div>
+      <div className="ds-hero"><div><p className="ds-kicker">FOUNDATIONS / COMPONENTS / MOTION</p><h1>精密，有序。<br /><span>每一次交互都有回应。</span></h1><p>60 个通用组件，共用一套视觉变量和动效规则。<br />这里运行的就是后续业务页面可直接导入的 React 组件。</p></div></div>
       <div className="ds-overview-links">{[
         ['foundation','视觉基础','从色彩、间距与材质开始。'],
         ['typography','字体与文字','清晰的层级，稳定的阅读节奏。'],

package/skills/rhine-design/SKILL.md

@@ -2,7 +2,7 @@
 name: rhine-design
 description: Use Rhine Design components and specifications to design, implement, or review React UI, typography, themes, and motion. Apply when a project uses Rhine Design or the user requests its visual language or component system.
 metadata:
-  version: "0.5.0"
+  version: "0.6.0"
 ---
 
 # Rhine Design · 莱茵设计
@@ -13,7 +13,7 @@ Use the installed version's components and contracts to build consistent interfa
 
 ## Locate the matching source
 
-Package: `@linhey/rhine-design`. GitHub: `linhay/rhine-design` (different account spelling). This skill targets 0.5.0, including application shells, advanced forms, media, controlled tables and monitoring charts. Theme and navigation APIs require at least 0.4.0; the new application APIs require 0.5.0. Check installed exports before adoption.
+Package: `@linhey/rhine-design`. GitHub: `linhay/rhine-design` (different account spelling). This skill targets 0.6.0, including OrbitBackdrop, application shells, advanced forms, media, controlled tables and monitoring charts. Theme and navigation APIs require at least 0.4.0; application APIs require 0.5.0 and OrbitBackdrop requires 0.6.0. Check installed exports before adoption.
 
 Find the package in the host's dependencies, normally `node_modules/@linhey/rhine-design/`, or its registered source checkout. Verify `package.json` name/version before using the paths below. Paths in references are relative to that package root, not the copied skill directory. Read installed types and source when versions differ; do not infer a new API from this skill. If the package is unavailable, use the task's supplied design sources and identify the missing implementation evidence.
 

package/skills/rhine-design/references/API_MAP.md

@@ -9,6 +9,7 @@ All paths are relative to the matching package root. `package.json` exports, `co
 | MediaCard, MediaViewer（0.5.0） | `components/Media.tsx`；中性画布，不嵌套主题 |
 | DateField, DateRangePicker, NumberField, TreeSelect, RemoteMultiSelect（0.5.0） | `components/AdvancedForms.tsx`；请求、时区和查询由宿主负责；只读/校验/多选键盘及AntD/MUI保留差异见 `docs/ANTD_MUI_AUDIT.md` |
 | ThemeProvider, useTheme, themes, ThemeName, ThemeProviderProps (0.4.0；`@linhey/rhine-design/theme`) | `components/theme.tsx`；契约 `docs/THEMING.md` |
+| OrbitBackdrop, OrbitBackdropProps (0.6.0) | `components/OrbitBackdrop.tsx`；契约 `docs/ORBIT_BACKDROP.md`；`components/orbitRenderer.ts` 为内部绘制实现 |
 | Logo | `components/Logo.tsx` |
 | Text | `components/Typography.tsx` |
 | Select | `components/Select.tsx` |
@@ -38,5 +39,6 @@ API decisions that commonly matter:
 - `SelectionCard` uses checkbox semantics; the host determines single-selection policy. Do not nest other interactive controls in it.
 - `Text`'s `as` chooses semantics; `variant` chooses visual hierarchy.
 - `Logo` accepts `wordmark` and `label`; its `theme` affects the logo, not the full component library.
+- `OrbitBackdrop` is decorative artwork with built-in pause / resume. Its `reducedMotion` prop can strengthen but never override system reduction; see `docs/ORBIT_BACKDROP.md` for visibility, narrow-window and fallback behavior. It does not express loading or business progress.
 - `Toast` presents one notification, not a global queue. `DataTable` is not a query or table-state engine.
 - Components in `preview/` are demonstrations. Public API must resolve through a `package.json` export; theme APIs use the separate `/theme` entry.

package/skills/rhine-design/references/TASK_MAP.md

@@ -16,9 +16,10 @@ Resolve the matching package root as described in SKILL.md. Open the first relev
 | Modal, menu, popover, tooltip, feedback | `components/COMMON_COMPONENTS.md` | `components/Overlays.tsx`, `components/Toast.tsx` |
 | Transition, replay, cancellation, reduced motion | `components/MOTION.md` | `preview/`, `components/styles.css` |
 | Startup sequence, logo assembly, ready handoff | `components/STARTUP.md` | Search `startup` in `preview/`; not a public Startup component |
+| Orbit artwork, decorative Canvas, pause / resume, reduced motion | `docs/ORBIT_BACKDROP.md` (0.6.0) | `components/OrbitBackdrop.tsx`, internal `components/orbitRenderer.ts`; `/#orbit` |
 | Missing capability or system coverage | `docs/DESIGN_SYSTEM_AUDIT.md` | Verify status against `components/index.ts` |
 | Version upgrade | `CHANGELOG.md` | Installed `package.json`, current types |
 
-Run the library showcase with `npm ci && npm run dev` in a source checkout. Default port is 18309; sections include `/#foundation`, `/#typography`, `/#brand`, `/#motion` and `/#startup`. Do not assume another project's server or local filesystem layout.
+Run the library showcase with `npm ci && npm run dev` in a source checkout. Default port is 18309; sections include `/#foundation`, `/#typography`, `/#brand`, `/#motion` and `/#startup`, plus `/#orbit` in the unreleased source candidate. Do not assume another project's server or local filesystem layout.
 
 For host pages, keep product-specific drafts in the host project. The library's `preview/` demonstrates reusable behavior, not business APIs. Labels such as “candidate” or “preview” in motion docs identify experiments; check whether the behavior is actually exported before integrating it.

package/skills/rhine-design/references/integration.md

@@ -2,7 +2,7 @@
 
 ## Supported baseline
 
-Rhine Design 0.5.0 ships TypeScript/TSX, CSS and SVG source for React 19 + Vite. Install `@linhey/rhine-design`; GitHub remains `linhay/rhine-design`. Check the installed package's engine and peer dependencies. Node 24 is the development baseline. Do not assume precompiled JavaScript, arbitrary SSR support or a complete dark theme.
+Rhine Design 0.6.0 ships TypeScript/TSX, CSS and SVG source for React 19 + Vite. Install `@linhey/rhine-design`; GitHub remains `linhay/rhine-design`. Check the installed package's engine and peer dependencies. Node 24 is the development baseline. Do not assume precompiled JavaScript, arbitrary SSR support or a complete dark theme.
 
 ```tsx
 import { Button, Surface, Text } from '@linhey/rhine-design';

package/tests/OrbitBackdrop.test.tsx

@@ -0,0 +1,183 @@
+import { StrictMode } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { OrbitBackdrop } from '../components';
+import { mountOrbit } from '../components/orbitRenderer';
+import { OrbitGallery } from '../preview/OrbitGallery';
+
+class Media extends EventTarget {
+  matches = false;
+  set(value: boolean) { this.matches = value; this.dispatchEvent(new Event('change')); }
+}
+
+describe('OrbitBackdrop artwork and lifecycle', () => {
+  let reduced: Media, compact: Media, hidden: boolean, bounds: { width: number; height: number };
+  let frameId: number, frames: Map<number, FrameRequestCallback>;
+  let resize: () => void, intersect: (value: boolean) => void;
+  let resizeDisconnect: () => void, intersectionDisconnect: () => void;
+  let draws: number, lines: number, trails: number, glows: number, firstPoint: number[], firstRadius: number, zoom: number;
+  let hasPoint: boolean;
+  let context: CanvasRenderingContext2D;
+
+  beforeEach(() => {
+    reduced = new Media(); compact = new Media(); hidden = false;
+    bounds = { width: 600, height: 680 }; frameId = 0; frames = new Map();
+    draws = lines = trails = glows = firstRadius = 0; firstPoint = []; hasPoint = false; zoom = 1;
+    resizeDisconnect = vi.fn(); intersectionDisconnect = vi.fn();
+    vi.spyOn(document, 'hidden', 'get').mockImplementation(() => hidden);
+    vi.spyOn(HTMLCanvasElement.prototype, 'clientWidth', 'get').mockImplementation(() => bounds.width);
+    vi.spyOn(HTMLCanvasElement.prototype, 'clientHeight', 'get').mockImplementation(() => bounds.height);
+    vi.spyOn(HTMLCanvasElement.prototype, 'getBoundingClientRect').mockImplementation(() => ({ width: bounds.width * zoom, height: bounds.height * zoom, x: 0, y: 0, top: 0, left: 0, right: bounds.width * zoom, bottom: bounds.height * zoom, toJSON() {} }));
+    vi.stubGlobal('matchMedia', (query: string) => query.includes('prefers-reduced') ? reduced : compact);
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => { const id = ++frameId; frames.set(id, callback); return id; });
+    vi.stubGlobal('cancelAnimationFrame', (id: number) => frames.delete(id));
+    vi.stubGlobal('ResizeObserver', class { constructor(callback: () => void) { resize = callback; } observe() {} disconnect() { resizeDisconnect(); } });
+    vi.stubGlobal('IntersectionObserver', class {
+      constructor(private callback: (entries: Partial<IntersectionObserverEntry>[]) => void) {}
+      observe(target: Element) { intersect = value => this.callback([{ target, isIntersecting: value }]); }
+      disconnect() { intersectionDisconnect(); }
+    });
+    const gradient = { addColorStop() {} };
+    context = {
+      setTransform() {}, clearRect() { draws++; lines = trails = glows = firstRadius = 0; hasPoint = false; },
+      beginPath() {}, closePath() {}, stroke() {}, fill() {}, arc(_x: number, _y: number, radius: number) { if (!firstRadius) firstRadius = radius; },
+      moveTo(x: number, y: number) { if (!hasPoint) { hasPoint = true; firstPoint = [x, y]; } },
+      lineTo() { lines++; },
+      createLinearGradient() { trails++; return gradient; },
+      createRadialGradient() { glows++; return gradient; },
+    } as unknown as CanvasRenderingContext2D;
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(context);
+  });
+  afterEach(() => { cleanup(); document.documentElement.removeAttribute('data-rhine-motion'); vi.restoreAllMocks(); vi.unstubAllGlobals(); });
+
+  function advance(now: number) {
+    act(() => { const pending = [...frames.values()]; frames.clear(); pending.forEach(callback => callback(now)); });
+  }
+
+  it('retains the complete seeded artwork, caps pixel density and pauses without catching up', () => {
+    vi.stubGlobal('devicePixelRatio', 3);
+    const canvas = document.createElement('canvas'); document.body.append(canvas);
+    const scene = mountOrbit(canvas, () => {});
+    expect(canvas.width).toBe(1200); expect(canvas.height).toBe(1360);
+    expect(trails).toBe(420); expect(glows).toBe(140); expect(lines).toBeGreaterThan(185 * 80);
+    advance(100); const initial = [...firstPoint]; advance(200); const moving = [...firstPoint];
+    expect(moving).not.toEqual(initial);
+    scene.setPaused(true); const stoppedDraws = draws;
+    expect(frames.size).toBe(0); advance(9000); expect(draws).toBe(stoppedDraws);
+    scene.setPaused(false); advance(10000); expect(firstPoint).toEqual(moving);
+    advance(10100); expect(firstPoint).not.toEqual(moving);
+    scene.dispose(); canvas.remove();
+  });
+
+  it('keeps children and keyboard-capable pause control while preserving the current canvas', () => {
+    const { container } = render(<OrbitBackdrop><input aria-label="草稿" defaultValue="保留内容" /></OrbitBackdrop>);
+    const canvas = container.querySelector('canvas'); expect(canvas).toHaveAttribute('aria-hidden', 'true');
+    const input = screen.getByLabelText('草稿'); fireEvent.change(input, { target: { value: '已经输入' } });
+    fireEvent.click(screen.getByRole('button', { name: '暂停动效' }));
+    expect(frames.size).toBe(0); expect(screen.getByRole('button', { name: '继续动效' })).not.toHaveAttribute('aria-pressed');
+    expect(container.querySelector('.rhine-orbit')).toHaveAttribute('data-rhine-orbit-state', 'paused');
+    fireEvent.click(screen.getByRole('button', { name: '继续动效' }));
+    expect(frames.size).toBe(1); expect(container.querySelector('canvas')).toBe(canvas); expect(input).toHaveValue('已经输入');
+    expect(screen.getByRole('button', { name: '暂停动效' })).not.toHaveAttribute('aria-pressed');
+    expect(container.querySelector('.rhine-orbit')).toHaveAttribute('data-rhine-orbit-state', 'playing');
+  });
+
+  it('keeps geometry and stroke proportions stable when CSS zoom changes before a pause or resize', () => {
+    const { container } = render(<OrbitBackdrop />);
+    const canvas = container.querySelector('canvas')!;
+    const snapshot = () => ({ width: canvas.width, height: canvas.height, point: [...firstPoint], lineWidth: context.lineWidth, radius: firstRadius });
+    const before = snapshot();
+    // CSS zoom changes the visual rectangle without changing layout dimensions or issuing RO.
+    zoom = 2;
+    expect(canvas.getBoundingClientRect().width).toBe(canvas.clientWidth * 2);
+    fireEvent.click(screen.getByRole('button', { name: '暂停动效' }));
+    expect(snapshot()).toEqual(before); expect(frames.size).toBe(0);
+    act(() => resize()); expect(snapshot()).toEqual(before);
+    fireEvent.click(screen.getByRole('button', { name: '继续动效' }));
+    advance(100); expect(snapshot()).toEqual(before); expect(frames.size).toBe(1);
+  });
+
+  it('honors system and explicit reduction, and never lets false bypass the system', () => {
+    reduced.matches = true;
+    const { rerender } = render(<OrbitBackdrop reducedMotion={false} />);
+    expect(frames.size).toBe(0); expect(screen.getByRole('button', { name: '已减少动态' })).toBeDisabled();
+    act(() => reduced.set(false)); expect(frames.size).toBe(1);
+    rerender(<OrbitBackdrop reducedMotion />); expect(frames.size).toBe(0);
+    rerender(<OrbitBackdrop reducedMotion={false} />); expect(frames.size).toBe(1);
+    act(() => reduced.set(true)); expect(frames.size).toBe(0);
+  });
+
+  it('synchronizes a media change observed by a frame before the change event arrives', () => {
+    const { container } = render(<OrbitBackdrop />);
+    advance(100); advance(200); const frozen = [...firstPoint];
+    reduced.matches = true;
+    advance(300);
+    expect(container.querySelector('.rhine-orbit')).toHaveAttribute('data-rhine-orbit-state', 'reduced');
+    expect(screen.getByRole('button', { name: '已减少动态' })).toBeDisabled();
+    expect(frames.size).toBe(0); expect(firstPoint).toEqual(frozen);
+    const stoppedDraws = draws; advance(9000); expect(draws).toBe(stoppedDraws);
+    act(() => reduced.set(false));
+    expect(container.querySelector('.rhine-orbit')).toHaveAttribute('data-rhine-orbit-state', 'playing');
+    expect(screen.getByRole('button', { name: '暂停动效' })).toBeEnabled();
+    advance(10000); expect(firstPoint).toEqual(frozen);
+    advance(10100); expect(firstPoint).not.toEqual(frozen);
+  });
+
+  it('observes ancestor motion changes even through a local system preference', async () => {
+    render(<div data-rhine-motion="system"><OrbitBackdrop /></div>);
+    expect(frames.size).toBe(1);
+    await act(async () => { document.documentElement.setAttribute('data-rhine-motion', 'reduced'); });
+    expect(frames.size).toBe(0);
+    await act(async () => { document.documentElement.removeAttribute('data-rhine-motion'); });
+    expect(frames.size).toBe(1);
+  });
+
+  it('stops while hidden, offscreen, compact or empty and redraws a paused resize', () => {
+    const { container } = render(<OrbitBackdrop />);
+    act(() => { hidden = true; document.dispatchEvent(new Event('visibilitychange')); }); expect(frames.size).toBe(0);
+    act(() => { hidden = false; document.dispatchEvent(new Event('visibilitychange')); }); expect(frames.size).toBe(1);
+    act(() => intersect(false)); expect(frames.size).toBe(0);
+    act(() => intersect(true)); expect(frames.size).toBe(1);
+    act(() => compact.set(true)); expect(frames.size).toBe(0); expect(screen.getByRole('button', { name: '窄屏静态画面' })).toBeDisabled();
+    act(() => compact.set(false)); expect(frames.size).toBe(1);
+    act(() => { bounds.width = 0; resize(); }); expect(frames.size).toBe(0);
+    act(() => { bounds.width = 400; resize(); }); expect(frames.size).toBe(1);
+    fireEvent.click(screen.getByRole('button', { name: '暂停动效' })); const beforeResize = draws;
+    act(() => { bounds.height = 500; resize(); }); expect(draws).toBeGreaterThan(beforeResize); expect(frames.size).toBe(0);
+    expect(container.querySelector('canvas')).toHaveAttribute('height', '500');
+  });
+
+  it('cleans up all scheduling and observers, including Strict Mode mount replay', async () => {
+    const visibilitySpy = vi.spyOn(document, 'removeEventListener');
+    const resizeSpy = vi.spyOn(window, 'removeEventListener');
+    const reducedSpy = vi.spyOn(reduced, 'removeEventListener');
+    const compactSpy = vi.spyOn(compact, 'removeEventListener');
+    const { unmount } = render(<StrictMode><OrbitBackdrop /></StrictMode>);
+    expect(frames.size).toBe(1); unmount(); const finalDraws = draws;
+    expect(frames.size).toBe(0); expect(resizeDisconnect).toHaveBeenCalledTimes(2); expect(intersectionDisconnect).toHaveBeenCalledTimes(2);
+    expect(visibilitySpy).toHaveBeenCalledWith('visibilitychange', expect.any(Function));
+    expect(resizeSpy).toHaveBeenCalledWith('resize', expect.any(Function));
+    expect(reducedSpy).toHaveBeenCalledWith('change', expect.any(Function)); expect(compactSpy).toHaveBeenCalledWith('change', expect.any(Function));
+    await act(async () => { document.documentElement.setAttribute('data-rhine-motion', 'reduced'); reduced.set(true); resize(); intersect(true); });
+    expect(draws).toBe(finalDraws); expect(frames.size).toBe(0);
+  });
+
+  it.each(['null', 'throw'])('keeps content usable when the canvas context is %s', mode => {
+    vi.mocked(HTMLCanvasElement.prototype.getContext).mockImplementation(() => { if (mode === 'throw') throw new Error('Canvas unavailable'); return null; });
+    const { container } = render(<OrbitBackdrop><button>继续工作</button></OrbitBackdrop>);
+    expect(container.querySelector('.rhine-orbit')).toHaveAttribute('data-rhine-orbit-state', 'unavailable');
+    expect(screen.getByRole('button', { name: '继续工作' })).toBeEnabled();
+    expect(screen.getByRole('button', { name: '静态画面' })).toBeDisabled(); expect(frames.size).toBe(0);
+  });
+
+  it('replays the gallery artwork while preserving entered content and external replay focus', () => {
+    const { container } = render(<OrbitGallery />); const canvas = container.querySelector('canvas');
+    fireEvent.change(screen.getByRole('textbox', { name: '直接叠加的输入框' }), { target: { value: '新的轨道名称' } });
+    fireEvent.change(screen.getByRole('textbox', { name: '工作空间名称' }), { target: { value: '新的工作空间' } });
+    const replay = screen.getByRole('button', { name: '重播轨道' }); replay.focus(); fireEvent.click(replay);
+    expect(container.querySelector('canvas')).not.toBe(canvas); expect(replay).toHaveFocus(); expect(frames.size).toBe(1);
+    expect(screen.getByRole('textbox', { name: '直接叠加的输入框' })).toHaveValue('新的轨道名称');
+    expect(screen.getByRole('textbox', { name: '工作空间名称' })).toHaveValue('新的工作空间');
+    fireEvent.click(screen.getByRole('switch', { name: '减少轨道动态' })); expect(frames.size).toBe(0);
+  });
+});