motiondesk-studio 1.3.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/README.md +9 -4
  2. package/app/assets/bank-banker-chat-B_iF_sFM.js +257 -0
  3. package/app/assets/bank-business-loan-BFWWaq-c.js +247 -0
  4. package/app/assets/bank-car-choice-DLE2OVcc.js +229 -0
  5. package/app/assets/bank-card-freeze-J1JfFmLr.js +281 -0
  6. package/app/assets/bank-code-never-CQDlq8GN.js +234 -0
  7. package/app/assets/bank-dark-interlude-DhcdkPP1.js +190 -0
  8. package/app/assets/bank-digital-JTuIxFOJ.js +1 -0
  9. package/app/assets/bank-dinner-split-Be1e7DOQ.js +246 -0
  10. package/app/assets/bank-fast-pay-DoW0ClI6.js +230 -0
  11. package/app/assets/bank-first-salary-D9WxYgJf.js +212 -0
  12. package/app/assets/bank-fomo-stop-uEzdT0HP.js +230 -0
  13. package/app/assets/bank-forex-trip-BHW39y4z.js +205 -0
  14. package/app/assets/bank-growth-bars-DirAz4xB.js +203 -0
  15. package/app/assets/bank-holiday-budget-J41dLHwR.js +224 -0
  16. package/app/assets/bank-invest-B--KJb5m.js +1 -0
  17. package/app/assets/bank-life-C-4wZKyu.js +1 -0
  18. package/app/assets/bank-mortgage-papers-DMtx0XsI.js +214 -0
  19. package/app/assets/bank-new-app-look-CKmeKBU6.js +228 -0
  20. package/app/assets/bank-one-click-loan-BVhe1AGv.js +223 -0
  21. package/app/assets/bank-paper-explainer-CD8mPtnJ.js +191 -0
  22. package/app/assets/bank-pension-compare-BArvoVu7.js +243 -0
  23. package/app/assets/bank-remote-access-Df8UNpc7.js +257 -0
  24. package/app/assets/bank-safety-CBkr-iwJ.js +1 -0
  25. package/app/assets/bank-savings-pocket-B53nO1Z_.js +220 -0
  26. package/app/assets/bank-share-explained-DCp805RD.js +228 -0
  27. package/app/assets/bank-small-business-Bc7Ad4GW.js +217 -0
  28. package/app/assets/bank-student-routine-CnPPhtoV.js +224 -0
  29. package/app/assets/bank-suspicious-sms-CwOrdi3d.js +229 -0
  30. package/app/assets/bank-wedding-budget-CDM2kO0R.js +230 -0
  31. package/app/assets/bank-young-BwV6418l.js +1 -0
  32. package/app/assets/{catalog-Cdx5nbp0.js → catalog-CDdvrdnk.js} +1 -1
  33. package/app/assets/{index-D3rEDfqX.js → index-BRse9TUl.js} +4 -4
  34. package/app/assets/index-b6-Cm4vot4j.js +1 -0
  35. package/app/assets/index-b7-BLEay8YC.js +1 -0
  36. package/app/assets/index-b8-Jbh-zOZB.js +1 -0
  37. package/app/assets/index-b9-caOB8GyX.js +1 -0
  38. package/app/index.html +1 -1
  39. package/bin/motiondesk-studio.mjs +8 -1
  40. package/lib/catalog/hyperframes/bank-banker-chat.html +256 -0
  41. package/lib/catalog/hyperframes/bank-business-loan.html +246 -0
  42. package/lib/catalog/hyperframes/bank-car-choice.html +228 -0
  43. package/lib/catalog/hyperframes/bank-card-freeze.html +280 -0
  44. package/lib/catalog/hyperframes/bank-code-never.html +233 -0
  45. package/lib/catalog/hyperframes/bank-dark-interlude.html +189 -0
  46. package/lib/catalog/hyperframes/bank-dinner-split.html +245 -0
  47. package/lib/catalog/hyperframes/bank-fast-pay.html +229 -0
  48. package/lib/catalog/hyperframes/bank-first-salary.html +211 -0
  49. package/lib/catalog/hyperframes/bank-fomo-stop.html +229 -0
  50. package/lib/catalog/hyperframes/bank-forex-trip.html +204 -0
  51. package/lib/catalog/hyperframes/bank-growth-bars.html +202 -0
  52. package/lib/catalog/hyperframes/bank-holiday-budget.html +223 -0
  53. package/lib/catalog/hyperframes/bank-mortgage-papers.html +213 -0
  54. package/lib/catalog/hyperframes/bank-new-app-look.html +227 -0
  55. package/lib/catalog/hyperframes/bank-one-click-loan.html +222 -0
  56. package/lib/catalog/hyperframes/bank-paper-explainer.html +190 -0
  57. package/lib/catalog/hyperframes/bank-pension-compare.html +242 -0
  58. package/lib/catalog/hyperframes/bank-remote-access.html +256 -0
  59. package/lib/catalog/hyperframes/bank-savings-pocket.html +219 -0
  60. package/lib/catalog/hyperframes/bank-share-explained.html +227 -0
  61. package/lib/catalog/hyperframes/bank-small-business.html +216 -0
  62. package/lib/catalog/hyperframes/bank-student-routine.html +223 -0
  63. package/lib/catalog/hyperframes/bank-suspicious-sms.html +228 -0
  64. package/lib/catalog/hyperframes/bank-wedding-budget.html +229 -0
  65. package/lib/catalog/hyperframes/index-b6.json +146 -0
  66. package/lib/catalog/hyperframes/index-b7.json +121 -0
  67. package/lib/catalog/hyperframes/index-b8.json +92 -0
  68. package/lib/catalog/hyperframes/index-b9.json +87 -0
  69. package/lib/catalog/studio/bank-digital.json +3586 -0
  70. package/lib/catalog/studio/bank-invest.json +3653 -0
  71. package/lib/catalog/studio/bank-life.json +3605 -0
  72. package/lib/catalog/studio/bank-safety.json +3198 -0
  73. package/lib/catalog/studio/bank-young.json +3426 -0
  74. package/lib/vercel-render.mjs +16 -1
  75. package/package.json +30 -7
package/app/assets/bank-forex-trip-BHW39y4z.js ADDED
@@ -0,0 +1,205 @@
1
+ var e=`<!doctype html>
2
+ <html lang="he" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=1080, height=1080">
6
+ <title>מט״ח לפני הטיסה</title>
7
+ <script src="vendor/gsap.min.js"><\/script>
8
+ <style>
9
+ @font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
10
+ @font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
11
+ @font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
12
+ @font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
13
+ :root{--paper:#F4F4F2;--card:#FFFFFF;--ink:#141A26;--accent:#E3063B;--mute:#B4B8C0;--glow:#FF3B5C}
14
+ *{box-sizing:border-box;margin:0;padding:0}
15
+ html,body{width:1080px;height:1080px;overflow:hidden;background:var(--bg)}
16
+ body{font-family:"Heebo",Arial,sans-serif;-webkit-font-smoothing:antialiased}
17
+ #root{position:relative;width:1080px;height:1080px;overflow:hidden;background:var(--bg);color:var(--fg);direction:rtl;font-family:"Heebo",Arial,sans-serif}
18
+ .scene{position:absolute;inset:0;overflow:hidden}
19
+ .cam,.layer{position:absolute;inset:0}
20
+ .abs{position:absolute}
21
+ .m{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .08em}
22
+ .w{display:inline-block;white-space:nowrap}
23
+ #root{background:radial-gradient(ellipse at 72% 18%,var(--card),var(--paper) 62%)}
24
+ .t{position:absolute;white-space:nowrap;line-height:1.15;color:var(--ink)}
25
+ .b{font-weight:700}
26
+ .bgl{position:absolute;height:2px;width:1400px;background:color-mix(in srgb,var(--ink) 7%,transparent);transform-origin:0 0}
27
+ .ov{position:absolute;inset:0;pointer-events:none}
28
+ .ov>*{pointer-events:auto}
29
+ .brand{position:absolute;top:30px;right:36px;display:flex;align-items:center;gap:12px;height:52.800000000000004px;padding:0 24px;border-radius:26.400000000000002px;background:var(--card);box-shadow:0 6px 20px color-mix(in srgb,var(--ink) 14%,transparent)}
30
+ .brand i{width:14.399999999999999px;height:14.399999999999999px;border-radius:3px;background:var(--accent);flex:none}
31
+ .brand p{font-size:24px;font-weight:700;color:var(--ink);white-space:nowrap}
32
+ .ltw{position:absolute;left:0;right:0;display:flex;justify-content:center}
33
+ .lt{display:flex;align-items:center;gap:10.24px;height:74px;padding:0 27.2px;border-radius:14px;background:var(--card);box-shadow:0 12px 32px color-mix(in srgb,var(--ink) 16%,transparent)}
34
+ .lt .mk{width:13.44px;height:13.44px;border-radius:3px;background:var(--accent);flex:none}
35
+ .lt p{font-size:32px;white-space:nowrap;color:var(--ink);line-height:1.2}
36
+ .lt .em{font-weight:700;color:var(--accent)}
37
+ .lt .cu{width:9.6px;height:33.6px;background:var(--ink);flex:none}
38
+ .card{position:absolute;background:var(--card);border-radius:10px;box-shadow:0 20px 48px color-mix(in srgb,var(--ink) 16%,transparent)}
39
+ .tape{position:absolute;width:140px;height:36px;background:var(--accent);box-shadow:0 3px 8px color-mix(in srgb,var(--ink) 18%,transparent)}
40
+ .tape::after{content:"";position:absolute;left:44%;top:12px;width:12px;height:12px;background:color-mix(in srgb,var(--card) 85%,var(--accent))}
41
+ .lab{position:absolute;padding:2px .55em 8px;font-weight:700;white-space:nowrap;line-height:1.2;box-shadow:0 8px 22px color-mix(in srgb,var(--ink) 14%,transparent)}
42
+ .lab.r{background:var(--accent);color:var(--card)}
43
+ .lab.w{background:var(--card);color:var(--ink)}
44
+ .lab.k{background:var(--ink);color:var(--card)}
45
+ .hw{position:absolute;white-space:nowrap}
46
+ .hw p{position:relative;line-height:1.15;color:var(--ink)}
47
+ .hl{position:absolute;left:-12px;right:-12px;bottom:10%;height:34%;background:color-mix(in srgb,var(--accent) 26%,transparent);transform-origin:100% 50%}
48
+ .ul{position:absolute;left:-6px;right:-6px;bottom:-6px;height:7px;border-radius:4px;background:var(--accent);transform-origin:100% 50%}
49
+ .cx{position:absolute;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:26px;white-space:nowrap}
50
+ .cx .hw{position:relative}
51
+ .cx>p{color:var(--ink);line-height:1.15}
52
+ .ln{position:absolute;height:14px;border-radius:7px;background:color-mix(in srgb,var(--mute) 50%,var(--card))}
53
+ .win{position:absolute;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 20px 48px color-mix(in srgb,var(--ink) 16%,transparent)}
54
+ .win>.wb{position:absolute;left:0;right:0;top:0;height:44px;background:var(--ink)}
55
+ .win>.wb::before{content:"";position:absolute;left:18px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--mute);box-shadow:20px 0 0 var(--mute),40px 0 0 var(--mute)}
56
+ .pill{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--accent)}
57
+ .pill p{color:var(--card);font-weight:700;white-space:nowrap}
58
+ .chip{position:absolute;display:flex;align-items:center;gap:12px;padding:0 26px;border-radius:999px;background:var(--card);box-shadow:0 10px 26px color-mix(in srgb,var(--ink) 14%,transparent)}
59
+ .chip i{width:14px;height:14px;border-radius:3px;background:var(--accent);flex:none}
60
+ .chip p{font-weight:700;white-space:nowrap;color:var(--ink)}
61
+ .fine{position:absolute;white-space:nowrap;color:color-mix(in srgb,var(--ink) 55%,var(--paper))}
62
+ .dk{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--ink) 80%,var(--glow) 8%),var(--ink) 70%)}
63
+ .glw{position:absolute;background:var(--glow);box-shadow:0 0 60px 6px color-mix(in srgb,var(--glow) 70%,transparent),0 0 180px 40px color-mix(in srgb,var(--glow) 32%,transparent)}
64
+ .fig{position:absolute}
65
+ .fig .h{position:absolute;border-radius:50%}
66
+ .fig .bd{position:absolute;border-radius:48% 48% 14px 14px / 38% 38% 14px 14px}
67
+ .ck{fill:none;stroke:var(--card);stroke-linecap:round;stroke-linejoin:round}
68
+
69
+ .sc{position:absolute;left:56px;top:470px;width:380px;height:310px;border-radius:34px;background:var(--accent);box-shadow:0 22px 44px color-mix(in srgb,var(--accent) 28%,transparent)}
70
+ .sc::before{content:"";position:absolute;left:96px;top:0;bottom:0;width:30px;background:color-mix(in srgb,var(--card) 30%,var(--accent));box-shadow:158px 0 0 color-mix(in srgb,var(--card) 30%,var(--accent))}
71
+ .sc::after{content:"";position:absolute;left:120px;top:-70px;width:140px;height:80px;border:16px solid var(--ink);border-bottom:0;border-radius:30px 30px 0 0;box-sizing:border-box}
72
+ .wh{position:absolute;top:772px;width:44px;height:44px;border-radius:50%;background:var(--ink)}
73
+ .cc{position:absolute;width:180px;height:240px;border-radius:18px;box-shadow:0 18px 40px color-mix(in srgb,var(--ink) 18%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
74
+ .cc.w{background:var(--card)}.cc.r{background:var(--accent)}
75
+ .cc .sy{font-size:108px;font-weight:700;line-height:1;color:var(--ink)}
76
+ .cc .cn{font-size:34px;font-weight:700;color:color-mix(in srgb,var(--ink) 60%,var(--card))}
77
+ .cc.r .sy,.cc.r .cn{color:var(--card)}
78
+ .bx{position:absolute;top:300px;width:330px;height:420px;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 20px 44px color-mix(in srgb,var(--ink) 16%,transparent)}
79
+ .bx.w{background:var(--card)}.bx.r{background:var(--accent)}
80
+ .bx .sy{font-size:150px;font-weight:700;line-height:1;color:var(--ink)}
81
+ .bx .am{font-size:72px;font-weight:700;color:var(--ink)}
82
+ .bx .cn{font-size:34px;color:color-mix(in srgb,var(--ink) 60%,var(--card))}
83
+ .bx.r p{color:var(--card)}
84
+ .xa{position:absolute;left:440px;top:420px;overflow:visible}
85
+ .xa path{fill:none;stroke:var(--ink);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
86
+ .xa .ra{stroke:var(--accent)}
87
+ .c2{left:0;right:0;text-align:center}
88
+ .halo{position:absolute;left:240px;top:60px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--glow) 45%,transparent),transparent 65%)}
89
+ .gc{position:absolute;left:400px;top:220px;width:280px;height:280px;border-radius:50%;display:flex;align-items:center;justify-content:center}
90
+ .gc p{font-size:150px;font-weight:700;color:var(--card);line-height:1}
91
+ .band{position:absolute;left:0;right:0;top:700px;height:110px;background:color-mix(in srgb,var(--card) 8%,var(--ink));border-top:3px solid color-mix(in srgb,var(--glow) 60%,var(--ink));border-bottom:3px solid color-mix(in srgb,var(--glow) 60%,var(--ink));overflow:hidden}
92
+ .trk{position:absolute;right:-260px;top:0;height:110px;display:flex;align-items:center;gap:64px}
93
+ .ti{display:flex;align-items:center;gap:16px}
94
+ .ti i{width:14px;height:14px;border-radius:3px;background:var(--glow)}
95
+ .ti p{font-size:44px;font-weight:700;color:var(--card);white-space:nowrap}
96
+ .ti .tv{color:var(--glow)}
97
+ .cb{position:absolute;width:52px;height:52px;border-radius:10px;border:4px solid var(--ink)}
98
+ .cb svg{position:absolute;left:-6px;top:-10px;width:62px;height:62px;overflow:visible}
99
+ .ckr{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
100
+ </style>
101
+ </head>
102
+ <body>
103
+ <div id="root" data-composition-id="bank-forex-trip" data-start="0" data-width="1080" data-height="1080" data-duration="16">
104
+ <section id="s1" class="clip scene" data-start="0" data-duration="4">
105
+ <div class="cam" id="c1">
106
+ <i class="bgl" style="left:-100px;top:930px;transform:rotate(-18deg)"></i>
107
+ <div class="hw" style="right:70px;top:120px"><i class="hl" id="hl1"></i><p id="h1" style="font-size:88px;font-weight:700">טסים לחו״ל?</p></div>
108
+ <p class="t" id="h2" style="right:70px;top:240px;font-size:40px">רגע לפני האריזה</p>
109
+ <div id="sg"><i class="sc"></i><i class="wh" style="left:116px"></i><i class="wh" style="left:296px"></i></div>
110
+ <div class="cc r" id="cc0" data-r="10" style="left:845px;top:450px"><p class="sy" id="cs0">₪</p><p class="cn" id="cl0">שקל</p></div><div class="cc w" id="cc1" data-r="2" style="left:675px;top:410px"><p class="sy" id="cs1">$</p><p class="cn" id="cl1">דולר</p></div><div class="cc w" id="cc2" data-r="-9" style="left:500px;top:440px"><p class="sy" id="cs2">€</p><p class="cn" id="cl2">אירו</p></div>
111
+ <div class="ltw" style="bottom:48px"><div class="lt" id="lt1"><i class="mk"></i><p id="lt1a">קודם כול,</p><p class="em" id="lt1b">מסדרים מט״ח</p><i class="cu" id="lt1k"></i></div></div>
112
+ </div>
113
+ </section>
114
+ <section id="s2" class="clip scene" data-start="4" data-duration="4">
115
+ <div class="cam" id="c2">
116
+ <div class="hw" style="right:70px;top:120px"><i class="hl" id="hl2"></i><p id="h3" style="font-size:88px;font-weight:700">ממירים בקלות</p></div>
117
+ <div class="bx r" id="bx1" style="right:80px"><p class="sy" id="b1s">₪</p><p class="am" id="b1a">370</p><p class="cn" id="b1n">שקלים</p></div>
118
+ <div class="bx w" id="bx2" style="left:80px"><p class="sy" id="b2s">$</p><p class="am" id="b2a">100</p><p class="cn" id="b2n">דולרים</p></div>
119
+ <svg class="xa" width="200" height="200" viewBox="0 0 200 200"><path class="ra" id="xa1" pathLength="1" d="M180 60H24M58 26L22 60l36 34"/><path id="xa2" pathLength="1" d="M20 140H176M142 106l36 34-36 34"/></svg>
120
+ <p class="fine c2" id="f2" style="top:760px;font-size:30px">שער להמחשה בלבד</p>
121
+ <div class="ltw" style="bottom:48px"><div class="lt" id="lt2"><i class="mk"></i><p id="lt2a">רואים מראש</p><p class="em" id="lt2b">כמה תקבלו</p><i class="cu" id="lt2k"></i></div></div>
122
+ </div>
123
+ </section>
124
+ <section id="s3" class="clip scene" data-start="8" data-duration="4">
125
+ <div class="cam" id="c3">
126
+ <i class="dk"></i><i class="halo" id="halo"></i>
127
+ <div class="gc glw" id="gc"><p id="gcs">₪</p></div>
128
+ <div class="cx" style="top:540px"><p id="h4" style="font-size:80px;font-weight:700;color:var(--card)">בודקים</p><p id="h5" style="font-size:80px;font-weight:700;color:var(--glow)">את השער</p></div>
129
+ <div class="band"><div class="trk" id="trk"><div class="ti"><i></i><p id="tn0">דולר</p><p class="tv" id="tv0">3.70</p></div><div class="ti"><i></i><p id="tn1">אירו</p><p class="tv" id="tv1">4.02</p></div><div class="ti"><i></i><p id="tn2">לירה</p><p class="tv" id="tv2">4.71</p></div><div class="ti"><i></i><p id="tn3">פרנק</p><p class="tv" id="tv3">4.18</p></div><div class="ti"><i></i><p id="tn4">כתר</p><p class="tv" id="tv4">0.36</p></div></div></div>
130
+ <p class="t c2" id="f3" style="top:850px;font-size:28px;color:color-mix(in srgb,var(--card) 55%,var(--ink))">שערים להמחשה בלבד</p>
131
+ <div class="ltw" style="bottom:48px"><div class="lt" id="lt3"><i class="mk"></i><p id="lt3a">משווים</p><p class="em" id="lt3b">שערים ועמלות</p><i class="cu" id="lt3k"></i></div></div>
132
+ </div>
133
+ </section>
134
+ <section id="s4" class="clip scene" data-start="12" data-duration="4">
135
+ <div class="cam" id="c4">
136
+ <div class="hw" style="right:70px;top:110px"><i class="hl" id="hl4"></i><p id="h6" style="font-size:80px;font-weight:700">צ׳קליסט לפני הטיסה</p></div>
137
+ <div class="card" id="cd" style="left:90px;top:260px;width:900px;height:640px">
138
+ <i class="cb" style="right:56px;top:66px"><svg viewBox="0 0 60 60"><path class="ckr" id="ck0" pathLength="1" d="M12 31l12 12 24-28"/></svg></i><p class="t" id="ch0" style="right:136px;top:60px;font-size:42px">כרטיס אשראי פעיל בחו״ל</p><i class="cb" style="right:56px;top:170px"><svg viewBox="0 0 60 60"><path class="ckr" id="ck1" pathLength="1" d="M12 31l12 12 24-28"/></svg></i><p class="t" id="ch1" style="right:136px;top:164px;font-size:42px">מזומן לימים הראשונים</p><i class="cb" style="right:56px;top:274px"><svg viewBox="0 0 60 60"><path class="ckr" id="ck2" pathLength="1" d="M12 31l12 12 24-28"/></svg></i><p class="t" id="ch2" style="right:136px;top:268px;font-size:42px">בודקים עמלות המרה</p><i class="cb" style="right:56px;top:378px"><svg viewBox="0 0 60 60"><path class="ckr" id="ck3" pathLength="1" d="M12 31l12 12 24-28"/></svg></i><p class="t" id="ch3" style="right:136px;top:372px;font-size:42px">מספר הבנק שמור בטלפון</p>
139
+ <div class="pill" id="cta" style="left:170px;top:500px;width:560px;height:96px"><p id="ctat" style="font-size:42px">מזמינים מט״ח באפליקציה</p></div>
140
+ </div>
141
+ <i class="tape" id="tp1" style="left:50px;top:256px;transform:rotate(-30deg)"></i><i class="tape" id="tp2" style="left:890px;top:256px;transform:rotate(30deg)"></i>
142
+ <p class="fine c2" id="f4" style="top:950px;font-size:28px">בכפוף לתנאי הבנק. טיסה נעימה!</p>
143
+ </div>
144
+ </section>
145
+ <div id="ov" class="clip ov" data-start="0" data-duration="16">
146
+ <div class="brand" id="brand"><i></i><p id="brt">המותג שלכם</p></div>
147
+ </div>
148
+ </div>
149
+ <script>
150
+ const tl=gsap.timeline({paused:true});
151
+ const S=[0,4,8,12,16],D=16;
152
+ const X="expo.out",P="power3.out",B="back.out(1.7)",E="power2.inOut";
153
+ function sIn(i){tl.fromTo("#c"+(i+1),{opacity:0},{opacity:1,duration:.35,ease:"power1.out"},S[i]);}
154
+ function sOut(i){tl.to("#c"+(i+1),{opacity:0,duration:.35,ease:"power1.in"},S[i+1]-.35);}
155
+ function LT(id,t){tl.fromTo("#"+id,{y:50,opacity:0},{y:0,opacity:1,duration:.5,ease:P},t);
156
+ tl.fromTo("#"+id+" p",{clipPath:"inset(-30% 0% -30% 100%)"},{clipPath:"inset(-30% 0% -30% 0%)",duration:.55,ease:"none",stagger:.5},t+.2);
157
+ tl.fromTo("#"+id+"k",{opacity:1},{opacity:0,duration:.05,repeat:5,yoyo:true,repeatDelay:.25,ease:"none"},t+.3);}
158
+ function HL(sel,t){tl.fromTo(sel,{scaleX:0},{scaleX:1,duration:.5,ease:P},t);}
159
+ function UP(sel,t,st){tl.fromTo(sel,{y:40,opacity:0},{y:0,opacity:1,duration:.6,ease:P,stagger:st||0},t);}
160
+ function LAB(sel,t,st){tl.fromTo(sel,{x:60,opacity:0,rotation:-4},{x:0,opacity:1,rotation:(i,e)=>+(e.dataset.r||0),duration:.5,ease:B,stagger:st||.15},t);}
161
+ function DRAW(sel,t,d,st){tl.fromTo(sel,{strokeDasharray:1,strokeDashoffset:1},{strokeDashoffset:0,duration:d||.8,ease:E,stagger:st||0,autoRound:false},t);}
162
+ tl.fromTo("#brand",{opacity:0,y:-20},{opacity:1,y:0,duration:.5,ease:P},.2);
163
+
164
+ // s1 suitcase + fanned currency cards
165
+ sIn(0);
166
+ UP("#h1",S[0]+.15);HL("#hl1",S[0]+.6);UP("#h2",S[0]+.45);
167
+ tl.fromTo("#sg",{y:160,opacity:0},{y:0,opacity:1,duration:.8,ease:X},S[0]+.2);
168
+ tl.fromTo("#c1 .cc",{y:120,opacity:0,rotation:0},{y:0,opacity:1,rotation:(i,e)=>+e.dataset.r,duration:.7,ease:B,stagger:.15},S[0]+.7);
169
+ tl.fromTo("#sg",{rotation:0},{keyframes:[{rotation:-3,duration:.15},{rotation:2,duration:.15},{rotation:0,duration:.15}],transformOrigin:"50% 100%",immediateRender:false},S[0]+1.6);
170
+ LT("lt1",S[0]+1);
171
+ sOut(0);
172
+ // s2 exchange
173
+ sIn(1);
174
+ UP("#h3",S[1]+.1);HL("#hl2",S[1]+.55);
175
+ tl.fromTo("#bx1",{x:120,opacity:0},{x:0,opacity:1,duration:.7,ease:X},S[1]+.2);
176
+ tl.fromTo("#bx2",{x:-120,opacity:0},{x:0,opacity:1,duration:.7,ease:X},S[1]+.35);
177
+ DRAW("#xa1",S[1]+.9,.5);DRAW("#xa2",S[1]+1.3,.5);
178
+ tl.fromTo(["#b1a","#b2a"],{scale:1},{scale:1.15,duration:.2,yoyo:true,repeat:1,stagger:.4,immediateRender:false},S[1]+1.9);
179
+ tl.fromTo("#f2",{opacity:0},{opacity:1,duration:.4},S[1]+1.5);
180
+ LT("lt2",S[1]+.8);
181
+ sOut(1);
182
+ // s3 dark ticker
183
+ sIn(2);
184
+ tl.fromTo("#halo",{scale:.3,opacity:0},{scale:1,opacity:1,duration:1.2,ease:"sine.out"},S[2]+.1);
185
+ tl.fromTo("#gc",{scale:0,rotation:-40},{scale:1,rotation:0,duration:.7,ease:B},S[2]+.2);
186
+ UP(["#h4","#h5"],S[2]+.5,.15);
187
+ tl.fromTo("#trk",{x:-420},{x:200,duration:3.6,ease:"none"},S[2]+.2);
188
+ tl.fromTo("#f3",{opacity:0},{opacity:1,duration:.4},S[2]+1);
189
+ LT("lt3",S[2]+.9);
190
+ sOut(2);
191
+ // s4 checklist
192
+ sIn(3);
193
+ UP("#h6",S[3]+.1);HL("#hl4",S[3]+.5);
194
+ tl.fromTo("#cd",{y:100,opacity:0,rotation:-2},{y:0,opacity:1,rotation:0,duration:.8,ease:X},S[3]+.1);
195
+ tl.fromTo(["#tp1","#tp2"],{opacity:0,scale:1.6},{opacity:1,scale:1,duration:.35,ease:P,stagger:.1},S[3]+.6);
196
+ tl.fromTo("#cd .cb,#cd p.t",{opacity:0,x:30},{opacity:1,x:0,duration:.4,ease:P,stagger:.07},S[3]+.6);
197
+ DRAW("#ck0,#ck1,#ck2,#ck3",S[3]+1.2,.3,.3);
198
+ tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+2.4);
199
+ tl.fromTo("#f4",{opacity:0},{opacity:1,duration:.4},S[3]+2.6);
200
+ tl.set({},{},D);
201
+ window.__timelines=window.__timelines||{};window.__timelines["bank-forex-trip"]=tl;
202
+ <\/script>
203
+ </body>
204
+ </html>
205
+ `;export{e as default};
package/app/assets/bank-growth-bars-DirAz4xB.js ADDED
@@ -0,0 +1,203 @@
1
+ var e=`<!doctype html>
2
+ <html lang="he" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=1920, height=1080">
6
+ <title>גרף צמיחה</title>
7
+ <script src="vendor/gsap.min.js"><\/script>
8
+ <style>
9
+ @font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
10
+ @font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
11
+ @font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
12
+ @font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
13
+ :root{--bg:#F4F4F2;--fg:#141A26;--accent:#E3063B;--card:#FFFFFF;--mute:#A3A9B4}
14
+ *{box-sizing:border-box;margin:0;padding:0}
15
+ html,body{width:1920px;height:1080px;overflow:hidden;background:var(--bg)}
16
+ body{font-family:"Heebo",Arial,sans-serif;-webkit-font-smoothing:antialiased}
17
+ #root{position:relative;width:1920px;height:1080px;overflow:hidden;background:var(--bg);color:var(--fg);direction:rtl;font-family:"Heebo",Arial,sans-serif}
18
+ .scene{position:absolute;inset:0;overflow:hidden}
19
+ .cam,.layer{position:absolute;inset:0}
20
+ .abs{position:absolute}
21
+ .m{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .08em}
22
+ .w{display:inline-block;white-space:nowrap}
23
+ .t{position:absolute;white-space:nowrap;line-height:1.15;color:var(--fg)}
24
+ .c{left:0;right:0;text-align:center}
25
+ .cw{position:absolute;left:0;right:0;display:flex;justify-content:center}
26
+ .row{display:flex;gap:.26em;align-items:baseline;white-space:nowrap;line-height:1.15;font-weight:700;color:var(--fg)}
27
+ .em{color:var(--accent)}
28
+ .hw{position:relative}
29
+ .hw p{position:relative}
30
+ .hb{position:absolute;left:-.1em;right:-.1em;bottom:.08em;height:.34em;background:color-mix(in srgb,var(--accent) 24%,transparent)}
31
+ .pl{position:absolute;background:color-mix(in srgb,var(--card) 62%,transparent)}
32
+ .brand{position:absolute;top:36px;right:44px;height:54px;padding:0 22px;border-radius:27px;background:var(--card);display:flex;align-items:center;gap:12px;box-shadow:0 6px 18px color-mix(in srgb,var(--fg) 12%,transparent)}
33
+ .brand .bm{width:16px;height:16px;border-radius:3px;background:var(--accent)}
34
+ .brand p{font-size:26px;font-weight:700;color:var(--fg);white-space:nowrap}
35
+ .capw{position:absolute;left:0;right:0;bottom:58px;display:flex;justify-content:center}
36
+ .cap{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:12px;padding:16px 28px;box-shadow:0 10px 28px color-mix(in srgb,var(--fg) 14%,transparent)}
37
+ .cap .mk{flex:none;width:16px;height:16px;background:var(--accent)}
38
+ .cap .ct{display:flex;gap:.26em;overflow:hidden;min-width:0;font-size:40px;line-height:1.3;white-space:nowrap;color:var(--fg)}
39
+ .cap .ct .em{font-weight:700}
40
+ .cap .cur{flex:none;width:12px;height:40px;background:var(--fg)}
41
+ .card{position:absolute;background:var(--card);border-radius:10px;box-shadow:0 24px 54px color-mix(in srgb,var(--fg) 13%,transparent),0 2px 6px color-mix(in srgb,var(--fg) 8%,transparent)}
42
+ .tape{position:absolute;z-index:2;width:120px;height:32px;background:var(--accent);opacity:.94}
43
+ .tape::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;background:var(--card)}
44
+ .tl{top:-6px;left:-34px;transform:rotate(-36deg)}
45
+ .tr{top:-6px;right:-34px;transform:rotate(36deg)}
46
+ .ln{display:block;height:12px;border-radius:6px;background:color-mix(in srgb,var(--mute) 38%,var(--card));margin-top:18px}
47
+ .ln.r{background:color-mix(in srgb,var(--accent) 45%,var(--card))}
48
+ .lab{position:absolute;padding:6px 24px 12px;font-size:46px;font-weight:700;white-space:nowrap;line-height:1.2;background:var(--card);color:var(--fg);box-shadow:0 8px 20px color-mix(in srgb,var(--fg) 12%,transparent)}
49
+ .lab.r{background:var(--accent);color:var(--card)}
50
+ .win{position:absolute;background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 24px 54px color-mix(in srgb,var(--fg) 14%,transparent)}
51
+ .win .wb{height:44px;background:var(--fg);display:flex;align-items:center;gap:10px;padding:0 18px;direction:ltr}
52
+ .win .wb i{width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,var(--card) 50%,var(--fg))}
53
+ .fig{position:absolute;width:200px;height:300px}
54
+ .fig .hd{position:absolute;left:55px;top:0;width:90px;height:90px;border-radius:50%;background:color-mix(in srgb,var(--fg) 82%,var(--card))}
55
+ .fig .bd{position:absolute;left:0;top:104px;width:200px;height:196px;border-radius:100px 100px 14px 14px;background:var(--fg)}
56
+ .fig .nk{position:absolute;left:78px;top:104px;width:44px;height:58px;background:var(--card);clip-path:polygon(0 0,100% 0,50% 100%)}
57
+ .fig.a .bd{background:var(--accent)}
58
+ .fig.m .bd{background:var(--mute)}
59
+ .endmk{width:64px;height:64px;border-radius:8px;background:var(--accent)}
60
+ .ebox{border:5px solid var(--fg);background:var(--card);padding:4px 38px 14px;font-weight:700;white-space:nowrap;line-height:1.2;color:var(--fg)}
61
+ .cta{display:flex;align-items:center;gap:14px;height:84px;padding:0 40px;border-radius:42px;background:var(--fg)}
62
+ .cta i{width:16px;height:16px;background:var(--accent)}
63
+ .cta p{font-size:36px;font-weight:700;color:var(--card);white-space:nowrap}
64
+ .fine{font-size:24px;color:color-mix(in srgb,var(--fg) 58%,var(--bg))}
65
+ .ck{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
66
+
67
+ .sk{font-size:58px}
68
+ .bar{position:absolute;width:90px;background:var(--fg)}
69
+ .bar.a{background:var(--accent)}
70
+ .bar.w{background:var(--card);box-shadow:0 10px 24px color-mix(in srgb,var(--fg) 14%,transparent)}
71
+ .base{position:absolute;left:160px;top:840px;width:1080px;height:5px;background:var(--fg)}
72
+ .trend{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:visible}
73
+ .trend polyline{fill:none;stroke:var(--accent);stroke-width:7;stroke-linejoin:round;stroke-linecap:round}
74
+ .ah{position:absolute;left:1141px;top:288px;width:0;height:0;border-left:22px solid transparent;border-right:22px solid transparent;border-bottom:34px solid var(--accent)}
75
+ .xl{position:absolute;top:868px;font-size:28px;color:var(--mute);white-space:nowrap}
76
+ .roll{position:absolute;right:70px;top:120px;width:560px;height:230px;overflow:hidden}
77
+ .rl{position:absolute;left:0;right:0;top:0}
78
+ .rv{height:230px;line-height:230px;font-size:200px;font-weight:700;color:var(--accent);text-align:right;white-space:nowrap}
79
+ .spk{position:absolute;left:60px;top:400px;width:640px;height:110px;overflow:visible}
80
+ .spk polyline{fill:none;stroke:var(--fg);stroke-width:6;stroke-linejoin:round;stroke-linecap:round}
81
+ .hz{position:absolute;right:250px;width:520px;height:200px}
82
+ .hz .hb2{position:absolute;right:50px;top:116px;height:40px;background:var(--mute)}
83
+ .hz .hb2.a{background:var(--accent)}
84
+ .grp .fig{top:0}
85
+ </style>
86
+ </head>
87
+ <body>
88
+ <div id="root" data-composition-id="bank-growth-bars" data-start="0" data-width="1920" data-height="1080" data-duration="15.2">
89
+ <section id="s1" class="clip scene" data-start="0" data-duration="3.6">
90
+ <div class="cam" id="c1">
91
+ <i class="pl" style="left:-300px;top:-400px;width:860px;height:1800px;transform:rotate(33deg)"></i>
92
+ <i class="pl" style="left:1500px;top:-300px;width:600px;height:1600px;transform:rotate(-30deg)"></i>
93
+ <p class="lab r sk" id="sk0" style="right:1180px;top:250px">חוסכים.</p><p class="lab sk" id="sk1" style="right:1240px;top:375px">משקיעים.</p><p class="lab r sk" id="sk2" style="right:1180px;top:500px">מחכים.</p><p class="lab sk" id="sk3" style="right:1240px;top:625px">צומחים.</p>
94
+ <div class="grp abs" id="grp" style="left:980px;top:400px;width:720px;height:420px">
95
+ <div class="fig m" id="f1" style="left:0;top:80px"><i class="hd"></i><i class="bd"></i><i class="nk"></i></div>
96
+ <div class="fig a" id="f2" style="left:250px;transform:scale(1.15);transform-origin:50% 100%"><i class="hd"></i><i class="bd"></i><i class="nk"></i></div>
97
+ <div class="fig" id="f3" style="left:500px;top:60px"><i class="hd"></i><i class="bd"></i><i class="nk"></i></div>
98
+ </div>
99
+ <div class="capw"><div class="cap" id="cap1"><i class="mk"></i><div class="ct" id="ct1"><p id="cp1a">כל סכום</p><p id="cp1b" class="em">מתחיל לצמוח</p><p id="cp1c">עם הזמן</p></div><i class="cur" id="cu1"></i></div></div>
100
+ </div>
101
+ </section>
102
+ <section id="s2" class="clip scene" data-start="3.6" data-duration="4.2">
103
+ <div class="cam" id="c2">
104
+ <i class="pl" style="left:-200px;top:-500px;width:820px;height:1800px;transform:rotate(30deg)"></i>
105
+ <p class="lab" id="il" style="left:170px;top:170px;font-size:30px;transform:rotate(-2deg)">להמחשה בלבד</p>
106
+ <i class="bar k" id="br0" style="left:200px;top:690px;height:150px"></i><i class="bar a" id="br1" style="left:330px;top:640px;height:200px"></i><i class="bar w" id="br2" style="left:460px;top:660px;height:180px"></i><i class="bar a" id="br3" style="left:590px;top:580px;height:260px"></i><i class="bar k" id="br4" style="left:720px;top:530px;height:310px"></i><i class="bar a" id="br5" style="left:850px;top:550px;height:290px"></i><i class="bar k" id="br6" style="left:980px;top:450px;height:390px"></i><i class="bar a" id="br7" style="left:1110px;top:370px;height:470px"></i>
107
+ <i class="base"></i>
108
+ <svg class="trend"><polyline id="tr" pathLength="1" points="245,630 375,580 505,600 635,520 765,470 895,490 1025,390 1155,310"/></svg>
109
+ <i class="ah" id="ah" style="transform:rotate(58deg)"></i>
110
+ <p class="xl" id="x1" style="left:200px">היום</p>
111
+ <p class="xl" id="x2" style="left:1050px">בעוד 20 שנה</p>
112
+ <p class="t" id="t2a" style="right:130px;top:300px;font-size:80px;font-weight:700">הזמן</p>
113
+ <div class="row" style="position:absolute;right:130px;top:405px;font-size:80px"><div class="hw"><i class="hb" id="hb-t2b"></i><p id="t2b" class="em">עובד בשבילכם</p></div></div>
114
+ <p class="t" id="t2c" style="right:130px;top:530px;font-size:38px;color:var(--mute)">כל שנה נבנית על הקודמת</p>
115
+ <div class="capw"><div class="cap" id="cap2"><i class="mk"></i><div class="ct" id="ct2"><p id="cp2a">לאורך זמן,</p><p id="cp2b" class="em">הריבית דריבית</p><p id="cp2c">עובדת</p></div><i class="cur" id="cu2"></i></div></div>
116
+ </div>
117
+ </section>
118
+ <section id="s3" class="clip scene" data-start="7.8" data-duration="3.8">
119
+ <div class="cam" id="c3">
120
+ <i class="pl" style="left:1300px;top:-400px;width:800px;height:1800px;transform:rotate(-30deg)"></i>
121
+ <div class="card" id="nc" style="left:180px;top:170px;width:760px;height:600px"><i class="tape tl"></i>
122
+ <p class="t" id="n1" style="right:70px;top:64px;font-size:36px;color:var(--mute)">צמיחה מצטברת לדוגמה</p>
123
+ <div class="roll"><div class="rl" id="rl"><p class="rv" id="rv0">0%</p><p class="rv" id="rv1">9%</p><p class="rv" id="rv2">18%</p><p class="rv" id="rv3">27%</p><p class="rv" id="rv4">35%</p><p class="rv" id="rv5">42%</p></div></div>
124
+ <svg class="spk" viewBox="0 0 640 110"><polyline id="sp" pathLength="1" points="0,100 90,86 180,92 270,64 360,70 450,40 540,34 640,8"/></svg>
125
+ <p class="t fine" id="n2" style="right:70px;top:536px">נתוני הדגמה · אין באמור ייעוץ השקעות</p>
126
+ </div>
127
+ <div class="card hz" id="hz1" style="top:230px"><p class="t" id="z1" style="right:50px;top:36px;font-size:44px;font-weight:700">טווח קצר</p><i class="hb2" id="zb1" style="width:150px"></i></div>
128
+ <div class="card hz" id="hz2" style="top:480px"><p class="t" id="z2" style="right:50px;top:36px;font-size:44px;font-weight:700">טווח ארוך</p><i class="hb2 a" id="zb2" style="width:400px"></i></div>
129
+ <div class="capw"><div class="cap" id="cap3"><i class="mk"></i><div class="ct" id="ct3"><p id="cp3a">סבלנות היא</p><p id="cp3b" class="em">חלק מהתוכנית</p></div><i class="cur" id="cu3"></i></div></div>
130
+ </div>
131
+ </section>
132
+ <section id="s4" class="clip scene" data-start="11.6" data-duration="3.6">
133
+ <div class="cam" id="c4">
134
+ <i class="pl" style="left:-300px;top:-400px;width:900px;height:1800px;transform:rotate(32deg)"></i>
135
+ <div class="cw" style="top:250px"><i class="endmk" id="emk"></i></div>
136
+ <div class="cw" style="top:360px"><p class="ebox" id="eb" style="font-size:84px">צומחים בסבלנות</p></div>
137
+ <div class="cw" style="top:540px"><div class="row" style="font-size:58px"><p id="e4a" style="font-weight:400">מתחילים</p><p id="e4b" class="em">היום.</p></div></div>
138
+ <div class="cw" style="top:680px"><div class="cta" id="cta"><i></i><p id="ctat">לפרטים ולתנאים</p></div></div>
139
+ <p class="t c fine" id="fn" style="top:820px">אין באמור ייעוץ השקעות · להמחשה בלבד</p>
140
+ </div>
141
+ </section>
142
+ <div id="ov" class="clip" data-start="0" data-duration="15.2">
143
+ <div class="brand" id="brw"><i class="bm"></i><p id="brand">המותג שלכם</p></div>
144
+ </div>
145
+ </div>
146
+ <script>
147
+ const tl=gsap.timeline({paused:true});
148
+ const S=[0,3.6,7.8,11.6,15.2],D=15.2;
149
+ const P="power3.out",X="expo.out",B="back.out(1.7)";
150
+ tl.fromTo("#brw",{opacity:0,y:-16},{opacity:1,y:0,duration:.5,ease:P},.15);
151
+ function capIn(n,at,W,E){tl.fromTo("#cap"+n,{opacity:0,y:24},{opacity:1,y:0,duration:.35,ease:"power2.out"},at);const d=Math.min(1.3,W/700),t0=at+.3;
152
+ tl.fromTo("#ct"+n,{maxWidth:0},{maxWidth:W,duration:d,ease:"steps("+Math.max(8,Math.round(W/28))+")"},t0);
153
+ let r=Math.floor((E-t0-d-.45)/.24);if(r%2===0)r--;if(r>0)tl.fromTo("#cu"+n,{opacity:1},{opacity:0,duration:.24,repeat:r,yoyo:true,ease:"steps(1)"},t0+d);}
154
+ function hl(id,at){tl.fromTo("#hb-"+id,{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.5,ease:"power2.inOut"},at);}
155
+ function draw(sel,at,d,e){tl.fromTo(sel,{strokeDasharray:1,strokeDashoffset:1},{strokeDashoffset:0,duration:d,ease:e||"power2.inOut",autoRound:false},at);}
156
+ function fadeOut(i,d){tl.to("#c"+(i+1),{opacity:0,duration:d||.35,ease:"power1.in"},S[i+1]-(d||.35));}
157
+ function camIn(i){tl.fromTo("#c"+(i+1),{opacity:0},{opacity:1,duration:.3},S[i]);}
158
+
159
+ // s1 stickers + figures
160
+ camIn(0);
161
+ tl.fromTo("#c1",{scale:1},{scale:1.03,duration:3.6,ease:"none"},S[0]);
162
+ tl.fromTo(["#f1","#f2","#f3"],{y:120,opacity:0},{y:0,opacity:1,duration:.6,ease:X,stagger:.12},S[0]+.1);
163
+ tl.fromTo(".sk",{x:-60,opacity:0},{x:0,opacity:1,duration:.4,ease:B,stagger:.2},S[0]+.5);
164
+ tl.fromTo("#f2 .hd",{y:0},{y:-12,duration:.35,ease:"sine.inOut",yoyo:true,repeat:3},S[0]+1.4);
165
+ capIn(1,S[0]+1.2,620,S[1]);
166
+ fadeOut(0);
167
+ // s2 bars rise + trend arrow
168
+ camIn(1);
169
+ tl.fromTo("#il",{scale:.5,opacity:0},{scale:1,opacity:1,duration:.4,ease:B},S[1]+.2);
170
+ tl.fromTo(".bar",{scaleY:0,transformOrigin:"50% 100%"},{scaleY:1,duration:.55,ease:"power3.out",stagger:.12},S[1]+.3);
171
+ draw("#tr",S[1]+1.1,1,"power1.inOut");
172
+ tl.fromTo("#ah",{scale:0,opacity:0},{scale:1,opacity:1,duration:.3,ease:B},S[1]+2.05);
173
+ tl.fromTo(["#x1","#x2"],{opacity:0},{opacity:1,duration:.4,stagger:.3},S[1]+.6);
174
+ tl.fromTo(["#t2a","#t2b","#t2c"],{opacity:0,y:30},{opacity:1,y:0,duration:.45,ease:P,stagger:.12},S[1]+.3);
175
+ hl("t2b",S[1]+.8);
176
+ capIn(2,S[1]+1.6,720,S[2]);
177
+ fadeOut(1);
178
+ // s3 rolling number + horizons
179
+ camIn(2);
180
+ tl.fromTo("#nc",{y:120,opacity:0,rotation:-3},{y:0,opacity:1,rotation:-1,duration:.7,ease:X},S[2]+.05);
181
+ tl.fromTo("#nc .tape",{scale:0},{scale:1,duration:.3,ease:B},S[2]+.5);
182
+ tl.fromTo("#n1",{opacity:0},{opacity:1,duration:.4},S[2]+.4);
183
+ tl.fromTo("#rl",{y:0},{y:-1150,duration:1.6,ease:"steps(5)"},S[2]+.5);
184
+ draw("#sp",S[2]+.5,1.6,"power1.inOut");
185
+ tl.fromTo("#n2",{opacity:0},{opacity:1,duration:.4},S[2]+1.2);
186
+ tl.fromTo(["#hz1","#hz2"],{x:-80,opacity:0},{x:0,opacity:1,duration:.5,ease:X,stagger:.2},S[2]+.4);
187
+ tl.fromTo("#zb1",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.5,ease:"power2.out"},S[2]+.9);
188
+ tl.fromTo("#zb2",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:1.1,ease:"power2.out"},S[2]+1.1);
189
+ capIn(3,S[2]+1.7,520,S[3]);
190
+ fadeOut(2);
191
+ // s4 close
192
+ camIn(3);
193
+ tl.fromTo("#emk",{scale:0},{scale:1,duration:.5,ease:B},S[3]+.15);
194
+ tl.fromTo("#eb",{clipPath:"inset(0% 0% 0% 100%)"},{clipPath:"inset(0% 0% 0% 0%)",duration:.7,ease:"power2.inOut"},S[3]+.4);
195
+ tl.fromTo(["#e4a","#e4b"],{opacity:0,y:30},{opacity:1,y:0,duration:.5,ease:P,stagger:.18},S[3]+.9);
196
+ tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+1.4);
197
+ tl.fromTo("#fn",{opacity:0},{opacity:1,duration:.4},S[3]+1.7);
198
+ tl.set({},{},D);
199
+ window.__timelines=window.__timelines||{};window.__timelines["bank-growth-bars"]=tl;
200
+ <\/script>
201
+ </body>
202
+ </html>
203
+ `;export{e as default};