# Diagrams and motion

## Editable technical diagrams

Mermaid definitions remain version-controlled in diagrams/. Every language serves readable SVG diagrams with localized labels, text descriptions and the original editable definitions. Diagram source and exported snapshots are checked together. No paid GitBook plugin or browser-side diagram renderer is needed.

Architecture, producer/consumer boundaries, selection commitment, and the service-fee/payout distinction have separate diagrams. Orange marks a P21 operation, not a guarantee. Optional/asynchronous paths use dashed lines and explicit words, not color alone.

## Native website motion

The homepage pairs a Bitcoin-native instrument illustration with a scroll-responsive process. Supporting pages use contextual motion without hiding text or shifting reading positions. Native SVG animation decorates existing technical diagrams.

Device reduced-motion and data-saver settings take priority. Preferences includes a reduced-motion option without floating stop or replay controls. Markdown, JSON, navigation, and complete document text remain available without animation or JavaScript.

## Remotion source

Ten current Remotion exports cover the desktop/mobile hero, desktop/mobile process, block history, batched commitments, selection, digital matter, evidence exchange, and request bindings. Ten original journal renders are retained. Source and output hashes identify each asset in the manifests.

Muted media loads when visible, loops on screen, and pauses offscreen or in hidden tabs. The process responds to scroll position and resumes playback afterward. Every illustration retains a static fallback; it does not display a live transaction feed or assert payment approval.

## Brand

Use e-paper/aluminum, charcoal, intentional orange and original dotted geometry. Arabic is right-to-left with isolated left-to-right code and identifiers; Thai and Chinese use suitable system-font fallbacks. Never stretch dotted lettering across body copy. No font binaries are distributed.

## Sources

- [Mermaid theming](https://mermaid.js.org/config/theming.html)
- [Mermaid accessibility](https://mermaid.js.org/config/accessibility.html)
- [Remotion rendering](https://www.remotion.dev/docs/cli/render)
- [Reduced motion and animation controls](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html)

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

## Signal-orange identity

Use signal orange (#EF5B2A) for the entire 21 in header/footer wordmarks and the entire 21 in the dotted P21 motion mark. Keep P/Proof in ink. This branding exception does not change the darker accessible orange used for small text links. Journal listing cards and article illustrations share visible-only video playback, render-derived image recovery, a still fallback and authoritative reduced-motion controls.

[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)