https://bridge-wallet-7it.pages.dev/assets/ANIMATED_INTRO_JOURNEY-D5swTUOi.js

1const e=`# BRIDGE Wallet — Animated Intro: Scene-by-Scene Journey
2
3> **Canonical doc:** Use [journey_animated-intro.md](./journey_animated-intro.md) for the latest narrative and engine references. This file is kept for backward links; it is no longer updated.
4
5This document describes the full-screen, no-scroll animated intro as a **sequence of scenes**: narrative, animations (Framer Motion + morphic), transitions, and wallet app mockup behavior. It is the single source of truth for the landing journey and user awareness flow.
6
7---
8
9## Overview
10
11| Scene | Index | Name | Duration (auto) | Purpose |
12|-------|--------|------|------------------|---------|
13| 1 | 0 (intro) | **Hero — Teaser** | ~3.2s then phase switch | Centered headline + value props; no mockup. |
14| 2 | 0 (main) | **Hero — Product** | 7.5s | Phone mockup + headline + feature cards + CTAs. |
15| 3 | 1 | **Regulated markets** | 7.5s | “BRIDGE believes in regulated markets” + mockup (Verified). |
16| 4 | 2 | **PKR e-money (EMI)** | 7.5s | PKR wallet & domestic payments + mockup (balance). |
17| 5 | 3 | **Bank last-mile** | 7.5s | Cash-in/cash-out & settlement + mockup (balance). |
18| 6 | 4 | **Custody** | 7.5s | Crypto & stablecoin custody + mockup (assets). |
19| 7 | 5 | **Brokerage** | 7.5s | Brokerage & conversion + mockup (assets). |
20| 8 | 6 | **On/off-ramp** | 7.5s | PKR ↔ stablecoins + mockup (assets). |
21| 9 | 7 | **Compliance** | 7.5s | KYC, monitoring, audit + mockup (Verified). |
22| 10 | 8 | **Extra approvals** | 7.5s | Optional scope (cross-border, remittances, etc.) + mockup (assets). |
23| 11 | 9 | **CTA** | 7.5s then loop | “Ready to get started?” + Get started / Log in. Loop to Scene 1. |
24
25- **Navigation:** Minimal dots (10) + left/right arrows; low-profile, thin borders.
26- **Self-running:** Each scene holds for 7.5s (hero intro phase is 3.2s then switches to main); after CTA, loop to Scene 1.
27
28---
29
30## Scene 1 — Hero Teaser (First scene, centered)
31
32**Visual:** Dark background, soft radial glow (teal/blue). No phone mockup. Centered content only.
33
34**Content:**
35- **Pill tag:** “BRIDGE WALLET” with teal dot (pulse).
36- **Headline (3 lines):**
37  - “Your wallet.” (white)
38  - “Your crypto.” (teal — hero emphasis)
39  - “Your money.” (white)
40- **Value props (compact):** “Bank-grade custody” • “PKR rails” • “Bridge Intelligence AI” (with lock, globe, sparkle icons).
41
42**User journey:** First impression; brand and core promise. User reads the headline and three pillars before the layout morphs into Scene 2.
43
44**Animations & transitions:**
45- **Morphic / ambient**
46  - Radial glow: subtle scale or opacity breath (e.g. 0.9 → 1.05 → 0.9) on a 4–6s loop so the canvas feels alive.
47  - Pill: soft border or background opacity pulse (teal) to draw attention without distraction.
48- **Framer — text**
49  - Pill: fade in + slight y (e.g. 12px → 0), delay ~0.2s.
50  - Headline lines: stagger by line (e.g. 0.4s, 0.55s, 0.7s); each line: opacity 0→1, y 24→0; “Your crypto.” can have a slight scale (0.98→1) or a very short teal glow pulse after it appears.
51  - Value props: stagger by item (~0.12s); each: opacity 0→1, y 10→0; optional: icon scales 0.9→1 with same delay.
52- **Transition to Scene 2:** After 3.2s, phase switches to “main”; Scene 1 content exits (opacity 0), Scene 2 (mockup + copy + cards) enters with a 0.4s crossfade. No dot change yet (still dot 0).
53
54---
55
56## Scene 2 — Hero Product (Second scene, mockup + cards)
57
58**Visual:** Same dark background. **Left:** iOS Bridge wallet app mockup. **Right:** Headline, three feature cards, four CTAs.
59
60**Mockup content:**
61- Verified badge (top).
62- “Total Balance (PKR)” → “$5.47M” (count-up).
63- Bridge Intelligence card (teal): “Real-time market analysis. Risk & sentiment at a glance.”
64- Asset list: PKR, USDT, BTC with values.
65
66**Right side:**
67- Same 3-line headline (smaller).
68- Three cards: Bank-grade custody, PKR rails, Bridge Intelligence AI (with short descriptions).
69- CTAs: Get started — Register & KYC, Access Vault, View Documentation, Explore what we offer.
70

71**User journey:** User sees the product (wallet UI) and the expanded explanation of the three pillars. Clear path to “Get started” or “Explore.”
72
73**Animations & transitions:**
74- **Morphic**
75  - Background: same radial glow breath as Scene 1 for continuity.
76  - Feature cards: on enter, subtle “lift” (y -2) on hover; optional very soft border glow on the active/focused idea (e.g. first card briefly emphasized).
77- **Framer — layout**
78  - Container: opacity 0→1.
79  - Mockup: enter from left (x -48→0, scale 0.96→1), duration ~0.8s, ease out.
80  - Right column: opacity 0→1, x 60→0, ~0.6s.
81- **Framer — mockup (wallet app)**
82  - Verified badge: fade in + y 8→0 (~0.35s delay).
83  - “Total Balance (PKR)” label: fade in (~0.45s).
84  - Balance figure: count-up from 0 to 5.47 (Framer \`animate\` on a motion value), then “M”; slight scale 0.92→1.
85  - Bridge Intelligence card: fade + y 12→0; optional soft teal box-shadow pulse (opacity 0→0.4→0) on a 2s loop.
86  - Sparkles icon: small rotate (0→10→-5→0) once.
87  - Asset rows: stagger from left (x -12→0, opacity 0→1), delay 1.15 + i*0.1s; numbers fade in slightly after.
88- **Framer — text (right)**
89  - Headline: already visible with container; can add a light stagger per line if re-mounted.
90  - Cards: stagger in (opacity 0→1, y 16→0), ~0.1s between cards.
91  - CTAs: fade + y 12→0, delay ~0.3s.
92- **Transition to Scene 3:** After 7.5s (or on “Explore”), dot moves to 1; AnimatePresence exit (opacity, y) for hero, enter for SplitScene (regulated) with mockup + highlight “Verified.”
93
94---
95
96## Scene 3 — Regulated markets
97
98**Content:** “BRIDGE believes in regulated markets” / “Our foundation” / awareness: “SBP & PVARA regulated. Built for compliance from day one.” Body: short compliance copy. **Mockup:** Same phone; **highlight:** Verified badge (soft teal ring + pulse).
99
100**User journey:** Reinforces trust and regulatory positioning. Eye is led to “Verified” in the app.
101
102**Animations:**
103- Slide: enter y 20→0, opacity 0→1; exit y 0→-12, opacity 1→0 (~0.5s).
104- Stagger: icon → title → subtitle → awareness → body (variants + staggerChildren).
105- Mockup: Verified zone gets a repeating soft glow (border or box-shadow pulse).
106
107---
108
109## Scene 4 — PKR e-money (EMI)
110
111**Content:** “PKR e-money wallet & domestic payments” / “EMI” / awareness: “Raast-connected. Domestic payments and stored value in PKR.” **Mockup highlight:** Balance (PKR total) — soft glow around the $5.47M area.
112
113**User journey:** Links “PKR rails” to the actual balance in the app.
114
115**Animations:** Same slide stagger. Balance zone in mockup: teal glow pulse (e.g. opacity 0.2→0.5→0.2, 2.2s loop).
116
117---
118
119## Scene 5 — Bank last-mile
120
121**Content:** Bank top-ups, withdrawals, settlement. **Mockup highlight:** Balance (same as Scene 4) to imply “top up / withdraw” around that number.
122
123**Animations:** Same pattern; balance remains the focal point in the mockup.
124
125---
126
127## Scene 6 — Custody
128
129**Content:** Crypto & stablecoin custody (PVARA). **Mockup highlight:** Asset list (PKR, USDT, BTC) — soft ring + pulse on the list block.
130

131**User journey:** “Your assets live here” — custody = these rows in the app.
132
133**Animations:** Asset rows get a subtle ring (e.g. ring-bridge-teal/30) and a soft box-shadow pulse.
134
135---
136
137## Scene 7 — Brokerage
138
139**Content:** Brokerage & conversion. **Mockup highlight:** Same asset list (convert/trade from these assets).
140
141**Animations:** Same as Scene 6 for the list.
142
143---
144
145## Scene 8 — On/off-ramp
146
147**Content:** PKR ↔ stablecoins, merchant settlement. **Mockup highlight:** Asset list again (PKR + USDT as the ramp pair).
148
149**Animations:** Same list highlight.
150
151---
152
153## Scene 9 — Compliance
154
155**Content:** KYC, sanctions, monitoring, audit. **Mockup highlight:** Verified badge (back to “identity/compliance” in the UI).
156
157**Animations:** Verified badge pulse/glow again.
158
159---
160
161## Scene 10 — Extra approvals
162
163**Content:** Cross-border, remittances, interest/earn (prohibited), lending (prohibited), derivatives (if licensed). **Mockup highlight:** Assets list (generic “more products when approved”).
164
165**Animations:** Same list treatment.
166
167---
168
169## Scene 11 — CTA
170
171**Content:** “Ready to get started?” / “Bridge Wallet” / awareness + Get started, Log in. **Mockup:** Shown but no specific highlight (or very subtle “cta” state).
172
173**User journey:** Clear next step; loop restarts after 7.5s so the story can replay.
174
175**Animations:** Stagger as other journey slides; buttons can have a light hover scale. On loop, transition to Scene 1 (hero intro) with same AnimatePresence crossfade.
176
177---
178
179## Wallet app mockup — animation summary
180
181| Element | Scene(s) | Animation |
182|--------|----------|-----------|
183| Phone frame | 2–11 | Scene 2: enter x -48→0, scale 0.96→1. Later scenes: compact mockup, same enter when slide mounts. |
184| Verified badge | 2, 3, 9 | Fade + y; Scenes 3 & 9: teal ring + opacity pulse (2s loop). |
185| Total Balance label | 2 | Fade in. |
186| Balance ($5.47M) | 2, 4, 5 | Count-up (0→5.47); Scenes 4 & 5: teal glow pulse around balance. |
187| Bridge Intelligence card | 2 | Fade + y; teal box-shadow pulse; Sparkles icon rotate. |
188| Asset list rows | 2, 6, 7, 8, 10 | Stagger x + opacity; Scenes 6–8, 10: ring + box-shadow pulse on list. |
189
190---
191
192## Technical notes
193
194- **Framer:** \`AnimatePresence\` with \`mode="wait"\` for scene changes; variants for stagger (e.g. \`staggerContainer\`, \`itemVariants\` in SplitScene).
195- **Morphic:** Implemented via Framer \`animate\` on opacity/scale of radial gradient divs and optional pill/card borders; no heavy 3D.
196- **Auto-advance:** \`setTimeout(goTo(next), 7500)\`; on last slide, \`goTo(0)\` for loop.
197- **Dots:** \`motion.span\` with \`animate({ backgroundColor, scale })\` for active (teal, 1.2) vs inactive (white/0.22, 1).
198
199---
200
201## Copy reference (for implementation)
202
203- **Scene 1:** Headline 3 lines; value props: Bank-grade custody • PKR rails • Bridge Intelligence AI.
204- **Scene 2:** Same headline; three cards with titles + descriptions; four CTAs.
205- **Scenes 3–11:** Titles, subtitles, awareness lines, and bodies as in \`JOURNEY_SLIDES\` and \`JOURNEY_BODIES\` in \`LandingPage.tsx\`.
206
207This document should be updated whenever a new scene is added or the narrative/order changes.
208
209---
210
211## Browser review & verification checklist
212
213Use this when reviewing the animated intro in the browser (e.g. at \`http://localhost:3000/\`).
214
215**Scene 1 (Hero teaser):**
216- [ ] Radial glow has a slow “breath” (opacity/scale) over ~5s.
217- [ ] “BRIDGE WALLET” pill fades in, then pill border has a soft teal pulse (morphic).
218- [ ] Headline lines appear in order: “Your wallet.” → “Your crypto.” → “Your money.” with stagger.
219- [ ] “Your crypto.” has a subtle teal text-shadow pulse after it appears (repeating).
220- [ ] Value props (Bank-grade custody • PKR rails • Bridge Intelligence AI) stagger in with icons.
221- [ ] After ~3.2s, transition to Scene 2 (no scroll).
222
223**Scene 2 (Hero product):**
224- [ ] Phone mockup enters from left (x + scale).
225- [ ] Balance counts up from 0 to 5.47M.
226- [ ] Bridge Intelligence card fades in; optional teal glow pulse on the card.
227- [ ] Asset rows stagger in from the left.
228- [ ] Right column (headline, cards, CTAs) fades/slides in; headline lines stagger.
229- [ ] Feature cards stagger in; hover lifts card slightly.
230
231**Scene 3–11 (Journey slides):**
232- [ ] Each slide: icon → title → subtitle → awareness → body (staggered).
233- [ ] Mockup appears on the left (compact) with the correct highlight:
234  - Scene 3: Verified badge glow.
235  - Scenes 4–5: Balance glow.
236  - Scenes 6–8, 10: Asset list ring/pulse.
237  - Scene 9: Verified badge.
238  - Scene 11: No strong highlight (or subtle CTA).
239- [ ] Slide transition: exit (opacity + y) then enter; no double content.
240- [ ] Dots: current slide = teal, slightly larger; Framer animates color/scale on change.
241- [ ] Arrows: minimal; disabled at first/last slide.
242
243**Self-running & nav:**
244- [ ] After 7.5s on any slide, auto-advance to next; from last slide, loop to Scene 1.
245- [ ] Clicking a dot jumps to that scene; clicking next/prev moves by one.
246- [ ] Nav stays minimal (small dots, thin arrow borders).
247

248**Wallet app mockup animation summary (by scene):**
249- **Scene 2:** Full entrance (phone, badge, balance count-up, Intelligence card pulse, asset stagger).
250- **Scenes 3, 9:** Verified badge pulse/ring.
251- **Scenes 4, 5:** Balance area pulse/ring.
252- **Scenes 6, 7, 8, 10:** Asset list pulse/ring.
253- **Scene 11:** Mockup visible, no specific highlight (or very subtle).
254`;export{e as default};