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-suspicious-sms-CwOrdi3d.js ADDED
@@ -0,0 +1,229 @@
1
+ var e=`<!doctype html>
2
+ <html lang="he" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=1080, height=1920">
6
+ <title>הודעה חשודה</title>
7
+ <script src="vendor/gsap.min.js"><\/script>
8
+ <style>
9
+ @font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
10
+ @font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
11
+ @font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
12
+ @font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
13
+ :root{--bg:#F4F4F2;--fg:#141A26;--accent:#D7062E;--card:#FFFFFF;--mute:#868D99}
14
+ *{box-sizing:border-box;margin:0;padding:0}
15
+ html,body{width:1080px;height:1920px;overflow:hidden;background:var(--bg)}
16
+ body{font-family:"Heebo",Arial,sans-serif;-webkit-font-smoothing:antialiased}
17
+ #root{position:relative;width:1080px;height:1920px;overflow:hidden;background:var(--bg);color:var(--fg);direction:rtl;font-family:"Heebo",Arial,sans-serif}
18
+ .scene{position:absolute;inset:0;overflow:hidden}
19
+ .cam,.layer{position:absolute;inset:0}
20
+ .abs{position:absolute}
21
+ .m{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .08em}
22
+ .w{display:inline-block;white-space:nowrap}
23
+ .t{position:absolute;white-space:nowrap;line-height:1.15;color:var(--fg)}
24
+ .c{left:0;right:0;text-align:center}
25
+ .cw{position:absolute;left:0;right:0;display:flex;justify-content:center}
26
+ .row{display:flex;gap:.26em;align-items:baseline;white-space:nowrap;line-height:1.15;font-weight:700;color:var(--fg)}
27
+ .em{color:var(--accent)}
28
+ .hw{position:relative}
29
+ .hw p{position:relative}
30
+ .hb{position:absolute;left:-.1em;right:-.1em;bottom:.08em;height:.34em;background:color-mix(in srgb,var(--accent) 24%,transparent)}
31
+ .pl{position:absolute;background:color-mix(in srgb,var(--card) 62%,transparent)}
32
+ .brand{position:absolute;top:36px;right:44px;height:54px;padding:0 22px;border-radius:27px;background:var(--card);display:flex;align-items:center;gap:12px;box-shadow:0 6px 18px color-mix(in srgb,var(--fg) 12%,transparent)}
33
+ .brand .bm{width:16px;height:16px;border-radius:3px;background:var(--accent)}
34
+ .brand p{font-size:26px;font-weight:700;color:var(--fg);white-space:nowrap}
35
+ .capw{position:absolute;left:0;right:0;bottom:58px;display:flex;justify-content:center}
36
+ .cap{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:12px;padding:16px 28px;box-shadow:0 10px 28px color-mix(in srgb,var(--fg) 14%,transparent)}
37
+ .cap .mk{flex:none;width:16px;height:16px;background:var(--accent)}
38
+ .cap .ct{display:flex;gap:.26em;overflow:hidden;min-width:0;font-size:40px;line-height:1.3;white-space:nowrap;color:var(--fg)}
39
+ .cap .ct .em{font-weight:700}
40
+ .cap .cur{flex:none;width:12px;height:40px;background:var(--fg)}
41
+ .card{position:absolute;background:var(--card);border-radius:10px;box-shadow:0 24px 54px color-mix(in srgb,var(--fg) 13%,transparent),0 2px 6px color-mix(in srgb,var(--fg) 8%,transparent)}
42
+ .tape{position:absolute;z-index:2;width:120px;height:32px;background:var(--accent);opacity:.94}
43
+ .tape::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;background:var(--card)}
44
+ .tl{top:-6px;left:-34px;transform:rotate(-36deg)}
45
+ .tr{top:-6px;right:-34px;transform:rotate(36deg)}
46
+ .ln{display:block;height:12px;border-radius:6px;background:color-mix(in srgb,var(--mute) 38%,var(--card));margin-top:18px}
47
+ .ln.r{background:color-mix(in srgb,var(--accent) 45%,var(--card))}
48
+ .lab{position:absolute;padding:6px 24px 12px;font-size:46px;font-weight:700;white-space:nowrap;line-height:1.2;background:var(--card);color:var(--fg);box-shadow:0 8px 20px color-mix(in srgb,var(--fg) 12%,transparent)}
49
+ .lab.r{background:var(--accent);color:var(--card)}
50
+ .win{position:absolute;background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 24px 54px color-mix(in srgb,var(--fg) 14%,transparent)}
51
+ .win .wb{height:44px;background:var(--fg);display:flex;align-items:center;gap:10px;padding:0 18px;direction:ltr}
52
+ .win .wb i{width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,var(--card) 50%,var(--fg))}
53
+ .fig{position:absolute;width:200px;height:300px}
54
+ .fig .hd{position:absolute;left:55px;top:0;width:90px;height:90px;border-radius:50%;background:color-mix(in srgb,var(--fg) 82%,var(--card))}
55
+ .fig .bd{position:absolute;left:0;top:104px;width:200px;height:196px;border-radius:100px 100px 14px 14px;background:var(--fg)}
56
+ .fig .nk{position:absolute;left:78px;top:104px;width:44px;height:58px;background:var(--card);clip-path:polygon(0 0,100% 0,50% 100%)}
57
+ .fig.a .bd{background:var(--accent)}
58
+ .fig.m .bd{background:var(--mute)}
59
+ .endmk{width:64px;height:64px;border-radius:8px;background:var(--accent)}
60
+ .ebox{border:5px solid var(--fg);background:var(--card);padding:4px 38px 14px;font-weight:700;white-space:nowrap;line-height:1.2;color:var(--fg)}
61
+ .cta{display:flex;align-items:center;gap:14px;height:84px;padding:0 40px;border-radius:42px;background:var(--fg)}
62
+ .cta i{width:16px;height:16px;background:var(--accent)}
63
+ .cta p{font-size:36px;font-weight:700;color:var(--card);white-space:nowrap}
64
+ .fine{font-size:24px;color:color-mix(in srgb,var(--fg) 58%,var(--bg))}
65
+ .ck{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
66
+
67
+ .capw{bottom:150px}
68
+ .cap .ct{font-size:38px}
69
+ .phn{position:absolute;left:220px;top:560px;width:640px;height:940px;border-radius:84px;background:var(--fg);box-shadow:0 30px 70px color-mix(in srgb,var(--fg) 25%,transparent)}
70
+ .scr{position:absolute;inset:20px;border-radius:66px;overflow:hidden;background:var(--card)}
71
+ .ntc{position:absolute;left:250px;top:18px;width:140px;height:36px;border-radius:18px;background:var(--fg)}
72
+ .hdr{position:absolute;left:0;right:0;top:0;height:220px;background:color-mix(in srgb,var(--mute) 12%,var(--card))}
73
+ .av{position:absolute;left:250px;top:76px;width:100px;height:100px;border-radius:50%;background:var(--mute)}
74
+ .bub{position:absolute;right:36px;top:330px;width:520px;height:330px;border-radius:36px 8px 36px 36px;background:color-mix(in srgb,var(--mute) 16%,var(--card))}
75
+ .bub p{position:absolute;right:30px;white-space:nowrap;color:var(--fg)}
76
+ .inp{position:absolute;left:30px;right:30px;bottom:44px;height:84px;border-radius:42px;background:color-mix(in srgb,var(--mute) 14%,var(--card))}
77
+ .inp i{position:absolute;left:10px;top:10px;width:64px;height:64px;border-radius:50%;background:var(--accent)}
78
+ .lnk{text-decoration:underline;text-underline-offset:6px}
79
+ .ban{position:absolute;left:24px;right:24px;top:36px;height:110px;border-radius:28px;background:var(--card);box-shadow:0 12px 30px color-mix(in srgb,var(--fg) 18%,transparent);z-index:3}
80
+ .ban i{position:absolute;right:26px;top:30px;width:50px;height:50px;border-radius:12px;background:var(--accent)}
81
+ .big{left:70px;top:520px;width:940px;height:560px}
82
+ .big .t{right:70px}
83
+ .ell{position:absolute;right:30px;top:290px;width:640px;height:150px;overflow:visible}
84
+ .ell ellipse{fill:none;stroke:var(--accent);stroke-width:7}
85
+ .emk{position:absolute;right:658px;top:356px;width:22px;height:22px;background:var(--accent)}
86
+ .sc{left:90px;width:900px;height:300px;overflow:hidden}
87
+ .sbar{position:absolute;left:0;right:0;top:0;height:10px;background:var(--accent)}
88
+ .ico{position:absolute;right:60px;top:75px;width:150px;height:150px;border-radius:50%;background:color-mix(in srgb,var(--accent) 10%,var(--card))}
89
+ .i1 i{position:absolute;inset:22px;border-radius:50%;background:var(--accent)}
90
+ .i1 b{position:absolute;left:44px;right:44px;top:66px;height:18px;border-radius:4px;background:var(--card)}
91
+ .i2 i{position:absolute;left:34px;top:30px;width:70px;height:70px;border-radius:50%;border:12px solid var(--fg)}
92
+ .i2 b{position:absolute;left:92px;top:90px;width:16px;height:40px;border-radius:6px;background:var(--accent);transform:rotate(-40deg)}
93
+ .i3 i{position:absolute;left:46px;top:24px;width:58px;height:102px;border-radius:14px;background:var(--fg)}
94
+ .i3 b{position:absolute;left:62px;top:84px;width:26px;height:26px;border-radius:50%;background:var(--accent)}
95
+ .lk{position:absolute;left:380px;top:120px;width:140px;height:150px}
96
+ .lk i{position:absolute;left:24px;top:0;width:92px;height:110px;border-radius:46px 46px 0 0;border:16px solid var(--fg);border-bottom:0}
97
+ .lk b{position:absolute;left:0;top:62px;width:140px;height:96px;border-radius:14px;background:var(--accent)}
98
+ </style>
99
+ </head>
100
+ <body>
101
+ <div id="root" data-composition-id="bank-suspicious-sms" data-start="0" data-width="1080" data-height="1920" data-duration="15">
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:-420px;top:-200px;width:820px;height:2600px;transform:rotate(24deg)"></i>
105
+ <p class="t c" id="h1" style="top:210px;font-size:96px;font-weight:700">קיבלתם הודעה</p>
106
+ <div class="cw" style="top:330px"><div class="row" style="font-size:96px"><div class="hw"><i class="hb" id="hb-h2"></i><p id="h2" class="em">דחופה?</p></div></div></div>
107
+ <div class="phn" id="phn"><div class="scr">
108
+ <div class="hdr"><i class="av"></i></div>
109
+ <p class="t c" id="p1" style="top:182px;font-size:30px;font-weight:700">מספר לא מוכר</p>
110
+ <div class="ban" id="ban"><i></i><p class="t" id="bn1" style="right:96px;top:14px;font-size:30px;font-weight:700">הודעה חדשה</p><p class="t" id="bn2" style="right:96px;top:56px;font-size:28px;color:var(--mute)">החשבון שלכם נחסם...</p></div>
111
+ <p class="t c" id="p2" style="top:270px;font-size:24px;color:var(--mute)">היום 09:41</p>
112
+ <div class="inp"><i></i></div>
113
+ <div class="bub" id="bub">
114
+ <p id="m1" style="top:30px;font-size:36px;font-weight:700">החשבון שלכם נחסם!</p>
115
+ <p id="m2" style="top:96px;font-size:32px">לשחרור מיידי לחצו כאן:</p>
116
+ <p class="lnk" id="m3" style="top:158px;font-size:32px">שחרור-חשבון.קישור</p>
117
+ <p id="m4" style="top:236px;font-size:28px;color:var(--mute)">תוקף הבקשה: 10 דקות</p>
118
+ </div>
119
+ </div><i class="ntc"></i></div>
120
+ <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>
121
+ </div>
122
+ </section>
123
+ <section id="s2" class="clip scene" data-start="3.6" data-duration="3.8">
124
+ <div class="cam" id="c2">
125
+ <i class="pl" style="left:600px;top:-300px;width:800px;height:2600px;transform:rotate(-22deg)"></i>
126
+ <div class="cw" style="top:250px"><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>
127
+ <div class="card big" id="big"><i class="tape tl"></i><i class="tape tr"></i>
128
+ <p class="t" id="g0" style="top:56px;font-size:32px;color:var(--mute)">מספר לא מוכר · עכשיו</p>
129
+ <div class="row" style="position:absolute;right:70px;top:116px;font-size:62px"><p id="g1">החשבון שלכם</p><div class="hw"><i class="hb" id="hb-g2"></i><p id="g2" class="em">נחסם!</p></div></div>
130
+ <p class="t" id="g3" style="top:220px;font-size:48px">לשחרור מיידי לחצו כאן:</p>
131
+ <p class="t lnk" id="g4" style="top:318px;font-size:54px">שחרור-חשבון.קישור</p>
132
+ <p class="t" id="g5" style="top:446px;font-size:40px;color:var(--mute)">תוקף הבקשה: 10 דקות</p>
133
+ <svg class="ell" viewBox="0 0 640 150"><ellipse id="el" pathLength="1" cx="320" cy="75" rx="312" ry="66"/></svg>
134
+ <i class="emk" id="emk"></i>
135
+ </div>
136
+ <p class="lab" id="lb1" style="right:110px;top:1180px;transform:rotate(-2deg)">לחץ של זמן</p>
137
+ <p class="lab r" id="lb2" style="right:330px;top:1320px;transform:rotate(1.5deg)">קישור לא מוכר</p>
138
+ <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>
139
+ </div>
140
+ </section>
141
+ <section id="s3" class="clip scene" data-start="7.4" data-duration="4">
142
+ <div class="cam" id="c3">
143
+ <i class="pl" style="left:-420px;top:-200px;width:820px;height:2600px;transform:rotate(24deg)"></i>
144
+ <div class="cw" style="top:240px"><div class="row" style="font-size:64px"><p id="w1">עוצרים ·</p><p id="w2">בודקים ·</p><p id="w3" class="em">מתקשרים</p></div></div>
145
+ <div class="card sc" id="sc0" style="top:440px"><i class="sbar" id="sbr0"></i><div class="ico i1"><i></i><b></b></div><p class="t" id="sa0" style="right:250px;top:70px;font-size:66px;font-weight:700">1. עוצרים</p><p class="t" id="sz0" style="right:250px;top:170px;font-size:40px;color:var(--mute)">לא לוחצים ולא עונים</p></div><div class="card sc" id="sc1" style="top:790px"><i class="sbar" id="sbr1"></i><div class="ico i2"><i></i><b></b></div><p class="t" id="sa1" style="right:250px;top:70px;font-size:66px;font-weight:700">2. בודקים</p><p class="t" id="sz1" style="right:250px;top:170px;font-size:40px;color:var(--mute)">מה השולח באמת מבקש?</p></div><div class="card sc" id="sc2" style="top:1140px"><i class="sbar" id="sbr2"></i><div class="ico i3"><i></i><b></b></div><p class="t" id="sa2" style="right:250px;top:70px;font-size:66px;font-weight:700">3. מתקשרים</p><p class="t" id="sz2" style="right:250px;top:170px;font-size:40px;color:var(--mute)">למספר שאתם מכירים</p></div>
146
+ <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>
147
+ </div>
148
+ </section>
149
+ <section id="s4" class="clip scene" data-start="11.4" data-duration="3.6">
150
+ <div class="cam" id="c4">
151
+ <i class="pl" style="left:600px;top:-300px;width:800px;height:2600px;transform:rotate(-22deg)"></i>
152
+ <div class="card" id="cl" style="left:90px;top:440px;width:900px;height:800px"><i class="tape tl"></i><i class="tape tr"></i>
153
+ <div class="lk" id="lk"><i></i><b></b></div>
154
+ <p class="t c" id="e1" style="top:350px;font-size:76px;font-weight:700">הבנק לעולם</p>
155
+ <div class="cw" style="top:450px"><div class="row" style="font-size:76px"><div class="hw"><i class="hb" id="hb-e2"></i><p id="e2" class="em">לא יבקש קוד</p></div></div></div>
156
+ <p class="t c" id="e3" style="top:550px;font-size:76px;font-weight:700">בהודעה</p>
157
+ <p class="t c" id="e4" style="top:690px;font-size:38px;color:var(--mute)">בספק? מתקשרים למספר שאתם מכירים</p>
158
+ </div>
159
+ <div class="cw" style="top:1340px"><div class="cta" id="cta"><i></i><p id="ctat">שומרים על החשבון</p></div></div>
160
+ <div class="capw"><div class="cap" id="cap4"><i class="mk"></i><div class="ct" id="ct4"><p id="cp4a">שתפו את</p><p id="cp4b" class="em">מי שחשוב לכם</p></div><i class="cur" id="cu4"></i></div></div>
161
+ </div>
162
+ </section>
163
+ <div id="ov" class="clip" data-start="0" data-duration="15">
164
+ <div class="brand" id="brw"><i class="bm"></i><p id="brand">המותג שלכם</p></div>
165
+ </div>
166
+ </div>
167
+ <script>
168
+ const tl=gsap.timeline({paused:true});
169
+ const S=[0,3.6,7.4,11.4,15],D=15;
170
+ const P="power3.out",X="expo.out",B="back.out(1.7)";
171
+ tl.fromTo("#brw",{opacity:0,y:-16},{opacity:1,y:0,duration:.5,ease:P},.15);
172
+ 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;
173
+ tl.fromTo("#ct"+n,{maxWidth:0},{maxWidth:W,duration:d,ease:"steps("+Math.max(8,Math.round(W/28))+")"},t0);
174
+ 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);}
175
+ function hl(id,at){tl.fromTo("#hb-"+id,{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.5,ease:"power2.inOut"},at);}
176
+ function draw(sel,at,d,e){tl.fromTo(sel,{strokeDasharray:1,strokeDashoffset:1},{strokeDashoffset:0,duration:d,ease:e||"power2.inOut",autoRound:false},at);}
177
+ function fadeOut(i,d){tl.to("#c"+(i+1),{opacity:0,duration:d||.35,ease:"power1.in"},S[i+1]-(d||.35));}
178
+ function camIn(i){tl.fromTo("#c"+(i+1),{opacity:0},{opacity:1,duration:.3},S[i]);}
179
+
180
+ // s1 phone buzzes
181
+ camIn(0);
182
+ tl.fromTo("#h1",{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P},S[0]+.1);
183
+ tl.fromTo("#h2",{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P},S[0]+.25);
184
+ hl("h2",S[0]+.7);
185
+ tl.fromTo("#phn",{y:260,opacity:0},{y:0,opacity:1,duration:.8,ease:X},S[0]+.1);
186
+ tl.fromTo("#ban",{y:-200},{y:0,duration:.45,ease:B},S[0]+.8);
187
+ tl.fromTo("#phn",{rotation:0},{keyframes:[{rotation:-2.5,duration:.06},{rotation:2.5,duration:.06},{rotation:-2,duration:.06},{rotation:2,duration:.06},{rotation:-1,duration:.06},{rotation:0,duration:.06}]},S[0]+.85);
188
+ tl.to("#ban",{y:-200,duration:.35,ease:"power2.in"},S[0]+1.6);
189
+ tl.fromTo("#bub",{scale:.3,opacity:0,transformOrigin:"100% 0%"},{scale:1,opacity:1,duration:.5,ease:B},S[0]+1.8);
190
+ tl.fromTo("#phn",{rotation:0},{keyframes:[{rotation:-2,duration:.06},{rotation:2,duration:.06},{rotation:-1,duration:.06},{rotation:0,duration:.06}]},S[0]+2.4);
191
+ capIn(1,S[0]+1.2,520,S[1]);
192
+ fadeOut(0);
193
+ // s2 enlarged message, red circle on the fake link
194
+ camIn(1);
195
+ tl.fromTo(["#t2a","#t2b"],{opacity:0,y:30},{opacity:1,y:0,duration:.45,ease:P,stagger:.1},S[1]+.1);
196
+ hl("t2b",S[1]+.5);
197
+ tl.fromTo("#big",{scale:.8,opacity:0,rotation:-3},{scale:1,opacity:1,rotation:-1,duration:.7,ease:X},S[1]+.1);
198
+ tl.fromTo("#big .tape",{scale:0},{scale:1,duration:.3,ease:B,stagger:.1},S[1]+.55);
199
+ hl("g2",S[1]+.9);
200
+ tl.fromTo("#lb1",{scale:.5,opacity:0},{scale:1,opacity:1,duration:.4,ease:B},S[1]+1.1);
201
+ draw("#el",S[1]+1.4,.6,"power2.inOut");
202
+ tl.fromTo("#emk",{scale:0},{scale:1,duration:.3,ease:B},S[1]+1.35);
203
+ tl.fromTo("#lb2",{scale:.5,opacity:0},{scale:1,opacity:1,duration:.4,ease:B},S[1]+1.9);
204
+ capIn(2,S[1]+1.5,560,S[2]);
205
+ fadeOut(1);
206
+ // s3 stop, check, call
207
+ camIn(2);
208
+ tl.fromTo(["#w1","#w2","#w3"],{opacity:.18},{opacity:1,duration:.3,stagger:.5},S[2]+.4);
209
+ tl.fromTo(".sc",{x:-200,opacity:0},{x:0,opacity:1,duration:.5,ease:X,stagger:.5},S[2]+.3);
210
+ for(let k=0;k<3;k++){tl.fromTo("#sbr"+k,{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.4,ease:"power2.out"},S[2]+.6+k*.5);tl.fromTo("#sc"+k+" .ico",{scale:0},{scale:1,duration:.4,ease:B},S[2]+.55+k*.5);}
211
+ capIn(3,S[2]+1.9,460,S[3]);
212
+ fadeOut(2);
213
+ // s4 calm close
214
+ camIn(3);
215
+ tl.fromTo("#cl",{y:120,opacity:0},{y:0,opacity:1,duration:.7,ease:X},S[3]+.05);
216
+ tl.fromTo("#cl .tape",{scale:0},{scale:1,duration:.3,ease:B,stagger:.1},S[3]+.5);
217
+ tl.fromTo("#lk",{y:-60,opacity:0},{y:0,opacity:1,duration:.5,ease:"bounce.out"},S[3]+.4);
218
+ tl.fromTo("#lk i",{y:-24},{y:0,duration:.3,ease:"power2.in"},S[3]+1.1);
219
+ tl.fromTo(["#e1","#e2","#e3"],{opacity:0,y:30},{opacity:1,y:0,duration:.45,ease:P,stagger:.12},S[3]+.6);
220
+ hl("e2",S[3]+1.1);
221
+ tl.fromTo("#e4",{opacity:0},{opacity:1,duration:.4},S[3]+1.4);
222
+ tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+1.6);
223
+ capIn(4,S[3]+1.9,420,S[3]+3.6);
224
+ tl.set({},{},D);
225
+ window.__timelines=window.__timelines||{};window.__timelines["bank-suspicious-sms"]=tl;
226
+ <\/script>
227
+ </body>
228
+ </html>
229
+ `;export{e as default};
package/app/assets/bank-wedding-budget-CDM2kO0R.js ADDED
@@ -0,0 +1,230 @@
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:#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>
230
+ `;export{e as default};