UC_4.16.1: Level-Up Cinematic & Certificate (LIVE)

---

Document References

---

1. Overview

Surfaces and states covered by this UC (client design pack, 2026-08-26):

The unauthenticated public route /milestone/[unique-id] — the page a stranger lands on after clicking a shared link, and its Tap to View Milestone gate — sits inside the same WBS item but is not covered by this document; it is a separate deliverable, not yet documented in this repo. This UC specifies what the share controls emit and, since 2026-09-03, what the link they emit unfurls to in a social feed (BR_4.16.1.18 — the <meta> contract and the two static OG images the backend must produce, both of which are generated at promotion time and are therefore a producer-side obligation of this feature, not a rendering concern of the public page). The public-route document specifies what the recipient sees after the click. All three surfaces consume the same stored payload (Ref: BR_4.16.1.4).

Note on the shared cinematic component. The overlay used by entry point B is the same standalone public share component that the public route mounts — one component, two hosts (Source: [LUC-UI-07], 2026-09-03). It builds its read-only clone from the snapshot inside itself and does not depend on which tab is rendered behind it.

2. Trigger

• Entry point A — automatic. A LEVEL_PROMOTION WebSocket event arrives while the trader is authenticated in the Dashboard (Ref: BR_4.16.1.2).
• Entry point A' — deferred. The trader logs in and the backend reports at least one promotion whose motion has never been played (Ref: BR_4.16.1.5).
• Entry point B — on demand. The trader opens the Career tab from the persistent sidebar (Ref: UC_4.1.2 §2) and the Latest certificate panel mounts, or activates [Replay Video] / [View Certificate] inside it. Neither control navigates anywhere — the trader stays on the Career tab for the whole of it (Ref: [LUC-UI-07], BR_4.16.1.17).

3. Pre-conditions

• The trader is authenticated and the account type is LIVE. A SIM trader has no certificate surface and no Career tab data — Career & HR exists only once the trader is contracted (Ref: [HR-DEF-01], BR_4.16.1.1).
• At least one promotion has been processed. The promotion mechanics themselves are owned by STAGE 6 and are stated here only as context: the middleware detects Net_Equity >= Profit_Target for the trader's current level, emits PROFIT_TARGET_HIT, and Flow 4 performs the promotion — locking and liquidating, resetting the ledger, looking up the next level's parameters from Table A (Forex) or Table B (Futures), writing the on-chain receipt (Step 9), setting Current_Level = Next_Level (Step 10) and re-enabling trading. The first SIM → LIVE promotion runs through Flow 3H instead. Nothing in this UC re-derives, re-validates or re-calculates any of it.
• The JSON state snapshot for that promotion exists. The backend captured it at the exact millisecond LEVEL_PROMOTION fired, straight from the execution core, whether or not the trader was logged in (Ref: [LUC-BIZ-02], BR_4.16.1.4).
• The certificate payload is retrievable — GET /certificate returns {url, polygon_tx_hash, promotion_date, bonus_awarded, capital_allocation}, and Current Level Detail supplies Level and Title. polygon_tx_hash may be null at this point (Ref: BR_4.16.1.12).

4. Post-conditions

• The certificate for the trader's newest level has been displayed at least once, and its motion is marked as played so it does not replay on the next login (Ref: BR_4.16.1.5).
• After the auto-play path closes, the Dashboard has re-fetched and is showing live data again, not the snapshot (Ref: BR_4.16.1.4).
• Any share URL the trader emitted points at the token matching the Redacted version toggle state at the moment of the click (Ref: BR_4.16.1.13).

5. Basic Flow — Entry Point A: automatic play on promotion

1. Flow 4 (or Flow 3H for the first SIM → LIVE promotion) completes the promotion and the backend emits LEVEL_PROMOTION {event: "PROMOTION", old_level, new_level, timestamp} over the WebSocket channel. In the same operation the backend stores the JSON state snapshot and mints the on-chain receipt (Ref: BR_4.16.1.4, BR_4.16.1.12).
2. The frontend receives the event and immediately force-redirects the trader to the Command tab, whatever tab they were on. The sequence always starts from the Command tab interface (Ref: [LUC-UI-04], BR_4.16.1.2). This redirect belongs to this entry point only — the manual replay of §6 never navigates (Ref: [LUC-UI-07]). ⏳ Whether the client still wants it here at all, given the overlay is self-contained, is §10 item 15.
3. The frontend fetches the stored snapshot and mounts a read-only clone of the Command tab from it. From this instant the trader is no longer looking at live data — every figure on screen is the figure they hit to pass (Ref: BR_4.16.1.4).
4. [If the milestone is an Associate Track pass, Level 1 or Level 2] → Motion (1) runs: steps 5 and 6 are skipped and the sequence goes straight to step 7 — the certificate writes itself onto the screen with its stamp (Ref: BR_4.16.1.3).
5. [If the milestone is Level 3 or higher] → Motion (2), pre-liquid phase: the PnL gauge node pulses (opacity/brightness) and an SVG overlay traces a gold stroke along the Bento Grid gaps until the layout intersections are lit (Ref: BR_4.16.1.6).
6. The alpha-channel WebM / HEVC liquid-gold layer plays over the clone. The clone stays visible through the transparent channel until the gold covers the screen completely (Ref: BR_4.16.1.6). The cinematic audio track starts synchronously with this playback (Ref: BR_4.16.1.7).
7. On the revealed certificate background, the top layer writes itself: the Lottie frame and handwritten signature stroke, then the trader's data injected into the DOM with a staggered Framer Motion reveal, then the dynamically generated QR code (Ref: BR_4.16.1.6, BR_4.16.1.9, BR_4.16.1.12). Writing/stamping SFX are tied to the reveal events, so their duration matches the actual length of this trader's name (Ref: BR_4.16.1.7).
8. The left box of the certificate resolves its Title / Amount / Subtitle from the trader's milestone, asset class and compensation track; the right box resolves the capital allocation of the level being entered (Ref: BR_4.16.1.10, BR_4.16.1.11).
9. The sequence ends on the certificate modal in its final state: the full certificate plus [Replay animation] and [Share Level Up Video] (Ref: §9.1).
10. [If the trader activates [Share Level Up Video]] → the button row is replaced by the expanded share menu: Share Level Up Video to: followed by LinkedIn, X, Facebook, Reddit and Copy Link, then [Download], with the Redacted version toggle below (Ref: BR_4.16.1.14, BR_4.16.1.13).
11. [If the trader activates [Replay animation]] → the sequence restarts from step 3 against the same snapshot. No new request is made and no state is written.
12. [If the trader closes the modal] (the ✕ control) → the modal and the read-only clone are both unmounted, the frontend re-fetches the live dashboard, and the Command tab returns to the current state. The motion is marked played (Ref: BR_4.16.1.4, BR_4.16.1.5).

6. Alternative Flow — Entry Point B: the Latest certificate panel on the Career tab

1. The trader selects Career in the persistent sidebar (Ref: UC_4.1.2 §2).

2. The Latest certificate panel calls GET /certificate and renders the certificate as a still frame — the final state of the sequence, with no motion, no audio and no dashboard clone behind it (Ref: BR_4.16.1.2).

3. The panel renders the control set in two rows (Ref: BR_4.16.1.17, §9.2):

   • Row 1 — Share Level Up Video label followed by the five share targets, already expanded (no second click needed on this surface).
   • Row 2 — [View Certificate], the Redacted version toggle, [Download Certificate], [Replay Video].

4. [If the trader activates [Replay Video]] → the cinematic plays on the Career tab itself, in four steps and with no navigation at any point (Source: [LUC-UI-07], Adrian Stack, 2026-09-03 — "there is absolutely no reason to force a background route change to the Command tab first"):

   1. Trigger — the trader activates [Replay Video] while on the Career tab.
   2. Mount — the full-screen cinematic overlay mounts directly on top of the current UI by z-index, obscuring the dashboard entirely. The read-only clone is built from the stored snapshot inside the overlay; the Career tab underneath is left mounted and untouched.
   3. Playback — the WebM video, the audio and the Lottie certificate sequence execute — i.e. §5 steps 3 → 9 against the stored snapshot.
   4. Dismissal — the trader activates [Close]; the overlay unmounts and the trader is returned seamlessly to the Career tab exactly where they left off — same scroll position, same panel state, no re-fetch of the tab.

   It does not re-fire any backend event, does not change the played flag, and does not trigger a React Router transition.

5. [If the trader activates [View Certificate]] → the certificate modal opens directly at its final state, without motion or audio.

6. [If Reduce Motion is enabled on this device] → [Replay Video] is not rendered at all, and the panel is reachable only through step 5's still/modal path (Ref: BR_4.16.1.8).

7. Share, Copy Link, Redacted version and Download behave identically to the modal — the same rules, the same URLs, the same export (Ref: BR_4.16.1.13 → BR_4.16.1.16).

7. Exceptional Flow

• polygon_tx_hash is null — the mint is still in the background retry queue. The certificate is issued and displayed immediately regardless; Flow 4 does not halt. The QR block renders its pending state and the hash line carries no destination until the network recovers and the hash is written (Ref: BR_4.16.1.12).
• GET /certificate fails (network / 5xx / timeout) — the Latest certificate panel renders its error state and the toast Ref: TE-SYS-01 is displayed. The rest of the Career tab is unaffected; nothing on this panel is retried automatically.
• The session expires while the panel is mounted (HTTP 401) — toast Ref: TE-AUTH-01, then redirect to the Auth0 login.
• The WebSocket drops during the sequence — the sequence is not interrupted. It is rendering from a snapshot already held in the client, so it runs to completion without the socket. Reconnection follows Ref: CR-14.
• The browser blocks audio autoplay on the authenticated surface — the sequence still plays; only the audio is suppressed until a user gesture occurs. See §10 item 4, which asks the client whether the authenticated path needs its own interaction gate.
• The clipboard write is refused by the browser (permission denied / insecure context) — no URL is copied and the success toast is not shown (Ref: BR_4.16.1.15).
• A second LEVEL_PROMOTION arrives while a sequence is playing — the running sequence is not interrupted; the newer promotion is queued and handled by the "latest only" rule at the next opportunity (Ref: BR_4.16.1.5).

8. Business Rules

BR_4.16.1.1: This UC Owns the Certificate Only — and Only for LIVE

The Career & HR widget carries several tiles. Only the certificate is specified here. Employment status, Current level, Base salary, Benefits, Vacation days, Next pay date, [Manage Payouts] and [View in Rippling] are owned by UC_4.16.2 — a read-only mirror of Rippling — the dashboard renders whatever value Rippling returns and deep-links out for any action, with no PTO logging, no accrual calculation and no write path on our side (Source: [HR-DEF-01], Adrian Stack, 2026-08-15 — "This is managed in Rippling, do not worry about it. You are just reading in the current value in this screen."). Those tiles are named here only so the panel's neighbours are unambiguous.

The certificate surface is LIVE-only. A SIM/Evaluation trader has no Rippling record and no Career tab; the SIM celebration path is a different scope. Note however that the first certificate a LIVE trader ever holds is the Associate Track Cleared one, issued at the SIM → LIVE promotion (Ref: BR_4.16.1.10).

BR_4.16.1.2: Two Entry Points, One Component — and Exactly Where Motion Plays

Entry point A navigates. Entry point B does not. On A the frontend must first redirect the trader to the Command tab, regardless of which tab they were on when the event arrived; the animation always starts from the Command tab interface (Source: [LUC-UI-04], Adrian Stack — Figma comment). The trader is never asked to navigate there themselves, and the sequence never starts on top of the Journal, Performance, Community or Settings screen.

On B2 the opposite rule applies, and it is explicit: the cinematic plays directly on the Career tab and must not route to the Command tab first (Source: [LUC-UI-07], Adrian Stack, 2026-09-03 — "Your intuition is exactly right. Please play it directly on the Career tab… This prevents unnecessary React router navigation and creates a much faster, smoother experience."). The overlay is a full-screen z-index layer over whatever is currently rendered, it obscures the dashboard entirely, and on [Close] it unmounts and hands the trader back to the Career tab unchanged. Nothing behind the overlay is unmounted, re-mounted or re-fetched.

There is one cinematic component — and it is the same standalone public share component the public /milestone/[unique-id] route mounts (Source: [LUC-UI-07]). Entry points A, A' and B2 mount it identically; because it builds its own read-only clone from the snapshot, it is indifferent to what is rendered behind it, which is precisely why B2 needs no route change. The three differ only in what caused the mount and in where the trader is returned to.

⏳ These two rulings share one component but point opposite ways on routing. If the overlay is genuinely self-contained, the forced redirect on A has no more justification than the one the client just removed from B — and the [LUC-UI-06] DND-state registry (built to survive that redirect) would lose most of its purpose. Raised with the client as §10 item 15; written here as A still redirects, per the standing [LUC-UI-04] ruling.

BR_4.16.1.3: Two Motion Tiers, Decided by the Milestone

(Source: User journey - Certificate and Left Box.docx §Certificate Trigger and Animation Requirements.) The tier is decided by the level passed, not the level entered. The certificate content itself is identical in both tiers — only the lead-in differs.

BR_4.16.1.4: The Cinematic Never Renders Over Live Data

The backend generates and stores a complete JSON state payload at the exact millisecond LEVEL_PROMOTION fires, captured straight from the execution core, whether or not the trader is logged in (Source: [LUC-BIZ-02], 2026-08-24). It is not an image snapshot.

The payload must carry everything needed to mount the read-only clone (Source: User journey - Certificate and Left Box.docx §1 JSON State Capture):

The backend assigns the payload two distinct UUIDs: a Public Token mapping to the raw payload, and a Redacted Token mapping to the scrubbed one (Ref: BR_4.16.1.13).

Consequences that are binding on the frontend:

• The cinematic mounts over the historical clone, never over live state — "The trader must see the exact metrics they hit to pass."
• The same stored payload feeds the authenticated path and the public /milestone/[unique-id] route, so an external visitor sees exactly the figures the trader passed on.
• When the animation and certificate finish, the frontend must re-fetch and return the dashboard to its current live state. The clone is never left mounted.
• 🔴 GET /certificate as specified today ({url, polygon_tx_hash, promotion_date, bonus_awarded, capital_allocation}) does not carry this payload. A snapshot field or a dedicated endpoint must be added and shared by both paths — see §10 item 1.

BR_4.16.1.5: Pending Motions, Consecutive Promotions, and Playing Once

• Because trading is unlocked on Rithmic / TraderEvolution / MT5 immediately after a promotion is processed, a trader can hit consecutive targets without ever opening the dashboard. In that case only the latest motion, for the highest achieved tier, is played — "Do not force them to sit through consecutive videos." (Source: [LUC-BIZ-02].)
• ⚠️ "Latest only" applies to the MOTION alone. The skipped levels' snapshots and certificates are still stored — each level's certificate still exists and is still shareable. Only the video is not replayed.
• A motion plays once automatically. After it has played it must not replay on the next login; it is thereafter reachable only through [Replay Video] on the Career tab (Ref: BR_4.16.1.17).
• ⏳ The mechanism for "already played" is not yet confirmed by the client ([LUC-BIZ-04]). BA proposal: a played_at timestamp on the snapshot record, written when the modal closes at §5 step 12. See §10 item 2. Without it the cinematic replays on every login.
• The Latest certificate panel shows the certificate of the trader's most recent level only. No archive list, no per-level browsing — see §10 item 5.

BR_4.16.1.6: The Composite Render Stack — Four Layers, Fixed Order

The sequence is not a video file. It is a composite React component rendering live in the browser, which is what allows every share link to preserve that trader's own dashboard state (Source: Level Up Cinematic Scene Handling.pdf §1; User journey - Certificate and Left Box.docx §2–§6).

Performance budget: under 300 KB for the sequence, with the Lottie and WebM/HEVC assets unloaded once it completes (Source: StackTrading_Technical_Proposal_v2.4.docx — Level-Up Cinematic budget). The 16:9 lock and the mobile rotate overlay are stated in the source for the shared/public surface; whether the authenticated dashboard replay adopts the identical lock is §10 item 6.

BR_4.16.1.7: Audio Is Orchestrated Client-Side, in Two Channels

Audio ships as separate asset files and is orchestrated in the client to sync with the composite layers (Source: Level Up Cinematic Scene Handling.pdf §1):

• Base channel — the main cinematic track is triggered synchronously with the start of the WebM background playback (Ref: BR_4.16.1.6 layer 3).
• Dynamic channel — UI SFX (writing / scratching, the stamp) are tied to the Framer Motion text-reveal events, so the audio duration matches the render time of that specific trader's data. A long name and a short name do not produce the same SFX length.
• Interaction Gate — the public share URL must initialise on a premium Tap to View Milestone state to capture the user gesture that browser autoplay policy requires, which then calls AudioContext.resume() to unmute. That gate belongs to the public route, which is not covered by this document. Whether the authenticated auto-play needs an equivalent gate is unresolved — see §10 item 4.

BR_4.16.1.8: Reduce Motion Is Device-Local and Removes the Replay Path

Reduce Motion has no backend API. It is frontend-only, stored in localStorage, scoped to the device, never synced (Source: [CTRL-EP-02], 2026-08-24 — "A user may need to reduce motion on a weak travel laptop but keep the animations active on their powerful home desktop."). POST /accessibility-preference is dropped and reduce_motion is removed from the ui_preferences payload.

Effects on this UC:

• [Replay Video] is hidden — not disabled — while Reduce Motion is on (Source: User journey - Certificate and Left Box.docx §Certificate Buttons — "Replay Video (muted color, hidden if on Reduce Motion)"). The certificate stays fully reachable through [View Certificate].
• The cinematic's own guard reads the local value, per the scope directive of [CTRL-DEF-01]: disable continuous motion (infinite loops, background movement, pulsing), disable parallax/depth, and simplify heavy positional animations into fast opacity fades or instant state renders.
• The unauthenticated /milestone/[unique-id] route runs on a stranger's machine and therefore has no trader localStorage; it must fall back to the browser's CSS prefers-reduced-motion — a rule owned by the public-route document, not by this one.
• ⏳ The default on a brand-new device is still open ([CTRL-BIZ-02]) — see §10 item 7.

BR_4.16.1.9: Certificate — Fixed Content

These elements render on every certificate regardless of milestone, asset class or track:

⚠️ Note the two different levels on one certificate: element 6 names the level the trader is entering (Level 7 - Trader), while the left box's title line names the level they just passed (Level 6 Performance Bonus). This is intentional and must not be normalised.

BR_4.16.1.10: Certificate — Dynamic Text Mapping of the Left Box

The left box renders three lines, conditionally on the trader's exact tier, asset class and compensation track (Source: User journey - Certificate and Left Box.docx §Certificate Dynamic Text Mapping):

Resolution rules:

• [X] is the level passed, not the level entered.
• Row 3 is Futures only and its amount is a sum — the level bonus plus the market data refund of Flow 4 Step 13. Forex traders at Level 2 fall to row 4.
• Rows 5–7 are selected by the trader's compensation track: compensation_track from the HR Integration endpoint / the Users table distinguishes Standard from Flex; International is the third branch. ⏳ Which field carries the US-vs-International discriminator is not stated in any source — see §10 item 8.
• $[Bonus Amount] is bonus_awarded from GET /certificate, formatted per Ref: CR-11 (comma thousands separator, max 2 decimals) after rounding per Ref: CR-13.
• All three lines are display-only. None is a link, a tooltip target or an interactive element.
• Overflow: all three lines Wrap text. The name element (Ref: BR_4.16.1.9 element 4) also wraps — it is never truncated, because a truncated name would defeat the certificate's purpose and would break the redaction blur's visual weight.

BR_4.16.1.11: The Right Box Always Maps to the Level Being Entered

The right box renders the label Capital Allocation and, beneath it, the allocation of the level the trader is entering — expressed as the Futures E-Mini contract equivalent (e.g. 17 E-Mini Contracts, from Table B) or the Forex notional (Max_Forex_Notional, from Table A), whichever matches the trader's asset class (Source: User journey - Certificate and Left Box.docx — "The Right side of course maps to the level they are entering (Forex Notional or Futures E-Mini equivalent)"). The value arrives as capital_allocation from GET /certificate; the frontend does not look up Table A/B itself.

BR_4.16.1.12: The QR Code Is a Cryptographic Receipt, and It May Not Exist Yet

• The QR code is generated dynamically in code, never shipped as a static asset, and resolves to the public PolygonScan URL for the specific on-chain transaction hash of this milestone (Source: Level Up Cinematic Scene Handling.pdf §1). The hash comes from polygon_tx_hash (GET /certificate) — for the public route it comes from the Verification field of the stored payload (Ref: BR_4.16.1.4), so both surfaces resolve to the same transaction.
• The text beside the QR renders the destination in the form polygonscan.com/tx/[transaction_hash]. It is a label, not a hyperlink — verification is performed by scanning the code. ⏳ Whether the client wants that text clickable is §10 item 10.
• Pending state. If Polygon is down or the transaction fails, the certificate is still issued immediately for the trader to view, with no hash yet; Flow 4 does not halt and the mint is pushed into a background retry queue that writes the hash once the network recovers (Source: client confirmation, meeting 2026-08-05). While polygon_tx_hash is null the QR block renders its pending state and produces no scannable destination. The rest of the certificate is unaffected.
• The trader is never blocked from sharing or downloading because the hash is missing.

BR_4.16.1.13: Redacted version — Two Tokens, Server-Side Scrubbing, Client-Side Blur

The toggle exists so the trader can post the milestone publicly without exposing their legal name.

Default state: OFF.

Binding rules (Source: User journey - Certificate and Left Box.docx §Redacted or Unredacted Sharing):

• Redaction happens on the server, before the payload leaves it. "Personally Identifiable Information never touches the network." The React component stays completely unaware of the redaction logic — this is deliberate, to make DOM inspection useless as an exploit.
• On the recipient's side, is_redacted: true makes the frontend animate the dummy string and apply a heavy frosted-glass filter: blur(12px) to that specific Framer Motion text element. is_redacted: false renders the name normally.
• Open Graph parity. When a social platform's crawler queries the Redacted Token, the backend must serve the redacted static OG image — the name layer blurred before the file is exported — so the feed unfurls a privacy-safe card before anyone clicks through. The token also selects a different og:title, one that carries no name at all. The full contract, including the second image the backend must pre-generate and the canvas it is composed on, is BR_4.16.1.18.
• On the trader's own surfaces (the certificate modal and the Career panel), switching the toggle ON applies the same blur to the on-screen name as a WYSIWYG preview of what a recipient will see, alongside switching which URL the share and copy controls emit (Source: client design pack 2026-08-26, redacted frame).
• The toggle governs share and copy only. It writes nothing to the server, changes nothing about the certificate record, and is not persisted between visits — every mount starts at OFF.
• 🟡 The redacted variant of the video-motion share was called "ideal" by the client but never firmly committed ([LUC-UI-02]). It is written here as in scope because the same two tokens serve both; see §10 item 11.

BR_4.16.1.14: The Share Targets Always Share the Video Link

• Exactly five targets: LinkedIn · X · Facebook · Reddit · Copy Link (Source: [LUC-UI-01]).
• All four social links share the video — that is, the hosted shareable URL that mounts the live cinematic. None of them shares a bare still image. The high-resolution certificate still appears only as the og:image unfurl inside the social feed, which routes the reader to the live sequence when clicked (Source: Level Up Cinematic Scene Handling.pdf §2).
• Activating a social icon triggers that platform's native share intent / draft post, pre-populated with the trader's unique public URL, opened in a new tab. The Dashboard does not compose the post text, does not authenticate against the platform, and receives no callback — whether the trader actually posts is invisible to us.
• The URL carried is the Public or the Redacted token per the toggle at the moment of the click (Ref: BR_4.16.1.13).
• The label above the row is Share Level Up Video. The former wording Share Milestone is withdrawn and must not appear anywhere in the UI (Source: User journey - Certificate and Left Box.docx §Changes item 1).

BR_4.16.1.15: Copy Link

Activating the Copy Link control copies the same public URL directly to the system clipboard and shows the lightweight toast Ref: TS-CERT-01. No modal opens, no navigation occurs and nothing is written server-side. If the browser refuses the clipboard write, nothing is copied and the toast is not shown (Ref: §7).

BR_4.16.1.16: Download Certificate — One Fixed Format, Exported Client-Side

• Activating [Download Certificate] triggers a client-side export of the static final frame of the certificate, downloaded straight to the trader's device (Source: Level Up Cinematic Scene Handling.pdf §3). It is not a server round-trip and it is not the legacy S3 PDF at url.
• The format is fixed by the system, with no picker — the client's ruling was "pick one that is most suitable, user choice is out of scope… likely whatever is higher fidelity, which is JPEG I believe" (Source: [LUC-UI-03]).
• BA reading, pending confirmation: the export is WYSIWYG — it captures the frame as currently rendered, so with Redacted version ON the downloaded file carries the blurred name. See §10 item 12.

BR_4.16.1.17: The Control Set and Its Two Layouts

Both surfaces expose the same capabilities; only the layout differs.

Certificate modal (end of the sequence) — a two-step reveal:

1. Final state: [Replay animation] · [Share Level Up Video].
2. After [Share Level Up Video]: Share Level Up Video to: + the five targets · [Download] · Redacted version toggle.

Career tab, Latest certificate panel — the client asked for the same components reused and consolidated, accepting that it becomes two rows (Source: User journey - Certificate and Left Box.docx §Certificate Buttons):

Two conditions attach to row 2:

• [View Certificate] is the row's optional member — the client's own note is "IF we are close to keeping it 1 row, this one can be removed". It is specified here as present; if it is dropped, the still certificate in the panel becomes the only view path and nothing else changes.
• [Replay Video] is hidden whenever Reduce Motion is on (Ref: BR_4.16.1.8).

Visual emphasis (which controls are gold and which are muted) is a design concern and is deliberately not specified here; the client's instruction — the five share icons become the emphasised controls and [Download Certificate] becomes muted — is recorded for the design team in §10 item 13.

BR_4.16.1.18: The Link Preview — Token-Driven <meta> Tags and Two Pre-Composed 1200×630 OG Images

Everything a social feed shows before the click is static. Crawlers do not execute JavaScript, so none of them can render the React / Framer Motion sequence (Source: [LUC-UI-08], Adrian Stack, 2026-09-03 — "Because social media scrapers do not run JavaScript, they cannot render our React/Framer Motion sequence."). The unfurl is therefore entirely a backend obligation: static markup plus a static file, both produced ahead of time.

a. The <meta> tags are resolved from the token payload, per token. The two tokens of BR_4.16.1.13 do not merely swap the image — they swap the title as well:

[X] is the level being entered (Ref: BR_4.16.1.11). The redacted title is not a blurred or masked name — it is a different sentence: the trader's name must not appear in the Redacted Token's markup in any form, in any tag.

b. Two static images are generated per milestone, not one. "Yes, every shared link requires generating a static certificate image dynamically." Because the certificate data is hyper-personalised, the Node.js backend generates a static image of the final certificate state at the moment the milestone is reached, and serves that URL in <meta property="og:image"> on the public share route:

Both are produced unconditionally, for every milestone — not on demand when the trader flips the toggle, and not at share time. The redacted file must already exist the instant a trader toggles Redacted version on and posts, or the platform unfurls the real name.

c. The image is composed, not exported bare. Scrapers expect a 1200×630 px canvas; exporting the certificate alone lets platforms crop the top and bottom and cut off the gold stamp or the signature. The backend composes the final JPG from a base template:

The client asks Sotatek to confirm the backend will use a composition tool — Puppeteer or Node Canvas were named — to merge the layers and add the shadow before exporting the final OG image URL (Ref: §10 item 17).

d. Where it sits in the pipeline. Generation is triggered at promotion, so it belongs beside the snapshot write of BR_4.16.1.4 — a new step in Flow 4, and in Flow 3H for the first SIM → LIVE certificate (§10 item 3). ⚠️ Note the collision with BR_4.16.1.12: polygon_tx_hash may still be null at that instant, which would freeze both images with a permanently pending QR block. The retry queue must re-compose both once the hash lands — see §10 item 16.

Scope note. This BR specifies what the backend produces and serves in the <head>. What the recipient sees after clicking through — the public page, its Tap to View Milestone gate, its cinematic — remains the separate public-route deliverable (§1).

9. Screen Description

9.1 Level certificate modal

9.2 Career tab — Latest certificate panel

Only the certificate panel is described. The Employment status, Current level, Base salary, Benefits, Vacation days, Next pay date, [Manage Payouts] and [View in Rippling] tiles on the same tab are out of scope here — Ref: UC_4.16.2 §9, BR_4.16.1.1.

10. Open Items Pending Client / BE Confirmation

11. Build Ownership

---

Changelog