# 图表与动效

## 可编辑的技术图表

Mermaid 定义保存在 diagrams/ 中并受版本控制。每种语言均提供带本地化标签、文字说明和原始可编辑定义的 SVG 图表。图表源码与导出快照一起校验，不依赖付费 GitBook 插件或浏览器端图表渲染器。

架构、生产者/消费者边界、选择承诺，以及服务费与实际付款的区别各有独立图表。橙色表示 P21 操作，不是保证。可选或异步路径使用虚线与明确文字，不仅依赖颜色。

## 网站原生动效

首页将 Bitcoin 原生仪表式插图与响应滚动的流程结合。其他页面采用贴合内容的动画，不隐藏文字或改变阅读位置。原生 SVG 动画为现有技术图表添加动态效果。

设备的减少动态效果与节省流量设置优先。偏好设置包含减少动态效果选项，不使用悬浮停止或重播控件。Markdown、JSON、导航及完整文档文本无需动画或 JavaScript 即可访问。

## Remotion 源码

当前十个 Remotion 导出涵盖桌面/移动端首屏、桌面/移动端流程、区块历史、批量承诺、选择、数字物质、证据交换与请求绑定。保留十个原始期刊渲染。清单中的来源与输出哈希标识每项资源。

静音媒体在可见时加载，在屏幕上循环播放，离开视口或标签页隐藏时暂停。流程响应滚动位置，随后恢复播放。每项插图保留静态替代；不展示实时交易流，也不表示支付批准。

## 品牌

使用电子纸、铝色、炭黑、有意图的橙色以及原创点阵。阿拉伯语从右到左，代码与标识符单独保持从左到右；泰语和中文使用适合的系统备用字体。不把点阵文字用于正文。不分发字体二进制文件。

## 来源

- [Mermaid 主题](https://mermaid.js.org/config/theming.html)
- [Mermaid 无障碍](https://mermaid.js.org/config/accessibility.html)
- [Remotion 渲染](https://www.remotion.dev/docs/cli/render)
- [减少动态效果与动画控制](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html)

<!-- p21-ecosystem-payments-v09 -->

## 信号橙品牌标识

页眉／页脚文字标志中的整个 21，以及点阵 P21 动画标记中的整个 21，均使用信号橙 (#EF5B2A)。P／Proof 保持墨色。这项品牌例外不改变小号文字链接使用的深色无障碍橙。日志列表卡片与文章插图共用仅可见时播放的视频、由渲染导出的动态图恢复、静态回退及优先执行的减少动态设置。

[Binance assets and methods](https://developers.binance.com/en/docs/products/onchainpay-x402/basics/9.supported-payment-methods) · [Binance integration](https://developers.binance.com/en/docs/products/onchainpay-x402/introduction) · [Coinbase facilitator](https://docs.cdp.coinbase.com/x402/seller/facilitator) · [PayAI assets](https://docs.payai.network/x402/reference) · [Virtuals ACP](https://os.virtuals.io/acp/concepts) · [NAT Ethereum listing](https://www.bitmart.com/en-US/support/articles/7923014477723/360001026214/49446319153179) · [NAT Solana record](https://solscan.io/token/FbKRaqBzupLry3V7QujpNghwrHgxutB4MY11M8aeyVa1) · [NAT BNB Chain contract](https://bscscan.com/token/0x600e3b55d5368c32a94f9372563318adb6a3f882)