Visualizations Gallery
This page showcases all Three.js animations used throughout taurusSwap. Each animation illustrates a mathematical concept from the Orbital AMM paper.
01 · Sphere AMM
Reserves x ∈ ℝⁿ live on the sphere Σ(r − xᵢ)² = r². Every trade slides the point along the surface.
Mathematical Concept:
The sphere invariant constrains reserves to an n-dimensional sphere surface.
02 · Polar Decomposition
Reserves decomposed into α (equal-price axis) and w (orthogonal trading component).
Mathematical Concept:
x = αv + w splits reserves into price-direction and trading components.
03 · Ticks and Caps
Ticks cut spherical caps around the equal-price point. When reserves hit the boundary, the tick is exhausted.
Mathematical Concept:
Each tick is a spherical cap defined by hyperplane x · v = k.
04 · Consolidation to Torus
Multiple ticks collapse into a single torus: interior sphere swept around boundary circle.
Mathematical Concept:
Interior ticks sum linearly; boundary ticks contribute effective radius.
05 · Trade Execution
A swap moves the reserve point along the torus surface. The invariant is verified on-chain.
Mathematical Concept:
The torus invariant is evaluated after each trade segment.
06 · Pool Seeding
Initial liquidity deposit creates the first tick and sets the pool state.
Mathematical Concept:
The first LP defines r and k, establishing the initial sphere.
Using Animations in Docs
To embed an animation in a docs page, use the AnimationEmbed component:
import AnimationEmbed from '@/components/docs/AnimationEmbed';
<AnimationEmbed
src="/docs/animations/01_sphere_amm.mp4"
title="01 · Sphere AMM"
caption="Reserves live on the sphere..."
tsxSource={sphereAmmSourceCode} // Optional: show Three.js code
/>Animation Specifications
| Property | Value |
|---|---|
| Resolution | 1920×1080 (16:9) |
| Frame Rate | 60 FPS |
| Duration | 10-15 seconds (looping) |
| Format | MP4 (H.264) |
| Camera | Perspective, FOV 45° |
| Palette | Green #9FE870, Cyan #00c4d9, Pink #ff5b7a, Yellow #f2d15f |