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-paper-explainer.html ADDED
@@ -0,0 +1,190 @@
1
+ <!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>
package/lib/catalog/hyperframes/bank-pension-compare.html ADDED
@@ -0,0 +1,242 @@
1
+ <!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:#868D99}
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
+ .fc{top:330px;width:540px;height:430px}
68
+ .trk{position:absolute;left:44px;right:44px;top:372px;height:16px;border-radius:8px;background:color-mix(in srgb,var(--mute) 22%,var(--card))}
69
+ .trk i{position:absolute;right:0;top:0;bottom:0;border-radius:8px;background:var(--fg)}
70
+ #fbf{background:var(--accent)}
71
+ .vs{position:absolute;left:900px;top:485px;width:120px;height:120px;border-radius:50%;background:var(--fg);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px color-mix(in srgb,var(--fg) 22%,transparent)}
72
+ .vs p{font-size:40px;font-weight:700;color:var(--card)}
73
+ .ch{position:absolute;left:300px;top:250px;width:1320px;height:560px;overflow:visible}
74
+ .gl{stroke:color-mix(in srgb,var(--mute) 28%,transparent);stroke-width:2}
75
+ .axl{stroke:var(--fg);stroke-width:4}
76
+ .la,.lb{fill:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
77
+ .la{stroke:var(--fg)}.lb{stroke:var(--mute)}
78
+ .gp{fill:color-mix(in srgb,var(--accent) 16%,transparent)}
79
+ .mkl{stroke:var(--accent);stroke-width:9;stroke-linecap:round}
80
+ .mkd{fill:var(--accent);stroke:var(--card);stroke-width:5}
81
+ .ax{top:740px;width:200px;text-align:center;font-size:32px;color:var(--mute)}
82
+ .lg{position:absolute;left:380px;display:flex;align-items:center;gap:16px}
83
+ .lg i{width:44px;height:8px;border-radius:4px;flex:none}
84
+ .lg p{font-size:34px;font-weight:700;white-space:nowrap;color:var(--fg)}
85
+ .paper{left:180px;top:150px;width:660px;height:700px;transform:rotate(-2deg)}
86
+ .rowh{position:absolute;left:30px;right:30px;height:62px;transform-origin:100% 50%;background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:6px}
87
+ .mag{position:absolute;left:0;top:0;width:190px;height:190px}
88
+ .mag i{position:absolute;left:0;top:0;width:150px;height:150px;border-radius:50%;border:16px solid var(--fg);background:color-mix(in srgb,var(--card) 30%,transparent)}
89
+ .mag b{position:absolute;left:128px;top:122px;width:24px;height:80px;border-radius:12px;background:var(--fg);transform:rotate(-40deg)}
90
+ .cbx{position:absolute;width:56px;height:56px;border-radius:10px;border:5px solid var(--fg)}
91
+ .cbx svg{position:absolute;left:-6px;top:-12px;width:66px;height:66px;overflow:visible}
92
+ .cal{left:830px;top:110px;width:260px;height:250px;overflow:hidden}
93
+ .cal .bnd{position:absolute;left:0;right:0;top:0;height:62px;background:var(--accent)}
94
+ .dc{position:absolute;width:40px;height:34px;border-radius:6px;background:color-mix(in srgb,var(--mute) 26%,var(--card))}
95
+ .ring{position:absolute;left:840px;top:96px;width:16px;height:40px;border-radius:8px;background:var(--fg)}
96
+ .cel{position:absolute;left:820px;top:170px;width:280px;height:200px;overflow:visible}
97
+ .cel ellipse{fill:none;stroke:var(--accent);stroke-width:6}
98
+ </style>
99
+ </head>
100
+ <body>
101
+ <div id="root" data-composition-id="bank-pension-compare" data-start="0" data-width="1920" data-height="1080" data-duration="15.4">
102
+ <section id="s1" class="clip scene" data-start="0" data-duration="3.6">
103
+ <div class="cam" id="c1">
104
+ <i class="pl" style="left:-300px;top:-400px;width:860px;height:1800px;transform:rotate(33deg)"></i>
105
+ <i class="pl" style="left:1460px;top:-300px;width:600px;height:1600px;transform:rotate(-30deg)"></i>
106
+ <div class="cw" style="top:140px"><div class="row" style="font-size:88px"><p id="h1a">כמה עולים לכם</p><div class="hw"><i class="hb" id="hb-h1b"></i><p id="h1b" class="em">דמי הניהול?</p></div></div></div>
107
+ <div class="card fc" id="fa" style="left:1040px"><i class="tape tr"></i>
108
+ <p class="lab" id="fan" style="right:40px;top:40px;font-size:38px">מסלול א</p>
109
+ <p class="t" id="fav" style="right:40px;top:118px;font-size:150px;font-weight:700">0.2%</p>
110
+ <p class="t" id="fas" style="right:44px;top:300px;font-size:34px;color:var(--mute)">דמי ניהול מהצבירה</p>
111
+ <div class="trk"><i id="faf" style="width:20%"></i></div></div>
112
+ <div class="card fc" id="fb" style="left:340px"><i class="tape tl"></i>
113
+ <p class="lab r" id="fbn" style="right:40px;top:40px;font-size:38px">מסלול ב</p>
114
+ <p class="t em" id="fbv" style="right:40px;top:118px;font-size:150px;font-weight:700">1.0%</p>
115
+ <p class="t" id="fbs" style="right:44px;top:300px;font-size:34px;color:var(--mute)">דמי ניהול מהצבירה</p>
116
+ <div class="trk"><i id="fbf" style="width:100%"></i></div></div>
117
+ <div class="vs" id="vs"><p id="vst">מול</p></div>
118
+ <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>
119
+ </div>
120
+ </section>
121
+ <section id="s2" class="clip scene" data-start="3.6" data-duration="4.4">
122
+ <div class="cam" id="c2">
123
+ <i class="pl" style="left:-200px;top:-500px;width:820px;height:1800px;transform:rotate(30deg)"></i>
124
+ <div class="cw" style="top:110px"><div class="row" style="font-size:80px"><p id="t2a">הפער</p><div class="hw"><i class="hb" id="hb-t2b"></i><p id="t2b" class="em">גדל</p></div><p id="t2c">עם השנים</p></div></div>
125
+ <svg class="ch" viewBox="0 0 1320 560"><defs><clipPath id="clipg"><rect id="clr" x="0" y="0" width="0" height="560"/></clipPath></defs>
126
+ <line class="gl" x1="40" x2="1280" y1="370" y2="370"/><line class="gl" x1="40" x2="1280" y1="270" y2="270"/><line class="gl" x1="40" x2="1280" y1="170" y2="170"/><line class="gl" x1="40" x2="1280" y1="70" y2="70"/><line class="axl" x1="40" x2="1280" y1="472" y2="472"/>
127
+ <g clip-path="url(#clipg)"><polygon class="gp" points="60,470 100,463.8 140,457.3 180,450.5 220,443.4 260,435.9 300,428.1 340,419.9 380,411.3 420,402.3 460,392.8 500,382.9 540,372.6 580,361.7 620,350.3 660,338.3 700,325.8 740,312.7 780,299 820,284.6 860,269.5 900,253.7 940,237.1 980,219.7 1020,201.5 1060,182.4 1100,162.4 1140,141.5 1180,119.5 1220,96.5 1260,72.4 1260,180.5 1220,196.6 1180,212.1 1140,227 1100,241.3 1060,255.1 1020,268.3 980,281 940,293.2 900,305 860,316.3 820,327.2 780,337.6 740,347.7 700,357.4 660,366.7 620,375.6 580,384.2 540,392.4 500,400.4 460,408 420,415.4 380,422.4 340,429.2 300,435.8 260,442 220,448.1 180,453.9 140,459.5 100,464.8 60,470"/><polyline class="lb" points="60,470 100,464.8 140,459.5 180,453.9 220,448.1 260,442 300,435.8 340,429.2 380,422.4 420,415.4 460,408 500,400.4 540,392.4 580,384.2 620,375.6 660,366.7 700,357.4 740,347.7 780,337.6 820,327.2 860,316.3 900,305 940,293.2 980,281 1020,268.3 1060,255.1 1100,241.3 1140,227 1180,212.1 1220,196.6 1260,180.5"/><polyline class="la" points="60,470 100,463.8 140,457.3 180,450.5 220,443.4 260,435.9 300,428.1 340,419.9 380,411.3 420,402.3 460,392.8 500,382.9 540,372.6 580,361.7 620,350.3 660,338.3 700,325.8 740,312.7 780,299 820,284.6 860,269.5 900,253.7 940,237.1 980,219.7 1020,201.5 1060,182.4 1100,162.4 1140,141.5 1180,119.5 1220,96.5 1260,72.4"/></g>
128
+ <g id="mk"><line class="mkl" id="mkl" x1="60" x2="60" y1="470" y2="470"/><circle class="mkd" id="mkb" r="13" cx="60" cy="470"/><circle class="mkd" id="mka" r="13" cx="60" cy="470"/></g></svg>
129
+ <p class="t ax" id="ax0" style="left:260px">היום</p><p class="t ax" id="ax1" style="left:660px">10 שנים</p><p class="t ax" id="ax2" style="left:1060px">20 שנה</p><p class="t ax" id="ax3" style="left:1460px">30 שנה</p>
130
+ <div class="lg" id="lg1" style="top:300px"><i style="background:var(--fg)"></i><p id="lg1t">מסלול א · 0.2%</p></div>
131
+ <div class="lg" id="lg2" style="top:356px"><i style="background:var(--mute)"></i><p id="lg2t">מסלול ב · 1.0%</p></div>
132
+ <p class="lab r" id="gl1" style="left:1600px;top:342px;font-size:40px;transform:rotate(-2deg)">הפער</p>
133
+ <p class="t fine" id="fn2" style="left:380px;top:812px">להמחשה בלבד · תשואה שנתית משוערת 5% לפני דמי ניהול</p>
134
+ <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>
135
+ </div>
136
+ </section>
137
+ <section id="s3" class="clip scene" data-start="8" data-duration="4">
138
+ <div class="cam" id="c3">
139
+ <i class="pl" style="left:1300px;top:-400px;width:800px;height:1800px;transform:rotate(-30deg)"></i>
140
+ <div class="card paper" id="pp"><i class="tape tl"></i><i class="tape tr"></i>
141
+ <p class="t" id="p1" style="right:50px;top:50px;font-size:50px;font-weight:700">דוח שנתי</p>
142
+ <p class="t" id="p2" style="right:50px;top:122px;font-size:28px;color:var(--mute)">חיסכון פנסיוני · נתוני הדגמה</p>
143
+ <i class="ln" style="position:absolute;right:50px;top:178px;width:470px"></i><i class="ln" style="position:absolute;right:50px;top:212px;width:360px"></i>
144
+ <i class="rowh" id="rh" style="top:286px"></i>
145
+ <p class="t" id="p3" style="right:50px;top:292px;font-size:38px">דמי ניהול מהצבירה</p><p class="t em" id="p4" style="left:50px;top:292px;font-size:38px;font-weight:700">1.0%</p>
146
+ <p class="t" id="p5" style="right:50px;top:372px;font-size:38px">דמי ניהול מההפקדה</p><p class="t" id="p6" style="left:50px;top:372px;font-size:38px;font-weight:700">2.0%</p>
147
+ <i class="ln" style="position:absolute;right:50px;top:458px;width:500px"></i><i class="ln" style="position:absolute;right:50px;top:492px;width:420px"></i><i class="ln" style="position:absolute;right:50px;top:526px;width:300px"></i>
148
+ <i class="ln r" style="position:absolute;right:50px;top:590px;width:180px"></i>
149
+ </div>
150
+ <div class="mag" id="mg"><i></i><b></b></div>
151
+ <div class="row" style="position:absolute;right:160px;top:160px;font-size:84px"><p id="t3a">מה</p><div class="hw"><i class="hb" id="hb-t3b"></i><p id="t3b" class="em">בודקים</p></div><p id="t3c">בדוח?</p></div>
152
+ <i class="cbx" style="right:160px;top:342px"><svg viewBox="0 0 60 60"><path class="ck" id="ck0" pathLength="1" d="M12 31l12 12 24-28"/></svg></i><p class="t" id="cl0" style="right:250px;top:330px;font-size:46px">דמי ניהול מהצבירה</p><i class="cbx" style="right:160px;top:458px"><svg viewBox="0 0 60 60"><path class="ck" id="ck1" pathLength="1" d="M12 31l12 12 24-28"/></svg></i><p class="t" id="cl1" style="right:250px;top:446px;font-size:46px">דמי ניהול מההפקדה</p><i class="cbx" style="right:160px;top:574px"><svg viewBox="0 0 60 60"><path class="ck" id="ck2" pathLength="1" d="M12 31l12 12 24-28"/></svg></i><p class="t" id="cl2" style="right:250px;top:562px;font-size:46px">מסלול ההשקעה</p><i class="cbx" style="right:160px;top:690px"><svg viewBox="0 0 60 60"><path class="ck" id="ck3" pathLength="1" d="M12 31l12 12 24-28"/></svg></i><p class="t" id="cl3" style="right:250px;top:678px;font-size:46px">כיסויים ביטוחיים</p>
153
+ <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>
154
+ </div>
155
+ </section>
156
+ <section id="s4" class="clip scene" data-start="12" data-duration="3.4">
157
+ <div class="cam" id="c4">
158
+ <i class="pl" style="left:-300px;top:-400px;width:900px;height:1800px;transform:rotate(32deg)"></i>
159
+ <div class="card cal" id="cal"><i class="bnd"></i><i class="dc" style="left:22px;top:90px"></i><i class="dc" style="left:74px;top:90px"></i><i class="dc" style="left:126px;top:90px"></i><i class="dc" style="left:178px;top:90px"></i><i class="dc" style="left:22px;top:136px"></i><i class="dc" style="left:74px;top:136px"></i><i class="dc" style="left:126px;top:136px"></i><i class="dc" style="left:178px;top:136px"></i><i class="dc" style="left:22px;top:182px"></i><i class="dc" style="left:74px;top:182px"></i><i class="dc" style="left:126px;top:182px"></i><i class="dc" style="left:178px;top:182px"></i></div>
160
+ <i class="ring" id="rg1"></i><i class="ring" id="rg2" style="left:1064px"></i>
161
+ <svg class="cel" viewBox="0 0 280 200"><ellipse id="cel" pathLength="1" cx="156" cy="93" rx="44" ry="36"/></svg>
162
+ <div class="cw" style="top:410px"><div class="row" style="font-size:100px"><p id="e1">משווים</p><div class="hw"><i class="hb" id="hb-e2"></i><p id="e2" class="em">פעם בשנה</p></div></div></div>
163
+ <p class="t c" id="e3" style="top:560px;font-size:44px">ובודקים שדמי הניהול מתאימים לכם</p>
164
+ <div class="cw" style="top:670px"><div class="cta" id="cta"><i></i><p id="ctat">בודקים באפליקציה</p></div></div>
165
+ <p class="t c fine" id="fn4" style="top:810px">להמחשה בלבד · אין באמור ייעוץ פנסיוני או המלצה · בכפוף לתנאי הגוף המנהל</p>
166
+ </div>
167
+ </section>
168
+ <div id="ov" class="clip" data-start="0" data-duration="15.4">
169
+ <div class="brand" id="brw"><i class="bm"></i><p id="brand">המותג שלכם</p></div>
170
+ </div>
171
+ </div>
172
+ <script>
173
+ const tl=gsap.timeline({paused:true});
174
+ const S=[0,3.6,8,12,15.4],D=15.4;
175
+ const P="power3.out",X="expo.out",B="back.out(1.7)";
176
+ tl.fromTo("#brw",{opacity:0,y:-16},{opacity:1,y:0,duration:.5,ease:P},.15);
177
+ 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;
178
+ tl.fromTo("#ct"+n,{maxWidth:0},{maxWidth:W,duration:d,ease:"steps("+Math.max(8,Math.round(W/28))+")"},t0);
179
+ 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);}
180
+ function hl(id,at){tl.fromTo("#hb-"+id,{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.5,ease:"power2.inOut"},at);}
181
+ function draw(sel,at,d,e){tl.fromTo(sel,{strokeDasharray:1,strokeDashoffset:1},{strokeDashoffset:0,duration:d,ease:e||"power2.inOut",autoRound:false},at);}
182
+ function fadeOut(i,d){tl.to("#c"+(i+1),{opacity:0,duration:d||.35,ease:"power1.in"},S[i+1]-(d||.35));}
183
+ function camIn(i){tl.fromTo("#c"+(i+1),{opacity:0},{opacity:1,duration:.3},S[i]);}
184
+
185
+ // s1 two fee cards
186
+ camIn(0);
187
+ tl.fromTo("#c1",{scale:1.04},{scale:1,duration:3.6,ease:"none"},S[0]);
188
+ tl.fromTo(["#h1a","#h1b"],{opacity:0,y:60},{opacity:1,y:0,duration:.55,ease:P,stagger:.14},S[0]+.15);
189
+ hl("h1b",S[0]+.7);
190
+ tl.fromTo("#fa",{y:120,opacity:0,rotation:3},{y:0,opacity:1,rotation:-1,duration:.7,ease:X},S[0]+.35);
191
+ tl.fromTo("#fb",{y:120,opacity:0,rotation:-3},{y:0,opacity:1,rotation:1,duration:.7,ease:X},S[0]+.55);
192
+ tl.fromTo(".fc .tape",{scale:0},{scale:1,duration:.35,ease:B,stagger:.12},S[0]+.9);
193
+ tl.fromTo("#vs",{scale:0},{scale:1,duration:.45,ease:B},S[0]+.95);
194
+ tl.fromTo(["#faf","#fbf"],{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.8,ease:"power2.out",stagger:.2},S[0]+1.1);
195
+ tl.fromTo("#fbv",{scale:1},{scale:1.08,duration:.25,yoyo:true,repeat:1,ease:"power1.inOut",transformOrigin:"100% 50%"},S[0]+1.9);
196
+ capIn(1,S[0]+1.2,640,S[1]);
197
+ fadeOut(0);
198
+ // s2 gap chart with a red marker riding the gap
199
+ camIn(1);
200
+ tl.fromTo(["#t2a","#t2b","#t2c"],{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P,stagger:.1},S[1]+.1);
201
+ hl("t2b",S[1]+.55);
202
+ tl.fromTo(".ch",{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P},S[1]+.15);
203
+ tl.fromTo(".ax",{opacity:0,y:20},{opacity:1,y:0,duration:.4,ease:P,stagger:.08},S[1]+.35);
204
+ tl.fromTo(["#lg1","#lg2"],{opacity:0,x:-40},{opacity:1,x:0,duration:.4,ease:P,stagger:.12},S[1]+.45);
205
+ tl.fromTo("#mk",{opacity:0},{opacity:1,duration:.2},S[1]+.6);
206
+ tl.fromTo("#clr",{attr:{width:60}},{attr:{width:1262},duration:2.4,ease:"none",autoRound:false},S[1]+.7);
207
+ tl.to("#mkl",{keyframes:[{"attr":{"x1":260,"x2":260,"y1":435.9,"y2":442},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"x1":460,"x2":460,"y1":392.8,"y2":408},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"x1":660,"x2":660,"y1":338.3,"y2":366.7},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"x1":860,"x2":860,"y1":269.5,"y2":316.3},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"x1":1060,"x2":1060,"y1":182.4,"y2":255.1},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"x1":1260,"x2":1260,"y1":72.4,"y2":180.5},"duration":0.4,"ease":"none","autoRound":false}],autoRound:false},S[1]+.7);
208
+ tl.to("#mka",{keyframes:[{"attr":{"cx":260,"cy":435.9},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":460,"cy":392.8},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":660,"cy":338.3},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":860,"cy":269.5},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":1060,"cy":182.4},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":1260,"cy":72.4},"duration":0.4,"ease":"none","autoRound":false}],autoRound:false},S[1]+.7);
209
+ tl.to("#mkb",{keyframes:[{"attr":{"cx":260,"cy":442},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":460,"cy":408},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":660,"cy":366.7},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":860,"cy":316.3},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":1060,"cy":255.1},"duration":0.4,"ease":"none","autoRound":false},{"attr":{"cx":1260,"cy":180.5},"duration":0.4,"ease":"none","autoRound":false}],autoRound:false},S[1]+.7);
210
+ tl.fromTo("#gl1",{scale:.4,opacity:0},{scale:1,opacity:1,duration:.4,ease:B},S[1]+3.1);
211
+ tl.fromTo("#fn2",{opacity:0},{opacity:1,duration:.4},S[1]+1.2);
212
+ capIn(2,S[1]+1.3,420,S[2]);
213
+ fadeOut(1);
214
+ // s3 statement + checklist
215
+ camIn(2);
216
+ tl.fromTo("#pp",{y:100,opacity:0,rotation:-6},{y:0,opacity:1,rotation:-2,duration:.7,ease:X},S[2]+.05);
217
+ tl.fromTo("#pp .tape",{scale:0},{scale:1,duration:.35,ease:B,stagger:.1},S[2]+.45);
218
+ tl.fromTo("#mg",{x:-260,y:760,opacity:0},{x:575,y:392,opacity:1,duration:.9,ease:"power2.inOut"},S[2]+.4);
219
+ tl.fromTo("#rh",{scaleX:0},{scaleX:1,duration:.5,ease:"power2.inOut"},S[2]+1.2);
220
+ tl.to("#mg",{x:200,y:380,duration:.7,ease:"power2.inOut"},S[2]+1.4);
221
+ tl.fromTo(["#t3a","#t3b","#t3c"],{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P,stagger:.1},S[2]+.15);
222
+ hl("t3b",S[2]+.6);
223
+ tl.fromTo("#c3 .cbx,#c3 p.t[id^=cl]",{opacity:0,x:40},{opacity:1,x:0,duration:.4,ease:P,stagger:.07},S[2]+.5);
224
+ for(let k=0;k<4;k++)draw("#ck"+k,S[2]+1.3+k*.3,.3);
225
+ capIn(3,S[2]+1.2,560,S[3]);
226
+ fadeOut(2);
227
+ // s4 calendar close + disclaimer
228
+ camIn(3);
229
+ tl.fromTo("#cal",{y:60,opacity:0},{y:0,opacity:1,duration:.6,ease:X},S[3]+.05);
230
+ tl.fromTo(["#rg1","#rg2"],{scaleY:0,transformOrigin:"50% 100%"},{scaleY:1,duration:.3,ease:B,stagger:.08},S[3]+.4);
231
+ tl.fromTo(".dc",{scale:0},{scale:1,duration:.25,ease:B,stagger:.03},S[3]+.35);
232
+ draw("#cel",S[3]+.9,.5);
233
+ tl.fromTo(["#e1","#e2"],{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P,stagger:.12},S[3]+.3);
234
+ hl("e2",S[3]+.8);
235
+ tl.fromTo("#e3",{opacity:0,y:20},{opacity:1,y:0,duration:.45,ease:P},S[3]+.7);
236
+ tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+1);
237
+ tl.fromTo("#fn4",{opacity:0},{opacity:1,duration:.4},S[3]+1.3);
238
+ tl.set({},{},D);
239
+ window.__timelines=window.__timelines||{};window.__timelines["bank-pension-compare"]=tl;
240
+ </script>
241
+ </body>
242
+ </html>