Lesson Animation Studio · step 1 of 5 · design directions

Three animation design directions for Blue Monkee Trading — in forex’s own tokens.

The locked sequencing says produce design directions as stills and get them approved before any pipeline gets built. These are stills — plus a live motion stage for each, because a still cannot tell you whether the motion language is right. Every caption, formula and quiz option here is the platform’s real content, pulled from the live bundle.

Rendered from live forex content and tokens, verified 2026-09-12: bundle assets/index-CC_JtUMl.js, tokens assets/index-B3CWNkZF.css — limegreen-eagle-892117.hostingersite.com. No invented lesson copy: every caption, formula and quiz option on this page is the platform's own text.

baseline & delta A · desk blueprint B · liquid glass C · editorial instructor the decision

BASELINE What the animation tier looks like today

Forex already populates its animation slots — one animatedSequence, one motionGraphic, one scrollyStory, one liveChartDemo, one simulatorEmbed, one tabbedDeepDive, each used exactly once, each rendering as step cards. Below is the shape of that renderer: labels and captions are real, the card styling is the app’s own, the static pattern glyph stands in for the pattern “again” — the learner sees a picture of a candle, labelled.

TODAY — animatedSequence RENDERS AS STEP CARDSReconstruction of the current renderer’s data shape and card styling — not a screenshot.Four cards · one static SVG pattern each · no market context · autoPlay: false1. DOWNTRENDPrice has been falling —sellers are firmly incontrolCARD 1 OF 42. SELL-OFF INTENSIFIESSellers push pricedramatically lowermid-period — fear peaksCARD 2 OF 43. BUYERS REJECT LOWSAggressive buyers step in,pushing price back nearthe openCARD 3 OF 44. CONFIRMATIONThe next candle closesbullish — the reversal isconfirmedCARD 4 OF 4Each card is a still. The caption is the content; the candle is decoration.The learner never sees price move, never sees the pattern form, and cannot be asked anything.

Not a screenshot — a reconstruction of the renderer’s data shape ({label, caption, pattern}, autoPlay: false) in the app’s own card tokens.

Today (step cards)Proposed (animated clip + gate)
Price contextnone — one isolated glypha real 6-candle series at the lesson’s own scenario
The pattern formsnever — the shape is drawn, then captionedyes — the format is built in front of the learner
The measurement the lesson teachesasserted in prose (“at least 2x the body”)measured on screen with a dimension bracket
Mastery gatedoes not exist in forexthis lesson’s own quiz question, on the timeline
Change costedit + rebuild the JS bundleone spec file → clip → runtime manifest, no rebuild

DIRECTION A Desk Blueprint

A measured, annotated schematic. The candle is treated as an object with dimensions: hairlines, mono numerals, and cyan dimension brackets that measure the exact feature the lesson is talking about. It teaches like a trading desk explainer, not like a slide.

precisionmono numeralsmeasurementcyan = attention only
background220 30% 98%
canvas
foreground222 35% 12%
ink
primary224 84% 34%
deep navy
accent224 84% 28%
navy, darker
chart-cyan189 100% 45%
the attention accent
chart-green158 84% 39%
bull candle
chart-red0 72% 51%
bear candle
border222 20% 88%
hairline
sidebar224 60% 10%
rail / dark panel
muted-fg220 12% 42%
secondary type

The same real section, storyboarded — Module 2 · Lesson 3 — Hammer & Hanging Man · 25 min

Four stills, one per step of the lesson’s own animatedSequence. These are the frames a reviewer approves; the stage below plays them.

MODULE 2 · LESSON 3 — HAMMER & HANGING MANanimatedSequence — upgraded from step cardsEUR/USD · 1H · 6 candlesSTEP 01 / 041.09251.09621.09991.10361.10731.1110SELLERS IN CONTROLREADINGSTEP 01TRENDDOWNSELLERSIN CONTROLSIGNAL—1. DOWNTRENDPrice has been falling — sellers are firmly in controlMODULE 2 · LESSON 3 — HAMMER & HANGING MANBLUE MONKEE TRADING
STEP 01 · 1. DOWNTREND — Price has been falling — sellers are firmly in control
MODULE 2 · LESSON 3 — HAMMER & HANGING MANanimatedSequence — upgraded from step cardsEUR/USD · 1H · 6 candlesSTEP 02 / 041.09251.09621.09991.10361.10731.1110FEAR PEAKSREADINGSTEP 02MOMENTUMSELL-OFFMID-PERIOD LOW1.0984SIGNAL—2. SELL-OFF INTENSIFIESSellers push price dramatically lower mid-period — fear peaksMODULE 2 · LESSON 3 — HAMMER & HANGING MANBLUE MONKEE TRADING
STEP 02 · 2. SELL-OFF INTENSIFIES — Sellers push price dramatically lower mid-period — fear pe…
MODULE 2 · LESSON 3 — HAMMER & HANGING MANanimatedSequence — upgraded from step cardsEUR/USD · 1H · 6 candlesSTEP 03 / 041.09251.09621.09991.10361.10731.1110READINGSTEP 03BODY13 pipsLOWER SHADOW34 pipsRATIO2.6 × body3. BUYERS REJECT LOWSAggressive buyers step in, pushing price back near the open — the long lower wick isformedMODULE 2 · LESSON 3 — HAMMER & HANGING MANBLUE MONKEE TRADING
STEP 03 · 3. BUYERS REJECT LOWS — Aggressive buyers step in, pushing price back near the ope…
MODULE 2 · LESSON 3 — HAMMER & HANGING MANanimatedSequence — upgraded from step cardsEUR/USD · 1H · 6 candlesSTEP 04 / 041.09251.09621.09991.10361.10731.1110ENTER LONG ABOVE 1.1034READINGSTEP 04CLOSE1.1058ENTRYabove 1.1034SIGNALCONFIRMED4. CONFIRMATIONThe next candle closes bullish — the reversal is confirmed. Enter long above theHammer's highMODULE 2 · LESSON 3 — HAMMER & HANGING MANBLUE MONKEE TRADING
STEP 04 · 4. CONFIRMATION — The next candle closes bullish — the reversal is confirmed…

Motion

MODULE 2 · LESSON 3 — HAMMER & HANGING MANanimatedSequence — upgraded from step cardsEUR/USD · 1H · 6 candlesSTEP 01 / 041.09251.09621.09991.10361.10731.1110SELLERS IN CONTROLREADINGSTEP 01TRENDDOWNSELLERSIN CONTROLSIGNAL—1. DOWNTRENDPrice has been falling — sellers are firmly in controlMODULE 2 · LESSON 3 — HAMMER & HANGING MANBLUE MONKEE TRADING1.09251.09621.09991.10361.10731.1110FEAR PEAKSREADINGSTEP 02MOMENTUMSELL-OFFMID-PERIOD LOW1.0984SIGNAL—2. SELL-OFF INTENSIFIESSellers push price dramatically lower mid-period — fear peaksMODULE 2 · LESSON 3 — HAMMER & HANGING MANBLUE MONKEE TRADING1.09251.09621.09991.10361.10731.1110READINGSTEP 03BODY13 pipsLOWER SHADOW34 pipsRATIO2.6 × body3. BUYERS REJECT LOWSAggressive buyers step in, pushing price back near the open — the long lower wick isformedMODULE 2 · LESSON 3 — HAMMER & HANGING MANBLUE MONKEE TRADING1.09251.09621.09991.10361.10731.1110ENTER LONG ABOVE 1.1034READINGSTEP 04CLOSE1.1058ENTRYabove 1.1034SIGNALCONFIRMED4. CONFIRMATIONThe next candle closes bullish — the reversal is confirmed. Enter long above theHammer's highMODULE 2 · LESSON 3 — HAMMER & HANGING MANBLUE MONKEE TRADINGPLAY

Hover the stage (or press PLAY) to run the 4-step sequence. Same content, same grid — only the motion language differs between directions.

Scene type 2 — formula

FORMULAPosition Size FormulaLots = Account Risk ($) ÷ (Stop Loss pips × Pip Value)ACCOUNT RISK$10,000 × 1% = $100STOP LOSS50 pipsPIP VALUE$10 per standard lotPOSITION SIZE$100 ÷ (50 × $10) = 0.20 lotsmeasured · worked example in mono
REAL SECTION · “Position Size Formula” — Lots = Account Risk ($) ÷ (Stop Loss pips × Pip Value)
PAUSED — MASTERY GATETIMELINE FROZEN · HOLD 3.0 sSTEP 03 · BUYERS REJECT LOWSThe lower shadow of a Hammer should be at least:AEqual to the bodyB2x the body length✓ correctC3x the body lengthDHalf the body length
THE MASTERY GATE forex does not have today — question text taken verbatim from this lesson’s own quiz array.

When to use it

The default. Best for pattern, chart, candle anatomy and formula sections — anything where a number or a distance is the point.

When not to

Avoid for emotional/psychology copy: the measurement grid can feel clinical when the subject is fear or discipline.

Motion spec

ElementMoveTime
candle bodydraw-on stroke + mono ticks.55s
annotationdimension bracket extends.5s
captiontype-block rise, mono0.5s
step changecross-fade, never a slide.38s
dwell / stepauthor-set3.4s

Easing cubic-bezier(.22,1,.36,1). No bounce, no spin, no zoom-off-brand. The pause gate freezes the timeline and holds 3.0–4.0s.

DIRECTION B Liquid Glass

Built out of the product's own surface language — the app's glass card, gradient wash, soft shadow and the navy→cyan accent gradient. The animation looks like it shipped inside Blue Monkee because it is made of the same parts the app already uses.

product-nativeglass cardgradient railglow on the decisive candle
background220 30% 98%
canvas
foreground222 35% 12%
ink
primary224 84% 34%
deep navy
accent224 84% 28%
navy, darker
chart-cyan189 100% 45%
the attention accent
chart-green158 84% 39%
bull candle
chart-red0 72% 51%
bear candle
border222 20% 88%
hairline
sidebar224 60% 10%
rail / dark panel
muted-fg220 12% 42%
secondary type

The same real section, storyboarded — Module 2 · Lesson 3 — Hammer & Hanging Man · 25 min

Four stills, one per step of the lesson’s own animatedSequence. These are the frames a reviewer approves; the stage below plays them.

MODULE 2 · LESSON 3 — HAMMER & HANGING MANanimatedSequence — upgraded from step cardsEUR/USD · 1H · 6 candlesSTEP 01 / 0401DOWNTREND02SELL-OFF INTENSIFIES03BUYERS REJECT LOWS04CONFIRMATION1. DOWNTRENDtrend: downPrice has been falling — sellers are firmly in controlMODULE 2 · LESSON 3 — HAMMER & HANGING MANBLUE MONKEE TRADING
STEP 01 · 1. DOWNTREND — Price has been falling — sellers are firmly in control
MODULE 2 · LESSON 3 — HAMMER & HANGING MANanimatedSequence — upgraded from step cardsEUR/USD · 1H · 6 candlesSTEP 02 / 0401DOWNTREND02SELL-OFF INTENSIFIES03BUYERS REJECT LOWS04CONFIRMATION2. SELL-OFF INTENSIFIESmid-period low 1.0984Sellers push price dramatically lower mid-period — fear peaksMODULE 2 · LESSON 3 — HAMMER & HANGING MANBLUE MONKEE TRADING
STEP 02 · 2. SELL-OFF INTENSIFIES — Sellers push price dramatically lower mid-period — fear pe…
MODULE 2 · LESSON 3 — HAMMER & HANGING MANanimatedSequence — upgraded from step cardsEUR/USD · 1H · 6 candlesSTEP 03 / 0401DOWNTREND02SELL-OFF INTENSIFIES03BUYERS REJECT LOWS04CONFIRMATION3. BUYERS REJECT LOWS34 pips · 2.6 × bodyAggressive buyers step in, pushing price back near the open —the long lower wick is formedMODULE 2 · LESSON 3 — HAMMER & HANGING MANBLUE MONKEE TRADING
STEP 03 · 3. BUYERS REJECT LOWS — Aggressive buyers step in, pushing price back near the ope…
MODULE 2 · LESSON 3 — HAMMER & HANGING MANanimatedSequence — upgraded from step cardsEUR/USD · 1H · 6 candlesSTEP 04 / 0401DOWNTREND02SELL-OFF INTENSIFIES03BUYERS REJECT LOWS04CONFIRMATION4. CONFIRMATIONenter above 1.1034The next candle closes bullish — the reversal is confirmed.Enter long above the Hammer's highMODULE 2 · LESSON 3 — HAMMER & HANGING MANBLUE MONKEE TRADING
STEP 04 · 4. CONFIRMATION — The next candle closes bullish — the reversal is confirmed…

Motion

MODULE 2 · LESSON 3 — HAMMER & HANGING MANanimatedSequence — upgraded from step cardsEUR/USD · 1H · 6 candlesSTEP 01 / 0401DOWNTREND02SELL-OFF INTENSIFIES03BUYERS REJECT LOWS04CONFIRMATION1. DOWNTRENDtrend: downPrice has been falling — sellers are firmly in controlMODULE 2 · LESSON 3 — HAMMER & HANGING MANBLUE MONKEE TRADING01DOWNTREND02SELL-OFF INTENSIFIES03BUYERS REJECT LOWS04CONFIRMATION2. SELL-OFF INTENSIFIESmid-period low 1.0984Sellers push price dramatically lower mid-period — fear peaksMODULE 2 · LESSON 3 — HAMMER & HANGING MANBLUE MONKEE TRADING01DOWNTREND02SELL-OFF INTENSIFIES03BUYERS REJECT LOWS04CONFIRMATION3. BUYERS REJECT LOWS34 pips · 2.6 × bodyAggressive buyers step in, pushing price back near the open —the long lower wick is formedMODULE 2 · LESSON 3 — HAMMER & HANGING MANBLUE MONKEE TRADING01DOWNTREND02SELL-OFF INTENSIFIES03BUYERS REJECT LOWS04CONFIRMATION4. CONFIRMATIONenter above 1.1034The next candle closes bullish — the reversal is confirmed.Enter long above the Hammer's highMODULE 2 · LESSON 3 — HAMMER & HANGING MANBLUE MONKEE TRADINGPLAY

Hover the stage (or press PLAY) to run the 4-step sequence. Same content, same grid — only the motion language differs between directions.

Scene type 2 — formula

POSITION SIZE FORMULALots = Account Risk ($) ÷ (Stop Loss pips × Pip Value)Account risk$10,000 × 1% = $100Stop loss50 pipsPip value$10 per standard lotPosition size$100 ÷ (50 × $10) = 0.20 lots“This formula ensures that regardless of where your stop loss is, you always riskthe same dollar amount.”
REAL SECTION · “Position Size Formula” — Lots = Account Risk ($) ÷ (Stop Loss pips × Pip Value)
PAUSED — MASTERY GATETIMELINE FROZEN · HOLD 3.0 sSTEP 03 · BUYERS REJECT LOWSThe lower shadow of a Hammer should be at least:AEqual to the bodyB2x the body length✓ correctC3x the body lengthDHalf the body length
THE MASTERY GATE forex does not have today — question text taken verbatim from this lesson’s own quiz array.

When to use it

Hero moments, motionGraphic, liveChartDemo and simulator embeds — and anywhere the clip sits on top of an app page, because it reads as the same surface.

When not to

Avoid when the concept needs scale or measurement — the card frame competes with a long series.

Motion spec

ElementMoveTime
candle bodyspring grow from baseline.55s
annotationpill tag rises.5s
captionchip strip slides up0.5s
step changecross-fade, never a slide.38s
dwell / stepauthor-set3.4s

Easing cubic-bezier(.22,1,.36,1). No bounce, no spin, no zoom-off-brand. The pause gate freezes the timeline and holds 3.0–4.0s.

DIRECTION C Editorial Instructor

Type-led teaching. One idea per beat, a navy rail holding your place, the lesson's own caption as the headline, and a single cyan underline as the only motion device. The chart stays small as a specimen — the voice does the teaching.

type-ledone idea per beatnavy railsingle accent device
background220 30% 98%
canvas
foreground222 35% 12%
ink
primary224 84% 34%
deep navy
accent224 84% 28%
navy, darker
chart-cyan189 100% 45%
the attention accent
chart-green158 84% 39%
bull candle
chart-red0 72% 51%
bear candle
border222 20% 88%
hairline
sidebar224 60% 10%
rail / dark panel
muted-fg220 12% 42%
secondary type

The same real section, storyboarded — Module 2 · Lesson 3 — Hammer & Hanging Man · 25 min

Four stills, one per step of the lesson’s own animatedSequence. These are the frames a reviewer approves; the stage below plays them.

MODULE 2 · LESSON 3 — HAMMER & HANGING MANanimatedSequence — upgraded from step cardsEUR/USD · 1H · 6 candlesSTEP 01 / 0401Downtrend02Sell-off Intensifies03Buyers Reject Lows04ConfirmationBLUE MONKEE TRADINGFOREX · M2 L3STEP 1 · DOWNTRENDPRICE HAS BEENFALLINGSellers are firmly in controlSPECIMENFIG. 01PATTERNSPINNING TOPMODULE 2 · LESSON 3 — HAMMER & HANGING MAN
STEP 01 · 1. DOWNTREND — Price has been falling — sellers are firmly in control
MODULE 2 · LESSON 3 — HAMMER & HANGING MANanimatedSequence — upgraded from step cardsEUR/USD · 1H · 6 candlesSTEP 02 / 0401Downtrend02Sell-off Intensifies03Buyers Reject Lows04ConfirmationBLUE MONKEE TRADINGFOREX · M2 L3STEP 2 · SELL-OFF INTENSIFIESSELLERS PUSH PRICEDRAMATICALLY LOWERFear peaks mid-periodSPECIMENFIG. 02PATTERNHANGING MANMODULE 2 · LESSON 3 — HAMMER & HANGING MAN
STEP 02 · 2. SELL-OFF INTENSIFIES — Sellers push price dramatically lower mid-period — fear pe…
MODULE 2 · LESSON 3 — HAMMER & HANGING MANanimatedSequence — upgraded from step cardsEUR/USD · 1H · 6 candlesSTEP 03 / 0401Downtrend02Sell-off Intensifies03Buyers Reject Lows04ConfirmationBLUE MONKEE TRADINGFOREX · M2 L3STEP 3 · BUYERS REJECT LOWSBUYERS REJECTTHE LOWSPrice is pushed back near the open — the long lower wick isformedSPECIMENFIG. 03PATTERNHAMMERSmall body near the top; lowershadow at least 2× the body;little or no upper shadow.MODULE 2 · LESSON 3 — HAMMER & HANGING MAN
STEP 03 · 3. BUYERS REJECT LOWS — Aggressive buyers step in, pushing price back near the ope…
MODULE 2 · LESSON 3 — HAMMER & HANGING MANanimatedSequence — upgraded from step cardsEUR/USD · 1H · 6 candlesSTEP 04 / 0401Downtrend02Sell-off Intensifies03Buyers Reject Lows04ConfirmationBLUE MONKEE TRADINGFOREX · M2 L3STEP 4 · CONFIRMATIONTHE NEXT CANDLECLOSES BULLISHThe reversal is confirmed — enter long above the Hammer'shighSPECIMENFIG. 04PATTERNCONFIRMATION CANDLEMODULE 2 · LESSON 3 — HAMMER & HANGING MAN
STEP 04 · 4. CONFIRMATION — The next candle closes bullish — the reversal is confirmed…

Motion

MODULE 2 · LESSON 3 — HAMMER & HANGING MANanimatedSequence — upgraded from step cardsEUR/USD · 1H · 6 candlesSTEP 01 / 0401Downtrend02Sell-off Intensifies03Buyers Reject Lows04ConfirmationBLUE MONKEE TRADINGFOREX · M2 L3STEP 1 · DOWNTRENDPRICE HAS BEENFALLINGSellers are firmly in controlSPECIMENFIG. 01PATTERNSPINNING TOPMODULE 2 · LESSON 3 — HAMMER & HANGING MAN01Downtrend02Sell-off Intensifies03Buyers Reject Lows04ConfirmationBLUE MONKEE TRADINGFOREX · M2 L3STEP 2 · SELL-OFF INTENSIFIESSELLERS PUSH PRICEDRAMATICALLY LOWERFear peaks mid-periodSPECIMENFIG. 02PATTERNHANGING MANMODULE 2 · LESSON 3 — HAMMER & HANGING MAN01Downtrend02Sell-off Intensifies03Buyers Reject Lows04ConfirmationBLUE MONKEE TRADINGFOREX · M2 L3STEP 3 · BUYERS REJECT LOWSBUYERS REJECTTHE LOWSPrice is pushed back near the open — the long lower wick isformedSPECIMENFIG. 03PATTERNHAMMERSmall body near the top; lowershadow at least 2× the body;little or no upper shadow.MODULE 2 · LESSON 3 — HAMMER & HANGING MAN01Downtrend02Sell-off Intensifies03Buyers Reject Lows04ConfirmationBLUE MONKEE TRADINGFOREX · M2 L3STEP 4 · CONFIRMATIONTHE NEXT CANDLECLOSES BULLISHThe reversal is confirmed — enter long above the Hammer'shighSPECIMENFIG. 04PATTERNCONFIRMATION CANDLEMODULE 2 · LESSON 3 — HAMMER & HANGING MANPLAY

Hover the stage (or press PLAY) to run the 4-step sequence. Same content, same grid — only the motion language differs between directions.

Scene type 2 — formula

FORMULAPOSITION SIZE FORMULA—MODULE 5 · LESSON 2 · POSITION SIZINGRISK THE SAMEDOLLARS, EVERY TRADELots = Account Risk ($) ÷ (Stop Loss pips × Pip Value)Account risk$10,000 × 1% = $100Stop loss50 pipsPip value$10 per standard lotPosition size$100 ÷ (50 × $10) = 0.20 lots
REAL SECTION · “Position Size Formula” — Lots = Account Risk ($) ÷ (Stop Loss pips × Pip Value)
PAUSEDMASTERYGATEtimeline frozenhold 3.0 sSTEP 03 · BUYERS REJECT LOWSThe lower shadow of a Hammer should be at least:AEqual to the bodyB2x the body length✓ correctC3x the body lengthDHalf the body lengthquestion text is the lesson’s own quiz array entry — nothing invented
THE MASTERY GATE forex does not have today — question text taken verbatim from this lesson’s own quiz array.

When to use it

Psych / mindset / mistakes content — forex's longest text blocks — and the callout, proTip and socratic sections.

When not to

Avoid for chart-reading lessons: the visual is deliberately subordinate here.

Motion spec

ElementMoveTime
candle bodyspecimen pin, no draw—
annotationcyan underline draws.5s
captionline-by-line reveal.07s/line
step changecross-fade, never a slide.38s
dwell / stepauthor-set3.4s

Easing cubic-bezier(.22,1,.36,1). No bounce, no spin, no zoom-off-brand. The pause gate freezes the timeline and holds 3.0–4.0s.

DECISION What I’d actually do

These are not three candidates for one slot. They are three registers of the same system, and the honest recommendation is to take Desk Blueprint as the default, add Liquid Glass for the hero and simulator moments, and use Editorial Instructor for the text-heavy lessons — the three map onto the three kinds of section forex actually has, and mixing them is what stops 57 lessons of clips looking like a template.

RegisterDefault forSection typesCount today
Aprecision: numbers, distances, patternspattern, chart, formula, animatedSequence10 + 11 + 6 + 1
Bhero + interactive embedsmotionGraphic, liveChartDemo, simulatorEmbed1 + 1 + 1
Cvoice: mindset, mistakes, rulescallout, proTip, socratic, openResponse49 + 18 + 3 + 1

Approve as-is

Pick A (or A+B) and step 2 starts: tokens registered in the render image, scene library, one spec → one real MP4.

Steer one direction

Tell me what is off — weight, cyan usage, caption placement, how much chart you want — and I re-render just that direction.

Hold off

Nothing else gets built until this is called. No pipeline is started around a look that hasn’t been approved.