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-one-click-loan-BVhe1AGv.js ADDED
@@ -0,0 +1,223 @@
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:#F2F3F5;--fg:#141A26;--accent:#E3063B;--card:#FFFFFF;--mute:#8A919E}
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
+ .ph{position:absolute;left:420px;top:600px;width:96px;height:170px;border-radius:18px;background:var(--fg);border:8px solid var(--fg);transform:rotate(-10deg)}
68
+ .ph i{position:absolute;inset:0;border-radius:10px;background:var(--card)}
69
+ .ph i::after{content:"";position:absolute;left:18px;right:18px;bottom:22px;height:26px;border-radius:13px;background:var(--accent)}
70
+ .fl2{position:absolute;font-size:34px;color:var(--mute);white-space:nowrap}
71
+ .val{position:absolute;font-size:66px;font-weight:700;color:var(--fg);white-space:nowrap}
72
+ .ul{position:absolute;height:8px;background:var(--accent)}
73
+ .trk{position:absolute;right:60px;top:380px;width:560px;height:12px;border-radius:6px;background:color-mix(in srgb,var(--mute) 30%,var(--card))}
74
+ .trk i{position:absolute;right:0;top:0;bottom:0;width:62%;border-radius:6px;background:var(--accent)}
75
+ .trk b{position:absolute;right:62%;top:-14px;width:40px;height:40px;margin-right:-20px;border-radius:50%;background:var(--card);border:6px solid var(--accent)}
76
+ .est{position:absolute;left:60px;top:150px;width:400px;height:280px;border-radius:12px;background:color-mix(in srgb,var(--mute) 12%,var(--card));padding:36px}
77
+ .btn{position:absolute;right:60px;top:480px;width:420px;height:104px;border-radius:52px;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 32%,transparent)}
78
+ .btn p{font-size:42px;font-weight:700;color:var(--card);white-space:nowrap}
79
+ .rip{position:absolute;right:60px;top:480px;width:420px;height:104px;border-radius:52px;border:5px solid var(--accent)}
80
+ .mouse{position:absolute;left:0;top:0;width:56px;height:78px;overflow:visible}
81
+ .mouse path{fill:var(--fg);stroke:var(--card);stroke-width:4;stroke-linejoin:round}
82
+ .sp{top:330px;width:440px;height:330px;overflow:hidden}
83
+ .sb{position:absolute;left:0;right:0;top:0;height:10px;background:var(--accent)}
84
+ .nc{position:absolute;left:175px;top:50px;width:90px;height:90px;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--mute) 55%,var(--card));display:flex;align-items:center;justify-content:center}
85
+ .nf{position:absolute;inset:0;border-radius:50%;background:var(--accent)}
86
+ .nc p{position:relative;font-size:50px;font-weight:700;color:var(--card)}
87
+ .lnk{position:absolute;right:440px;width:1040px;top:425px;height:8px;background:color-mix(in srgb,var(--mute) 30%,var(--bg))}
88
+ .lnk i{position:absolute;inset:0;background:var(--accent)}
89
+ .okc{position:absolute;left:325px;top:60px;width:150px;height:150px}
90
+ .okc circle{fill:var(--accent)}
91
+ .okc polyline{fill:none;stroke:var(--card);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
92
+ .dr{position:absolute;left:80px;right:80px;display:flex;justify-content:space-between;align-items:baseline;padding-bottom:18px;border-bottom:3px solid color-mix(in srgb,var(--mute) 22%,var(--card))}
93
+ .dr p{font-size:40px;color:var(--fg);white-space:nowrap}
94
+ .dr .v{font-weight:700;font-size:48px}
95
+ </style>
96
+ </head>
97
+ <body>
98
+ <div id="root" data-composition-id="bank-one-click-loan" data-start="0" data-width="1920" data-height="1080" 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:-300px;top:-400px;width:860px;height:1800px;transform:rotate(33deg)"></i>
102
+ <i class="pl" style="left:1460px;top:-300px;width:600px;height:1600px;transform:rotate(-30deg)"></i>
103
+ <div class="cw" style="top:250px"><div class="row" style="font-size:120px"><p id="h1a">הלוואה</p><div class="hw"><i class="hb" id="hb-h1b"></i><p id="h1b" class="em">בקליק</p></div><p id="h1c">אחד?</p></div></div>
104
+ <p class="lab lb1" id="lb0" style="right:560px;top:480px;transform:rotate(-2deg)">בלי טפסים</p>
105
+ <p class="lab lb1" id="lb1" style="right:880px;top:520px;transform:rotate(1.5deg)">בלי תורים</p>
106
+ <p class="lab r lb1" id="lb2" style="right:1180px;top:470px;transform:rotate(-1.5deg)">ישר מהנייד</p>
107
+ <div class="fig a" id="fg1" style="left:250px;top:560px"><i class="hd"></i><i class="bd"></i><i class="nk"></i></div>
108
+ <div class="ph" id="ph1"><i></i></div>
109
+ <div class="fig m" id="fg2" style="left:1480px;top:600px;transform:scale(.85)"><i class="hd"></i><i class="bd"></i><i class="nk"></i></div>
110
+ <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>
111
+ </div>
112
+ </section>
113
+ <section id="s2" class="clip scene" data-start="3.6" data-duration="4">
114
+ <div class="cam" id="c2">
115
+ <i class="pl" style="left:-200px;top:-500px;width:820px;height:1800px;transform:rotate(30deg)"></i>
116
+ <div class="win" id="w2" style="left:360px;top:120px;width:1200px;height:700px">
117
+ <div class="wb"><i></i><i></i><i></i></div>
118
+ <div style="position:absolute;inset:44px 0 0 0">
119
+ <p class="t" id="a1" style="right:60px;top:40px;font-size:54px;font-weight:700">הלוואה מהירה</p>
120
+ <p class="fl2" id="a2" style="right:60px;top:150px">סכום ההלוואה</p>
121
+ <p class="val" id="a3" style="right:60px;top:196px">20,000 ₪</p>
122
+ <i class="ul" id="ul" style="right:60px;top:288px;width:300px"></i>
123
+ <div class="trk" id="trk"><i></i><b></b></div>
124
+ <div class="est" id="est"><p class="t" id="a4" style="right:36px;top:34px;font-size:32px;color:var(--mute)">החזר חודשי משוער</p><p class="t" id="a5" style="right:36px;top:92px;font-size:72px;font-weight:700">610 ₪</p><p class="t" id="a6" style="right:36px;top:200px;font-size:26px;color:var(--mute)">36 חודשים · להמחשה בלבד</p></div>
125
+ <i class="rip" id="rip"></i>
126
+ <div class="btn" id="btn"><p id="bt">בדיקת זכאות</p></div>
127
+ </div>
128
+ </div>
129
+ <svg class="mouse" id="ms" viewBox="0 0 56 78"><path d="M4 4v62l16-15 11 24 11-5-11-23h22z"/></svg>
130
+ <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>
131
+ </div>
132
+ </section>
133
+ <section id="s3" class="clip scene" data-start="7.6" data-duration="3.8">
134
+ <div class="cam" id="c3">
135
+ <i class="pl" style="left:1300px;top:-400px;width:800px;height:1800px;transform:rotate(-30deg)"></i>
136
+ <div class="cw" style="top:150px"><div class="row" style="font-size:76px"><p id="t3a">שלושה צעדים</p><div class="hw"><i class="hb" id="hb-t3b"></i><p id="t3b" class="em">פשוטים</p></div></div></div>
137
+ <div class="lnk"><i id="lk"></i></div>
138
+ <div class="card sp" id="sp0" style="right:220px"><i class="sb" id="sb0"></i><div class="nc"><i class="nf" id="nf0"></i><p id="sn0">1</p></div><p class="t c" id="sa0" style="top:170px;font-size:46px;font-weight:700">בדיקת נתונים</p><p class="t c" id="sz0" style="top:236px;font-size:32px;color:var(--mute)">מה שכבר יש בבנק</p></div><div class="card sp" id="sp1" style="right:740px"><i class="sb" id="sb1"></i><div class="nc"><i class="nf" id="nf1"></i><p id="sn1">2</p></div><p class="t c" id="sa1" style="top:170px;font-size:46px;font-weight:700">התאמת הצעה</p><p class="t c" id="sz1" style="top:236px;font-size:32px;color:var(--mute)">סכום, ריבית ותקופה</p></div><div class="card sp" id="sp2" style="right:1260px"><i class="sb" id="sb2"></i><div class="nc"><i class="nf" id="nf2"></i><p id="sn2">3</p></div><p class="t c" id="sa2" style="top:170px;font-size:46px;font-weight:700">חתימה דיגיטלית</p><p class="t c" id="sz2" style="top:236px;font-size:32px;color:var(--mute)">בלי להגיע לסניף</p></div>
139
+ <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>
140
+ </div>
141
+ </section>
142
+ <section id="s4" class="clip scene" data-start="11.4" data-duration="3.6">
143
+ <div class="cam" id="c4">
144
+ <i class="pl" style="left:-300px;top:-400px;width:900px;height:1800px;transform:rotate(32deg)"></i>
145
+ <div class="card" id="ok" style="left:560px;top:120px;width:800px;height:650px">
146
+ <i class="tape tl"></i><i class="tape tr"></i>
147
+ <svg class="okc" viewBox="0 0 150 150"><circle id="okd" cx="75" cy="75" r="75"/><polyline id="okt" pathLength="1" points="42,78 66,102 110,52"/></svg>
148
+ <div class="cw" style="top:240px"><div class="row" style="font-size:78px"><p id="k1">ההלוואה</p><p id="k2" class="em">אושרה</p></div></div>
149
+ <div class="dr" style="top:390px"><p id="d1k">סכום</p><p class="v" id="d1v">20,000 ₪</p></div>
150
+ <div class="dr" style="top:480px"><p id="d2k">החזר חודשי</p><p class="v" id="d2v">610 ₪</p></div>
151
+ <p class="t c fine" id="fn" style="top:584px">להמחשה בלבד · בכפוף לאישור אשראי ולתנאי הבנק</p>
152
+ </div>
153
+ <div class="cw" style="top:830px"><div class="cta" id="cta"><i></i><p id="ctat">פותחים באפליקציה</p></div></div>
154
+ </div>
155
+ </section>
156
+ <div id="ov" class="clip" data-start="0" data-duration="15">
157
+ <div class="brand" id="brw"><i class="bm"></i><p id="brand">המותג שלכם</p></div>
158
+ </div>
159
+ </div>
160
+ <script>
161
+ const tl=gsap.timeline({paused:true});
162
+ const S=[0,3.6,7.6,11.4,15],D=15;
163
+ const P="power3.out",X="expo.out",B="back.out(1.7)";
164
+ tl.fromTo("#brw",{opacity:0,y:-16},{opacity:1,y:0,duration:.5,ease:P},.15);
165
+ 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;
166
+ tl.fromTo("#ct"+n,{maxWidth:0},{maxWidth:W,duration:d,ease:"steps("+Math.max(8,Math.round(W/28))+")"},t0);
167
+ 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);}
168
+ function hl(id,at){tl.fromTo("#hb-"+id,{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.5,ease:"power2.inOut"},at);}
169
+ function draw(sel,at,d,e){tl.fromTo(sel,{strokeDasharray:1,strokeDashoffset:1},{strokeDashoffset:0,duration:d,ease:e||"power2.inOut",autoRound:false},at);}
170
+ function fadeOut(i,d){tl.to("#c"+(i+1),{opacity:0,duration:d||.35,ease:"power1.in"},S[i+1]-(d||.35));}
171
+ function camIn(i){tl.fromTo("#c"+(i+1),{opacity:0},{opacity:1,duration:.3},S[i]);}
172
+
173
+ // s1 hook
174
+ camIn(0);
175
+ tl.fromTo("#c1",{scale:1.04},{scale:1,duration:3.6,ease:"none"},S[0]);
176
+ tl.fromTo(["#h1a","#h1b","#h1c"],{opacity:0,y:60},{opacity:1,y:0,duration:.55,ease:P,stagger:.14},S[0]+.15);
177
+ hl("h1b",S[0]+.75);
178
+ tl.fromTo(["#fg1","#fg2"],{y:80,opacity:0},{y:0,opacity:1,duration:.6,ease:X,stagger:.15},S[0]+.4);
179
+ tl.fromTo("#ph1",{y:60,rotation:-30,opacity:0},{y:0,rotation:-10,opacity:1,duration:.6,ease:B},S[0]+.7);
180
+ tl.fromTo("#ph1",{y:0},{y:-12,duration:.5,ease:"sine.inOut",yoyo:true,repeat:3},S[0]+1.4);
181
+ tl.fromTo(".lb1",{scale:.4,opacity:0},{scale:1,opacity:1,duration:.4,ease:B,stagger:.18},S[0]+.8);
182
+ capIn(1,S[0]+1.3,640,S[1]);
183
+ fadeOut(0);
184
+ // s2 app panel + cursor click
185
+ camIn(1);
186
+ tl.fromTo("#w2",{y:120,opacity:0},{y:0,opacity:1,duration:.7,ease:X},S[1]+.05);
187
+ tl.fromTo(["#a1","#a2","#a3"],{opacity:0,x:-30},{opacity:1,x:0,duration:.4,ease:P,stagger:.1},S[1]+.4);
188
+ tl.fromTo("#ul",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.45,ease:"power2.inOut"},S[1]+.8);
189
+ tl.fromTo("#trk i",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.7,ease:"power2.out"},S[1]+.7);
190
+ tl.fromTo("#trk b",{x:220},{x:0,duration:.7,ease:"power2.out"},S[1]+.7);
191
+ tl.fromTo("#est",{opacity:0,y:30},{opacity:1,y:0,duration:.5,ease:P},S[1]+.9);
192
+ tl.fromTo("#btn",{scale:.7,opacity:0},{scale:1,opacity:1,duration:.45,ease:B},S[1]+.9);
193
+ tl.fromTo("#ms",{x:1640,y:1000},{x:1262,y:690,duration:.9,ease:"power2.inOut"},S[1]+1.1);
194
+ tl.to("#btn",{scale:.92,duration:.1,yoyo:true,repeat:1,ease:"power1.inOut"},S[1]+2.02);
195
+ tl.to("#ms",{scale:.85,duration:.1,yoyo:true,repeat:1,ease:"power1.inOut"},S[1]+2.02);
196
+ tl.fromTo("#rip",{scale:1,opacity:0},{keyframes:[{opacity:1,duration:.02},{scale:1.3,opacity:0,duration:.6,ease:"power2.out"}]},S[1]+2.08);
197
+ capIn(2,S[1]+1.5,660,S[2]);
198
+ fadeOut(1);
199
+ // s3 steps light up
200
+ camIn(2);
201
+ tl.fromTo(["#t3a","#t3b"],{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P,stagger:.12},S[2]+.1);
202
+ hl("t3b",S[2]+.55);
203
+ tl.fromTo(".sp",{opacity:0,y:60},{opacity:1,y:0,duration:.5,ease:X,stagger:.12},S[2]+.2);
204
+ tl.fromTo("#lk",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:1.4,ease:"none"},S[2]+.9);
205
+ for(let k=0;k<3;k++){const a=S[2]+.9+k*.55;tl.fromTo("#nf"+k,{scale:0},{scale:1,duration:.35,ease:B},a);tl.fromTo("#sb"+k,{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.35,ease:"power2.out"},a);tl.fromTo("#sp"+k,{y:0},{y:-14,duration:.3,ease:"power2.out"},a);}
206
+ capIn(3,S[2]+1.4,460,S[3]);
207
+ fadeOut(2);
208
+ // s4 approval card
209
+ camIn(3);
210
+ tl.fromTo("#ok",{y:100,opacity:0,rotation:3},{y:0,opacity:1,rotation:-1,duration:.7,ease:X},S[3]+.05);
211
+ tl.fromTo("#ok .tape",{scale:0},{scale:1,duration:.35,ease:B,stagger:.1},S[3]+.5);
212
+ tl.fromTo("#okd",{scale:0,transformOrigin:"50% 50%"},{scale:1,duration:.45,ease:B},S[3]+.4);
213
+ draw("#okt",S[3]+.75,.4,"power2.out");
214
+ tl.fromTo(["#k1","#k2"],{opacity:0,y:30},{opacity:1,y:0,duration:.45,ease:P,stagger:.12},S[3]+.7);
215
+ tl.fromTo("#ok .dr",{opacity:0,x:-40},{opacity:1,x:0,duration:.4,ease:P,stagger:.14},S[3]+1);
216
+ tl.fromTo("#fn",{opacity:0},{opacity:1,duration:.4},S[3]+1.4);
217
+ tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+1.5);
218
+ tl.set({},{},D);
219
+ window.__timelines=window.__timelines||{};window.__timelines["bank-one-click-loan"]=tl;
220
+ <\/script>
221
+ </body>
222
+ </html>
223
+ `;export{e as default};
package/app/assets/bank-paper-explainer-CD8mPtnJ.js ADDED
@@ -0,0 +1,191 @@
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:#D7062E;--card:#FFFFFF;--mute:#8E95A1}
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
+ .qb{position:absolute;left:80px;top:100px;width:210px;height:210px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 30%,transparent)}
68
+ .qb p{font-size:150px;font-weight:700;color:var(--card);line-height:1}
69
+ .pd{width:300px;height:380px;padding:46px 34px;border-radius:6px}
70
+ .pd .dm{position:absolute;left:30px;top:30px;width:16px;height:16px;background:var(--accent)}
71
+ .fl{opacity:.55;width:220px;height:280px;padding:34px 26px}
72
+ .ci{position:absolute;right:80px;display:flex;align-items:center;gap:28px}
73
+ .ci p{font-size:48px;color:var(--fg);white-space:nowrap}
74
+ .bx{display:block;width:60px;height:60px;border:5px solid var(--fg);border-radius:8px;position:relative}
75
+ .bx svg{position:absolute;left:-5px;top:-5px;width:60px;height:60px;overflow:visible}
76
+ .stk{position:absolute;left:250px;width:330px;height:420px;border-radius:6px;padding:52px 40px}
77
+ .bcl{position:absolute;left:135px;top:-22px;width:60px;height:44px;border-radius:6px;background:var(--accent)}
78
+ </style>
79
+ </head>
80
+ <body>
81
+ <div id="root" data-composition-id="bank-paper-explainer" data-start="0" data-width="1920" data-height="1080" data-duration="15.4">
82
+ <section id="s1" class="clip scene" data-start="0" data-duration="3.8">
83
+ <div class="cam" id="c1">
84
+ <i class="pl" style="left:-260px;top:-420px;width:820px;height:1700px;transform:rotate(34deg)"></i>
85
+ <i class="pl" style="left:1420px;top:-300px;width:560px;height:1500px;transform:rotate(-28deg)"></i>
86
+ <div class="card" id="q1" style="left:510px;top:170px;width:900px;height:560px">
87
+ <i class="tape tl"></i><i class="tape tr"></i>
88
+ <p class="t" id="q1k" style="right:70px;top:64px;font-size:32px;font-weight:700;color:var(--accent)">שאלה של היום</p>
89
+ <div class="row" style="position:absolute;right:70px;top:130px;font-size:96px"><p id="q1a">כמה</p><div class="hw"><i class="hb" id="hb-q1b"></i><p id="q1b" class="em">ניירת</p></div></div>
90
+ <div class="row" style="position:absolute;right:70px;top:250px;font-size:96px"><p id="q1c">באמת צריך?</p></div>
91
+ <div style="position:absolute;right:70px;top:410px;width:500px"><i class="ln" style="width:100%"></i><i class="ln" style="width:70%"></i></div>
92
+ <div class="qb" id="qb"><p id="qbt">?</p></div>
93
+ </div>
94
+ <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>
95
+ </div>
96
+ </section>
97
+ <section id="s2" class="clip scene" data-start="3.8" data-duration="3.8">
98
+ <div class="cam" id="c2">
99
+ <i class="pl" style="left:-200px;top:-500px;width:900px;height:1800px;transform:rotate(30deg)"></i>
100
+ <div class="card pd fl" id="fl0" style="left:90px;top:110px;transform:rotate(-12deg)"><i class="ln" style="width:60%"></i><i class="ln" style="width:90%"></i><i class="ln" style="width:75%"></i></div><div class="card pd fl" id="fl1" style="left:1500px;top:80px;transform:rotate(9deg)"><i class="ln" style="width:60%"></i><i class="ln" style="width:90%"></i><i class="ln" style="width:75%"></i></div><div class="card pd fl" id="fl2" style="left:1660px;top:640px;transform:rotate(-6deg)"><i class="ln" style="width:60%"></i><i class="ln" style="width:90%"></i><i class="ln" style="width:75%"></i></div>
101
+ <div class="card pd" id="pd0" style="left:560px;top:330px"><i class="ln" style="width:55%"></i><i class="ln" style="width:92%"></i><i class="ln" style="width:80%"></i><i class="ln" style="width:68%"></i><i class="ln" style="width:86%"></i></div><div class="card pd" id="pd1" style="left:602px;top:310px"><i class="dm"></i><i class="ln" style="width:55%"></i><i class="ln" style="width:92%"></i><i class="ln r" style="width:80%"></i><i class="ln" style="width:68%"></i><i class="ln" style="width:86%"></i></div><div class="card pd" id="pd2" style="left:548px;top:292px"><i class="ln" style="width:55%"></i><i class="ln" style="width:92%"></i><i class="ln" style="width:80%"></i><i class="ln" style="width:68%"></i><i class="ln" style="width:86%"></i></div><div class="card pd" id="pd3" style="left:610px;top:270px"><i class="ln" style="width:55%"></i><i class="ln" style="width:92%"></i><i class="ln" style="width:80%"></i><i class="ln" style="width:68%"></i><i class="ln" style="width:86%"></i></div><div class="card pd" id="pd4" style="left:570px;top:252px"><i class="dm"></i><i class="ln" style="width:55%"></i><i class="ln" style="width:92%"></i><i class="ln r" style="width:80%"></i><i class="ln" style="width:68%"></i><i class="ln" style="width:86%"></i></div><div class="card pd" id="pd5" style="left:592px;top:232px"><i class="ln" style="width:55%"></i><i class="ln" style="width:92%"></i><i class="ln" style="width:80%"></i><i class="ln" style="width:68%"></i><i class="ln" style="width:86%"></i></div><div class="card pd" id="pd6" style="left:556px;top:214px"><i class="ln" style="width:55%"></i><i class="ln" style="width:92%"></i><i class="ln" style="width:80%"></i><i class="ln" style="width:68%"></i><i class="ln" style="width:86%"></i></div><div class="card pd" id="pd7" style="left:582px;top:196px"><i class="dm"></i><i class="ln" style="width:55%"></i><i class="ln" style="width:92%"></i><i class="ln r" style="width:80%"></i><i class="ln" style="width:68%"></i><i class="ln" style="width:86%"></i></div>
102
+ <p class="lab r lb2" id="lb0" style="right:400px;top:190px;transform:rotate(-1.5deg)">טפסים</p><p class="lab lb2" id="lb1" style="right:446px;top:308px;transform:rotate(1.5deg)">אישורים</p><p class="lab lb2" id="lb2" style="right:400px;top:426px;transform:rotate(-1.5deg)">חתימות</p><p class="lab lb2" id="lb3" style="right:446px;top:544px;transform:rotate(1.5deg)">צילומים</p><p class="lab r lb2" id="lb4" style="right:400px;top:662px;transform:rotate(-1.5deg)">ועוד טופס אחד</p>
103
+ <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>
104
+ </div>
105
+ </section>
106
+ <section id="s3" class="clip scene" data-start="7.6" data-duration="4">
107
+ <div class="cam" id="c3">
108
+ <i class="pl" style="left:1300px;top:-400px;width:800px;height:1800px;transform:rotate(-30deg)"></i>
109
+ <div class="card stk" id="st0" style="top:330px;transform:rotate(-4deg)"></div>
110
+ <div class="card stk" id="st1" style="top:310px;transform:rotate(2deg)"></div>
111
+ <div class="card stk" id="st2" style="top:290px"><i class="bcl"></i><i class="ln" style="width:50%"></i><i class="ln" style="width:92%"></i><i class="ln r" style="width:78%"></i><i class="ln" style="width:88%"></i><i class="ln" style="width:64%"></i></div>
112
+ <div class="card" id="cl" style="left:760px;top:130px;width:900px;height:640px">
113
+ <i class="tape tl"></i>
114
+ <div class="row" style="position:absolute;right:80px;top:56px;font-size:70px"><p id="clt">מה באמת</p><div class="hw"><i class="hb" id="hb-clh"></i><p id="clh" class="em">בודקים?</p></div></div>
115
+ <div class="ci" style="top:200px"><i class="bx"><svg viewBox="0 0 60 60"><polyline class="ck" id="tk0" pathLength="1" points="12,31 25,44 49,15"/></svg></i><p id="ck0">תלוש שכר אחרון</p></div><div class="ci" style="top:300px"><i class="bx"><svg viewBox="0 0 60 60"><polyline class="ck" id="tk1" pathLength="1" points="12,31 25,44 49,15"/></svg></i><p id="ck1">תעודה מזהה</p></div><div class="ci" style="top:400px"><i class="bx"><svg viewBox="0 0 60 60"><polyline class="ck" id="tk2" pathLength="1" points="12,31 25,44 49,15"/></svg></i><p id="ck2">אישור ניהול חשבון</p></div><div class="ci" style="top:500px"><i class="bx"><svg viewBox="0 0 60 60"><polyline class="ck" id="tk3" pathLength="1" points="12,31 25,44 49,15"/></svg></i><p id="ck3">פירוט התחייבויות</p></div>
116
+ </div>
117
+ <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>
118
+ </div>
119
+ </section>
120
+ <section id="s4" class="clip scene" data-start="11.6" data-duration="3.8">
121
+ <div class="cam" id="c4">
122
+ <i class="pl" style="left:-300px;top:-400px;width:900px;height:1800px;transform:rotate(32deg)"></i>
123
+ <div class="cw" style="top:250px"><i class="endmk" id="emk"></i></div>
124
+ <div class="cw" style="top:360px"><p class="ebox" id="eb" style="font-size:84px">הכול במקום אחד</p></div>
125
+ <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>
126
+ <div class="cw" style="top:680px"><div class="cta" id="cta"><i></i><p id="ctat">מדברים עם הבנקאי</p></div></div>
127
+ <p class="t c fine" id="fn" style="top:820px">בכפוף לתנאי הבנק</p>
128
+ </div>
129
+ </section>
130
+ <div id="ov" class="clip" data-start="0" data-duration="15.4">
131
+ <div class="brand" id="brw"><i class="bm"></i><p id="brand">המותג שלכם</p></div>
132
+ </div>
133
+ </div>
134
+ <script>
135
+ const tl=gsap.timeline({paused:true});
136
+ const S=[0,3.8,7.6,11.6,15.4],D=15.4;
137
+ const P="power3.out",X="expo.out",B="back.out(1.7)";
138
+ tl.fromTo("#brw",{opacity:0,y:-16},{opacity:1,y:0,duration:.5,ease:P},.15);
139
+ 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;
140
+ tl.fromTo("#ct"+n,{maxWidth:0},{maxWidth:W,duration:d,ease:"steps("+Math.max(8,Math.round(W/28))+")"},t0);
141
+ 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);}
142
+ function hl(id,at){tl.fromTo("#hb-"+id,{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.5,ease:"power2.inOut"},at);}
143
+ function draw(sel,at,d,e){tl.fromTo(sel,{strokeDasharray:1,strokeDashoffset:1},{strokeDashoffset:0,duration:d,ease:e||"power2.inOut",autoRound:false},at);}
144
+ function fadeOut(i,d){tl.to("#c"+(i+1),{opacity:0,duration:d||.35,ease:"power1.in"},S[i+1]-(d||.35));}
145
+ function camIn(i){tl.fromTo("#c"+(i+1),{opacity:0},{opacity:1,duration:.3},S[i]);}
146
+
147
+ const R2=[-7,5,-3,8,-5,4,-2,1];
148
+ // s1 question card
149
+ camIn(0);
150
+ tl.fromTo("#c1",{scale:1},{scale:1.03,duration:3.8,ease:"none"},S[0]);
151
+ tl.fromTo("#q1",{y:-140,rotation:-8,opacity:0},{y:0,rotation:-1.5,opacity:1,duration:.8,ease:X},S[0]+.1);
152
+ tl.fromTo("#q1 .tape",{scale:0},{scale:1,duration:.35,ease:B,stagger:.1},S[0]+.65);
153
+ tl.fromTo("#q1k",{opacity:0,x:30},{opacity:1,x:0,duration:.4,ease:P},S[0]+.6);
154
+ tl.fromTo(["#q1a","#q1b","#q1c"],{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P,stagger:.12},S[0]+.7);
155
+ hl("q1b",S[0]+1.2);
156
+ tl.fromTo("#qb",{scale:0,rotation:-120},{scale:1,rotation:-8,duration:.7,ease:B},S[0]+.95);
157
+ tl.fromTo("#q1 .ln",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.5,ease:P,stagger:.1},S[0]+1.3);
158
+ capIn(1,S[0]+1.4,560,S[1]);
159
+ fadeOut(0);
160
+ // s2 papers pile up
161
+ camIn(1);
162
+ tl.fromTo(".fl",{y:0},{y:30,duration:3.8,ease:"none"},S[1]);
163
+ tl.fromTo(".pd:not(.fl)",{y:-760,rotation:i=>R2[i]*3,opacity:1},{y:0,rotation:i=>R2[i],duration:.5,ease:"power2.out",stagger:.2},S[1]+.05);
164
+ tl.fromTo(".lb2",{scale:.5,opacity:0},{scale:1,opacity:1,duration:.4,ease:B,stagger:.22},S[1]+.45);
165
+ capIn(2,S[1]+1.5,620,S[2]);
166
+ fadeOut(1);
167
+ // s3 checklist with red ticks
168
+ camIn(2);
169
+ tl.fromTo(["#st0","#st1","#st2"],{y:200,opacity:0},{y:0,opacity:1,duration:.6,ease:X,stagger:.1},S[2]+.05);
170
+ tl.fromTo("#cl",{x:-160,opacity:0},{x:0,opacity:1,duration:.7,ease:X},S[2]+.1);
171
+ tl.fromTo("#cl .tape",{scale:0},{scale:1,duration:.35,ease:B},S[2]+.6);
172
+ tl.fromTo(["#clt","#clh"],{opacity:0,y:30},{opacity:1,y:0,duration:.45,ease:P,stagger:.1},S[2]+.4);
173
+ hl("clh",S[2]+.85);
174
+ tl.fromTo(".ci",{opacity:0,x:-40},{opacity:1,x:0,duration:.4,ease:P,stagger:.15},S[2]+.6);
175
+ for(let k=0;k<4;k++)draw("#tk"+k,S[2]+1.1+k*.32,.32,"power1.out");
176
+ capIn(3,S[2]+1.6,520,S[3]);
177
+ fadeOut(2);
178
+ // s4 calm close
179
+ camIn(3);
180
+ tl.fromTo("#emk",{scale:0},{scale:1,duration:.5,ease:B},S[3]+.15);
181
+ tl.fromTo("#eb",{clipPath:"inset(0% 0% 0% 100%)"},{clipPath:"inset(0% 0% 0% 0%)",duration:.7,ease:"power2.inOut"},S[3]+.4);
182
+ tl.fromTo(["#e4a","#e4b"],{opacity:0,y:30},{opacity:1,y:0,duration:.5,ease:P,stagger:.18},S[3]+.9);
183
+ tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+1.4);
184
+ tl.fromTo("#fn",{opacity:0},{opacity:1,duration:.4},S[3]+1.7);
185
+ tl.fromTo("#emk",{y:0},{y:-10,duration:.9,ease:"sine.inOut",yoyo:true,repeat:1},S[3]+1.8);
186
+ tl.set({},{},D);
187
+ window.__timelines=window.__timelines||{};window.__timelines["bank-paper-explainer"]=tl;
188
+ <\/script>
189
+ </body>
190
+ </html>
191
+ `;export{e as default};