Framework-free SVG charting primitives and interactive lesson components built for ULTIMA Academy. Every component auto-plays on scroll into view, supports manual timeline scrubbing, symmetricLong / Short scenario flipping, custom interactive controls via mount(), and renders its final state statically when prefers-reduced-motion: reduce is active.
Builds an NQ 1-minute footprint candle top-to-bottom: passive Bid volume on the left, aggressive Ask volume on the right, row-by-row Delta bars, and stroke-dashoffset brackets around 3.0× diagonal imbalances. Hover any row to inspect its diagonal auction pair (Bid[p] × Ask[p + 1 tick]).
M3.01 · FOOTPRINT CLUSTER BUILDER
Inside the Candle: Bid × Ask Execution & Diagonal Imbalances
← Swipe to see the whole figure →
0%
WHAT TO SEERows fill top-to-bottom as passive Bid volume and aggressive Ask volume count up; 3.0× diagonal imbalances draw an amber bracket.
Interactive split-screen comparison between two renderings of identical market data. Drag the amber split handle directly on the chart (or use the comparison slider bar) to compare an opaque OHLC candlestick view against the inside-bar footprint cluster.
M3.01 · BEFORE / AFTER SPLIT COMPARISON
Raw OHLC Candlestick vs Inside-Bar Footprint Truth
0%
WHAT TO SEEDrag the split handle (or use the comparison slider) to see how an opaque OHLC bar hides the 612-contract POC absorption and 4-level buy stack inside.
Component #6 · DeltaDiverge Animator (M3.04, M5)
Synchronizes price swings in the upper pane with bar-by-bar Delta and Cumulative Volume Delta (CVD) in the lower pane. Automatically draws structural divergence connectors when price makes a lower low that CVD refuses to confirm.
M3.04 · DELTA & CVD DIVERGENCE ANIMATOR
Exhaustion vs Absorption: Price Lower Low vs CVD Higher Low
0%
WHAT TO SEEPrice prints a lower low at 10:30 (20,406 vs 20,412) while Cumulative Volume Delta holds a higher low (-2,460 vs -2,750), confirming passive limit absorption.
Demonstrates structural auction symmetry: every Long setup is the exact horizontal and polarity mirror of a Short setup. Toggle between Long Setup and Short Setup (Mirrored) to invert both the chart geometry and the polarity header strip from a single canonical dataset.
M3 & M5 · SYMMETRIC LONG / SHORT SCENARIO FLIP
Auction Symmetry: Every Long Setup Has an Exact Short Mirror
0%
WHAT TO SEELong symmetry: Passive bids absorb aggressive sellers at the low, trapping shorts before a 4-level Ask imbalance stack ignites upward.
Grows horizontal Volume-by-Price bars from the price axis, fades in the translucent 70% Value Area band (VAH 5,852 to VAL 5,840), and draws the amber Point of Control (POC 5,844) rule via stroke-dashoffset.
M2.01–M2.05 · VOLUME PROFILE GROWER
Volume-by-Price Distribution: POC Magnet, 70% Value Area & LVN Air Pocket
0%
WHAT TO SEEHorizontal volume bars grow from the price axis; the 5,844 POC amber rule draws on while the 70% Value Area band (5,840–5,852) fades in.
Appends 30-minute TPO letter brackets (A through H) across the session timeline. Click any 30m period pill (A (09:30) … H (13:00)) or scrub the playhead to watch the bell curve and POC emerge.
M2.06 · TPO MARKET PROFILE BUILDER
30-Minute Period Letters (A–H) Collapsing into the Bell Curve
0%
WHAT TO SEEUse the 30m period jump pills (A–H) or timeline scrubber to watch Initial Balance (A+B), developing POC (5,844), and afternoon range extension form.
Detects 3+ consecutive diagonal footprint imbalances, projects the horizontal Stacked Imbalance Support Zone forward in time, and animates the subsequent 09:44 pullback retest holding the zone before continuation.
M3.03 · STACKED-IMBALANCE ZONE MARKER
Campaign Footprint: 4-Level Buy Stack Projects Forward as Pullback Support
0%
WHAT TO SEELong stack zone: 4 consecutive Ask imbalances (20,403.25–20,404.00) project a support band that holds the 09:44 pullback retest.
Component #7 · AbsorptionDemo — Effort vs Result (M3.02, M5)
Visualizes aggressive market sell volume spiking 3× normal against a passive limit bid wall at 20,400.00. While the iceberg counter ticks up to 1,860 contracts absorbed, price progresses only 2 ticks before snapping higher.
M3.02 · ABSORPTION (EFFORT VS RESULT)
Heavy Selling Into a Resting Bid, Then Three Possible Endings
LoreOne trader's study
0%
WHAT TO SEEBid absorption: about 1,860 contracts sold into 20,400.00 for one tick of progress. Then three endings: reverse, stall or break. On NQ, absorption reversed no more often than bars without it (lore as a reversal signal).
Deterministic seeded Depth-of-Market (DOM) simulator showing queue refresh, a 520-lot Spoof Ask Wall at5,846.00 that pulls 472 lots as price approaches, and a passive Iceberg Bid at 5,844.25that reloads 3× under heavy selling. Use the Ladder Lens buttons to isolate either phenomenon.
M3.11–M3.12 · SEEDED SMARTDOM LADDER SIMULATOR
Reading the Book: an Order Pulled Before Contact vs an Order Refilled After Fills
← Swipe to see the whole figure →
0%
WHAT TO SEEThe 5,846.00 offer was pulled before price reached it, so it provided no defence (intent unknown: most pulls are routine cancels). The 5,844.25 bid traded and refilled, so that size did trade. Whether either predicts direction is untested.
Traces session price action weaving around institutional VWAP and its ±1σ / ±2σ standard deviation bands, popping event markers on the +1.5σ Stretch, VWAP Pullback Hold, and +2σ Target.
Discrete 4-state Auction Market Theory stepper: Step 1 · Balance → Step 2 · Initiative →Step 3 · Test → Step 4 · New Balance. Click the phase buttons (or press ← / → when focused) to morph the distribution and value brackets.
M1.01–M1.08 · TWO-WAY AUCTION STATE STEPPER
The 4-Phase Market Cycle: Balance → Initiative Breakout → Acceptance Test → New Value
0%
WHAT TO SEEBullish value migration: Rotational balance (5,840 POC) breaks higher via initiative buying, converts 5,844 prior VAH into support, and forms new balance at 5,852.
Shows late breakout buyers chasing above 20,440.00 into a passive limit offer wall. When price snaps back below20,440.00, the trapped-long zone illuminates and forced stop-loss selling accelerates the downside cascade.
M1.07 & M5 · TRAPPED-TRADER LIQUIDATION CASCADE
Failed Breakout Above 20,440: Trapped Chasers Fuel the Stop-Loss Cascade
0%
WHAT TO SEEFailed upside breakout: Late longs trapped above 20,440 become forced sellers when price snaps back inside range (-680 → -1,490 → -2,140 Δ).
Tracks Cumulative Volume Delta (CVD) recovering from passive absorption lows (-2,320) and crossing the0 CVD baseline at 10:00 (+1,210), flipping the regime bias header from Sell Pressure to Initiative Buying.
Order-Flow Regime Flip: CVD Crosses Zero Baseline With Price Confirmation
0%
WHAT TO SEEBullish CVD flip: After basing at -2,320 CVD (09:40), steady aggressive buying drives CVD across the 0 baseline at 10:00 (+1,210), confirming trend ignition.
Component #15 · SweepAnimator — Fast Stop-Run vs Slow Recovery (M3.07, M5)
Two-speed auction velocity: price spikes through the 20,418.00 Equal Lows liquidity pool in a fast 200ms burst (-34 ticks wick), bar delta flips polarity from -640 to +590 as passive bids absorb the stop-run, and price rotates back into value over a slower 900ms recovery.
M3.07 · M5 — LIQUIDITY SWEEP & STOP-RUN ANIMATOR
Two-Speed Auction: Fast Stop-Run Sweep (200ms) vs Slow Structural Recovery (900ms)
0%
WHAT TO SEELONG SCENARIO: Fast sweep of sell-side liquidity (SSL) below Equal Lows @ 20,418.00 → Delta Flip (+590) → structural reclaim.
Maps dealer net gamma exposure across strikes around NQ spot. Click the +GEX · Vol Suppression vs-GEX · Vol Magnification regime buttons to morph the strike histogram, shift the Gamma Flip boundary, and update the dealer hedging mechanics callout.
M9.04 · M9.08 · M9.10 — MODEL DEALER GAMMA (GEX) BY STRIKE
Model Dealer Gamma by Strike, Under Two Assumed Dealer Signs
Model
0%
WHAT TO SEEAssumed long gamma (spot above the model zero-gamma line): if the sign is right, hedging leans against moves. Measured on SPX; on NQ not yet measured.
Interactive Win Rate, Avg Win (R), and Avg Loss (R) sliders + System A vs System B Trap presets. Dragging any slider morphs the deterministic 100-trade seeded equity path and updates Expectancy per trade, Net R, Profit Factor, and Max Drawdown.
Scrub the Strategies Tested (N = 1 → 1000) slider (or click the preset N pills) to observe how brute-forcing hundreds of parameter variations inflates the trial cloud while decaying the Bailey–López de Prado Deflated Sharpe Ratio.
Toggle between Regime-Colored + Risk Gate and Raw Price Only to classify Balance, Directional Expansion, and Hostile FOMC/CPI Volatility Shock bands alongside the lower position-size filter line.
Data-driven SVG concept web built from lesson frontmatter (prereqs, related) by graphOf() in src/lib/curriculum.ts. Hover any node to highlight its prerequisite and unlock edges in amber and read its one-line definition; click any node to navigate directly to that lesson.
M3 · CONCEPT DEPENDENCY MINI-GRAPH
Prerequisites ← Current Focus Lesson → Unlocks Next
← Swipe to see the whole figure →
WHAT TO SEEHover any node to highlight its dependency edges and read its one-line definition; click any node to open that lesson.
Giant-number conceptual callouts for foundational and psychology lessons where a single mathematical identity carries the insight. Numeric targets count up on scroll into view and render their final value statically under reduced motion.
Sticky figure stage paired with scrolling narrative beats for deep auction and absorption walkthroughs. Scrolling through (or clicking) each narrative step card synchronizes the figure timeline and long/short polarity.
WHAT TO SEEScroll through the narrative steps (or click any step card) to drive the figure timeline and polarity state.
01CONTEXT · EFFORT BEGINS28%
Aggressive Market Orders Attack the Key Level
Market sellers slam 420+ contracts into the 20,400.00 bid, expecting a clean breakdown below the Initial Balance low. Watch the first effort spike register on the lower volume panel.
Hit #1 · 420 Contracts · -1 Tick Progress
02ICEBERG WALL · REFILLING65%
The Resting Bid Absorbs 3× Normal Volume
Despite two more waves of aggressive market selling (610 and 830 contracts), price fails to advance more than 2 ticks. A resting limit buyer keeps refilling the bid.
1,860 Contracts Absorbed · 0 Breakdown Acceptance
03WHAT NEXT · THREE ENDINGS100%
The Same Print Can Reverse, Stall or Break
Absorption shows that a resting buyer held this time. It does not choose the ending: on NQ, bars with absorption reversed about as often as bars without it. Wait for what the next bars do.
Every auction mechanic is symmetric. In the mirrored short scenario, aggressive breakout buyers slam into a passive iceberg offer at 20,400.00 before rolling over.
Short Symmetry · Passive Ask Absorption
Phase A Base Engine Reference (Candlesticks Alias)
Direct type="candlesticks" base engine retained for backward compatibility with Phase A fixtures.
BASE ENGINE · NQ 5M AUCTION CONTEXT
Look Below and Fail: Liquidity Sweep into Value Area Acceptance
0%
WHAT TO SEEThe 09:40 bar sweeps below 20,396.0 prior low liquidity and closes back above VAL (20,408.0), triggering rotation through the 20,424.0 POC.
Engine demos (the same shell a lesson ```figure block renders)
Each engine file may export demos: block specs rendered here through figureShellHtml, exactly as the Markdown plugin renders them in lessons. Graded figures show their badge in the header.
ANIMATED FIGURE
Absorption, then three endings
Lore
0%
WHAT TO SEEHeavy selling meets a resting bid and price barely moves. Then the same print branches three ways: absorption alone does not choose the ending. Synthetic data.
Synthetic data
ANIMATED FIGURE
Four-phase auction cycle
Model
0%
WHAT TO SEEStep through rotational balance, initiative breakout, acceptance test, and new higher equilibrium.
Synthetic data
ANIMATED FIGURE
Acceptance vs rejection checklist
Plausible
0%
WHAT TO SEETest a probe beyond a reference level against explicit time, volume, and closing-bar criteria.
Synthetic data
ANIMATED FIGURE
Futures fair value converges to the index
Definition
0%
WHAT TO SEEFair value is the index plus interest minus dividends to expiry. The gap shrinks to zero at expiry. Synthetic index, 4.5% rate, 0.8% yield.
Synthetic data
ANIMATED FIGURE
Roll week: the gap that is not a gap
Definition
0%
WHAT TO SEEVolume moves from the front contract to the next. An unadjusted chart jumps on the switch day; back-adjusted, the jump is gone. Synthetic prices.
Synthetic data
ANIMATED FIGURE
0%
WHAT TO SEE
ANIMATED FIGURE
0%
WHAT TO SEE
ANIMATED FIGURE
How sure is a win rate after n trades?
Definition
0%
WHAT TO SEEThe 95% interval around a 50% win rate is about ±26 points after 10 trades and about ±10 after 100. Formula, no data.
ANIMATED FIGURE
Expectancy after costs
Definition
0%
WHAT TO SEEThe same win rate and payoff lose their edge as cost per trade rises; the curve crosses zero where cost equals the gross edge. Formula, no data.
ANIMATED FIGURE
Risk of ruin vs risk per trade
Model
0%
WHAT TO SEESame edge, different bet size: past a few percent per trade, the chance of losing 30% of the account climbs fast. Model: independent trades.
ANIMATED FIGURE
Growth vs fraction risked
Model
0%
WHAT TO SEEGrowth peaks at the Kelly fraction and falls past it; the band shows how much the peak moves when the win rate is uncertain by ±5 points. Model.
ANIMATED FIGURE
Expectancy vs round-trip cost
Definition
0%
WHAT TO SEEA setup with 2.5 points of gross edge per trade is flat at 2.5 points of cost. Worked example, synthetic edge.
Synthetic data
ANIMATED FIGURE
Break-even win rate by reward to risk
Definition
0%
WHAT TO SEEAt 2:1 you need a third of trades to win before costs; a 0.1R cost per trade lifts the line. Your point sits above or below it. Formula.
ANIMATED FIGURE
Slippage per fill, in ticks
Definition
0%
WHAT TO SEEMost stop fills land within a tick; a few land far worse. Move the floor to count the bad ones. Sample journal, synthetic.
Synthetic data
ANIMATED FIGURE
From gross R to net R in one month
Definition
0%
WHAT TO SEEEach cost hangs from the running total. A month that looks good gross can end near zero. Worked example, synthetic.
Synthetic data
ANIMATED FIGURE
How many day traders profit predictably after fees?
MeasuredOther market
0%
WHAT TO SEEOut of 100 day traders, fewer than one: the last dot is only partly lit. Taiwan market, 1992–2006.
Source: Barber, Lee, Liu & Odean (2014), The Cross-Section of Speculator Skill
ANIMATED FIGURE
Where your losses come from
Definition
0%
WHAT TO SEESorted by R lost: the first two causes make up most of the total. Sample journal, synthetic.
Synthetic data
ANIMATED FIGURE
DOM pull and iceberg refill
Plausible
← Swipe to see the whole figure →
0%
WHAT TO SEECompare a pulled resting offer with a passive bid that refills as market sells hit it.
Synthetic data
ANIMATED FIGURE
FIFO queue position at one price
Model
← Swipe to see the whole figure →
0%
WHAT TO SEETrades remove size from the front; cancels remove from their queue slot; new limit orders join at the back.
Synthetic data
ANIMATED FIGURE
Order-book depth heatmap & persistence
Plausible
← Swipe to see the whole figure →
0%
WHAT TO SEECount how many time steps a resting level stays above a chosen size threshold before draining.
Synthetic data
ANIMATED FIGURE
Target or floor first?
Model
0%
WHAT TO SEEA coin-flip trader between a floor 10R below and a target 10R above: about half the paths hit each. The tally converges to the formula. Synthetic paths.
Synthetic data
ANIMATED FIGURE
Losing streaks in a winning system
Model
0%
WHAT TO SEEA 55% system still shows runs of five or more losses in most 100-trade samples. Rerun to see new paths. Synthetic paths.
Synthetic data
ANIMATED FIGURE
How deep drawdowns go
Model
0%
WHAT TO SEESame rules, many paths: the max-drawdown histogram shows how often a policy line would be hit. Synthetic paths.
Synthetic data
ANIMATED FIGURE
Three accounts, one signal
Model
0%
WHAT TO SEEWith correlation 0.9 the three curves move together and breach together; the combined drawdown is close to three times one account. Synthetic paths.
Synthetic data
ANIMATED FIGURE
Calendar effects on one synthetic year
Lore
0%
WHAT TO SEEPick an event type to see its evidence card. Turn on "Measured on NQ only" and almost everything greys out. Synthetic year, no real dates.
Synthetic data
ANIMATED FIGURE
Named level vs random level at the same distance
Definition
0%
WHAT TO SEEEach named level touches about as often as a random level placed at the same distance. Toggle to the holdout. Synthetic numbers for the demo.
Synthetic data
ANIMATED FIGURE
40 tests of pure noise
Definition
0%
WHAT TO SEEForty p-values from strategies with no edge. A couple fall under 5% by luck; none survive the Benjamini–Hochberg line. Synthetic tests.
Synthetic data
ANIMATED FIGURE
0%
WHAT TO SEE
ANIMATED FIGURE
0%
WHAT TO SEE
ANIMATED FIGURE
0%
WHAT TO SEE
ANIMATED FIGURE
0%
WHAT TO SEE
ANIMATED FIGURE
A career ladder gated by measurements
House rule
0%
WHAT TO SEEEach gate opens only when its journal metric is met, not after a set time. House rule.
ANIMATED FIGURE
Where the session opens, and what followed
0%
WHAT TO SEEBranch widths show how many sessions took each path; leaves compare the real rate with a placebo. Toggle to see how much is geometry. Synthetic counts.
Synthetic data
ANIMATED FIGURE
Footprint bar price rows
Plausible
← Swipe to see the whole figure →
0%
WHAT TO SEEBid × Ask volume ladder with POC and diagonal imbalance highlights.
Synthetic data
ANIMATED FIGURE
Single-cell Bid × Ask & diagonal ratio
Model
← Swipe to see the whole figure →
0%
WHAT TO SEEWatch individual prints accumulate into Bid × Ask cells and test diagonal ratios from 1.5:1 to 4.0:1.
Synthetic data
ANIMATED FIGURE
Same strikes, two assumed dealer signs
Model
0%
WHAT TO SEESwitch the assumed sign: the strikes stay where they are; only the modelled hedging direction changes. Synthetic strikes.
Synthetic data
ANIMATED FIGURE
Dealer-sign convention comparison
Model
0%
WHAT TO SEECompare naive OI sign, dealers short all options, and customer-flow-classified sign across the same strikes.
Synthetic data
ANIMATED FIGURE
Stop-market vs stop-limit through a gap
Definition
0%
WHAT TO SEEBoth orders trigger. The stop-market fills at the first price after the gap; the stop-limit is skipped and stays unfilled. Synthetic prices.
Synthetic data
ANIMATED FIGURE
Matching pauses at a price band
Definition
0%
WHAT TO SEEPrice runs into the band edge; matching pauses, then resumes inside a wider band. Synthetic prices.
Synthetic data
ANIMATED FIGURE
A bracket follows the position
Definition
0%
WHAT TO SEEThe entry fills, a stop and a target attach, one fills and the other cancels (OCO). Synthetic prices.
Synthetic data
ANIMATED FIGURE
Deflated Sharpe Ratio decay across N trials
Model
0%
WHAT TO SEEWatch the Deflated Sharpe Ratio fall as the number of tested strategies increases.
Synthetic data
ANIMATED FIGURE
Best-of-N in-sample winner vs out-of-sample flatline
Model
0%
WHAT TO SEEDraw N zero-edge strategies, highlight the best in-sample equity curve, and follow its out-of-sample continuation.
Synthetic data
ANIMATED FIGURE
Garden of forking paths & Benjamini–Hochberg FDR
Model
0%
WHAT TO SEE288 zero-edge hypothesis tests produce ~14 false discoveries at 5%, which Benjamini–Hochberg filters out.
Synthetic data
ANIMATED FIGURE
Anchored walk-forward windows & stitched OOS curve
Model
0%
WHAT TO SEECompare stitched out-of-sample equity across rolling windows under zero edge vs true positive edge.
Synthetic data
ANIMATED FIGURE
CSCV & Probability of Backtest Overfitting (PBO)
Model
0%
WHAT TO SEEPartition return history into S blocks and measure how often the in-sample winner ranks below median out of sample.
Synthetic data
ANIMATED FIGURE
A famous level vs 50 random prices
Lore
0%
WHAT TO SEEEach session: does price come back to the level? The naked POC and 50 random prices at the same distance end at 85% and 84%. Synthetic path, shaped to the published rates.
Synthetic data
ANIMATED FIGURE
Place your own level
Definition
0%
WHAT TO SEEMove your level closer or further. A random level at the same distance is counted on the same 100 sessions: the two counts stay close, and both fall as the distance grows. Synthetic sessions.
Synthetic data
ANIMATED FIGURE
Held rate: prior-day levels vs a distance-matched placebo
Definition
0%
WHAT TO SEEDiscovery and holdout side by side. The intervals overlap in both splits. Synthetic numbers for the demo.
Synthetic data
ANIMATED FIGURE
Marked to the settlement every day
Definition
0%
WHAT TO SEECash moves only at each settle by the day’s change times the point value. When it falls under the maintenance line, a margin call follows. Synthetic prices and margin.
Synthetic data
ANIMATED FIGURE
0%
WHAT TO SEE
ANIMATED FIGURE
0%
WHAT TO SEE
ANIMATED FIGURE
Tag the touch before you see the next bar
House rule
WHAT TO SEEThe future stays hidden. When a bar touches a level, tag it held, broke or skip before moving on; tags cannot be changed afterwards. Synthetic session.
Synthetic data
ANIMATED FIGURE
Explains the same bar, not the next
PlausibleOne trader's study
0%
WHAT TO SEEBar delta lines up with the same bar return (tight cloud). Shift one bar ahead and the cloud loses its shape. Synthetic points, shaped to published R².
Synthetic data
ANIMATED FIGURE
The futures day in New York and Vietnam time
Definition
0%
WHAT TO SEEThe regular session opens at 09:30 ET: 20:30 in Vietnam in US summer, 21:30 in US winter. Toggle daylight time to see the shift.
ANIMATED FIGURE
Release windows on the clock
House rule
0%
WHAT TO SEEScheduled releases pulse as the hand passes; shaded windows are the minutes you stay flat. Event names are generic; volume shape synthetic.
Synthetic data
ANIMATED FIGURE
When option data is live
Definition
0%
WHAT TO SEEIndex option data updates from 09:30 to 16:15 ET. Outside that band it is the frozen last snapshot, which covers most of the Vietnam morning.
ANIMATED FIGURE
How far a normal day travels
Definition
0%
WHAT TO SEESimulated days drop into the ±0.5σ and ±1σ bands from the settle. About 38% close inside ±0.5σ and 68% inside ±1σ. Synthetic days, normal model.
Synthetic data
ANIMATED FIGURE
Touch probability is mostly distance
Model
0%
WHAT TO SEESlide the level toward price: the chance of a touch climbs the same way whatever the level is called. Normal model, synthetic days.
Synthetic data
ANIMATED FIGURE
Contracts from a dollar risk budget
Definition
0%
WHAT TO SEE$200 of risk with a 20-point stop and one tick of slippage buys 4 MNQ; an example cap of 3 cuts it to 3. Worked example.
ANIMATED FIGURE
The same 1σ day in dollars
Definition
0%
WHAT TO SEEAt IV 20 a 1σ day on a 20,000 index is about 250 points: about $5,000 on NQ and $500 on MNQ. Move IV and the contracts a fixed budget buys change. Synthetic prices.
