MARGINLAB:
AN EXHIBIT ABOUT
A LEVER
“The friction is the point.”
Project Classification
Financial Simulation / Interactive Documentary
Tech Stack / Armament
- → SvelteKit (Core Engine)
- → D3.js (Visual Matrix)
- → Tailwind CSS (Structural UI)
Current Status
Archived -- Critical Stress
The
Mandate
Equity (Eq) equals total asset value (V) minus liabilities (L). The absolute bedrock of leverage mechanics.
(L - C) / (S x (1 - MM))
The exact mathematical threshold where structural failure initiates. MM = Maintenance Margin.
EXECUTE LIQUIDATION PROTOCOL
The Philosophy
of Friction
Modern brokerage interfaces are designed to eliminate friction. They abstract away the mechanics of leverage behind single-click buttons and smooth progress bars. This is an architectural lie. Leverage is inherently structural; it is the act of resting massive weight on a very narrow fulcrum.
Therefore, the multiplier must be visible. MARGINLAB forces the user to interact with the underlying math. When an equity curve dips below maintenance requirements, the interface doesn't just flash a warning; it structurally degrades.
- ▶ State Management (cash, holdings, margin)
- ▶ Margin Calculations (Reg T, Portfolio)
- ▶ Scenario Simulations (12 stress tests)
- ▶ Trade Suggestions (Finder)
- • Portfolio Viewer
- • Margin Calculator
- • Trade Finder
- • Stress Test Engine
Reactivity model perfectly mirrors continuous financial data streams.
Gamification distracts from the severity of structural failure.
No real money. The stakes are pedagogical, not financial.
Early user testing revealed that simple red text was insufficient to convey 'Margin Call'. Users treated it like a minor error, akin to a typo in a form.
We needed to introduce friction. A failing margin state shouldn't just look bad; it should feel fundamentally broken. We started disabling non-essential UI elements to force focus on the crisis.
The final implementation utilizes harsh, jagged charting lines and high-contrast red fills that bleed out of their containers when margin limits are breached. The layout breaks its own rules.
1export function calculateMarginRequirement(2 positionValue: number,3 leverageRatio: number4): number {5 // The brutally simple math that ruins weekends.6 if (leverageRatio <= 0) return positionValue;78 const initialMargin = positionValue / leverageRatio;9 const maintenanceMargin = initialMargin * 0.75; // Hardcoded pain point10 return {11 initial: initialMargin,12 maintenance: maintenanceMargin,13 isCritical: function(currentEquity: number) {14 return currentEquity < maintenanceMargin;15 }16 };17}The Refusal
List
Defining the product by explicitly stating what it refuses to be. Subtraction as a primary design principle.
- xNo Gamified Progress Bars
- xNo "Soft" Warnings
- xNo Hidden Fees in Math
- xNo Compromise on Friction