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-wedding-budget.html ADDED
@@ -0,0 +1,229 @@
1
+ <!doctype html>
2
+ <html lang="he" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=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:#F6F2EC;--fg:#1B1B1F;--accent:#C8102E;--card:#FFFFFF;--mute:#9A948C}
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
+ .wc{top:270px;width:420px;height:470px}
68
+ .ico{position:absolute;left:80px;top:60px;width:260px;height:220px}
69
+ .ico i,.ico b,.ico s{position:absolute;display:block}
70
+ .iv i{left:40px;top:90px;width:180px;height:130px;background:var(--fg)}
71
+ .iv b{left:20px;top:20px;width:220px;height:76px;background:var(--accent);clip-path:polygon(50% 0,100% 100%,0 100%)}
72
+ .iv s{left:100px;top:150px;width:60px;height:70px;border-radius:30px 30px 0 0;background:var(--card)}
73
+ .ic i{left:10px;top:196px;width:240px;height:14px;border-radius:7px;background:var(--fg)}
74
+ .ic b{left:30px;top:76px;width:200px;height:120px;border-radius:100px 100px 0 0;background:color-mix(in srgb,var(--mute) 70%,var(--card))}
75
+ .ic s{left:112px;top:46px;width:36px;height:36px;border-radius:50%;background:var(--accent)}
76
+ .ip i{left:20px;top:60px;width:220px;height:150px;border-radius:22px;background:var(--fg)}
77
+ .ip b{left:80px;top:85px;width:100px;height:100px;border-radius:50%;background:var(--accent);border:16px solid var(--card)}
78
+ .ip s{left:40px;top:36px;width:60px;height:30px;border-radius:8px 8px 0 0;background:color-mix(in srgb,var(--mute) 80%,var(--fg))}
79
+ .bar{position:absolute;left:260px;top:470px;width:1400px;height:120px;border-radius:18px;overflow:hidden;background:color-mix(in srgb,var(--mute) 24%,var(--card));box-shadow:0 14px 32px color-mix(in srgb,var(--fg) 10%,transparent)}
80
+ .sg{position:absolute;top:0;bottom:0;border-left:5px solid var(--card);transform-origin:100% 50%}
81
+ .sg.accent{background:var(--accent)}
82
+ .sg.deep{background:color-mix(in srgb,var(--accent) 72%,var(--fg))}
83
+ .sg.mid{background:color-mix(in srgb,var(--accent) 48%,var(--card))}
84
+ .sg.soft{background:color-mix(in srgb,var(--accent) 26%,var(--card))}
85
+ .bl{position:absolute;width:240px;display:flex;flex-direction:column;align-items:center}
86
+ .bl.up{top:316px}
87
+ .bl.dn{top:600px}
88
+ .bl i{display:block;width:3px;height:28px;background:color-mix(in srgb,var(--fg) 35%,transparent)}
89
+ .bl.up i{order:3;margin-top:8px}
90
+ .bl p{font-size:40px;font-weight:700;white-space:nowrap;line-height:1.2;color:var(--fg)}
91
+ .bl .pc{font-size:34px;font-weight:400;color:color-mix(in srgb,var(--fg) 62%,var(--bg))}
92
+ .li{left:120px;width:600px;height:110px}
93
+ .dot{position:absolute;right:34px;top:42px;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--mute) 60%,var(--card))}
94
+ #li2 .dot{background:var(--accent)}
95
+ .rk{position:absolute;left:740px;width:90px;height:90px;border-radius:12px;background:var(--fg);display:flex;align-items:center;justify-content:center}
96
+ #rk0{background:var(--accent)}
97
+ .rk p{font-size:52px;font-weight:700;color:var(--card)}
98
+ .mouse{position:absolute;left:0;top:0;width:56px;height:78px;overflow:visible;z-index:5}
99
+ .mouse path{fill:var(--fg);stroke:var(--card);stroke-width:4;stroke-linejoin:round}
100
+ .tp1{position:absolute;z-index:3;top:-10px;left:-30px;width:110px;height:30px;background:var(--accent);transform:rotate(-30deg)}
101
+ .arch{position:absolute;left:700px;top:90px;width:520px;height:440px;overflow:visible}
102
+ .arch path{fill:none;stroke-linecap:round}
103
+ .a1{stroke:var(--fg);stroke-width:12}
104
+ .a2{stroke:var(--accent);stroke-width:6}
105
+ .fig{transform:scale(.8);transform-origin:50% 100%}
106
+ .gnd{position:absolute;left:640px;top:528px;width:640px;height:5px;border-radius:3px;background:var(--fg)}
107
+ .cf{position:absolute;width:14px;height:26px;border-radius:3px}
108
+ </style>
109
+ </head>
110
+ <body>
111
+ <div id="root" data-composition-id="bank-wedding-budget" data-start="0" data-width="1920" data-height="1080" data-duration="16">
112
+ <section id="s1" class="clip scene" data-start="0" data-duration="3.8">
113
+ <div class="cam" id="c1">
114
+ <i class="pl" style="left:-300px;top:-400px;width:860px;height:1800px;transform:rotate(33deg)"></i>
115
+ <i class="pl" style="left:1460px;top:-300px;width:600px;height:1600px;transform:rotate(-30deg)"></i>
116
+ <div class="cw" style="top:100px"><div class="row" style="font-size:92px"><p id="h1a">מתחתנים?</p><div class="hw"><i class="hb" id="hb-h1b"></i><p id="h1b" class="em">בונים תקציב</p></div></div></div>
117
+ <div class="card wc" id="wc0" style="left:1250px;transform:rotate(2deg)"><i class="tape tr"></i><div class="ico iv"><i></i><b></b><s></s></div><p class="t c" id="wa0" style="top:318px;font-size:60px;font-weight:700">אולם</p><p class="t c" id="wb0" style="top:400px;font-size:32px;color:var(--mute)">המקום והתאריך</p></div><div class="card wc" id="wc1" style="left:750px;transform:rotate(-1.5deg)"><i class="tape tr"></i><div class="ico ic"><i></i><b></b><s></s></div><p class="t c" id="wa1" style="top:318px;font-size:60px;font-weight:700">קייטרינג</p><p class="t c" id="wb1" style="top:400px;font-size:32px;color:var(--mute)">לפי מספר האורחים</p></div><div class="card wc" id="wc2" style="left:250px;transform:rotate(2.5deg)"><i class="tape tr"></i><div class="ico ip"><i></i><b></b><s></s></div><p class="t c" id="wa2" style="top:318px;font-size:60px;font-weight:700">צילום</p><p class="t c" id="wb2" style="top:400px;font-size:32px;color:var(--mute)">סטילס ווידאו</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><p id="cp1c">ועוד הרבה קטנות</p></div><i class="cur" id="cu1"></i></div></div>
119
+ </div>
120
+ </section>
121
+ <section id="s2" class="clip scene" data-start="3.8" 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:84px"><p id="t2a">כל הוצאה</p><div class="hw"><i class="hb" id="hb-t2b"></i><p id="t2b" class="em">מקבלת מקום</p></div></div></div>
125
+ <div class="bar" id="bar"><i class="sg accent" id="sg0" style="right:0px;width:560px"></i><i class="sg deep" id="sg1" style="right:560px;width:420px"></i><i class="sg mid" id="sg2" style="right:980px;width:168px"></i><i class="sg soft" id="sg3" style="right:1148px;width:140px"></i></div>
126
+ <div class="bl up" id="bl0" style="left:1260px"><i></i><p id="bn0">אולם</p><p class="pc" id="bp0">40%</p></div><div class="bl dn" id="bl1" style="left:770px"><i></i><p id="bn1">קייטרינג</p><p class="pc" id="bp1">30%</p></div><div class="bl up" id="bl2" style="left:476px"><i></i><p id="bn2">צילום</p><p class="pc" id="bp2">12%</p></div><div class="bl dn" id="bl3" style="left:322px"><i></i><p id="bn3">שונות</p><p class="pc" id="bp3">10%</p></div><div class="bl up" id="bl4" style="left:196px"><i></i><p id="bn4" style="color:var(--mute)">רזרבה</p><p class="pc" id="bp4">8%</p></div>
127
+ <p class="t c fine" id="fn2" style="top:790px;font-size:28px">תקציב החתונה · חלוקה להמחשה בלבד</p>
128
+ <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>
129
+ </div>
130
+ </section>
131
+ <section id="s3" class="clip scene" data-start="8.2" data-duration="4.2">
132
+ <div class="cam" id="c3">
133
+ <i class="pl" style="left:1300px;top:-400px;width:800px;height:1800px;transform:rotate(-30deg)"></i>
134
+ <div class="row" style="position:absolute;right:160px;top:190px;font-size:90px"><p id="t3a">מה הכי</p><div class="hw"><i class="hb" id="hb-t3b"></i><p id="t3b" class="em">חשוב לכם?</p></div></div>
135
+ <p class="t" id="t3c" style="right:160px;top:340px;font-size:44px">מסדרים לפי סדר עדיפויות</p>
136
+ <div class="rk" id="rk0" style="top:260px"><p id="rn0">1</p></div><div class="rk" id="rk1" style="top:400px"><p id="rn1">2</p></div><div class="rk" id="rk2" style="top:540px"><p id="rn2">3</p></div><div class="rk" id="rk3" style="top:680px"><p id="rn3">4</p></div>
137
+ <div class="card li" id="li0" style="top:250px"><i class="dot"></i><p class="t" id="ln0" style="right:76px;top:24px;font-size:46px;font-weight:700">אולם ואוכל</p></div><div class="card li" id="li1" style="top:390px"><i class="dot"></i><p class="t" id="ln1" style="right:76px;top:24px;font-size:46px;font-weight:700">להקה ומוזיקה</p></div><div class="card li" id="li2" style="top:530px"><i class="dot"></i><p class="t" id="ln2" style="right:76px;top:24px;font-size:46px;font-weight:700">צילום ווידאו</p></div><div class="card li" id="li3" style="top:670px"><i class="dot"></i><p class="t" id="ln3" style="right:76px;top:24px;font-size:46px;font-weight:700">שמלה וחליפה</p></div>
138
+ <i class="tp1" id="tp1" style="left:90px;top:236px"></i>
139
+ <svg class="mouse" id="ms" viewBox="0 0 56 78"><path d="M4 4v62l16-15 11 24 11-5-11-23h22z"/></svg>
140
+ <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>
141
+ </div>
142
+ </section>
143
+ <section id="s4" class="clip scene" data-start="12.4" data-duration="3.6">
144
+ <div class="cam" id="c4">
145
+ <i class="pl" style="left:-300px;top:-400px;width:900px;height:1800px;transform:rotate(32deg)"></i>
146
+ <i class="cf" style="left:690px;top:140px;background:var(--accent);transform:rotate(20deg)"></i><i class="cf" style="left:760px;top:300px;background:var(--mute);transform:rotate(-30deg)"></i><i class="cf" style="left:1180px;top:120px;background:var(--fg);transform:rotate(60deg)"></i><i class="cf" style="left:1260px;top:260px;background:var(--accent);transform:rotate(-70deg)"></i><i class="cf" style="left:640px;top:420px;background:var(--accent);transform:rotate(15deg)"></i><i class="cf" style="left:1300px;top:430px;background:var(--mute);transform:rotate(80deg)"></i><i class="cf" style="left:860px;top:90px;background:var(--mute);transform:rotate(-20deg)"></i><i class="cf" style="left:1080px;top:70px;background:var(--accent);transform:rotate(35deg)"></i><i class="cf" style="left:600px;top:250px;background:var(--fg);transform:rotate(-55deg)"></i><i class="cf" style="left:1340px;top:160px;background:var(--accent);transform:rotate(70deg)"></i><i class="cf" style="left:960px;top:40px;background:var(--mute);transform:rotate(-10deg)"></i><i class="cf" style="left:720px;top:520px;background:var(--mute);transform:rotate(25deg)"></i>
147
+ <svg class="arch" viewBox="0 0 520 440"><path class="a1" id="ar1" pathLength="1" d="M30 440V250A230 230 0 0 1 490 250V440"/><path class="a2" id="ar2" pathLength="1" d="M62 440V256A198 198 0 0 1 458 256V440"/></svg>
148
+ <div class="fig" id="cp1" style="left:780px;top:230px"><i class="hd"></i><i class="bd"></i><i class="nk"></i></div>
149
+ <div class="fig a" id="cp2" style="left:940px;top:230px"><i class="hd"></i><i class="bd"></i><i class="nk"></i></div>
150
+ <i class="gnd" id="gnd"></i>
151
+ <div class="cw" style="top:590px"><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>
152
+ <p class="t c" id="e3" style="top:730px;font-size:44px">תקציב ברור, פחות הפתעות</p>
153
+ <div class="cw" style="top:810px"><div class="cta" id="cta"><i></i><p id="ctat">מתכננים באפליקציה</p></div></div>
154
+ <p class="t c fine" id="fn4" style="top:930px">להמחשה בלבד · בכפוף לתנאי הבנק</p>
155
+ </div>
156
+ </section>
157
+ <div id="ov" class="clip" data-start="0" data-duration="16">
158
+ <div class="brand" id="brw"><i class="bm"></i><p id="brand">המותג שלכם</p></div>
159
+ </div>
160
+ </div>
161
+ <script>
162
+ const tl=gsap.timeline({paused:true});
163
+ const S=[0,3.8,8.2,12.4,16],D=16;
164
+ const P="power3.out",X="expo.out",B="back.out(1.7)";
165
+ tl.fromTo("#brw",{opacity:0,y:-16},{opacity:1,y:0,duration:.5,ease:P},.15);
166
+ 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;
167
+ tl.fromTo("#ct"+n,{maxWidth:0},{maxWidth:W,duration:d,ease:"steps("+Math.max(8,Math.round(W/28))+")"},t0);
168
+ 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);}
169
+ function hl(id,at){tl.fromTo("#hb-"+id,{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.5,ease:"power2.inOut"},at);}
170
+ function draw(sel,at,d,e){tl.fromTo(sel,{strokeDasharray:1,strokeDashoffset:1},{strokeDashoffset:0,duration:d,ease:e||"power2.inOut",autoRound:false},at);}
171
+ function fadeOut(i,d){tl.to("#c"+(i+1),{opacity:0,duration:d||.35,ease:"power1.in"},S[i+1]-(d||.35));}
172
+ function camIn(i){tl.fromTo("#c"+(i+1),{opacity:0},{opacity:1,duration:.3},S[i]);}
173
+
174
+ // s1 taped cards
175
+ camIn(0);
176
+ tl.fromTo("#c1",{scale:1.04},{scale:1,duration:3.8,ease:"none"},S[0]);
177
+ tl.fromTo(["#h1a","#h1b"],{opacity:0,y:60},{opacity:1,y:0,duration:.55,ease:P,stagger:.14},S[0]+.15);
178
+ hl("h1b",S[0]+.75);
179
+ tl.fromTo(".wc",{y:140,opacity:0},{y:0,opacity:1,duration:.7,ease:X,stagger:.18},S[0]+.35);
180
+ tl.fromTo(".wc .tape",{scale:0},{scale:1,duration:.35,ease:B,stagger:.12},S[0]+.9);
181
+ tl.fromTo(".wc .ico",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B,stagger:.18},S[0]+.7);
182
+ capIn(1,S[0]+1.3,720,S[1]);
183
+ fadeOut(0);
184
+ // s2 budget bar fills from the right
185
+ camIn(1);
186
+ tl.fromTo(["#t2a","#t2b"],{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P,stagger:.12},S[1]+.1);
187
+ hl("t2b",S[1]+.55);
188
+ tl.fromTo("#bar",{opacity:0,scaleX:.9,transformOrigin:"100% 50%"},{opacity:1,scaleX:1,duration:.5,ease:P},S[1]+.2);
189
+ for(let k=0;k<5;k++){const a=S[1]+.7+k*.42;if(k<4)tl.fromTo("#sg"+k,{scaleX:0},{scaleX:1,duration:.45,ease:"power2.out"},a);
190
+ tl.fromTo("#bl"+k,{opacity:0,y:k%2?-20:20},{opacity:1,y:0,duration:.35,ease:P},a+.25);}
191
+ tl.fromTo("#fn2",{opacity:0},{opacity:1,duration:.4},S[1]+2.8);
192
+ capIn(2,S[1]+1.4,420,S[2]);
193
+ fadeOut(1);
194
+ // s3 priorities: drag item 3 to the top
195
+ camIn(2);
196
+ tl.fromTo(["#t3a","#t3b"],{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P,stagger:.12},S[2]+.1);
197
+ hl("t3b",S[2]+.55);
198
+ tl.fromTo("#t3c",{opacity:0,y:20},{opacity:1,y:0,duration:.45,ease:P},S[2]+.4);
199
+ tl.fromTo(".rk",{scale:0},{scale:1,duration:.35,ease:B,stagger:.08},S[2]+.15);
200
+ tl.fromTo(".li",{opacity:0,x:-60},{opacity:1,x:0,duration:.45,ease:P,stagger:.08},S[2]+.2);
201
+ tl.fromTo("#ms",{x:1100,y:960,opacity:0},{x:560,y:590,opacity:1,duration:.6,ease:"power2.inOut"},S[2]+.75);
202
+ tl.set("#li2",{zIndex:4},S[2]+1.3);
203
+ tl.to("#li2",{x:-60,scale:1.04,duration:.2,ease:"power2.out"},S[2]+1.35);
204
+ tl.to("#ms",{x:500,duration:.2,ease:"power2.out"},S[2]+1.35);
205
+ tl.to("#li2",{y:-280,duration:.55,ease:"power2.inOut"},S[2]+1.5);
206
+ tl.to("#ms",{y:310,duration:.55,ease:"power2.inOut"},S[2]+1.5);
207
+ tl.to(["#li0","#li1"],{y:140,duration:.45,ease:"power2.inOut"},S[2]+1.55);
208
+ tl.to("#li2",{x:0,scale:1,duration:.25,ease:"power2.out"},S[2]+2.05);
209
+ tl.to("#ms",{x:560,opacity:0,duration:.35},S[2]+2.2);
210
+ tl.fromTo("#tp1",{scale:0},{scale:1,duration:.35,ease:B},S[2]+2.25);
211
+ tl.fromTo("#rk0",{scale:1},{scale:1.15,duration:.2,yoyo:true,repeat:1,ease:"power1.inOut"},S[2]+2.3);
212
+ capIn(3,S[2]+1.3,580,S[3]);
213
+ fadeOut(2);
214
+ // s4 calm close
215
+ camIn(3);
216
+ draw("#ar1",S[3]+.1,.8);draw("#ar2",S[3]+.3,.8);
217
+ tl.fromTo(["#cp1","#cp2"],{y:80,opacity:0},{y:0,opacity:1,duration:.6,ease:X,stagger:.12},S[3]+.3);
218
+ tl.fromTo("#gnd",{scaleX:0},{scaleX:1,duration:.5,ease:"power2.out"},S[3]+.3);
219
+ tl.fromTo(".cf",{y:-80,opacity:0},{y:0,opacity:1,duration:1.1,ease:"power1.out",stagger:.05},S[3]+.4);
220
+ tl.fromTo(["#e1","#e2"],{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P,stagger:.12},S[3]+.5);
221
+ hl("e2",S[3]+1);
222
+ tl.fromTo("#e3",{opacity:0,y:20},{opacity:1,y:0,duration:.45,ease:P},S[3]+.8);
223
+ tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+1.1);
224
+ tl.fromTo("#fn4",{opacity:0},{opacity:1,duration:.4},S[3]+1.4);
225
+ tl.set({},{},D);
226
+ window.__timelines=window.__timelines||{};window.__timelines["bank-wedding-budget"]=tl;
227
+ </script>
228
+ </body>
229
+ </html>
package/lib/catalog/hyperframes/index-b6.json ADDED
@@ -0,0 +1,146 @@
1
+ [
2
+ {
3
+ "id": "bank-paper-explainer",
4
+ "file": "bank-paper-explainer.html",
5
+ "title": "הסבר על ניירת",
6
+ "description": "סרטון הסבר בסגנון ערוץ בנק: כרטיס שאלה מודבק בסלוטייפ אדום, ערימת מסמכים שגדלה לצד תוויות, כרטיס צ׳קליסט עם סימוני וי אדומים וסגירה רגועה, עם כיתוב תחתון בגלולה לבנה.",
7
+ "category": "bank-life",
8
+ "width": 1920,
9
+ "height": 1080,
10
+ "duration": 15.4,
11
+ "tags": [
12
+ "בנק",
13
+ "ניירת",
14
+ "מסמכים",
15
+ "צ׳קליסט",
16
+ "הסבר",
17
+ "יוטיוב"
18
+ ]
19
+ },
20
+ {
21
+ "id": "bank-one-click-loan",
22
+ "file": "bank-one-click-loan.html",
23
+ "title": "הלוואה בקליק",
24
+ "description": "סרטון הסבר דיגיטלי בסגנון ערוץ בנק: פתיח עם תוויות, חלון אפליקציה שבו סמן לוחץ על כפתור אדום, שלושה שלבים שנדלקים בזה אחר זה וכרטיס אישור עם וי אדום.",
25
+ "category": "bank-digital",
26
+ "width": 1920,
27
+ "height": 1080,
28
+ "duration": 15,
29
+ "tags": [
30
+ "בנק",
31
+ "הלוואה",
32
+ "אפליקציה",
33
+ "דיגיטל",
34
+ "קליק",
35
+ "הסבר"
36
+ ]
37
+ },
38
+ {
39
+ "id": "bank-suspicious-sms",
40
+ "file": "bank-suspicious-sms.html",
41
+ "title": "הודעה חשודה",
42
+ "description": "שורט אבטחה בסגנון ערוץ בנק: טלפון רוטט עם הודעה דחופה, כרטיס מוגדל עם עיגול אדום סביב הקישור המזויף, שלבי עוצרים · בודקים · מתקשרים וסגירה רגועה.",
43
+ "category": "bank-safety",
44
+ "width": 1080,
45
+ "height": 1920,
46
+ "duration": 15,
47
+ "tags": [
48
+ "בנק",
49
+ "אבטחה",
50
+ "הונאה",
51
+ "הודעה",
52
+ "סמס",
53
+ "שורט"
54
+ ]
55
+ },
56
+ {
57
+ "id": "bank-growth-bars",
58
+ "file": "bank-growth-bars.html",
59
+ "title": "גרף צמיחה",
60
+ "description": "סרטון השקעות בסגנון ערוץ בנק: תוויות מודבקות לצד קבוצת דמויות גאומטריות, עמודות אדום-שחור עולות עם חץ מגמה, מספר מתגלגל להמחשה והשוואת טווח קצר מול ארוך, עם כיתוב תחתון בגלולה לבנה.",
61
+ "category": "bank-invest",
62
+ "width": 1920,
63
+ "height": 1080,
64
+ "duration": 15.2,
65
+ "tags": [
66
+ "בנק",
67
+ "השקעות",
68
+ "חיסכון",
69
+ "גרף",
70
+ "צמיחה",
71
+ "הסבר"
72
+ ]
73
+ },
74
+ {
75
+ "id": "bank-first-salary",
76
+ "file": "bank-first-salary.html",
77
+ "title": "המשכורת הראשונה",
78
+ "description": "שורט לצעירים בסגנון ערוץ בנק: התראת הפקדה מעל דמות גאומטרית שמחה, תלוש שכר מודבק עם נטו מודגש, חלוקת הנטו לשלושה כיסים (הוצאות, חיסכון, בילויים) עם מטבעות נופלים וסגירה רגועה.",
79
+ "category": "bank-young",
80
+ "width": 1080,
81
+ "height": 1920,
82
+ "duration": 15,
83
+ "tags": [
84
+ "בנק",
85
+ "צעירים",
86
+ "משכורת",
87
+ "חיסכון",
88
+ "תקציב",
89
+ "שורט"
90
+ ]
91
+ },
92
+ {
93
+ "id": "bank-mortgage-papers",
94
+ "file": "bank-mortgage-papers.html",
95
+ "title": "משכנתא ומסמכים",
96
+ "description": "סרטון הסבר על משכנתא בסגנון ערוץ בנק: קולאז׳ מסמכים מודבקים בסלוטייפ אדום, שלושה כרטיסי מסלול עם ריביות להמחשה, כרטיס פגישה עם הבנקאי בדמויות גאומטריות וסגירה רגועה.",
97
+ "category": "bank-life",
98
+ "width": 1920,
99
+ "height": 1080,
100
+ "duration": 16,
101
+ "tags": [
102
+ "בנק",
103
+ "משכנתא",
104
+ "דירה",
105
+ "מסמכים",
106
+ "ריבית",
107
+ "הסבר"
108
+ ]
109
+ },
110
+ {
111
+ "id": "bank-dark-interlude",
112
+ "file": "bank-dark-interlude.html",
113
+ "title": "רגע לפני שמחליטים",
114
+ "description": "סרטון השקעות בסגנון ערוץ בנק עם אינטרלוד כהה: פתיח בהיר עם קו שוק קופצני, מעבר לסצנה כהה עם צורה אדומה זוהרת ומשפט קינטי בעברית, ואז חיתוך חזרה לסיכום בהיר עם צ׳קליסט.",
115
+ "category": "bank-invest",
116
+ "width": 1920,
117
+ "height": 1080,
118
+ "duration": 15,
119
+ "tags": [
120
+ "בנק",
121
+ "השקעות",
122
+ "שוק ההון",
123
+ "אינטרלוד",
124
+ "קינטי",
125
+ "הסבר"
126
+ ]
127
+ },
128
+ {
129
+ "id": "bank-small-business",
130
+ "file": "bank-small-business.html",
131
+ "title": "העסק הקטן",
132
+ "description": "פוסט ריבועי לעסקים קטנים בסגנון ערוץ בנק: חזית חנות מצורות שטוחות עם סוכך מפוספס, מיני־גרף תזרים של נכנס מול יוצא, התראות \"התקבל תשלום\" שנערמות עם סכום יומי, וסגירה רגועה.",
133
+ "category": "bank-young",
134
+ "width": 1080,
135
+ "height": 1080,
136
+ "duration": 15,
137
+ "tags": [
138
+ "בנק",
139
+ "עסק קטן",
140
+ "תזרים",
141
+ "תשלומים",
142
+ "עצמאים",
143
+ "פוסט"
144
+ ]
145
+ }
146
+ ]
package/lib/catalog/hyperframes/index-b7.json ADDED
@@ -0,0 +1,121 @@
1
+ [
2
+ {
3
+ "id": "bank-fast-pay",
4
+ "file": "bank-fast-pay.html",
5
+ "title": "העברה מהירה לחברים",
6
+ "description": "סרטון אנכי בסגנון הסברי בנק: שתי דמויות שטוחות ומטבע שעובר ביניהן, בחירת איש קשר בטלפון, הקלדת סכום במקלדת, כרטיס ״נשלח״ עם וי אדום ושורת כיתוב תחתונה.",
7
+ "category": "bank-digital",
8
+ "width": 1080,
9
+ "height": 1920,
10
+ "duration": 15.6,
11
+ "tags": [
12
+ "בנק",
13
+ "אפליקציה",
14
+ "העברת כסף",
15
+ "תשלום",
16
+ "שורטס"
17
+ ]
18
+ },
19
+ {
20
+ "id": "bank-holiday-budget",
21
+ "file": "bank-holiday-budget.html",
22
+ "title": "תקציב לחגים",
23
+ "description": "סרטון הסבר בסגנון בנק ביוטיוב: רשימת חג על כרטיס נייר עם סרט הדבקה, טבעת תקציב שמתמלאת לפי מתנות, אוכל ונסיעות, מעקב באפליקציה וסיום רגוע עם משפחה בדמויות שטוחות.",
24
+ "category": "bank-life",
25
+ "width": 1920,
26
+ "height": 1080,
27
+ "duration": 16,
28
+ "tags": [
29
+ "בנק",
30
+ "חגים",
31
+ "תקציב",
32
+ "חיסכון",
33
+ "משפחה"
34
+ ]
35
+ },
36
+ {
37
+ "id": "bank-code-never",
38
+ "file": "bank-code-never.html",
39
+ "title": "קוד אישי לא משתפים",
40
+ "description": "סרטון בטיחות בסגנון בנק ביוטיוב: צ׳אט חשוד שמבקש קוד בן 6 ספרות, כרטיס קוד שמקבל חותמת אדומה ״לא משתפים״, כלל שלושת הצעדים וסיום כהה עם אריח מנעול אדום זוהר.",
41
+ "category": "bank-safety",
42
+ "width": 1920,
43
+ "height": 1080,
44
+ "duration": 16,
45
+ "tags": [
46
+ "בנק",
47
+ "הונאה",
48
+ "אבטחה",
49
+ "קוד אימות",
50
+ "בטיחות"
51
+ ]
52
+ },
53
+ {
54
+ "id": "bank-share-explained",
55
+ "file": "bank-share-explained.html",
56
+ "title": "מה זו מניה",
57
+ "description": "סרטון הסבר השקעות בסגנון בנק ביוטיוב: כרטיס חברה עם בניינים שטוחים נחתך ומתפרק לאריחי מניות ואריח אדום אחד ״שלכם״, גרף מחיר להמחשה בחלון דפדפן וסיום עם הבהרה משפטית.",
58
+ "category": "bank-invest",
59
+ "width": 1920,
60
+ "height": 1080,
61
+ "duration": 16.5,
62
+ "tags": [
63
+ "בנק",
64
+ "מניה",
65
+ "השקעות",
66
+ "שוק ההון",
67
+ "הסבר"
68
+ ]
69
+ },
70
+ {
71
+ "id": "bank-new-app-look",
72
+ "file": "bank-new-app-look.html",
73
+ "title": "האפליקציה בעיצוב חדש",
74
+ "description": "סרטון אנכי להשקת עיצוב חדש לאפליקציה: פתיח כהה עם אריח אדום זוהר, מעבר לפני ואחרי בטלפון, הדגשות אדומות וצ׳יפים של יכולות, וכרטיס ״גרסה חדשה״ עם סרט הדבקה.",
75
+ "category": "bank-digital",
76
+ "width": 1080,
77
+ "height": 1920,
78
+ "duration": 15.8,
79
+ "tags": [
80
+ "בנק",
81
+ "אפליקציה",
82
+ "עיצוב חדש",
83
+ "עדכון",
84
+ "שורטס"
85
+ ]
86
+ },
87
+ {
88
+ "id": "bank-forex-trip",
89
+ "file": "bank-forex-trip.html",
90
+ "title": "מט״ח לפני הטיסה",
91
+ "description": "פוסט ריבועי בסגנון הסברי בנק: מזוודה שטוחה וכרטיסי מטבע (שקל, דולר, אירו), המרה דו־כיוונית, טיקר שערים על רקע כהה עם מטבע אדום זוהר וצ׳קליסט לפני הטיסה על כרטיס עם סרט הדבקה.",
92
+ "category": "bank-life",
93
+ "width": 1080,
94
+ "height": 1080,
95
+ "duration": 16,
96
+ "tags": [
97
+ "בנק",
98
+ "מט״ח",
99
+ "חופשה",
100
+ "טיסה",
101
+ "מטבע"
102
+ ]
103
+ },
104
+ {
105
+ "id": "bank-student-routine",
106
+ "file": "bank-student-routine.html",
107
+ "title": "שבוע של סטודנטים",
108
+ "description": "סרטון לצעירים בסגנון בנק ביוטיוב: לוח שבועי על כרטיס נייר, כרטיסי הוצאות לקפה, ספרים ושכירות, כיס חיסכון באפליקציה עם פס שמתמלא וגרף שבועי, וסיום עם דמות סטודנט שטוחה.",
109
+ "category": "bank-young",
110
+ "width": 1920,
111
+ "height": 1080,
112
+ "duration": 16.5,
113
+ "tags": [
114
+ "בנק",
115
+ "סטודנטים",
116
+ "צעירים",
117
+ "תקציב",
118
+ "חיסכון"
119
+ ]
120
+ }
121
+ ]
package/lib/catalog/hyperframes/index-b8.json ADDED
@@ -0,0 +1,92 @@
1
+ [
2
+ {
3
+ "id": "bank-pension-compare",
4
+ "file": "bank-pension-compare.html",
5
+ "title": "משווים דמי ניהול",
6
+ "description": "סרטון הסבר בסגנון ערוץ בנק: שני כרטיסי דמי ניהול זה לצד זה, גרף להמחשה שבו סמן אדום רוכב על הפער שגדל עם השנים, דוח שנתי עם רשימת בדיקה וסגירה רגועה עם לוח שנה והבהרה.",
7
+ "category": "bank-invest",
8
+ "width": 1920,
9
+ "height": 1080,
10
+ "duration": 15.4,
11
+ "tags": [
12
+ "בנק",
13
+ "פנסיה",
14
+ "דמי ניהול",
15
+ "השוואה",
16
+ "חיסכון",
17
+ "הסבר"
18
+ ]
19
+ },
20
+ {
21
+ "id": "bank-card-freeze",
22
+ "file": "bank-card-freeze.html",
23
+ "title": "הקפאת כרטיס",
24
+ "description": "שורט דיגיטלי בסגנון ערוץ בנק: ארנק עם חריץ כרטיס ריק, טלפון שבו נגיעה מעבירה את מתג ההקפאה למצב מוקפא, מנעול אדום פועם עם מה זה אומר, וסגירה של נמצא? משחררים בשני צעדים.",
25
+ "category": "bank-digital",
26
+ "width": 1080,
27
+ "height": 1920,
28
+ "duration": 15.2,
29
+ "tags": [
30
+ "בנק",
31
+ "כרטיס אשראי",
32
+ "הקפאה",
33
+ "אפליקציה",
34
+ "אבטחה",
35
+ "שורט"
36
+ ]
37
+ },
38
+ {
39
+ "id": "bank-dinner-split",
40
+ "file": "bank-dinner-split.html",
41
+ "title": "מפצלים את החשבון",
42
+ "description": "פוסט ריבועי דיגיטלי בסגנון ערוץ בנק: שולחן במבט מלמעלה עם צלחות וסועדים מצורות שטוחות, חשבון שנחתך לארבעה חלקים שווים, התראות תשלום שנערמות עם פס התקדמות וסגירה רגועה.",
43
+ "category": "bank-digital",
44
+ "width": 1080,
45
+ "height": 1080,
46
+ "duration": 15,
47
+ "tags": [
48
+ "בנק",
49
+ "תשלומים",
50
+ "חשבון",
51
+ "מסעדה",
52
+ "חברים",
53
+ "אפליקציה"
54
+ ]
55
+ },
56
+ {
57
+ "id": "bank-wedding-budget",
58
+ "file": "bank-wedding-budget.html",
59
+ "title": "תקציב לחתונה",
60
+ "description": "סרטון הסבר בסגנון ערוץ בנק: שלושה כרטיסים מודבקים לאולם, קייטרינג וצילום, פס תקציב ארוך שמתמלא מימין במקטעים אדומים עם רזרבה, רשימת עדיפויות שבה סמן גורר פריט לראש הרשימה, וסגירה רגועה עם קשת וזוג בדמויות שטוחות.",
61
+ "category": "bank-life",
62
+ "width": 1920,
63
+ "height": 1080,
64
+ "duration": 16,
65
+ "tags": [
66
+ "בנק",
67
+ "חתונה",
68
+ "תקציב",
69
+ "זוגיות",
70
+ "תכנון",
71
+ "הסבר"
72
+ ]
73
+ },
74
+ {
75
+ "id": "bank-fomo-stop",
76
+ "file": "bank-fomo-stop.html",
77
+ "title": "רגע לפני שקונים",
78
+ "description": "שורט השקעות בסגנון ערוץ בנק: צ׳אט קבוצתי שמלהיב מניה עם גרף טס ובועות דחופות, הפסקה כהה עם סימן עצירה אדום זוהר, כרטיס מודבק עם שלוש שאלות לפני קנייה, וסגירה רגועה עם הבהרה.",
79
+ "category": "bank-invest",
80
+ "width": 1080,
81
+ "height": 1920,
82
+ "duration": 15.6,
83
+ "tags": [
84
+ "בנק",
85
+ "השקעות",
86
+ "מניות",
87
+ "פומו",
88
+ "החלטות",
89
+ "שורט"
90
+ ]
91
+ }
92
+ ]