# Home - TradeCJ AI Trading Automation Platform

Canonical: [https://tradecj.com/](https://tradecj.com/)

The home page introduces TradeCJ as an AI-powered trading automation platform for Forex, stocks, CFDs, crypto, commodities, and broker-connected execution.

## Primary Page Content
- Hero message for AI trading automation, real-time execution, and broker-connected control.
- Platform positioning around Order Matrix, AutoTgt, TrailSL, Capital SL, account dashboard, market analytics, and no-code automation.
- Broker setup guidance for MT5, Pepperstone, Exness, HFM, RoboForex, Angel One, Upstox, Zerodha, and compatible API workflows.
- Internal paths into features, pricing, courses, documentation, FAQ, broker integration, Explore Engine, and early access.

## PDF-Aligned Page Content

The following source blocks were extracted from the provided PDFs and mapped to this canonical page.



### Website Documentation.pdf pages 11-14 - Website navigation and platform overview

PDF page 11:
1. Website Navigation

PDF page 12:
-

PDF page 13:
Platform Overview

PDF page 14:
About Trade CJ

The operating system of global capital, visualised in real time. Master your trades
with advanced risk management and automation.

TradeCJ is a real-time, execution-focused trading platform designed to give active
traders complete control over their entries, exits, and risk across both the Indian
Stock Market and the Forex Market. It replaces slow, manual order placement with
smart automation, precision execution, and robust risk management tools.

What we're built on:
● Speed: Sub-50ms execution across all major Forex pairs. When the market
moves, TradeCJ is already there.
● Discipline: Rules-based automation removes emotion from the equation.
Your strategy runs as planned, every time.
● Consistency - Same precision across the London open, New York session,
and Asian range, every session, every trade.
● Precision - Every order placed exactly where your strategy demands. No
compromise on execution.

ℹ Note
Your broker keeps your money. TradeCJ is a control layer that sits on top of your
broker; it automates your strategy. It cannot access or move your funds under any
circumstances.

Supported Markets
Indian Stock Market
NSE / BSE Options Nifty | Bank Nifty | FinNifty
Forex Market
XAU/USD | BTC/USD | ETH/USD USD/JPY | GBP/USD | EUR/USD

Supported Brokers: Any broker operating on MT5. Traders can switch
between MT5 in one click with no downtime.

### TradeCJ_ Website Logistics.pdf pages 20-24 - Homepage about TradeCJ, hero message, and SEO copy

PDF page 20:
Homepage

PDF page 21:
ABOUT TRADECJ

Built by Forex Traders, for Forex Traders

SEO Note: Section H2 naturally includes 'Forex traders' — a strong semantic signal for topical
authority.

TradeCJ was not built in a boardroom. It was built in the middle of a live trade — the kind
every Forex trader knows: a missed entry on EUR/USD, a delayed exit on GBP/JPY, an
emotional decision during a fast NFP move. We lived that friction. And we built TradeCJ to
eliminate it.
The real problem was never finding opportunities. It was executing them — with the speed,
discipline, and consistency that fast-moving currency markets demand.

"What if you never had to choose between speed and control in Forex trading?"

That question became TradeCJ. A precision-driven automated Forex trading platform built to
give you full automation speed and full manual control — on the same screen, across every
pair you trade.

What we're built on
Precision — Every order placed exactly where your strategy demands. No compromise on
execution.
Speed — Sub-50ms execution across all major Forex pairs. When the market moves,
TradeCJ is already there.
Discipline — Rules-based automation removes emotion from the equation. Your strategy
runs as planned, every time.
Consistency — Same precision across the London open, New York session, and Asian
range — every session, every trade.

Built for: Day Traders · Scalpers · Swing Traders · News Traders · Algo Strategists

"Precision Driven. Profit Focused. That's not just our tagline — it's the standard we hold
every feature to."

PDF page 22:
— The TradeCJ Team

SEO Note: About page copy naturally integrates: Forex trading software, automated Forex
platform, day traders, scalpers, swing traders, London/NY/Asian session — all strong semantic
signals for Google's Helpful Content algorithm.

PDF page 23:
HERO SECTION

PDF page 24:
HERO SECTION

Tagline
Precision Driven. Profit Focused.

Page H1 Tag (Most Important for SEO)
The Automated Forex Trading Platform Built for Precision Execution
SEO Note: H1 must contain primary keyword 'automated forex trading platform'. Keep exactly as
written for on-page SEO.

Sub-headline:
"Your broker keeps your money. TradeCJ automates your strategy.
Connect your API key, build your rules, and let the platform execute — 24/5, without you
watching the screen."

Under CTA button (small text):
"No commission. No fund custody. Your capital stays at your broker, always."

### TradeCJ_ Website Logistics.pdf pages 25-54 - Homepage visual system, hero animation, and dashboard showcase design notes

PDF page 25:
Design

PDF page 26:
HERO: MARKET NERVOUS SYSTEM

Concept

The visitor lands on a black void. Not a dark gradient. Not a navy blue. Absolute void black (#0A0A0F).
For
1.5 seconds, nothing. Then one glowing node appears at the center of the viewport — a single teal pulse
of light, 8px, breathing slowly (opacity 0.3 → 1.0, 2s cycle).

This is the first market. EUR/USD. A label appears in JetBrains Mono: "EUR/USD — ACTIVE." The label
is 10px, teal, positioned 16px below the node.
Then a second node appears. Connected to the first by a laser line — 1px, teal, 40% opacity. The line
draws itself at 200px/s. A third node. A fourth. Within 5 seconds, 50 nodes are visible, each a currency
pair, each connected to related pairs by laser lines. The network is alive. Nodes pulse. Lines pulse. Data
packets (tiny 2px dots) travel along the lines at 300px/s.
Then the camera pulls back. The viewport scales down from 1x to 0.15x over 3 seconds. The 50 nodes
become 500. The 500 become 5,000. The entire globe is now a sphere of light — a living neural
network of global capital. Currency pairs are nodes. Correlations are connections. Volume is node
brightness. Volatility is pulse frequency.
The globe rotates slowly (Y-axis, 2°/s). The camera orbits around it (Y-axis, 5°/s). The user is not
watching a demo. They are inside the market's nervous system.
Text fades in: "Markets aren't charts." — Space Grotesk, 96px, Signal White, centered, 40% opacity.
Then: "They're information flowing across civilization." — Space Grotesk, 72px, Accent Teal,
centered, 80% opacity.

A CTA appears: "ENTER THE SYSTEM →" — pill button, 48px height, Accent Teal background, Void
Black text, 16px Inter Bold, letter-spacing 2px. The button has a subtle glow (Teal, 20px blur, 30%
opacity). On hover, the glow intensifies to 60px blur, 60% opacity. The button scales 1.05x. The cursor
becomes a custom 16px teal dot.

Animation Sequence (12 seconds total)

| Time | Event | Spec |
|------|-------| |
| 0.0s | Void black screen | #0A0A0F, no elements |
| 1.5s | First node appears | 8px, teal, center viewport, pulse animation begins |
| 2.0s | Label fades in | "EUR/USD", JetBrains Mono 10px, teal, 0.5s fade |
| 2.5s | Second node + line | Draws at 200px/s, 0.3s |

PDF page 27:
| 3.0–5.0s | Nodes explode outward | 50 nodes, exponential growth, 2s |

| 5.0s | Camera pull-back begins | Scale 1.0 → 0.15, 3s, ease-out-expo |
| 5.0–8.0s | Network becomes globe | 5000 nodes, spherical distribution, 3s |
| 6.0s | First text line fades in | "Markets aren't charts.", 96px, 40% opacity, 1s fade |
| 7.5s | Second text line fades in | "They're information flowing across civilization.", 72px, 80% opacity, 1s fade
|
| 8.0s | Globe rotation begins | Y-axis 2°/s, continuous |
| 8.0s | Camera orbit begins | Y-axis 5°/s, continuous |
| 9.0s | CTA button fades in | Pill button, 0.5s fade, 0.3s scale-up spring |
| 10.0s | Ambient particles activate | 2000 particles, 0.5px–2px, teal/white, floating |
| 12.0s | Loop or hold | Hold on final frame, particles continue |

Technical Specs for UI/UX Team

•Canvas: Fullscreen WebGL canvas, `position: fixed`, `z-index: 0`

•Overlay: All UI elements (text, CTA) are DOM elements with `position: absolute`, `z-index: 10`,
`pointer-events: none` (except CTA which has `pointer-events: auto`)

• Performance: 60fps target, 30fps minimum on mobile. Use `requestAnimationFrame`. Implement

LOD (Level of Detail) — reduce node count to 500 on mobile.

• Interaction: Mouse move subtly shifts camera angle (±5°). Scroll velocity affects globe rotation

speed (faster scroll = faster rotation). Click CTA → camera zooms through the globe into the dashboard

section.

• Fallback: On low-end devices, show a pre-rendered looping video (12s, 1080p, 5MB max)

instead of WebGL.

——————————————————————————————

PDF page 28:
THE DASHBOARD SHOWCASE: 7 SCREENS IN
ORBIT

Concept

When the user clicks "ENTER THE SYSTEM" or scrolls past the hero, the camera zooms through the
globe at light speed. The globe dissolves into particles (5000 nodes explode outward, fading to 0% opacity
over 0.5s). The camera travels through the void for 1 second. Then, emerging from the particle cloud, seven
glass panels appear in a cylindrical orbit around the camera.

The user is now the center of the solar system. Seven feature screens orbit around them in a horizontal
carousel. The carousel is cylindrical — panels are arranged in a circle on the Y-axis, with the camera at the
center. The user can:

•Drag horizontally to rotate the carousel (inertia-enabled, 0.95 damping)

•Scroll to rotate the carousel (1 scroll tick = 1 panel rotation)

• Click a panel to pause rotation and zoom into that feature (panel scales to 100% viewport,

others fade to 10% opacity)

•Click outside to zoom back out

PDF page 29:
Each panel is a 960×540px glass screen floating in 3D space. The glass has:

•Background: `rgba(26,26,46,0.72)`

•Border: `1px solid rgba(0,212,170,0.15)`

•Border-radius: 12px

•Backdrop-filter: `blur(20px)` (on supported browsers)

•Box-shadow: `0 20px 60px rgba(0,0,0,0.60), 0 0 40px rgba(0,212,170,0.08)`

• Inner content: A stylized, exaggerated visualization of the feature (not a literal screenshot — a

cinematic representation)

Between the panels, ambient particles float — 500 per panel zone, teal and white, 1–3px, drifting at 10px/s.
The background remains Void Black with a subtle teal radial gradient at the center (5% opacity, 800px
radius).

Carousel Specs

| Parameter | Value |
|-----------| |
| Radius | 800px |
| Panel Count | 7 |
| Angle Between Panels | 360° / 7 = 51.43° |
| Panel Tilt | 12° Y-axis (toward center) |
| Z-Depth | 0 (all on same cylinder) |
| Rotation Speed | 0.3°/s (auto-play, pauses on hover) |
| Drag Sensitivity | 1px drag = 0.15° rotation |
| Inertia Damping | 0.95 per frame |
| Snap Behavior | Snap to nearest panel after drag release, 0.6s spring |
| Zoom Transition | 1.2s, cubic-bezier(0.16, 1, 0.3, 1) |

Panel Transition: Hero → Carousel

| Time | Event | Spec |
|------|-------| |
| 0.0s | User clicks CTA | Trigger transition |
| 0.0s | Globe particles explode | 5000 nodes burst outward at 500px/s, fade to 0% over 0.5s |
| 0.0s | Camera zooms forward | Z-position: 0 → 2000px, 1s, ease-in-expo |
| 0.5s | Globe fades to black | Background transitions to pure Void Black |
| 1.0s | Seven panels appear | Fade in from 0% → 100% opacity, 0.5s, staggered 0.05s each |
| 1.0s | Panels arrange into orbit | Each panel rotates from 0° to target angle, 1s, elastic ease-out |
| 1.5s | Auto-rotation begins | 0.3°/s, continuous |
| 1.5s | Ambient particles spawn | 3500 particles total, fade in over 1s |
| 2.0s | First panel label appears | Feature name + tagline, bottom of panel, 0.5s fade |

PDF page 30:
——————————————————————————————

SCREEN 1: SMART MARKET WATCH

The Visual Concept: "The Filter"

The panel shows a split universe — left side chaos, right side clarity.

Left Half (40% width): A swirling vortex of 500+ currency pair symbols — EUR, USD, GBP, JPY, AUD, CAD,
CHF, NZD, SGD, ZAR, TRY, NOK, SEK, DKK, MXN, PLN, HUF, CZK, ILS, KRW, PHP, THB, IDR, MYR, CNY,
INR, RUB, BRL, CLP, PEN, COP, ARS, VEF, UYU, PYG, BOB, BBD, BZD, XCD, TTD, JMD, BSD, HTG,
SRD, GYD, ANG, AWG, XPF, XOF, XAF, CDF, BIF, DJF, ERN, ETB, GMD, GHS, GNF, KES, KMF, LSL, LRD,
MGA, MWK, MUR, MZN, NAD, NGN, RWF, SCR, SDG, SLL, SOS, SZL, TZS, TND, UGX, ZMW, ZWL, BAM,
BGN, HRK, CYP, EEK, GIP, ISK, LVL, LTL, MTL, RON, SKK, SIT, TRL, ALL, BYR, MDL, MKD, RSD, UAH,
AZN, GEL, KZT, KGS, TJS, TMT, UZS, AMD, AOA, BDT, BTN, FJD, KHR, LAK, MMK, MNT, MOP, NPR,
PGK, VUV, WST, XAU, XAG, XPD, XPT, OIL, GAS, BTC, ETH, LTC, XRP, BCH, ADA, DOT, SOL, MATIC,
AVAX, UNI, LINK, LDO, AAVE, MKR, COMP, YFI, CRV, SUSHI, 1INCH, SNX, BAL, ZRX, KNC, REN, GRT,
AMP, FTM, NEAR, ALGO, ATOM, VET, IOTA, XTZ, XLM, EOS, TRX, BNB, DOGE, SHIB, PEPE, FLOKI,
BONK, WIF, POPCAT, MOG, TURBO, SPX, BITCOIN, MAGA, BODEN, KAMA, TRUMP, DOGE, SHIB,
FLOKI, BONK, WIF, PEPE, POPCAT, MOG, TURBO, SPX — all in a chaotic tornado.

The symbols are white, 10–14px, JetBrains Mono, scattered in a 3D vortex. They rotate slowly (Z-axis, 3°/s).
Some are red (Loss Red, 20% of them), some are grey (Data Grey, 60%), some are bright white (20%). The
vortex has a red tint at the edges — a subtle gradient from center (transparent) to edge
(rgba(255,71,87,0.10)).

A red laser divider (2px, Loss Red, 80% opacity) separates left from right.

Right Half (60% width): Absolute calm. Six currency pairs in a clean, organized list. Each pair is a glass
card (full width of right half, 48px height, 8px gap between cards). Background: rgba(26,26,46,0.40).
Border: 1px solid rgba(0,212,170,0.10). Border-radius: 8px.
The six pairs:

EUR/USD — teal up arrow, +0.45%, label "FAVOURITE" in gold pill badge
GBP/JPY — teal up arrow, +0.82%, label "TOP MOVER" in teal pill badge
XAU/USD — gold glow, +1.20%, label "ACTIVE" in white pill badge
USD/CAD — red down arrow, -0.15%, label "WATCHING" in grey pill badge
AUD/USD — teal up arrow, +0.33%, label "FAVOURITE" in gold pill badge
USD/JPY — red down arrow, -0.08%, label "WATCHING" in grey pill badge
Each card has a micro-chart on the right side — a 1-minute sparkline, 60px wide, 24px tall, showing the last
60 candles. Up candles: teal. Down candles: red. The sparkline is drawn with 1px lines, no fill.
At the top of the right half: "YOUR MARKET" — Space Grotesk, 18px, 600 weight, Accent Teal,
letter-spacing 2px. Below it: "Filtered. Focused. Ready." — Inter, 12px, 400 weight, Data Grey.

At the bottom of the right half: A teal laser line (1px, 60% opacity) draws itself from left to right (0.8s). Then a
data label appears: "500+ pairs → 6 that matter. 0.1s to switch." — JetBrains Mono, 11px, 400 weight,
Signal White, 60% opacity.

Animation (Inside the Panel)

PDF page 31:
| Time | Event | Spec |
|------|-------| |
| 0.0s | Panel appears | Fade in, 0.5s |
| 0.2s | Left vortex starts | Symbols begin rotating, 3s ramp-up |

| 0.5s | Right cards slide in | Each card slides from right (translateX: 30px → 0), 0.4s, staggered 0.1s |
| 0.8s | Red divider draws | Top to bottom, 0.6s, Loss Red |
| 1.0s | Sparklines animate | Each sparkline draws itself left-to-right, 0.8s, staggered 0.1s |
| 1.2s | "YOUR MARKET" text fades in | 0.5s |
| 1.5s | Bottom laser line draws | Left to right, 0.8s |
| 1.8s | Data label appears | 0.4s fade |
| 2.0s | Continuous | Vortex rotates, sparklines pulse with live data, cards breathe (subtle glow pulse, 3s
cycle) |

Panel Label (Below the Panel)

SMART MARKET WATCH — Space Grotesk, 24px, 600, Signal White.
"See only what moves. Trade only what matters." — Inter, 14px, 400, Data Grey.

——————————————————————————————

SCREEN 2: ADVANCED INTEGRATED
CHARTING

The Visual Concept: "The Fusion"

The panel shows the moment of fusion — two separate universes colliding into one.
Top Section (30% height): Three browser tabs floating in 3D space, angled at different rotations. Each tab is
a glass card (280×160px, tilted 15°, -10°, 5° on Y-axis). The tabs are connected by red string (1px, Loss
Red, 60% opacity) that is tangled, strained, about to snap.
Tab 1: TradingView — orange logo, a candlestick chart visible inside, label "ANALYSIS" in orange.
Tab 2: Generic Broker — grey logo, an order ticket visible inside, label "EXECUTION" in grey.
Tab 3: Spreadsheet — green icon, a risk calculator visible inside, label "RISK" in green.
The tabs are shaking (subtle 2px vibration, 0.1s interval). A red countdown timer (JetBrains Mono, 48px,
Loss Red) shows "4.3" in the center, counting down. Below it: "Seconds of delay." — Inter, 12px, Loss Red.
Transition: A teal shockwave (circular ring, 2px stroke, Accent Teal, expanding from center) blasts outward
at 500px/s. As it passes through the tabs, they shatter into glass fragments (50 pieces each, 20–40px,
exploding outward at 200px/s, rotating, fading to 0% over 0.8s). The red string snaps and dissolves.
Bottom Section (70% height): The TradeCJ Unified Chart emerges from the shattered fragments. It is a
single, massive glass panel occupying the full bottom section. The chart is a cinematic candlestick
visualization — not a standard chart, but a stylized, exaggerated version.

PDF page 32:
The chart shows a bullish engulfing pattern — the most dramatic pattern. The candles are:

•3D glass prisms (teal for up, red for down), with refraction and internal glow
•Width: 12px per candle, Height: proportional to pip range
•Wicks: 1px laser lines, teal or red
•The bullish engulfing candle is massive — 40% of chart height, glowing teal, with a golden aura
Overlaid on the chart: technical indicators as holographic layers.

•Moving Average: a smooth teal spline, 2px, glowing (4px blur, 30% opacity)

•Bollinger Bands: two teal dashed lines, 1px, 60% opacity, with a faint teal fill between them (10% opacity)

• RSI: a small panel at bottom-right (120×60px), showing the RSI line in gold, with

overbought/oversold zones in red/teal gradients

•Volume: vertical bars at the bottom, 2px wide, teal for up-volume, red for down-volume, 30% opacity

On the right side of the chart: The Order Matrix is embedded directly into the chart chrome. Not a separate
panel. It is part of the chart itself. Six buttons in a 2×3 grid:

•BUY 0.5 | SL: 20 | TP: 40 (teal, glowing)
•BUY 1.0 | SL: 30 | TP: 60 (teal)
•BUY 2.0 | SL: 50 | TP: 100 (teal, intense glow)
•SELL 0.5 | SL: 20 | TP: 40 (red, subtle)
•SELL 1.0 | SL: 30 | TP: 60 (red)
•SELL 2.0 | SL: 50 | TP: 100 (red, subtle)
Each button is a glass pill (48px height, border-radius 8px, 1px border). On hover: scale 1.05, glow
intensifies.

A teal cursor (16px dot, glowing, 20px blur) hovers over the "BUY 1.0" button. On click: a teal shockwave
ripples from the button. A laser line (2px, teal, glowing) shoots from the button to the chart, landing at the
current price level. A position marker (green triangle, 16px) appears on the chart. Stop loss (red line) and
take profit (green line) appear automatically, with dashed strokes, 1px, extending horizontally across the
chart.

A timer appears: "0.1s" — JetBrains Mono, 48px, Accent Teal, replacing the red "4.3" from the top section.

Animation (Inside the Panel)

| Time | Event | Spec |
|------|-------| |
| 0.0s | Three tabs appear | Float in from Z-depth, 0.5s, staggered 0.1s |
| 0.3s | Red string connects | Draws itself, 0.8s, tangled path |
| 0.5s | Timer starts | "4.3" counts down to "0.0", 0.8s |
| 0.8s | Tabs shake | Vibration begins, 2px, 0.1s interval |
| 1.0s | Teal shockwave | Expands from center, 500px/s, 0.5s |
| 1.0s | Tabs shatter | 50 fragments each, explode outward, 0.8s |

| 1.2s | Unified chart emerges | Fragments dissolve into teal particles, chart scales from 0.8 → 1.0, 0.6s |
| 1.5s | Chart candles draw | Left to right, 1.2s, each candle appears with a small teal flash |
| 1.8s | Indicators appear | MA draws first (0.8s), then Bollinger (0.6s), then RSI panel (0.4s), then volume
bars (0.6s) |

PDF page 33:
| 2.2s | Order Matrix appears | Buttons fade in, 0.4s, staggered 0.05s |
| 2.5s | Cursor moves to BUY 1.0 | Smooth path, 0.3s, ease-in-out |
| 2.8s | Click | Teal shockwave from button, 0.3s |
| 2.9s | Laser line shoots | From button to chart, 0.2s, 2px, teal glow |
| 3.0s | Position marker appears | Green triangle, 0.2s, spring scale |
| 3.1s | SL and TP lines appear | Dashed, draw left-to-right, 0.4s |

| 3.2s | Timer switches | "4.3" (red) → "0.1" (teal), 0.3s, color morph |
| 3.5s | Continuous | Chart breathes (candles pulse subtly, 4s cycle), indicators update, cursor idle animation
(subtle float) |

Panel Label

ADVANCED INTEGRATED CHARTING — Space Grotesk, 24px, 600, Signal White.
"Analysis and execution. One surface. Zero delay." — Inter, 14px, 400, Data Grey.

——————————————————————————————

SCREEN 3: ONE-CLICK ORDER EXECUTION

The Visual Concept: "The Sequence vs The Button"

The panel is a time-compression visualization — showing the old way (stretched) and the new way
(compressed) in the same space.
Left Side (60% width): The Old Way — a vertical timeline of 6 steps, each step a glass card (full width, 56px
height, 12px gap). The cards are arranged in a staircase — each card is offset 8px to the right from the one
above it, creating a descending visual path.
Step 1: "Click New Order" — Inter, 14px, Data Grey. Icon: mouse cursor clicking. Time: 0.0s — JetBrains
Mono, 11px, Data Grey.
Step 2: "Type Lot Size: 0.5" — Inter, 14px, Data Grey. Icon: keyboard. Time: 0.8s.
Step 3: "Type Stop Loss: 20" — Inter, 14px, Data Grey. Icon: keyboard. Time: 1.6s.
Step 4: "Type Take Profit: 40" — Inter, 14px, Data Grey. Icon: keyboard. Time: 2.4s.
Step 5: "Select Order Type" — Inter, 14px, Data Grey. Icon: dropdown menu. Time: 3.2s.
Step 6: "Click Confirm" — Inter, 14px, Data Grey. Icon: mouse cursor. Time: 4.0s.
Between each step: A red arrow (16px, Loss Red, 60% opacity) pointing down. The arrows are struggling
— they wobble, they bend, they look like they're fighting gravity.
A red vertical line (2px, Loss Red) runs down the left edge of the staircase, with tick marks at each step.
The line is uneven — it has bumps, delays, hesitation marks.
At the bottom of the staircase: A price chart showing the entry at 1.0850 and the execution at 1.0853. The
gap is highlighted with a red zone (Loss Red, 20% opacity fill). Label: "-3 PIPS SLIPPAGE" — JetBrains
Mono, 14px, Loss Red, bold.

PDF page 34:
To the right of the staircase: A red timer showing "4.3s" — JetBrains Mono, 64px, Loss Red, bold. Below it:
"Elapsed" — Inter, 12px, Loss Red.

Right Side (40% width): The New Way — a single, massive, glowing button centered in the space. The

button is 320×120px, border-radius 16px, background: linear-gradient(135deg,

rgba(0,212,170,0.90), rgba(0,240,255,0.90)). Border: 2px solid

rgba(0,212,170,0.60). Box-shadow: 0 0 60px rgba(0,212,170,0.40), 0 0 120px

rgba(0,212,170,0.20).

The button text: "BUY 1.0" — Space Grotesk, 48px, 700, Void Black, centered. Below it: "SL: 30 | TP: 60"
— JetBrains Mono, 16px, 500, Void Black, 80% opacity.

The button is alive — it has a subtle pulse (scale 1.0 → 1.02, 2s cycle, ease-in-out). The glow breathes

(opacity 0.3 → 0.6, 2s cycle). Ambient teal particles (20–30, 2–4px, floating upward at 15px/s) drift from the
bottom of the button, as if it is generating energy.

A teal cursor (16px dot, glowing) hovers over the button. On click: a massive teal shockwave (full panel
width, 3px stroke, expanding at 600px/s, 0.4s) erupts from the button. The button compresses (scale 0.95,
0.1s) then springs back (scale 1.05, 0.2s, spring).

A teal timer appears: "0.1s" — JetBrains Mono, 64px, Accent Teal, bold. Below it: "Elapsed" — Inter, 12px,
Accent Teal.

Between the two sides: A teal laser divider (2px, Accent Teal, 80% opacity) with a gradient transition —
the left side of the divider is Loss Red, the right side is Accent Teal, creating a color morph across the line.

Animation (Inside the Panel)

| Time | Event | Spec |
|------|-------| |
| 0.0s | Staircase appears | Cards slide in from left, 0.4s, staggered 0.1s |
| 0.3s | Red line draws | Top to bottom, 1.2s, uneven, Loss Red |
| 0.5s | Red arrows appear | Each arrow wobbles in, 0.3s, staggered 0.15s |
| 0.8s | Red timer starts | "4.3" counts up from 0.0, 0.8s |
| 1.0s | Price chart draws | Entry at 1.0850, execution at 1.0853, 0.6s |
| 1.2s | Red zone fills | Slippage zone, Loss Red 20% opacity, 0.4s |

| 1.5s | Button appears | Scales from 0.0 → 1.0, 0.6s, elastic ease-out |
| 1.8s | Button glow activates | Pulse + glow breathing, 2s cycle, continuous |
| 2.0s | Teal particles spawn | 20–30 particles, drift upward, continuous |
| 2.2s | Cursor moves to button | Smooth path, 0.3s |
| 2.5s | Click | Shockwave erupts, button compresses, 0.4s |
| 2.6s | Teal timer appears | "0.1", 0.3s, spring scale |

| 2.8s | Red timer fades | "4.3" → 0% opacity, 0.5s |
| 3.0s | Continuous | Button pulses, particles drift, staircase remains static (ghost of the old way) |

Panel Label

PDF page 35:
ONE-CLICK ORDER EXECUTION — Space Grotesk, 24px, 600, Signal White.

PDF page 36:
"Pre-built. Pre-configured. One tap. The trade is live." — Inter, 14px, 400, Data Grey.

——————————————————————————————

SCREEN 4: AUTOTGT & TRAILSL
(AUTOMATION SUITE)

The Visual Concept: "The Ghost Trader"

The panel shows a ghostly figure — the AI/automation layer — managing trades while the human trader is
absent.

Background: The entire panel is a dark room — a trader's desk at 3 AM. The room is Void Black, with only
the glow of screens illuminating the space. A silhouette of a trader is shown in the background, sleeping on
a couch, arms behind head, completely relaxed. The silhouette is backlit by a teal glow (Accent Teal, 20%
opacity, 200px radius), creating a halo effect.

Foreground (70% of panel): A massive P&L; dashboard — not a standard table, but a cinematic
visualization of active trades.

Five trades are shown as vertical columns (each 120px wide, 8px gap), arranged left-to-right. Each column
is a glass card with a live price chart inside (sparkline, 60 candles, 1px lines).

Trade 1: EUR/USD — LONG — current: +28 pips, target: +30. A cyan target ring (3px stroke, dashed,
pulsing) hovers at the +30 level. The price approaches the ring. The ring glows brighter as the price gets
closer. When the price hits +30: the ring explodes into 30 teal particles (2–4px, expanding outward, 0.5s,
fading). The column flashes green (Profit Green, 40% opacity, 0.3s). The P&L; updates: "+30 ■" —
JetBrains Mono, 18px, Profit Green, bold. The trade column recedes (scale 0.9, opacity 0.5, 0.5s) and moves
to a "CLOSED" section at the bottom.

Trade 2: GBP/JPY — LONG — current: +45 pips, no target (TrailSL active). A golden trailing line (2px,
Alert Gold, 60% opacity, dashed) follows the price from +15 pips (where it was locked). The line is alive — it
has a glow trail (8px blur, 20% opacity) that drags behind it like a comet tail. The price continues to +50. The
trailing line advances to +20. A label appears: "+20 LOCKED" — JetBrains Mono, 11px, Alert Gold, 80%
opacity. The price reverses to +48. The trailing line holds at +20. The price reverses to +45. Then +42. The
price approaches the trailing line. At +20: the line solidifies (from dashed to solid, 2px, Alert Gold, 100%
opacity). The trade closes automatically. The column flashes green. P&L;: "+20 ■" — Profit Green.

Trade 3: XAU/USD — LONG — current: +18 pips, target: +40 (AutoTgt). The cyan target ring is at +40, faint,
distant. The price is climbing slowly. A progress bar at the bottom of the column shows progress toward
target: 45% filled (teal, 4px height, border-radius 2px).

Trade 4: USD/CAD — SHORT — current: -5 pips, stop: -20. A red stop line (2px, Loss Red, 80% opacity) is
at the -20 level. The price is hovering near entry. A warning pulse (red glow, 8px blur, 0.5s cycle) emanates
from the stop line. The column has a subtle red tint.

Trade 5: AUD/USD — LONG — current: +8 pips, partial exit at +10 (50%), target +20. Two target rings —
one cyan at +10 (smaller, 50% opacity) and one at +20 (full opacity). The price approaches +10. The smaller
ring glows brighter. When hit: it explodes into 15 particles. The column splits visually — the top half
(representing the remaining 50%) stays at +10, the bottom half (representing the closed 50%) recedes and
shows "+5 â– " (half of +10). The remaining position continues toward +20.

Bottom Section (30% of panel): A summary dashboard — not a table, but a data sculpture.

PDF page 37:
A horizontal bar shows Total P&L;: +50 PIPS — JetBrains Mono, 32px, Profit Green, bold. The bar is a
gradient fill from left (Loss Red, 0%) to right (Profit Green, 100%), with the current position marked by a teal
diamond (12px, glowing).
Below: "5 TRADES MANAGED" — Inter, 14px, Signal White, 60% opacity. "0 MANUAL INTERVENTIONS"
— Inter, 14px, Accent Teal, 80% opacity. "3 CLOSED BY AUTOMATION" — Inter, 14px, Profit Green, 60%
opacity.
A ghostly hand (semi-transparent, teal, 20% opacity) is shown hovering over the trades — not a real hand,
but a representation of the AI. The hand has a subtle glow (teal, 15px blur, 20% opacity). It does not click. It
simply watches. The automation does not need to act. It has already acted.

Animation (Inside the Panel)

| Time | Event | Spec |
|------|-------| |
| 0.0s | Dark room appears | Fade in, 0.5s. Trader silhouette fades in, 0.8s |
| 0.3s | Teal glow behind trader | Radial gradient, 20% opacity, 200px radius, fades in 0.5s |
| 0.5s | Five trade columns appear | Slide up from bottom, 0.4s, staggered 0.15s |
| 0.8s | Trade 1 sparkline draws | 60 candles, 0.8s |
| 1.0s | Trade 1 target ring appears | Cyan, 3px, dashed, pulses, 0.3s |
| 1.2s | Price approaches target | Sparkline animates, price climbs, 1.0s |
| 1.5s | Ring glows brighter | Pulse intensity increases, 0.5s |
| 2.0s | Target hit | Ring explodes into 30 particles, 0.5s. Column flashes green, 0.3s |
| 2.2s | P&L; updates | "+30 â– " types itself, 0.3s |
| 2.3s | Trade 1 recedes | Scale 0.9, opacity 0.5, 0.5s. Moves to "CLOSED" section |
| 2.5s | Trade 2 trailing line appears | Gold, 2px, dashed, at +15, 0.3s |
| 2.8s | Price climbs | Sparkline animates, 1.0s |
| 3.0s | Trailing line advances | To +20, 0.5s. Label "+20 LOCKED" appears, 0.3s |
| 3.3s | Price reverses | Sparkline drops, 0.8s |
| 3.8s | Price hits trailing line | Line solidifies, 0.2s. Trade closes, column flashes green, 0.3s |
| 4.0s | P&L; updates | "+20 â– ", 0.3s |
| 4.2s | Summary dashboard appears | Bar draws left-to-right, 0.6s. Labels fade in, 0.4s |
| 4.5s | Ghostly hand appears | Fade in, 0.8s. Subtle float animation, continuous |
| 4.8s | Continuous | Trades 3–5 continue animating (live data simulation), target rings pulse, trailing lines
follow, progress bar fills, ghost hand floats |

Panel Label

AUTOTGT & TRAILSL — Space Grotesk, 24px, 600, Signal White.
"Set your rules. Sleep. The platform executes." — Inter, 14px, 400, Data Grey.

——————————————————————————————

PDF page 38:
SCREEN 5: REAL-TIME ACCOUNT
DASHBOARD

The Visual Concept: "The Financial Nervous System"

The panel shows the trader's financial vitals as a living, breathing organism. Not a static table. A biometric
monitor.

Background: The entire panel is a dark medical monitor — think ICU heart rate monitor, but for trading.
The background is Void Black with a subtle grid pattern (1px, Grid Line, 20% opacity, 40px spacing) — like
an EKG grid.

Center (60% of panel): A circular vital display — 360px diameter, centered. The circle is a glass ring
(2px, Glass Border, 80% opacity) with tick marks every 10° (1px, Data Grey, 40% opacity). Inside the circle:
six data nodes arranged in a hexagon pattern (each 60° apart).

Each node is a glass orb (48px diameter, border-radius 50%, 1px Glass Border, subtle glow).

Node 1 (Top): BALANCE — JetBrains Mono, 10px, Data Grey, 60% opacity. Below: "$12,450.00" —
JetBrains Mono, 18px, Signal White, bold. The orb glows white (20% opacity, 10px blur).

Node 2 (Top-right): EQUITY — JetBrains Mono, 10px, Data Grey. Below: "$12,520.00" — JetBrains Mono,
18px, Signal White, bold. The orb glows teal (20% opacity, 10px blur).

Node 3 (Bottom-right): MARGIN IN USE — JetBrains Mono, 10px, Data Grey. Below: "$2,100.00" —
JetBrains Mono, 18px, Alert Gold, bold. The orb glows gold (20% opacity, 10px blur).

Node 4 (Bottom): FREE MARGIN — JetBrains Mono, 10px, Data Grey. Below: "$10,350.00" — JetBrains
Mono, 18px, Signal White, bold. The orb glows white.

Node 5 (Bottom-left): MARGIN LEVEL — JetBrains Mono, 10px, Data Grey. Below: "596.2%" — JetBrains
Mono, 18px, Profit Green, bold. The orb glows green (20% opacity, 10px blur).

Node 6 (Top-left): LEVERAGE — JetBrains Mono, 10px, Data Grey. Below: "1:100" — JetBrains Mono,
18px, Signal White, bold. The orb glows white.

The nodes are connected by laser lines (1px, Accent Teal, 40% opacity) forming a hexagon. The lines pulse
with data packets (2px dots, teal, traveling at 80px/s around the hexagon). The pulse direction indicates data
flow — from balance → equity → margin in use → free margin → margin level → leverage → back to
balance.

Inside the hexagon: A live equity curve — a smooth spline chart showing the account's equity over the last
24 hours. The curve is teal (2px, Accent Teal, 80% opacity) with a glow fill below it (teal, 10% opacity, fading
to 0% at bottom). The curve breathes — it has a subtle pulse (stroke width 2px → 3px, 3s cycle). The current
point is marked by a glowing teal dot (8px, 20px blur, 40% opacity).

Top Section (20% of panel): A privacy toggle — the most unique element. A glass switch (80×32px,
border-radius 16px, 1px Glass Border) with a teal knob (28px, border-radius 50%). The switch is in the ON
position (knob on right, teal glow). Label: "HIDE BALANCE" — Inter, 12px, Signal White, 60% opacity, to
the left of the switch. When toggled: the six data nodes mask their values — the numbers are replaced by
"—
— —" (JetBrains Mono, 18px, Data Grey). The orbs dim (glow reduces to 5% opacity). The equity curve
flattens to a straight line (Data Grey, 1px, no glow). This demonstrates the privacy feature in real-time.

Bottom Section (20% of panel): A risk barometer — a horizontal gauge (full width, 24px height,
border-radius 12px). The gauge has three zones: SAFE (left, 0–60%, Profit Green, 20% opacity fill),
CAUTION (middle, 60–80%, Alert Gold, 20% opacity fill), DANGER (right, 80–100%, Loss Red, 20% opacity

PDF page 39:
fill). The current needle is at 15% — a teal triangle (16px, pointing up) positioned at 15% from left. The
needle has a teal glow (10px blur, 30% opacity). Label: "RISK EXPOSURE: 15% — SAFE" — JetBrains
Mono, 12px, Profit Green, 80% opacity, below the gauge.

Animation (Inside the Panel)

| Time | Event | Spec |
|------|-------| |
| 0.0s | Grid pattern fades in | 0.5s, Grid Line, 20% opacity |
| 0.3s | Glass ring appears | 2px, Glass Border, 360px diameter, 0.5s draw (circular path) |
| 0.5s | Tick marks appear | 36 marks, 0.3s, staggered 0.008s each |
| 0.6s | Data nodes appear | 6 orbs, 0.4s, staggered 0.08s, from center outward |
| 0.8s | Labels appear | JetBrains Mono 10px, 0.3s, staggered 0.08s |
| 1.0s | Values appear | Numbers count up from 0 to final value, 1.0s, JetBrains Mono 18px |
| 1.2s | Laser lines connect | Hexagon forms, 1px, 0.8s, staggered 0.1s per line |
| 1.5s | Data packets start | 2px dots, teal, 80px/s, continuous loop around hexagon |
| 1.8s | Equity curve draws | Spline chart, 24h data, 1.2s, left to right |
| 2.0s | Glow fill appears | Below curve, teal, 10% opacity, 0.5s fade |
| 2.2s | Current point dot appears | 8px, 20px blur, 0.3s, spring |
| 2.5s | Privacy toggle appears | Glass switch, 0.4s, from top |
| 2.8s | Risk barometer appears | Gauge fills left-to-right, 0.6s, zone colors fade in |
| 3.0s | Needle appears | Teal triangle, 0.3s, spring, settles at 15% |
| 3.5s | Privacy toggle switches | Knob slides left, 0.3s. Values mask to "— — —", 0.3s. Orbs dim, 0.3s. Equity
curve flattens, 0.5s |
| 4.0s | Privacy toggle switches back | Knob slides right, 0.3s. Values restore, 0.3s. Orbs brighten, 0.3s. Equity
curve restores, 0.5s |
| 4.5s | Continuous | Data packets loop, equity curve breathes, values subtly tick (live data simulation), risk
needle trembles slightly |

Panel Label

REAL-TIME ACCOUNT DASHBOARD — Space Grotesk, 24px, 600, Signal White.
"Your financial vitals. Always visible. Always protected." — Inter, 14px, 400, Data Grey.

——————————————————————————————

SCREEN 6: MULTI-PAIR INSTANT SWITCHING

The Visual Concept: "The Multiverse"

The panel shows multiple trading universes existing simultaneously — the multiverse of pairs.

PDF page 40:
Background: The panel is a dimensional void — deep space with distant nebula (subtle teal and gold
gradients, 5% opacity, 800px radius, blurred). Ambient stars (1–2px dots, white, 10% opacity, 100 total) drift
at 2px/s.
Center: Four dimensional portals (each 200×280px, border-radius 12px, 2px Glass Border) arranged in a
2×2 grid (24px gap). Each portal is a live window into a different trading universe (pair). The portals are
tilted in 3D space — top-left: -5° Y, 5° X. Top-right: 5° Y, 5° X. Bottom-left: -5° Y, -5° X. Bottom-right: 5° Y, -5°
X. This creates a dimensional depth effect.
Portal 1 (Top-left): EUR/USD — Label: "EUR/USD" — Space Grotesk, 14px, Signal White, top-left of portal.
Inside: A live candlestick chart (30 candles, 3px wide, glass prisms). The chart shows a strong uptrend.
Indicators: MA (teal spline), Bollinger (teal dashed). The portal has a teal glow (20px blur, 20% opacity).
Portal 2 (Top-right): GBP/JPY — Label: "GBP/JPY" — Space Grotesk, 14px, Signal White. Inside: A volatile
range pattern. Indicators: Fibonacci retracements (gold lines). The portal has a gold glow (20px blur, 15%
opacity).
Portal 3 (Bottom-left): XAU/USD — Label: "GOLD" — Space Grotesk, 14px, Alert Gold. Inside: A breakout
pattern — massive green candle, gold aura. The portal has an intense gold glow (30px blur, 25% opacity).
Portal 4 (Bottom-right): USD/CAD — Label: "USD/CAD" — Space Grotesk, 14px, Signal White. Inside: A
sideways consolidation — small candles, tight range. The portal has a subtle white glow (15px blur, 10%
opacity).
Animation: A teal cursor (16px dot, glowing) moves from the center to Portal 1. It hovers. The portal scales
up (1.0 → 1.1, 0.3s, spring) and its glow intensifies (30% → 50% opacity). The cursor clicks. A teal
shockwave (ring, 2px, expanding 0.3s) emanates from the portal. The cursor then moves to Portal 2 (0.3s
path). Same effect. Portal 3 (0.3s). Portal 4 (0.3s). Then back to Portal 1. This demonstrates the instant
switching — each portal is live, loaded, ready. No loading. No reset.
Between portals: Correlation lines — 1px laser lines, Data Grey, 30% opacity, connecting related pairs.
EUR/USD ↔ GBP/JPY (strong positive correlation, teal line). EUR/USD ↔ XAU/USD (inverse correlation,

gold line). USD/CAD ↔ EUR/USD (negative correlation, red line). The lines pulse with data flow (small dots
traveling along them, 50px/s).
Bottom of panel: A switch indicator — a horizontal bar with four segments (each 80px wide, 8px gap).
Each segment is a teal dot (8px) that lights up when the corresponding portal is active. The dots travel from
segment to segment as the cursor switches, leaving a teal trail (2px, 20% opacity, fading over 0.5s).

Animation (Inside the Panel)

| Time | Event | Spec |
|------|-------| |
| 0.0s | Dimensional void fades in | Nebula, stars, 0.8s |

| 0.3s | Four portals appear | Scale from 0.0 → 1.0, 0.5s, staggered 0.1s, elastic ease-out |

| 0.5s | Portal tilts apply | 3D rotation, 0.3s, staggered 0.1s |
| 0.6s | Portal labels appear | 0.3s, staggered 0.1s |
| 0.8s | Chart candles draw | Each portal's chart draws left-to-right, 0.8s, staggered 0.15s |
| 1.0s | Indicators appear | MA, Bollinger, Fibonacci, 0.6s, staggered 0.1s |
| 1.2s | Correlation lines connect | 1px, Data Grey, 0.5s, staggered 0.1s |

PDF page 41:
| 1.5s | Data packets start | Small dots on correlation lines, 50px/s, continuous |

PDF page 42:
| 1.8s | Cursor appears | Center, 16px teal dot, 0.3s, spring |
| 2.0s | Cursor moves to Portal 1 | 0.3s path, ease-in-out |

| 2.1s | Portal 1 scales up | 1.0 → 1.1, 0.3s, spring. Glow intensifies |
| 2.3s | Click | Shockwave, 0.3s |
| 2.4s | Switch indicator dot 1 lights | 8px, teal, 0.2s |
| 2.5s | Cursor moves to Portal 2 | 0.3s path |
| 2.6s | Portal 2 scales up | Same effect |
| 2.8s | Click | Shockwave |
| 2.9s | Dot 2 lights | Trail from dot 1 to dot 2, 2px, 20% opacity, 0.5s fade |
| 3.0s | Cursor moves to Portal 3 | 0.3s |
| 3.1s | Portal 3 scales up | Intense gold glow |
| 3.3s | Click | Shockwave |
| 3.4s | Dot 3 lights | Trail from dot 2 |
| 3.5s | Cursor moves to Portal 4 | 0.3s |
| 3.6s | Portal 4 scales up | Subtle white glow |
| 3.8s | Click | Shockwave |
| 3.9s | Dot 4 lights | Trail from dot 3 |
| 4.0s | Cursor returns to Portal 1 | 0.3s |

| 4.5s | Continuous | Portals breathe (subtle scale 1.0 → 1.02, 3s cycle, staggered), charts update (live data
simulation), correlation lines pulse, dots loop |

Panel Label

MULTI-PAIR INSTANT SWITCHING — Space Grotesk, 24px, 600, Signal White.
"Every pair. Live. Loaded. One click away." — Inter, 14px, 400, Data Grey.

——————————————————————————————

SCREEN 7: FUNDED ACCOUNT SETUP +
CUSTOMIZABLE DASHBOARD

The Visual Concept: "The Fortress & The Canvas"

This panel combines two features into one visual because they share the theme of control and protection.
Left Half (55%): "THE FORTRESS" — Funded Account Setup.
A 3D fortress is shown — not a cartoon castle, but a brutalist concrete structure with glowing teal laser
lines outlining its edges. The fortress is transparent — you can see inside. Inside, a trader is shown in
silhouette, calm, protected. The fortress walls have rules etched into them — not text, but data glyphs
(abstract symbols representing the prop firm rules, glowing teal, 10px, JetBrains Mono).

PDF page 43:
The fortress has three layers of walls (concentric rectangles, 12px apart), each representing a protection
layer:

Layer 1 (Outer): DAILY LOSS LIMIT — Label: "3%" — JetBrains Mono, 14px, Loss Red, on the wall. The
wall has a health bar (horizontal, 80px wide, 4px height, border-radius 2px) showing 85% fill (Loss Red). The
bar pulses slowly (opacity 0.6 → 1.0, 2s cycle).

Layer 2 (Middle): MAX DRAWDOWN — Label: "10%" — JetBrains Mono, 14px, Alert Gold. Health bar: 70%
fill (Alert Gold). Steady glow.

Layer 3 (Inner): TRADE FREQUENCY — Label: "15/DAY" — JetBrains Mono, 14px, Profit Green. Health
bar: 40% fill (Profit Green). Calm pulse.

A red attack wave (Loss Red, 20% opacity, expanding ring) approaches the fortress from the left. It hits
Layer 1. The wall flashes (Loss Red, 40% opacity, 0.2s). The health bar drops (85% → 75%, 0.3s). The wall
holds. A second wave hits. The wall holds. A third wave hits Layer 2. The wall flashes (Alert Gold). Holds.
The trader inside remains calm, arms crossed, backlit by teal glow.

A teal shield (Accent Teal, 30% opacity, 20px blur) surrounds the fortress, pulsing with each attack. The
shield repairs the walls between attacks (health bars slowly refill, 0.5% per second, teal glow).

Right Half (45%): "THE CANVAS" — Customizable Dashboard.

A blank canvas — not white, but Void Black with a subtle grid (1px, Grid Line, 10% opacity, 40px
spacing). The canvas is alive — it has a teal border (2px, Accent Teal, 40% opacity, border-radius 12px)
that breathes (opacity 0.3 → 0.6, 3s cycle).

On the canvas: dashboard sections are being assembled in real-time. Not appearing instantly — being
constructed by an invisible hand.

Step 1: A chart section (60% width, 70% height) is drawn — glass panel, border-radius 8px, 1px Glass
Border. It slides in from the left (0.4s, ease-out). Inside: a stylized candlestick chart (teal/red, 3px prisms).

Step 2: An Order Matrix section (35% width, 35% height) slides in from the right (0.4s, 0.1s delay). Inside: 6
teal buttons in a 2×3 grid.

Step 3: An Account Dashboard section (35% width, 30% height) slides in from the bottom (0.4s, 0.2s
delay). Inside: the hexagonal vital display (mini version, 200px diameter).

Step 4: A Market Watch section (full width, 20% height) slides in from the top (0.4s, 0.3s delay). Inside: 6
pair cards with sparklines.

The sections snap into place with a teal flash (3 frames, 0.1s) at each connection point. Once assembled,
the sections glow (subtle teal, 10px blur, 20% opacity) and a teal laser grid connects them — showing the
layout structure.

A layout toggle (glass switch, 80×32px, border-radius 16px) appears at the top-right. Label: "MORNING
LAYOUT" — Inter, 12px, Signal White, 60% opacity. The toggle switches to "AFTERNOON LAYOUT" — the
sections rearrange (chart moves right, matrix moves left, dashboard moves top, market watch moves
bottom) with a smooth morph (0.8s, cubic-bezier(0.16, 1, 0.3, 1)). The teal laser grid redraws itself to match
the new layout.

The toggle switches again: "NEWS TRADING LAYOUT" — sections rearrange again. Matrix becomes
dominant (50% width). Chart shrinks (30% width). Dashboard maximizes (full width, 40% height). The morph
is smooth, elegant, surgical.

Animation (Inside the Panel)

| Time | Event | Spec |

PDF page 44:
|------|-------| |
| 0.0s | Fortress appears | 3D structure, concrete texture, laser edges, 0.6s, from center outward |
| 0.3s | Trader silhouette appears | Inside fortress, backlit, 0.5s |
| 0.5s | Three wall layers appear | Concentric, 0.3s, staggered 0.1s |
| 0.6s | Rule labels appear | "3%", "10%", "15/DAY", 0.3s, staggered 0.1s |
| 0.7s | Health bars appear | 0.4s, staggered 0.1s, fill from left |
| 0.8s | Shield appears | Teal, 30% opacity, 20px blur, 0.5s |
| 1.0s | Red attack wave 1 | Expanding ring, Loss Red, 20% opacity, from left, 0.5s |

| 1.2s | Wave hits Layer 1 | Wall flashes, 0.2s. Health drops 85%→75%, 0.3s. Shield pulses, 0.3s |
| 1.5s | Wave 2 | Same, hits Layer 1 |
| 1.8s | Wave 3 | Hits Layer 2, wall flashes Alert Gold, 0.2s |
| 2.0s | Health bars repair | Slowly refill, teal glow, continuous |
| 2.2s | Canvas appears | Void Black grid, teal border, 0.4s |
| 2.4s | Chart section slides in | From left, 0.4s, ease-out |
| 2.5s | Matrix section slides in | From right, 0.4s, 0.1s delay |
| 2.6s | Dashboard section slides in | From bottom, 0.4s, 0.2s delay |
| 2.7s | Market Watch section slides in | From top, 0.4s, 0.3s delay |
| 2.9s | Snap effects | Teal flashes at connection points, 3 frames, 0.1s, staggered 0.05s |
| 3.0s | Laser grid connects | 1px, Accent Teal, 0.5s, draws between sections |
| 3.2s | Layout toggle appears | Glass switch, 0.3s, from top-right |
| 3.5s | Toggle switches to "AFTERNOON" | Knob slides, 0.3s. Sections rearrange, 0.8s, smooth morph |
| 3.8s | Laser grid redraws | Old lines fade, new lines draw, 0.6s |
| 4.2s | Toggle switches to "NEWS TRADING" | Knob slides, 0.3s. Sections rearrange, 0.8s |
| 4.5s | Laser grid redraws | 0.6s |
| 4.8s | Toggle switches back to "MORNING" | 0.3s + 0.8s morph |
| 5.5s | Continuous | Fortress pulses, shield repairs, waves attack periodically (every 5s), canvas breathes,
sections have subtle idle animations (charts update, matrix buttons pulse, dashboard vitals tick) |

Panel Label

FUNDED ACCOUNT & CUSTOM LAYOUTS — Space Grotesk, 24px, 600, Signal White.
"Protected by rules. Built by you." — Inter, 14px, 400, Data Grey.

——————————————————————————————

TRANSITIONS & INTERACTIONS

PDF page 45:
Hero → Carousel Transition

| Time | Event | Spec |
|------|-------| |
| 0.0s | User clicks CTA or scrolls | Trigger |
| 0.0s | Globe nodes explode | 5000 nodes burst outward at 500px/s, random directions, fade to 0% over 0.5s
|
| 0.0s | Text fades out | Hero text, 0.3s, opacity 1.0 → 0.0 |

| 0.0s | Camera zooms forward | Z: 0 → 2000px, 1.0s, ease-in-expo |
| 0.5s | Background transitions | Radial gradient from center (teal, 5% opacity) expands to fill viewport, 0.5s |
| 1.0s | Seven panels appear | Fade in from 0% → 100%, 0.5s, staggered 0.05s each |
| 1.0s | Panels arrange into orbit | Each panel rotates from 0° to target angle (0°, 51.43°, 102.86°, 154.29°,
205.71°, 257.14°, 308.57°), 1.0s, elastic ease-out (0.16, 1, 0.3, 1) |
| 1.5s | Auto-rotation begins | 0.3°/s, continuous |
| 1.5s | Ambient particles spawn | 3500 particles, fade in over 1.0s |
| 2.0s | Panel labels appear | Feature name + tagline, bottom of each panel, 0.5s fade, staggered 0.1s |
| 2.5s | Interaction enabled | User can drag, scroll, or click |

Panel → Detail Zoom

| Time | Event | Spec |
|------|-------| |
| 0.0s | User clicks a panel | Trigger |
| 0.0s | Auto-rotation pauses | Decelerates to 0°/s, 0.3s, ease-out |
| 0.0s | Other panels fade | Opacity 1.0 → 0.1, 0.4s, ease-out |
| 0.0s | Other panels blur | filter: blur(4px), 0.4s |
| 0.1s | Selected panel scales | From orbit position to center viewport, scale: 1.0 → 1.8, 1.2s,
cubic-bezier(0.16, 1, 0.3, 1) |
| 0.1s | Selected panel reorients | Rotation: orbit angle → 0°, 1.2s, same easing |
| 0.1s | Selected panel moves to Z: 0 | From orbit radius (800px) to Z: 0, 1.2s, same easing |
| 0.5s | Background darkens | Radial gradient center opacity: 5% → 15%, 0.8s |
| 0.8s | Detail content appears | Feature description, bullet points, CTA button, 0.5s fade, staggered 0.1s |
| 1.2s | Animation complete | Panel is now a full-screen detail view, user can interact with embedded demo |

Detail → Panel Zoom-Out

PDF page 46:
| Time | Event | Spec |
|------|-------| |
| 0.0s | User clicks outside or "Back" | Trigger |

PDF page 47:
| 0.0s | Detail content fades | 0.3s, ease-out |
| 0.1s | Selected panel scales back | Scale: 1.8 → 1.0, 1.0s, cubic-bezier(0.16, 1, 0.3, 1) |

| 0.1s | Selected panel returns to orbit | Rotation: 0° → orbit angle, 1.0s, same easing |
| 0.1s | Selected panel moves to Z: orbit radius | 1.0s, same easing |
| 0.2s | Other panels unblur | filter: blur(4px) → blur(0px), 0.5s |

| 0.2s | Other panels brighten | Opacity: 0.1 → 1.0, 0.5s, staggered 0.05s |

| 0.5s | Background lightens | Radial gradient center opacity: 15% → 5%, 0.5s |
| 1.0s | Auto-rotation resumes | Accelerates to 0.3°/s, 0.5s, ease-out |
| 1.0s | Interaction enabled | User can drag, scroll, or click again |

Drag Interaction

| Parameter | Value |
|-----------| |
| Drag Start | mousedown / touchstart on carousel area |
| Drag Move | mousemove / touchmove — carousel rotates by deltaX * 0.15° per pixel |
| Drag End | mouseup / touchend — inertia continues with 0.95 damping per frame |
| Snap | After inertia settles (< 0.1°/s), snap to nearest panel angle, 0.6s spring |
| Auto-pause | Auto-rotation pauses on drag start, resumes 2s after drag end |
| Panel Tilt | Panels tilt toward camera based on their angle (max 12° Y-axis, 5° X-axis) |

Scroll Interaction

| Parameter | Value |
|-----------| |
| Scroll Trigger | Wheel event on carousel area |
| Scroll Sensitivity | 1 tick = 51.43° rotation (one full panel) |
| Smooth Scroll | Lerp to target angle, 0.1 factor per frame |
| Scroll Snap | Always snap to nearest panel, no in-between stops |
| Auto-pause | Auto-rotation pauses on scroll, resumes 2s after scroll ends |

——————————————————————————————

RESPONSIVE BREAKPOINTS

| Breakpoint | Layout Change | Panel Size | Panel Count Visible | Notes |
|------------|---------------|------------|---------------------| |
| Desktop (>1200px) | Full carousel, 7 panels | 960×540px | 3 (current + neighbors) | Full 3D orbit, drag +
scroll |

PDF page 48:
| Laptop (992–1200px) | Compressed carousel | 800×450px | 3 | Reduced radius (600px), same interactions |

| Tablet (768–991px) | Stacked carousel | 600×338px | 1 (current full, neighbors peek) | Vertical swipe to
rotate, horizontal swipe disabled |

| Mobile (<768px) | Single panel swipe | 100% width, 56.25% height (16:9) | 1 | Full-screen swipe left/right to
switch panels. No 3D orbit. Flat horizontal scroll with snap. Auto-play every 4s. |

| Mobile Small (<480px) | Single panel, simplified | 100% width, 75% height (4:3) | 1 | Same as mobile, but
panel content is simplified (fewer elements, larger text, no 3D tilt) |

Mobile Adaptation Notes

• Hero: Pre-rendered video instead of WebGL (12s loop, 1080p, 5MB max). Fallback to static image

with CSS animation if video fails.

• Carousel: Flat horizontal scroll (CSS `scroll-snap-type: x mandatory`) instead of 3D orbit.

Panels are full-width, 16:9 aspect ratio. Swipe left/right to navigate. Snap to panel center.

• Panel Content: Simplified animations — no 3D tilt, no particle effects, no glass blur (use

solid dark backgrounds instead). Focus on the core visual concept with fewer elements.

•Interactions: Tap to zoom into panel. Tap outside to zoom out. Swipe to navigate. No drag inertia on mobile.

• Performance: Reduce particle count to 0 on mobile. Use CSS transforms only (no WebGL).

Lazy-load panel content (only render current + adjacent panels).

——————————————————————————————

PERFORMANCE & ACCESSIBILITY

Performance Budget

| Metric | Target | Maximum |

|--------|--------| |

| First Contentful Paint | < 1.5s | < 2.0s |

| Largest Contentful Paint | < 2.5s | < 3.5s |

| Time to Interactive | < 3.0s | < 5.0s |

| Total JS Bundle | < 150KB | < 250KB |

| Hero WebGL | < 50KB | < 100KB |

| Total Page Weight | < 1MB | < 2MB |

| Animation Frame Rate | 60fps | 30fps minimum |
| Memory Usage | < 100MB | < 200MB |

Accessibility Requirements

•Reduced Motion: If `prefers-reduced-motion: reduce` is detected:
•Disable globe rotation, auto-rotation, particle effects, and panel tilt
•Show static hero image (first frame of animation)
•Show static carousel (no auto-rotation, no drag inertia, click to navigate)

PDF page 49:
•All panel animations play once then stop (no continuous loops)

•Color Contrast: All text meets WCAG AA (4.5:1 minimum). Data labels use 60% opacity minimum.

• Keyboard Navigation: Tab through carousel panels. Enter to zoom. Escape to zoom out. Arrow

keys to rotate carousel.

• Screen Reader: Each panel has `aria-label` with feature name and description. Live regions

announce panel changes.

•Focus States: All interactive elements have visible 2px teal focus outlines.

• Alt Text: All decorative images (particles, backgrounds) have empty alt text. All informative visuals

(charts, data) have descriptive alt text.

——————————————————————————————

SHORTER PROMPTS JUST IN CASE: Panel Backgrounds
(Per Panel)

Screen 1 (Smart Market Watch):

> "Split screen abstract background, left side chaotic swirling vortex of white text fragments and

symbols on dark background, right side clean organized grid with teal glow, dark navy background #1A1A2E,

laser divider line, glass card aesthetic, minimalist, dark mode, futuristic, data visualization, abstract art, 8K"

Screen 2 (Advanced Charting):

> "Abstract dark background with shattered glass fragments exploding outward, teal and red color

palette, dark navy #1A1A2E, glass shards refracting light, cinematic, 8K, futuristic, minimalist, no text, dark

mode, abstract destruction and creation"

Screen 3 (One-Click Execution):

> "Abstract dark background with a single massive glowing teal button floating in center, dark navy

#1A1A2E, subtle teal particles rising from button, glass morphism, minimalist, futuristic, dark mode, 8K,

cinematic lighting, abstract UI element, no text"

Screen 4 (Automation):

> "Dark room interior, silhouette of sleeping person on couch backlit by teal glow, dark navy #1A1A2E,

cinematic lighting, moody atmosphere, minimal furniture, glass panels with glowing data in foreground,

PDF page 50:
futuristic bedroom, dark mode, 8K, no text"

Screen 5 (Account Dashboard):

> "Abstract dark background with hexagonal pattern, glowing orbs connected by laser lines, dark navy

#1A1A2E, teal and white color palette, medical monitor aesthetic, EKG grid pattern, futuristic, minimalist,

dark mode, 8K, abstract data visualization, no text"

Screen 6 (Multi-Pair):

> "Abstract dark space background with four glowing portals floating in 3D space, dark navy #1A1A2E,

teal and gold color palette, dimensional portals with glass borders, nebula and stars in background, sci-fi,

futuristic, dark mode, 8K, no text, abstract dimensional art"

Screen 7 (Funded + Layouts):

> "Abstract dark background with a transparent 3D fortress structure made of concrete and glowing

teal laser lines, dark navy #1A1A2E, brutalist architecture, inner silhouette protected, glass panels

assembling themselves, futuristic, dark mode, 8K, no text, abstract architectural visualization"

Icons & UI Elements

•Teal Cursor: 16px circle, #00D4AA, 20px blur glow, 40% opacity. PNG with alpha channel.

• Glass Card Texture: 1px border, rgba(0,212,170,0.15), border-radius 12px,

background rgba(26,26,46,0.72). CSS only, no image needed.

• Laser Line: 1px or 2px line, #00D4AA, 40% opacity, with subtle glow (box-shadow:

0 0 4px rgba(0,212,170,0.40)). CSS only.

•Particle Sprite: 2px white or teal dot, 100% opacity. CSS `box-shadow` or `radial-gradient` on a 4×4px div.

• Shockwave Ring: 2px or 3px stroke, #00D4AA, expanding circle. CSS `border-radius: 50%` with

animated scale and opacity.

• Glass Fragment: 20–40px irregular polygon, semi-transparent white/teal, with subtle refraction.

Pre-rendered PNG sprite sheet (10 variations).

• Target Ring: 3px dashed stroke, #00D4AA, border-radius 50%, pulsing scale. CSS `border: 3px

dashed #00D4AA` with animation.

•Glow Orb: 8px circle, white or teal, with 20px blur glow (box-shadow). CSS only.

——————————————————————————————

DEVELOPMENT NOTES FOR UI/UX TEAM

Tech Stack Recommendation

| Layer | Technology | Rationale |

|-------|------------| |

| Hero WebGL | Three.js + custom shaders | Proven, well-documented, performs well, large community |

| Carousel 3D | CSS 3D transforms + GSAP | CSS 3D is performant on all modern browsers. GSAP for
smooth animations and timeline control. |

| Panel Animations | GSAP + ScrollTrigger | Precise control over complex timelines, scroll-triggered
animations, excellent performance |

PDF page 51:
| Particle Effects | CSS animations (mobile) or Canvas 2D (desktop) | Keep it simple. CSS for simple
particles. Canvas 2D for more complex systems. Avoid WebGL for particles unless necessary. |
| Glass Morphism | CSS backdrop-filter: blur() + background: rgba() | Native CSS,
performant, fallback to solid colors on unsupported browsers |
| Font Loading | font-display: swap + preconnect to Google Fonts | Prevent FOIT (Flash of Invisible
Text), ensure fast text rendering |
| Image Loading | Lazy loading + WebP format + responsive images | Optimize for performance, serve
appropriate sizes |
| Build Tool | Vite or Next.js | Fast dev server, optimized builds, good DX |

CSS 3D Carousel Implementation

`css
.carousel {
perspective: 1200px;
transform-style: preserve-3d;
}
.panel {
position: absolute;
width: 960px;
height: 540px;
transform-style: preserve-3d;
backface-visibility: hidden;
/ Each panel gets a unique rotation /
transform: rotateY(var(--angle)) translateZ(800px);
}
`
`javascript
// GSAP animation for panel arrangement
panels.forEach((panel, i) => {
const angle = (360 / panels.length) * i;
gsap.set(panel, {
rotationY: angle,
z: 800,
transformOrigin: "50% 50% -800px"
});
});
// Drag rotation

PDF page 52:
drag.onDrag = () => {
rotation += drag.deltaX * 0.15;
gsap.set(carousel, { rotationY: rotation });
};
`

WebGL Hero Implementation (Three.js)

`javascript
// Scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, w/h, 0.1, 5000);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
// Nodes (5000 points)
const nodeGeometry = new THREE.BufferGeometry();
const nodePositions = new Float32Array(5000 * 3);
// Distribute on sphere surface using Fibonacci sphere algorithm
const nodeMaterial = new THREE.PointsMaterial({
color: 0x00D4AA,
size: 2,
transparent: true,
opacity: 0.8,
blending: THREE.AdditiveBlending
});
const nodes = new THREE.Points(nodeGeometry, nodeMaterial);
scene.add(nodes);
// Lines (connections between nearby nodes)
const lineGeometry = new THREE.BufferGeometry();
const lineMaterial = new THREE.LineBasicMaterial({
color: 0x00D4AA,
transparent: true,
opacity: 0.15
});
const lines = new THREE.LineSegments(lineGeometry, lineMaterial);
scene.add(lines);
// Data packets (traveling dots)

PDF page 53:
const packetGeometry = new THREE.BufferGeometry();
const packetMaterial = THREE.PointsMaterial({
color: 0x00D4AA,
size: 1.5,
transparent: true,
opacity: 0.6
});
// Animation loop
function animate() {
// Rotate globe
nodes.rotation.y += 0.002;
lines.rotation.y += 0.002;
// Update data packets along lines
updatePackets();
// Camera orbit
camera.position.x = Math.sin(time 0.5) 1500;
camera.position.z = Math.cos(time 0.5) 1500;
camera.lookAt(0, 0, 0);
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
`

Performance Checklist

•[ ] Use `will-change: transform` on animated elements
•[ ] Use `transform: translateZ(0)` to force GPU compositing
•[ ] Limit simultaneous animations to 5–7 elements per panel
•[ ] Use `requestAnimationFrame` for all JS animations (never `setInterval`)
•[ ] Debounce resize handlers (100ms minimum)
•[ ] Use Intersection Observer to pause off-screen animations
•[ ] Preload critical assets (fonts, hero textures)
•[ ] Lazy-load panel content (only render current + 1 adjacent panel)
•[ ] Use `content-visibility: auto` for off-screen sections
•[ ] Compress all images to WebP (quality 80–85)
•[ ] Use CSS animations over JS where possible (GPU-accelerated)
•[ ] Test on low-end devices (disable WebGL, use video fallback)
•[ ] Monitor Core Web Vitals (LCP, FID, CLS) in production

——————————————————————————————

PDF page 54:
CONCLUSION

This is not a product page. This is the operating system of global capital made visible.
Every pixel serves a purpose. Every animation tells a story. Every interaction creates a moment.
The user does not read about features. They experience them. They feel the speed of one-click execution.
They see the chaos of 500 pairs filtered to 6. They witness the automation managing trades while they
sleep. They touch the customizable dashboard rearranging itself. They enter the fortress of funded account
protection.
This is the level where websites stop converting and start becoming legendary.

——————————————————————————————

TradeCJ Website Design Document — Dashboard Feature Showcase
Version 1.0 — Production Ready for UI/UX Team

——————————————————————————————

TradeCJ — Website Dashboard Design Document | Version 1.0 | Production Ready