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/lib/catalog/hyperframes/bank-first-salary.html ADDED
@@ -0,0 +1,211 @@
1
+ <!doctype html>
2
+ <html lang="he" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=1080, height=1920">
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:#9AA1AC}
14
+ *{box-sizing:border-box;margin:0;padding:0}
15
+ html,body{width:1080px;height:1920px;overflow:hidden;background:var(--bg)}
16
+ body{font-family:"Heebo",Arial,sans-serif;-webkit-font-smoothing:antialiased}
17
+ #root{position:relative;width:1080px;height:1920px;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
+ .capw{bottom:150px}
68
+ .cap .ct{font-size:38px}
69
+ .cf{position:absolute;width:26px;height:26px;background:var(--fg)}
70
+ .cf.a{background:var(--accent)}
71
+ .cf.m{background:var(--mute)}
72
+ .nt{position:absolute;left:140px;right:140px;top:740px;height:170px;border-radius:28px}
73
+ .nt i{position:absolute;right:36px;top:45px;width:80px;height:80px;border-radius:18px;background:var(--accent)}
74
+ .nt i::after{content:"";position:absolute;left:22px;top:24px;width:36px;height:22px;border-left:8px solid var(--card);border-bottom:8px solid var(--card);transform:rotate(-45deg)}
75
+ .dr{position:absolute;left:70px;right:70px;display:flex;justify-content:space-between;align-items:baseline;padding-bottom:20px;border-bottom:3px solid color-mix(in srgb,var(--mute) 25%,var(--card))}
76
+ .dr p{font-size:42px;color:var(--fg);white-space:nowrap}
77
+ .net{position:absolute;left:70px;right:70px;top:590px;display:flex;justify-content:space-between;align-items:baseline}
78
+ .net p{font-size:54px;font-weight:700;white-space:nowrap}
79
+ .bc{position:absolute;left:70px;top:740px;width:300px;height:70px;background:repeating-linear-gradient(90deg,var(--fg) 0 6px,transparent 6px 12px,var(--fg) 12px 15px,transparent 15px 22px);opacity:.75}
80
+ .stp{position:absolute;right:80px;top:700px;width:190px;height:190px;border-radius:50%;border:8px solid var(--accent);display:flex;align-items:center;justify-content:center;transform:rotate(-14deg)}
81
+ .stp p{font-size:50px;font-weight:700;color:var(--accent)}
82
+ .chip{position:absolute;left:340px;top:410px;width:400px;height:110px;border-radius:55px;background:var(--fg);display:flex;align-items:center;justify-content:center;gap:16px}
83
+ .chip p{font-size:56px;font-weight:700;color:var(--card);white-space:nowrap}
84
+ .chip i{width:18px;height:18px;background:var(--accent)}
85
+ .sv{position:absolute;left:0;top:0;width:1080px;height:1920px;overflow:visible}
86
+ .sl{stroke:color-mix(in srgb,var(--fg) 40%,var(--bg));stroke-width:5;stroke-dasharray:1;stroke-linecap:round}
87
+ .pk{top:720px;width:290px;height:600px;overflow:hidden;border-radius:18px 18px 110px 110px}
88
+ .lv{position:absolute;left:0;right:0;bottom:0;background:var(--fg);opacity:.14}
89
+ .lv.a{background:var(--accent);opacity:.2}
90
+ .lv.m{background:var(--mute);opacity:.3}
91
+ .flap{position:absolute;left:0;right:0;top:0;height:70px;background:var(--fg)}
92
+ #pk1 .flap{background:var(--accent)}
93
+ #pk2 .flap{background:var(--mute)}
94
+ .coin{position:absolute;top:560px;width:48px;height:48px;border-radius:50%;background:var(--accent);box-shadow:inset 0 0 0 8px color-mix(in srgb,var(--accent) 70%,var(--fg))}
95
+ </style>
96
+ </head>
97
+ <body>
98
+ <div id="root" data-composition-id="bank-first-salary" data-start="0" data-width="1080" data-height="1920" data-duration="15">
99
+ <section id="s1" class="clip scene" data-start="0" data-duration="3.6">
100
+ <div class="cam" id="c1">
101
+ <i class="pl" style="left:-420px;top:-200px;width:820px;height:2600px;transform:rotate(24deg)"></i>
102
+ <div class="cw" style="top:220px"><div class="row" style="font-size:92px"><p id="h1a">המשכורת</p><div class="hw"><i class="hb" id="hb-h1b"></i><p id="h1b" class="em">הראשונה</p></div></div></div>
103
+ <p class="t c" id="h1c" style="top:340px;font-size:92px;font-weight:700">נכנסה לחשבון</p>
104
+ <i class="cf a" style="left:150px;top:660px"></i><i class="cf k" style="left:300px;top:620px"></i><i class="cf a" style="left:820px;top:640px"></i><i class="cf m" style="left:930px;top:710px"></i><i class="cf m" style="left:210px;top:900px"></i><i class="cf a" style="left:880px;top:960px"></i><i class="cf k" style="left:120px;top:1080px"></i><i class="cf k" style="left:960px;top:1100px"></i>
105
+ <div class="card nt" id="nt"><i></i><p class="t" id="n1" style="right:150px;top:36px;font-size:44px;font-weight:700">הופקדה משכורת</p><p class="t" id="n2" style="right:150px;top:100px;font-size:34px;color:var(--mute)">7,800 ₪ · עכשיו</p></div>
106
+ <div class="fig a" id="fg" style="left:440px;top:1200px;transform:scale(1.6);transform-origin:50% 100%"><i class="hd"></i><i class="bd"></i><i class="nk"></i></div>
107
+ <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></div><i class="cur" id="cu1"></i></div></div>
108
+ </div>
109
+ </section>
110
+ <section id="s2" class="clip scene" data-start="3.6" data-duration="3.8">
111
+ <div class="cam" id="c2">
112
+ <i class="pl" style="left:600px;top:-300px;width:800px;height:2600px;transform:rotate(-22deg)"></i>
113
+ <div class="cw" style="top:220px"><div class="row" style="font-size:84px"><p id="t2a">מסתכלים על</p><div class="hw"><i class="hb" id="hb-t2b"></i><p id="t2b" class="em">הנטו</p></div></div></div>
114
+ <div class="card" id="ps" style="left:110px;top:400px;width:860px;height:930px"><i class="tape tl"></i><i class="tape tr"></i>
115
+ <p class="t" id="ps1" style="right:70px;top:60px;font-size:62px;font-weight:700">תלוש שכר</p>
116
+ <p class="t" id="ps2" style="right:70px;top:144px;font-size:34px;color:var(--mute)">החודש הראשון · להמחשה</p>
117
+ <div class="dr" style="top:250px"><p id="r0a">שכר ברוטו</p><p id="r0b">9,000 ₪</p></div><div class="dr" style="top:350px"><p id="r1a">מסים וביטוחים</p><p id="r1b">800 ₪</p></div><div class="dr" style="top:450px"><p id="r2a">פנסיה</p><p id="r2b">400 ₪</p></div>
118
+ <div class="net"><p id="nta">נטו לחשבון</p><div class="hw"><i class="hb" id="hb-ntb"></i><p id="ntb" class="em">7,800 ₪</p></div></div>
119
+ <i class="bc"></i>
120
+ <div class="stp" id="stp"><p id="stt">שולם</p></div>
121
+ </div>
122
+ <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></div><i class="cur" id="cu2"></i></div></div>
123
+ </div>
124
+ </section>
125
+ <section id="s3" class="clip scene" data-start="7.4" data-duration="4.2">
126
+ <div class="cam" id="c3">
127
+ <i class="pl" style="left:-420px;top:-200px;width:820px;height:2600px;transform:rotate(24deg)"></i>
128
+ <div class="cw" style="top:200px"><div class="row" style="font-size:84px"><p id="t3a">שלושה</p><div class="hw"><i class="hb" id="hb-t3b"></i><p id="t3b" class="em">כיסים</p></div></div></div>
129
+ <svg class="sv"><line class="sl" id="sl0" pathLength="1" x1="540" y1="520" x2="860" y2="700"/><line class="sl" id="sl1" pathLength="1" x1="540" y1="520" x2="540" y2="700"/><line class="sl" id="sl2" pathLength="1" x1="540" y1="520" x2="220" y2="700"/></svg>
130
+ <div class="card pk" id="pk0" style="right:75px"><i class="lv k" id="lv0" style="height:390px"></i><i class="flap"></i><p class="t c" id="pa0" style="top:120px;font-size:44px;font-weight:700">הוצאות</p><p class="t c" id="pp0" style="top:180px;font-size:72px;font-weight:700">60%</p><p class="t c" id="pv0" style="top:272px;font-size:32px;color:var(--mute)">4,680 ₪</p></div><div class="card pk" id="pk1" style="right:395px"><i class="lv a" id="lv1" style="height:190px"></i><i class="flap"></i><p class="t c" id="pa1" style="top:120px;font-size:44px;font-weight:700">חיסכון</p><p class="t c" id="pp1" style="top:180px;font-size:72px;font-weight:700">20%</p><p class="t c" id="pv1" style="top:272px;font-size:32px;color:var(--mute)">1,560 ₪</p></div><div class="card pk" id="pk2" style="right:715px"><i class="lv m" id="lv2" style="height:190px"></i><i class="flap"></i><p class="t c" id="pa2" style="top:120px;font-size:44px;font-weight:700">בילויים</p><p class="t c" id="pp2" style="top:180px;font-size:72px;font-weight:700">20%</p><p class="t c" id="pv2" style="top:272px;font-size:32px;color:var(--mute)">1,560 ₪</p></div>
131
+ <i class="coin" id="co00" style="left:836px"></i><i class="coin" id="co01" style="left:836px"></i><i class="coin" id="co10" style="left:516px"></i><i class="coin" id="co11" style="left:516px"></i><i class="coin" id="co20" style="left:196px"></i><i class="coin" id="co21" style="left:196px"></i>
132
+ <div class="chip" id="chp"><i></i><p id="chv">7,800 ₪</p></div>
133
+ <p class="t c fine" id="f3" style="top:1372px;font-size:30px">חלוקה לדוגמה · להמחשה בלבד</p>
134
+ <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>
135
+ </div>
136
+ </section>
137
+ <section id="s4" class="clip scene" data-start="11.6" data-duration="3.4">
138
+ <div class="cam" id="c4">
139
+ <i class="pl" style="left:600px;top:-300px;width:800px;height:2600px;transform:rotate(-22deg)"></i>
140
+ <div class="cw" style="top:680px"><i class="endmk" id="emk"></i></div>
141
+ <div class="cw" style="top:790px"><p class="ebox" id="eb" style="font-size:84px">מתחילים נכון</p></div>
142
+ <div class="cw" style="top:970px"><div class="row" style="font-size:58px"><p id="e4a" style="font-weight:400">מהמשכורת</p><p id="e4b" class="em">הראשונה</p></div></div>
143
+ <div class="cw" style="top:1110px"><div class="cta" id="cta"><i></i><p id="ctat">פותחים חיסכון באפליקציה</p></div></div>
144
+ <p class="t c fine" id="fn" style="top:1250px">להמחשה בלבד · בכפוף לתנאי הבנק</p>
145
+ </div>
146
+ </section>
147
+ <div id="ov" class="clip" data-start="0" data-duration="15">
148
+ <div class="brand" id="brw"><i class="bm"></i><p id="brand">המותג שלכם</p></div>
149
+ </div>
150
+ </div>
151
+ <script>
152
+ const tl=gsap.timeline({paused:true});
153
+ const S=[0,3.6,7.4,11.6,15],D=15;
154
+ const P="power3.out",X="expo.out",B="back.out(1.7)";
155
+ tl.fromTo("#brw",{opacity:0,y:-16},{opacity:1,y:0,duration:.5,ease:P},.15);
156
+ 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;
157
+ tl.fromTo("#ct"+n,{maxWidth:0},{maxWidth:W,duration:d,ease:"steps("+Math.max(8,Math.round(W/28))+")"},t0);
158
+ 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);}
159
+ function hl(id,at){tl.fromTo("#hb-"+id,{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.5,ease:"power2.inOut"},at);}
160
+ function draw(sel,at,d,e){tl.fromTo(sel,{strokeDasharray:1,strokeDashoffset:1},{strokeDashoffset:0,duration:d,ease:e||"power2.inOut",autoRound:false},at);}
161
+ function fadeOut(i,d){tl.to("#c"+(i+1),{opacity:0,duration:d||.35,ease:"power1.in"},S[i+1]-(d||.35));}
162
+ function camIn(i){tl.fromTo("#c"+(i+1),{opacity:0},{opacity:1,duration:.3},S[i]);}
163
+
164
+ // s1 deposit notification + cheering figure
165
+ camIn(0);
166
+ tl.fromTo(["#h1a","#h1b","#h1c"],{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P,stagger:.12},S[0]+.1);
167
+ hl("h1b",S[0]+.6);
168
+ tl.fromTo("#fg",{y:300},{y:0,duration:.7,ease:X},S[0]+.15);
169
+ tl.fromTo("#nt",{y:-120,opacity:0,scale:.8},{y:0,opacity:1,scale:1,duration:.55,ease:B},S[0]+.7);
170
+ tl.fromTo("#fg",{rotation:0},{keyframes:[{rotation:-4,y:-30,duration:.2},{rotation:4,y:0,duration:.2},{rotation:-3,y:-24,duration:.2},{rotation:0,y:0,duration:.2}]},S[0]+1.2);
171
+ tl.fromTo(".cf",{y:-500,rotation:0,opacity:0},{y:0,rotation:i=>i%2?200:-160,opacity:1,duration:1,ease:"power2.out",stagger:.06},S[0]+1);
172
+ capIn(1,S[0]+1.3,460,S[1]);
173
+ fadeOut(0);
174
+ // s2 payslip
175
+ camIn(1);
176
+ tl.fromTo(["#t2a","#t2b"],{opacity:0,y:30},{opacity:1,y:0,duration:.45,ease:P,stagger:.1},S[1]+.1);
177
+ hl("t2b",S[1]+.5);
178
+ tl.fromTo("#ps",{y:160,opacity:0,rotation:3},{y:0,opacity:1,rotation:-1,duration:.7,ease:X},S[1]+.1);
179
+ tl.fromTo("#ps .tape",{scale:0},{scale:1,duration:.3,ease:B,stagger:.1},S[1]+.55);
180
+ tl.fromTo("#ps .dr",{opacity:0,x:-40},{opacity:1,x:0,duration:.4,ease:P,stagger:.14},S[1]+.6);
181
+ tl.fromTo(["#nta","#ntb"],{opacity:0,y:20},{opacity:1,y:0,duration:.4,ease:P,stagger:.1},S[1]+1.1);
182
+ hl("ntb",S[1]+1.45);
183
+ tl.fromTo("#stp",{scale:2.2,opacity:0},{scale:1,opacity:1,duration:.35,ease:"power3.in"},S[1]+1.8);
184
+ tl.fromTo("#ps",{x:0},{keyframes:[{x:-6,duration:.05},{x:5,duration:.05},{x:0,duration:.05}]},S[1]+2.15);
185
+ capIn(2,S[1]+1.4,560,S[2]);
186
+ fadeOut(1);
187
+ // s3 three pockets
188
+ camIn(2);
189
+ tl.fromTo(["#t3a","#t3b"],{opacity:0,y:30},{opacity:1,y:0,duration:.45,ease:P,stagger:.1},S[2]+.1);
190
+ hl("t3b",S[2]+.5);
191
+ tl.fromTo("#chp",{scale:.4,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[2]+.15);
192
+ tl.fromTo(".pk",{y:120,opacity:0},{y:0,opacity:1,duration:.6,ease:X,stagger:.12},S[2]+.3);
193
+ for(let k=0;k<3;k++){draw("#sl"+k,S[2]+.7+k*.15,.5,"power2.out");
194
+ for(let j=0;j<2;j++)tl.fromTo("#co"+k+j,{y:0,opacity:0,scale:.6},{keyframes:[{y:40,opacity:1,scale:1,duration:.15},{y:460,duration:.45,ease:"power2.in"},{opacity:0,duration:.1}]},S[2]+1+k*.25+j*.35);
195
+ tl.fromTo("#lv"+k,{scaleY:0,transformOrigin:"50% 100%"},{scaleY:1,duration:.8,ease:"power2.out"},S[2]+1.5+k*.25);}
196
+ tl.fromTo(".pk p",{opacity:0},{opacity:1,duration:.4,stagger:.06},S[2]+.9);
197
+ tl.fromTo("#f3",{opacity:0},{opacity:1,duration:.4},S[2]+1.8);
198
+ capIn(3,S[2]+1.9,500,S[3]);
199
+ fadeOut(2);
200
+ // s4 close
201
+ camIn(3);
202
+ tl.fromTo("#emk",{scale:0},{scale:1,duration:.5,ease:B},S[3]+.15);
203
+ tl.fromTo("#eb",{clipPath:"inset(0% 0% 0% 100%)"},{clipPath:"inset(0% 0% 0% 0%)",duration:.7,ease:"power2.inOut"},S[3]+.4);
204
+ tl.fromTo(["#e4a","#e4b"],{opacity:0,y:30},{opacity:1,y:0,duration:.5,ease:P,stagger:.18},S[3]+.9);
205
+ tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+1.3);
206
+ tl.fromTo("#fn",{opacity:0},{opacity:1,duration:.4},S[3]+1.6);
207
+ tl.set({},{},D);
208
+ window.__timelines=window.__timelines||{};window.__timelines["bank-first-salary"]=tl;
209
+ </script>
210
+ </body>
211
+ </html>
package/lib/catalog/hyperframes/bank-fomo-stop.html ADDED
@@ -0,0 +1,229 @@
1
+ <!doctype html>
2
+ <html lang="he" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=1080, height=1920">
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:#16181D;--accent:#E3063B;--card:#FFFFFF;--mute:#868D99;--glow:#FF3B5C}
14
+ *{box-sizing:border-box;margin:0;padding:0}
15
+ html,body{width:1080px;height:1920px;overflow:hidden;background:var(--bg)}
16
+ body{font-family:"Heebo",Arial,sans-serif;-webkit-font-smoothing:antialiased}
17
+ #root{position:relative;width:1080px;height:1920px;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
+ .capw{bottom:150px}
68
+ .cap .ct{font-size:38px}
69
+ .cap .cur{height:38px}
70
+ .chat{position:absolute;left:90px;top:360px;width:900px;height:1180px;border-radius:36px;overflow:hidden;background:color-mix(in srgb,var(--mute) 12%,var(--card));box-shadow:0 30px 70px color-mix(in srgb,var(--fg) 18%,transparent)}
71
+ .chd{position:absolute;left:0;right:0;top:0;height:130px;background:var(--fg)}
72
+ .gav{position:absolute;right:36px;top:27px;width:76px;height:76px;border-radius:50%;background:var(--accent)}
73
+ .gav::after{content:"";position:absolute;left:20px;top:22px;width:36px;height:30px;background:var(--card);clip-path:polygon(50% 0,100% 100%,0 100%)}
74
+ .b1{position:absolute;right:30px;top:160px;width:620px;height:290px;border-radius:32px 8px 32px 32px;background:var(--card);box-shadow:0 8px 20px color-mix(in srgb,var(--fg) 10%,transparent)}
75
+ .b1 svg{position:absolute;left:30px;top:92px;width:560px;height:170px;overflow:visible}
76
+ .rk{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
77
+ .rh{fill:var(--accent)}
78
+ .bb,.bb.r,.bo{position:absolute;right:30px;padding:16px 34px 22px;border-radius:32px 8px 32px 32px;background:var(--card);box-shadow:0 8px 20px color-mix(in srgb,var(--fg) 10%,transparent)}
79
+ .bb p,.bo p{font-size:42px;white-space:nowrap;line-height:1.3;color:var(--fg)}
80
+ .bb.r{background:var(--accent)}
81
+ .bb.r p{color:var(--card);font-weight:700}
82
+ .bo{right:auto;left:30px;top:905px;border-radius:8px 32px 32px 32px;background:var(--fg)}
83
+ .bo p{color:var(--card)}
84
+ .typ{position:absolute;right:30px;top:815px;width:150px;height:70px;border-radius:32px 8px 32px 32px;background:var(--card);display:flex;align-items:center;justify-content:center;gap:12px}
85
+ .typ i{width:16px;height:16px;border-radius:50%;background:var(--mute)}
86
+ .inp{position:absolute;left:30px;right:30px;top:1060px;height:84px;border-radius:42px;background:var(--card)}
87
+ .inp i{position:absolute;left:10px;top:10px;width:64px;height:64px;border-radius:50%;background:var(--accent)}
88
+ .dk{position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--glow) 20%,var(--fg)),var(--fg) 62%)}
89
+ .gh{position:absolute;height:92px;border-radius:32px 8px 32px 32px;background:color-mix(in srgb,var(--card) 6%,transparent)}
90
+ .pz{position:absolute;top:560px;width:76px;height:270px;border-radius:38px;background:var(--glow);box-shadow:0 0 50px 4px color-mix(in srgb,var(--glow) 70%,transparent),0 0 170px 40px color-mix(in srgb,var(--glow) 30%,transparent)}
91
+ .prg{position:absolute;left:340px;top:495px;width:400px;height:400px;border-radius:50%;border:4px solid color-mix(in srgb,var(--glow) 45%,transparent)}
92
+ .qc{left:90px;top:470px;width:900px;height:840px}
93
+ .qn{position:absolute;right:50px;width:120px;height:120px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center}
94
+ .qn p{font-size:64px;font-weight:700;color:var(--card)}
95
+ .qd{position:absolute;left:60px;right:60px;height:3px;background:color-mix(in srgb,var(--mute) 25%,var(--card))}
96
+ .hyp{position:absolute;left:0;right:0;top:470px;display:flex;justify-content:center}
97
+ .hyp .bb{position:relative;right:auto;padding:20px 44px 28px}
98
+ .hyp .bb p{font-size:58px}
99
+ .stk{position:absolute;left:-20px;right:-20px;top:50%;height:10px;margin-top:-5px;border-radius:5px;background:var(--fg);transform-origin:100% 50%}
100
+ .pcs{position:absolute;left:0;right:0;top:1150px;display:flex;justify-content:center;gap:26px}
101
+ .pch{display:flex;align-items:center;gap:14px;height:90px;padding:0 34px;border-radius:45px;background:var(--card);box-shadow:0 10px 26px color-mix(in srgb,var(--fg) 12%,transparent)}
102
+ .pch i{width:22px;height:22px;border-radius:5px;background:var(--accent)}
103
+ .pch p{font-size:40px;font-weight:700;white-space:nowrap;color:var(--fg)}
104
+ </style>
105
+ </head>
106
+ <body>
107
+ <div id="root" data-composition-id="bank-fomo-stop" data-start="0" data-width="1080" data-height="1920" data-duration="15.6">
108
+ <section id="s1" class="clip scene" data-start="0" data-duration="4">
109
+ <div class="cam" id="c1">
110
+ <i class="pl" style="left:-420px;top:-200px;width:820px;height:2600px;transform:rotate(24deg)"></i>
111
+ <div class="cw" style="top:160px"><div class="row" style="font-size:110px"><p id="h1a">כולם</p><div class="hw"><i class="hb" id="hb-h1b"></i><p id="h1b" class="em">קונים?</p></div></div></div>
112
+ <div class="chat" id="cht">
113
+ <div class="chd"><i class="gav"></i><p class="t" id="g1" style="right:136px;top:20px;font-size:40px;font-weight:700;color:var(--card)">קבוצת השקעות</p><p class="t" id="g2" style="right:136px;top:72px;font-size:28px;color:color-mix(in srgb,var(--card) 62%,var(--fg))">128 משתתפים</p></div>
114
+ <div class="b1" id="b1"><p class="t" id="b1a" style="right:32px;top:22px;font-size:44px;font-weight:700">המניה הזאת טסה!</p>
115
+ <svg viewBox="0 0 560 170"><polyline class="rk" id="rkl" pathLength="1" points="0,160 90,130 150,145 240,90 300,105 400,40 470,52 530,12"/><polygon class="rh" id="rkh" points="548,0 512,6 534,32"/></svg>
116
+ <p class="t" id="b1b" style="right:32px;top:216px;font-size:36px;font-weight:700;color:var(--accent)">עלייה של 38% השבוע</p></div>
117
+ <div class="bb" id="bb0" style="top:470px"><p id="bt0">כולם כבר נכנסו</p></div><div class="bb" id="bb1" style="top:585px"><p id="bt1">עוד שבוע זה כפול</p></div><div class="bb r" id="bb2" style="top:700px"><p id="bt2">אל תפספסו!!!</p></div>
118
+ <div class="typ" id="typ"><i></i><i></i><i></i></div>
119
+ <div class="bo" id="bo"><p id="bot">רגע... כמה זה מסוכן?</p></div>
120
+ <div class="inp"><i></i></div>
121
+ </div>
122
+ <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></div><i class="cur" id="cu1"></i></div></div>
123
+ </div>
124
+ </section>
125
+ <section id="s2" class="clip scene" data-start="4" data-duration="3.6">
126
+ <div class="cam" id="c2">
127
+ <i class="dk"></i>
128
+ <i class="gh" style="left:620px;top:300px;width:360px"></i><i class="gh" style="left:700px;top:470px;width:300px"></i><i class="gh" style="left:580px;top:620px;width:420px"></i><i class="gh" style="left:160px;top:380px;width:260px"></i><i class="gh" style="left:120px;top:1400px;width:340px"></i><i class="gh" style="left:600px;top:1520px;width:380px"></i>
129
+ <i class="prg" id="prg"></i>
130
+ <i class="pz" id="pz1" style="left:432px"></i><i class="pz" id="pz2" style="left:572px"></i>
131
+ <p class="t c" id="d1" style="top:960px;font-size:170px;font-weight:700;color:var(--card)">רגע.</p>
132
+ <p class="t c" id="d2" style="top:1190px;font-size:56px;color:color-mix(in srgb,var(--card) 78%,var(--fg))">לפני שקונים, עוצרים לחשוב.</p>
133
+ <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></div><i class="cur" id="cu2"></i></div></div>
134
+ </div>
135
+ </section>
136
+ <section id="s3" class="clip scene" data-start="7.6" data-duration="4.4">
137
+ <div class="cam" id="c3">
138
+ <i class="pl" style="left:600px;top:-300px;width:800px;height:2600px;transform:rotate(-22deg)"></i>
139
+ <div class="cw" style="top:160px"><div class="row" style="font-size:96px"><p id="t3a">שלוש</p><div class="hw"><i class="hb" id="hb-t3b"></i><p id="t3b" class="em">שאלות</p></div></div></div>
140
+ <div class="cw" style="top:285px"><div class="row" style="font-size:96px"><p id="t3c">לפני שקונים</p></div></div>
141
+ <div class="card qc" id="qc"><i class="tape tl"></i><i class="tape tr"></i><div class="qn" id="qn0" style="top:60px"><p id="qnn0">1</p></div><p class="t" id="qa0" style="right:200px;top:62px;font-size:52px;font-weight:700">למה אני קונה?</p><p class="t" id="qb0" style="right:200px;top:140px;font-size:38px;color:var(--mute)">המלצה בקבוצה היא לא סיבה</p><i class="qd" style="top:245px"></i><div class="qn" id="qn1" style="top:350px"><p id="qnn1">2</p></div><p class="t" id="qa1" style="right:200px;top:352px;font-size:52px;font-weight:700">כמה אני מוכן להפסיד?</p><p class="t" id="qb1" style="right:200px;top:430px;font-size:38px;color:var(--mute)">מניה יכולה גם לרדת</p><i class="qd" style="top:535px"></i><div class="qn" id="qn2" style="top:640px"><p id="qnn2">3</p></div><p class="t" id="qa2" style="right:200px;top:642px;font-size:52px;font-weight:700">זה מתאים לתוכנית שלי?</p><p class="t" id="qb2" style="right:200px;top:720px;font-size:38px;color:var(--mute)">לטווח, למטרה ולרמת הסיכון</p></div>
142
+ <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>
143
+ </div>
144
+ </section>
145
+ <section id="s4" class="clip scene" data-start="12" data-duration="3.6">
146
+ <div class="cam" id="c4">
147
+ <i class="pl" style="left:-420px;top:-200px;width:820px;height:2600px;transform:rotate(24deg)"></i>
148
+ <div class="hyp"><div class="bb r" id="hb4"><p id="h4t">אל תפספסו!!!</p><i class="stk" id="stk"></i></div></div>
149
+ <div class="cw" style="top:700px"><div class="row" style="font-size:110px"><p id="e1">משקיעים</p></div></div>
150
+ <div class="cw" style="top:835px"><div class="row" style="font-size:110px"><div class="hw"><i class="hb" id="hb-e2"></i><p id="e2" class="em">לפי תוכנית</p></div></div></div>
151
+ <p class="t c" id="e3" style="top:990px;font-size:56px;color:var(--mute)">לא לפי הרעש</p>
152
+ <div class="pcs"><div class="pch" id="pc0"><i></i><p id="pct0">מטרה</p></div><div class="pch" id="pc1"><i></i><p id="pct1">טווח</p></div><div class="pch" id="pc2"><i></i><p id="pct2">סיכון</p></div></div>
153
+ <div class="cw" style="top:1320px"><div class="cta" id="cta"><i></i><p id="ctat">מדברים עם הבנקאי</p></div></div>
154
+ <p class="t c fine" id="fn1" style="top:1470px;font-size:30px">אין באמור ייעוץ השקעות או המלצה לפעולה</p>
155
+ <p class="t c fine" id="fn2" style="top:1518px;font-size:30px">השקעה בניירות ערך כרוכה בסיכון</p>
156
+ </div>
157
+ </section>
158
+ <div id="ov" class="clip" data-start="0" data-duration="15.6">
159
+ <div class="brand" id="brw"><i class="bm"></i><p id="brand">המותג שלכם</p></div>
160
+ </div>
161
+ </div>
162
+ <script>
163
+ const tl=gsap.timeline({paused:true});
164
+ const S=[0,4,7.6,12,15.6],D=15.6;
165
+ const P="power3.out",X="expo.out",B="back.out(1.7)";
166
+ tl.fromTo("#brw",{opacity:0,y:-16},{opacity:1,y:0,duration:.5,ease:P},.15);
167
+ 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;
168
+ tl.fromTo("#ct"+n,{maxWidth:0},{maxWidth:W,duration:d,ease:"steps("+Math.max(8,Math.round(W/28))+")"},t0);
169
+ 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);}
170
+ function hl(id,at){tl.fromTo("#hb-"+id,{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.5,ease:"power2.inOut"},at);}
171
+ function draw(sel,at,d,e){tl.fromTo(sel,{strokeDasharray:1,strokeDashoffset:1},{strokeDashoffset:0,duration:d,ease:e||"power2.inOut",autoRound:false},at);}
172
+ function fadeOut(i,d){tl.to("#c"+(i+1),{opacity:0,duration:d||.35,ease:"power1.in"},S[i+1]-(d||.35));}
173
+ function camIn(i){tl.fromTo("#c"+(i+1),{opacity:0},{opacity:1,duration:.3},S[i]);}
174
+
175
+ // s1 hype chat
176
+ camIn(0);
177
+ tl.fromTo(["#h1a","#h1b"],{opacity:0,y:60},{opacity:1,y:0,duration:.55,ease:P,stagger:.14},S[0]+.15);
178
+ hl("h1b",S[0]+.75);
179
+ tl.fromTo("#cht",{y:160,opacity:0},{y:0,opacity:1,duration:.7,ease:X},S[0]+.1);
180
+ tl.fromTo("#b1",{scale:.6,opacity:0,transformOrigin:"100% 0%"},{scale:1,opacity:1,duration:.4,ease:B},S[0]+.6);
181
+ draw("#rkl",S[0]+.85,.6,"power2.out");
182
+ tl.fromTo("#rkh",{opacity:0},{opacity:1,duration:.15},S[0]+1.4);
183
+ tl.fromTo("#b1b",{opacity:0,x:-20},{opacity:1,x:0,duration:.3,ease:P},S[0]+1.3);
184
+ tl.fromTo(["#bb0","#bb1","#bb2"],{scale:.6,opacity:0,transformOrigin:"100% 0%"},{scale:1,opacity:1,duration:.35,ease:B,stagger:.32},S[0]+1.2);
185
+ tl.fromTo("#bb2",{x:0},{x:-8,duration:.06,yoyo:true,repeat:5,ease:"sine.inOut"},S[0]+2);
186
+ tl.fromTo("#typ",{opacity:0},{opacity:1,duration:.2},S[0]+2.1);
187
+ tl.fromTo("#typ i",{y:0},{y:-10,duration:.2,yoyo:true,repeat:3,ease:"sine.inOut",stagger:.1},S[0]+2.2);
188
+ tl.fromTo("#bo",{scale:.6,opacity:0,transformOrigin:"0% 0%"},{scale:1,opacity:1,duration:.4,ease:B},S[0]+2.8);
189
+ capIn(1,S[0]+1.4,420,S[1]);
190
+ fadeOut(0);
191
+ // s2 dark pause interlude
192
+ camIn(1);
193
+ tl.fromTo(".gh",{y:40,opacity:0},{y:-40,opacity:1,duration:3.2,ease:"none",stagger:.05},S[1]);
194
+ tl.fromTo(["#pz1","#pz2"],{scaleY:0,opacity:0},{scaleY:1,opacity:1,duration:.6,ease:"power3.out",stagger:.12},S[1]+.25);
195
+ tl.fromTo(["#pz1","#pz2"],{scale:1},{scale:1.06,duration:.5,yoyo:true,repeat:3,ease:"sine.inOut"},S[1]+1);
196
+ tl.fromTo("#prg",{scale:.6,opacity:0},{scale:1.25,opacity:1,duration:1.4,ease:"power1.out"},S[1]+.5);
197
+ tl.to("#prg",{opacity:0,duration:.6},S[1]+1.9);
198
+ tl.fromTo("#d1",{opacity:0,y:50},{opacity:1,y:0,duration:.6,ease:P},S[1]+.7);
199
+ tl.fromTo("#d2",{opacity:0,y:30},{opacity:1,y:0,duration:.5,ease:P},S[1]+1.2);
200
+ capIn(2,S[1]+1.3,460,S[2]);
201
+ fadeOut(1);
202
+ // s3 three questions
203
+ camIn(2);
204
+ tl.fromTo(["#t3a","#t3b","#t3c"],{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P,stagger:.12},S[2]+.1);
205
+ hl("t3b",S[2]+.55);
206
+ tl.fromTo("#qc",{y:120,opacity:0,rotation:2},{y:0,opacity:1,rotation:0,duration:.7,ease:X},S[2]+.15);
207
+ tl.fromTo("#qc .tape",{scale:0},{scale:1,duration:.35,ease:B,stagger:.1},S[2]+.6);
208
+ for(let k=0;k<3;k++){const a=S[2]+.8+k*.6;
209
+ tl.fromTo("#qn"+k,{scale:0},{scale:1,duration:.4,ease:B},a);
210
+ tl.fromTo(["#qa"+k,"#qb"+k],{opacity:0,x:-40},{opacity:1,x:0,duration:.4,ease:P,stagger:.1},a+.1);}
211
+ tl.fromTo(".qd",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.4,ease:"power2.out",stagger:.6},S[2]+1.2);
212
+ capIn(3,S[2]+1.4,480,S[3]);
213
+ fadeOut(2);
214
+ // s4 calm close + disclaimer
215
+ camIn(3);
216
+ tl.fromTo("#hb4",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.4,ease:B},S[3]+.1);
217
+ tl.fromTo("#stk",{scaleX:0},{scaleX:1,duration:.35,ease:"power2.inOut"},S[3]+.55);
218
+ tl.to("#hb4",{opacity:.35,duration:.4},S[3]+.95);
219
+ tl.fromTo(["#e1","#e2"],{opacity:0,y:50},{opacity:1,y:0,duration:.5,ease:P,stagger:.12},S[3]+.4);
220
+ hl("e2",S[3]+.9);
221
+ tl.fromTo("#e3",{opacity:0,y:20},{opacity:1,y:0,duration:.45,ease:P},S[3]+.8);
222
+ tl.fromTo(".pch",{scale:.5,opacity:0},{scale:1,opacity:1,duration:.4,ease:B,stagger:.1},S[3]+1);
223
+ tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+1.3);
224
+ tl.fromTo(["#fn1","#fn2"],{opacity:0},{opacity:1,duration:.4,stagger:.1},S[3]+1.5);
225
+ tl.set({},{},D);
226
+ window.__timelines=window.__timelines||{};window.__timelines["bank-fomo-stop"]=tl;
227
+ </script>
228
+ </body>
229
+ </html>