npm - motiondesk-studio - Versions diffs - 1.3.0 → 1.5.0 - Mend

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

package/README.md +9 -4
package/app/assets/bank-banker-chat-B_iF_sFM.js +257 -0
package/app/assets/bank-business-loan-BFWWaq-c.js +247 -0
package/app/assets/bank-car-choice-DLE2OVcc.js +229 -0
package/app/assets/bank-card-freeze-J1JfFmLr.js +281 -0
package/app/assets/bank-code-never-CQDlq8GN.js +234 -0
package/app/assets/bank-dark-interlude-DhcdkPP1.js +190 -0
package/app/assets/bank-digital-JTuIxFOJ.js +1 -0
package/app/assets/bank-dinner-split-Be1e7DOQ.js +246 -0
package/app/assets/bank-fast-pay-DoW0ClI6.js +230 -0
package/app/assets/bank-first-salary-D9WxYgJf.js +212 -0
package/app/assets/bank-fomo-stop-uEzdT0HP.js +230 -0
package/app/assets/bank-forex-trip-BHW39y4z.js +205 -0
package/app/assets/bank-growth-bars-DirAz4xB.js +203 -0
package/app/assets/bank-holiday-budget-J41dLHwR.js +224 -0
package/app/assets/bank-invest-B--KJb5m.js +1 -0
package/app/assets/bank-life-C-4wZKyu.js +1 -0
package/app/assets/bank-mortgage-papers-DMtx0XsI.js +214 -0
package/app/assets/bank-new-app-look-CKmeKBU6.js +228 -0
package/app/assets/bank-one-click-loan-BVhe1AGv.js +223 -0
package/app/assets/bank-paper-explainer-CD8mPtnJ.js +191 -0
package/app/assets/bank-pension-compare-BArvoVu7.js +243 -0
package/app/assets/bank-remote-access-Df8UNpc7.js +257 -0
package/app/assets/bank-safety-CBkr-iwJ.js +1 -0
package/app/assets/bank-savings-pocket-B53nO1Z_.js +220 -0
package/app/assets/bank-share-explained-DCp805RD.js +228 -0
package/app/assets/bank-small-business-Bc7Ad4GW.js +217 -0
package/app/assets/bank-student-routine-CnPPhtoV.js +224 -0
package/app/assets/bank-suspicious-sms-CwOrdi3d.js +229 -0
package/app/assets/bank-wedding-budget-CDM2kO0R.js +230 -0
package/app/assets/bank-young-BwV6418l.js +1 -0
package/app/assets/{catalog-Cdx5nbp0.js → catalog-CDdvrdnk.js} +1 -1
package/app/assets/{index-D3rEDfqX.js → index-BRse9TUl.js} +4 -4
package/app/assets/index-b6-Cm4vot4j.js +1 -0
package/app/assets/index-b7-BLEay8YC.js +1 -0
package/app/assets/index-b8-Jbh-zOZB.js +1 -0
package/app/assets/index-b9-caOB8GyX.js +1 -0
package/app/index.html +1 -1
package/bin/motiondesk-studio.mjs +8 -1
package/lib/catalog/hyperframes/bank-banker-chat.html +256 -0
package/lib/catalog/hyperframes/bank-business-loan.html +246 -0
package/lib/catalog/hyperframes/bank-car-choice.html +228 -0
package/lib/catalog/hyperframes/bank-card-freeze.html +280 -0
package/lib/catalog/hyperframes/bank-code-never.html +233 -0
package/lib/catalog/hyperframes/bank-dark-interlude.html +189 -0
package/lib/catalog/hyperframes/bank-dinner-split.html +245 -0
package/lib/catalog/hyperframes/bank-fast-pay.html +229 -0
package/lib/catalog/hyperframes/bank-first-salary.html +211 -0
package/lib/catalog/hyperframes/bank-fomo-stop.html +229 -0
package/lib/catalog/hyperframes/bank-forex-trip.html +204 -0
package/lib/catalog/hyperframes/bank-growth-bars.html +202 -0
package/lib/catalog/hyperframes/bank-holiday-budget.html +223 -0
package/lib/catalog/hyperframes/bank-mortgage-papers.html +213 -0
package/lib/catalog/hyperframes/bank-new-app-look.html +227 -0
package/lib/catalog/hyperframes/bank-one-click-loan.html +222 -0
package/lib/catalog/hyperframes/bank-paper-explainer.html +190 -0
package/lib/catalog/hyperframes/bank-pension-compare.html +242 -0
package/lib/catalog/hyperframes/bank-remote-access.html +256 -0
package/lib/catalog/hyperframes/bank-savings-pocket.html +219 -0
package/lib/catalog/hyperframes/bank-share-explained.html +227 -0
package/lib/catalog/hyperframes/bank-small-business.html +216 -0
package/lib/catalog/hyperframes/bank-student-routine.html +223 -0
package/lib/catalog/hyperframes/bank-suspicious-sms.html +228 -0
package/lib/catalog/hyperframes/bank-wedding-budget.html +229 -0
package/lib/catalog/hyperframes/index-b6.json +146 -0
package/lib/catalog/hyperframes/index-b7.json +121 -0
package/lib/catalog/hyperframes/index-b8.json +92 -0
package/lib/catalog/hyperframes/index-b9.json +87 -0
package/lib/catalog/studio/bank-digital.json +3586 -0
package/lib/catalog/studio/bank-invest.json +3653 -0
package/lib/catalog/studio/bank-life.json +3605 -0
package/lib/catalog/studio/bank-safety.json +3198 -0
package/lib/catalog/studio/bank-young.json +3426 -0
package/lib/vercel-render.mjs +16 -1
package/package.json +30 -7

package/app/assets/bank-car-choice-DLE2OVcc.js ADDED Viewed

@@ -0,0 +1,229 @@
+var e=`<!doctype html>
+<html lang="he" dir="rtl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1080, height=1920">
+<title>רכב חדש או יד שנייה</title>
+<script src="vendor/gsap.min.js"><\/script>
+<style>
+@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}
+@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}
+@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}
+@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}
+:root{--paper:#F4F4F2;--card:#FFFFFF;--ink:#141A26;--accent:#E3063B;--mute:#B4B8C0;--glow:#FF3B5C}
+*{box-sizing:border-box;margin:0;padding:0}
+html,body{width:1080px;height:1920px;overflow:hidden;background:var(--bg)}
+body{font-family:"Heebo",Arial,sans-serif;-webkit-font-smoothing:antialiased}
+#root{position:relative;width:1080px;height:1920px;overflow:hidden;background:var(--bg);color:var(--fg);direction:rtl;font-family:"Heebo",Arial,sans-serif}
+.scene{position:absolute;inset:0;overflow:hidden}
+.cam,.layer{position:absolute;inset:0}
+.abs{position:absolute}
+.m{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .08em}
+.w{display:inline-block;white-space:nowrap}
+#root{background:radial-gradient(ellipse at 72% 18%,var(--card),var(--paper) 62%)}
+.t{position:absolute;white-space:nowrap;line-height:1.15;color:var(--ink)}
+.b{font-weight:700}
+.bgl{position:absolute;height:2px;width:1400px;background:color-mix(in srgb,var(--ink) 7%,transparent);transform-origin:0 0}
+.ov{position:absolute;inset:0;pointer-events:none}
+.ov>*{pointer-events:auto}
+.brand{position:absolute;top:38px;right:44px;display:flex;align-items:center;gap:12px;height:61.60000000000001px;padding:0 28px;border-radius:30.800000000000004px;background:var(--card);box-shadow:0 6px 20px color-mix(in srgb,var(--ink) 14%,transparent)}
+.brand i{width:16.8px;height:16.8px;border-radius:3px;background:var(--accent);flex:none}
+.brand p{font-size:28px;font-weight:700;color:var(--ink);white-space:nowrap}
+.ltw{position:absolute;left:0;right:0;display:flex;justify-content:center}
+.lt{display:flex;align-items:center;gap:12.8px;height:92px;padding:0 34px;border-radius:14px;background:var(--card);box-shadow:0 12px 32px color-mix(in srgb,var(--ink) 16%,transparent)}
+.lt .mk{width:16.8px;height:16.8px;border-radius:3px;background:var(--accent);flex:none}
+.lt p{font-size:40px;white-space:nowrap;color:var(--ink);line-height:1.2}
+.lt .em{font-weight:700;color:var(--accent)}
+.lt .cu{width:12px;height:42px;background:var(--ink);flex:none}
+.card{position:absolute;background:var(--card);border-radius:10px;box-shadow:0 20px 48px color-mix(in srgb,var(--ink) 16%,transparent)}
+.tape{position:absolute;width:140px;height:36px;background:var(--accent);box-shadow:0 3px 8px color-mix(in srgb,var(--ink) 18%,transparent)}
+.tape::after{content:"";position:absolute;left:44%;top:12px;width:12px;height:12px;background:color-mix(in srgb,var(--card) 85%,var(--accent))}
+.lab{position:absolute;padding:2px .55em 8px;font-weight:700;white-space:nowrap;line-height:1.2;box-shadow:0 8px 22px color-mix(in srgb,var(--ink) 14%,transparent)}
+.lab.r{background:var(--accent);color:var(--card)}
+.lab.w{background:var(--card);color:var(--ink)}
+.lab.k{background:var(--ink);color:var(--card)}
+.hw{position:absolute;white-space:nowrap}
+.hw p{position:relative;line-height:1.15;color:var(--ink)}
+.hl{position:absolute;left:-12px;right:-12px;bottom:10%;height:34%;background:color-mix(in srgb,var(--accent) 26%,transparent);transform-origin:100% 50%}
+.ul{position:absolute;left:-6px;right:-6px;bottom:-6px;height:7px;border-radius:4px;background:var(--accent);transform-origin:100% 50%}
+.cx{position:absolute;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:26px;white-space:nowrap}
+.cx .hw{position:relative}
+.cx>p{color:var(--ink);line-height:1.15}
+.ln{position:absolute;height:14px;border-radius:7px;background:color-mix(in srgb,var(--mute) 50%,var(--card))}
+.win{position:absolute;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 20px 48px color-mix(in srgb,var(--ink) 16%,transparent)}
+.win>.wb{position:absolute;left:0;right:0;top:0;height:44px;background:var(--ink)}
+.win>.wb::before{content:"";position:absolute;left:18px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--mute);box-shadow:20px 0 0 var(--mute),40px 0 0 var(--mute)}
+.pill{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--accent)}
+.pill p{color:var(--card);font-weight:700;white-space:nowrap}
+.chip{position:absolute;display:flex;align-items:center;gap:12px;padding:0 26px;border-radius:999px;background:var(--card);box-shadow:0 10px 26px color-mix(in srgb,var(--ink) 14%,transparent)}
+.chip i{width:14px;height:14px;border-radius:3px;background:var(--accent);flex:none}
+.chip p{font-weight:700;white-space:nowrap;color:var(--ink)}
+.fine{position:absolute;white-space:nowrap;color:color-mix(in srgb,var(--ink) 55%,var(--paper))}
+.dk{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--ink) 80%,var(--glow) 8%),var(--ink) 70%)}
+.glw{position:absolute;background:var(--glow);box-shadow:0 0 60px 6px color-mix(in srgb,var(--glow) 70%,transparent),0 0 180px 40px color-mix(in srgb,var(--glow) 32%,transparent)}
+.fig{position:absolute}
+.fig .h{position:absolute;border-radius:50%}
+.fig .bd{position:absolute;border-radius:48% 48% 14px 14px / 38% 38% 14px 14px}
+.ck{fill:none;stroke:var(--card);stroke-linecap:round;stroke-linejoin:round}
+.gr{color:color-mix(in srgb,var(--ink) 58%,var(--card))}
+.c2{left:0;right:0;text-align:center}
+.fc{position:absolute;top:640px;width:430px;height:560px}
+.cbk,.cfr{position:absolute;inset:0;border-radius:18px;box-shadow:0 22px 50px color-mix(in srgb,var(--ink) 16%,transparent)}
+.cbk{background:var(--accent);display:flex;align-items:center;justify-content:center}
+.cbk p{font-size:240px;font-weight:700;color:var(--card);line-height:1}
+.cfr{background:var(--card)}
+.cs{position:absolute;left:28px;top:60px;width:520px;height:260px;transform:scale(.72);transform-origin:0 0}
+.car{position:absolute;left:0;top:0;width:520px;height:260px}
+.cbd{position:absolute;left:0;top:96px;width:520px;height:104px;border-radius:44px 36px 26px 26px}
+.ccb{position:absolute;left:100px;top:22px;width:300px;height:110px;border-radius:90px 70px 8px 8px / 90px 80px 8px 8px}
+.car.n .cbd,.car.n .ccb{background:var(--accent)}
+.car.u .cbd,.car.u .ccb{background:color-mix(in srgb,var(--ink) 78%,var(--mute))}
+.cw1,.cw2{position:absolute;top:42px;height:62px;background:color-mix(in srgb,var(--card) 88%,var(--mute))}
+.cw1{left:132px;width:122px;border-radius:52px 8px 6px 6px}
+.cw2{left:266px;width:110px;border-radius:8px 40px 6px 6px}
+.hlt{position:absolute;left:6px;top:122px;width:32px;height:20px;border-radius:10px;background:var(--card)}
+.whl{position:absolute;left:70px;top:150px;width:110px;height:110px;border-radius:50%;background:var(--ink)}
+.whl::after{content:"";position:absolute;left:31px;top:31px;width:48px;height:48px;border-radius:50%;background:var(--card)}
+.whl::before{content:"";position:absolute;z-index:1;left:52px;top:34px;width:6px;height:42px;border-radius:3px;background:var(--ink)}
+.or{position:absolute;left:485px;top:865px;width:110px;height:110px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px color-mix(in srgb,var(--ink) 25%,transparent)}
+.or p{font-size:48px;font-weight:700;color:var(--card)}
+.bs{position:absolute;left:120px;right:120px;top:1440px;height:6px;border-radius:3px;background:var(--ink)}
+.sg{position:absolute;width:260px;transform-origin:50% 100%}
+.sg.a{background:var(--accent);border-radius:0 0 4px 4px}
+.sg.k{background:var(--ink)}
+.sg.m{background:var(--mute);border-radius:10px 10px 0 0}
+.tot{top:0;width:400px;text-align:center;font-size:66px;font-weight:700}
+.lgd{position:absolute;left:0;right:0;top:1550px;display:flex;justify-content:center;gap:40px}
+.li{display:flex;align-items:center;gap:12px}
+.li i{width:28px;height:28px;border-radius:6px;flex:none}
+.li p{font-size:36px;white-space:nowrap;color:var(--ink)}
+.cbd2{position:absolute;left:120px;top:580px;width:840px;height:960px;border-radius:22px;background:var(--card);box-shadow:0 24px 54px color-mix(in srgb,var(--ink) 16%,transparent)}
+.clp{position:absolute;left:290px;top:-40px;width:260px;height:80px;border-radius:18px;background:var(--ink)}
+.clp::after{content:"";position:absolute;left:100px;top:16px;width:60px;height:22px;border-radius:11px;background:var(--paper)}
+.cr{position:absolute;left:60px;right:60px;height:170px;border-bottom:3px solid color-mix(in srgb,var(--mute) 40%,var(--card))}
+.bx{position:absolute;right:20px;top:4px;width:72px;height:72px;border-radius:14px;border:6px solid var(--ink)}
+.cr svg{position:absolute;right:16px;top:-6px;width:80px;height:80px;overflow:visible}
+.tick{fill:none;stroke:var(--accent);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
+.rd{position:absolute;left:0;right:0;top:1190px;height:12px;background:var(--ink)}
+.lane{position:absolute;top:1230px;width:120px;height:12px;border-radius:6px;background:var(--mute)}
+</style>
+</head>
+<body>
+<div id="root" data-composition-id="bank-car-choice" data-start="0" data-width="1080" data-height="1920" data-duration="15.2">
+<section id="s1" class="clip scene" data-start="0" data-duration="3.8">
+<div class="cam" id="c1">
+  <i class="bgl" style="left:-200px;top:1560px;transform:rotate(-26deg)"></i>
+  <p class="t b" id="h1" style="right:90px;top:200px;font-size:116px">רכב חדש</p>
+  <p class="lab r" id="h2" data-r="-2" style="right:90px;top:360px;font-size:96px">או יד שנייה?</p>
+  <div class="fc" style="right:70px"><div class="cbk" id="bk1"><p id="bq1">?</p></div>
+  <div class="cfr" id="fr1"><div class="cs"><div class="car n" id="car1"><i class="cbd"></i><i class="ccb"></i><i class="cw1"></i><i class="cw2"></i><i class="hlt"></i><i class="whl"></i><i class="whl" style="left:340px"></i></div></div><p class="t b c2" id="ft1" style="top:330px;font-size:76px">חדש</p><p class="t gr c2" id="fs1" style="top:440px;font-size:38px">אפס קילומטרים</p></div></div>
+  <div class="fc" style="left:70px"><div class="cbk" id="bk2"><p id="bq2">?</p></div>
+  <div class="cfr" id="fr2"><div class="cs"><div class="car u" id="car2"><i class="cbd"></i><i class="ccb"></i><i class="cw1"></i><i class="cw2"></i><i class="hlt"></i><i class="whl"></i><i class="whl" style="left:340px"></i></div></div><p class="t b c2" id="ft2" style="top:330px;font-size:76px">יד שנייה</p><p class="t gr c2" id="fs2" style="top:440px;font-size:38px">כבר עשה דרך</p></div></div>
+  <div class="or" id="or"><p id="ort">או</p></div>
+  <p class="t c2" id="h0" style="top:1300px;font-size:48px">מה באמת מתאים לכיס שלכם?</p>
+  <div class="ltw" style="bottom:120px"><div class="lt" id="lt1"><i class="mk"></i><p id="lt1a">לפני שבוחרים,</p><p class="em" id="lt1b">עושים חשבון</p><i class="cu" id="lt1k"></i></div></div>
+</div>
+</section>
+<section id="s2" class="clip scene" data-start="3.8" data-duration="4.2">
+<div class="cam" id="c2">
+  <i class="bgl" style="left:500px;top:40px;transform:rotate(30deg)"></i>
+  <div class="hw" style="right:90px;top:190px"><i class="hl" id="hl2"></i><p id="h3" style="font-size:108px;font-weight:700">כמה זה עולה</p></div>
+  <p class="t b" id="h4" style="right:90px;top:330px;font-size:108px;color:var(--accent)">כל חודש?</p>
+  <i class="sg a sg1" style="left:620px;top:870px;height:570px"></i><i class="sg k sg1" style="left:620px;top:735px;height:135px"></i><i class="sg m sg1" style="left:620px;top:660px;height:75px"></i>
+  <i class="sg a sg2" style="left:200px;top:1170px;height:270px"></i><i class="sg k sg2" style="left:200px;top:1050px;height:120px"></i><i class="sg m sg2" style="left:200px;top:885px;height:165px"></i>
+  <p class="t tot" id="tv1" style="left:550px;top:568px">2,600 ₪</p>
+  <p class="t tot" id="tv2" style="left:130px;top:793px">1,850 ₪</p>
+  <i class="bs"></i>
+  <p class="t b" id="cl1" style="left:550px;top:1462px;width:400px;text-align:center;font-size:52px">חדש</p>
+  <p class="t b" id="cl2" style="left:130px;top:1462px;width:400px;text-align:center;font-size:52px">יד שנייה</p>
+  <div class="lgd" id="lgd"><div class="li"><i style="background:var(--accent)"></i><p id="lg1">החזר הלוואה</p></div><div class="li"><i style="background:var(--ink)"></i><p id="lg2">ביטוח</p></div><div class="li"><i style="background:var(--mute)"></i><p id="lg3">תחזוקה ודלק</p></div></div>
+  <p class="fine c2" id="f2" style="top:1626px;font-size:30px">נתוני הדגמה בלבד</p>
+  <div class="ltw" style="bottom:120px"><div class="lt" id="lt2"><i class="mk"></i><p id="lt2a">ההחזר הוא רק</p><p class="em" id="lt2b">חלק מהתמונה</p><i class="cu" id="lt2k"></i></div></div>
+</div>
+</section>
+<section id="s3" class="clip scene" data-start="8" data-duration="4">
+<div class="cam" id="c3">
+  <p class="t b" id="h5" style="right:90px;top:190px;font-size:112px">מה בודקים</p>
+  <p class="lab r" id="h6" data-r="-1.5" style="right:90px;top:345px;font-size:92px">לפני שקונים?</p>
+  <div class="cbd2" id="cbd2"><i class="clp"></i><div class="cr" style="top:150px"><i class="bx"></i><svg viewBox="0 0 80 80"><path class="tick" pathLength="1" d="M14 42l18 18 36-46"/></svg><p class="t b" id="ca0" style="right:170px;top:-8px;font-size:54px">תקציב חודשי</p><p class="t gr" id="cb0" style="right:170px;top:70px;font-size:36px">כמה נשאר בסוף החודש</p></div><div class="cr" style="top:350px"><i class="bx"></i><svg viewBox="0 0 80 80"><path class="tick" pathLength="1" d="M14 42l18 18 36-46"/></svg><p class="t b" id="ca1" style="right:170px;top:-8px;font-size:54px">ביטוח ותחזוקה</p><p class="t gr" id="cb1" style="right:170px;top:70px;font-size:36px">לא רק מחיר הקנייה</p></div><div class="cr" style="top:550px"><i class="bx"></i><svg viewBox="0 0 80 80"><path class="tick" pathLength="1" d="M14 42l18 18 36-46"/></svg><p class="t b" id="ca2" style="right:170px;top:-8px;font-size:54px">היסטוריית הרכב</p><p class="t gr" id="cb2" style="right:170px;top:70px;font-size:36px">בעיקר ביד שנייה</p></div><div class="cr" style="top:750px"><i class="bx"></i><svg viewBox="0 0 80 80"><path class="tick" pathLength="1" d="M14 42l18 18 36-46"/></svg><p class="t b" id="ca3" style="right:170px;top:-8px;font-size:54px">תנאי ההלוואה</p><p class="t gr" id="cb3" style="right:170px;top:70px;font-size:36px">ריבית, תקופה והחזר</p></div></div>
+  <div class="ltw" style="bottom:120px"><div class="lt" id="lt3"><i class="mk"></i><p id="lt3a">בודקים</p><p class="em" id="lt3b">לפני</p><p id="lt3c">ולא אחרי</p><i class="cu" id="lt3k"></i></div></div>
+</div>
+</section>
+<section id="s4" class="clip scene" data-start="12" data-duration="3.2">
+<div class="cam" id="c4">
+  <div class="cx" style="top:420px"><p id="e1" style="font-size:112px;font-weight:700">בוחרים רכב</p></div>
+  <div class="cx" style="top:560px"><div class="hw"><i class="ul" id="ul4"></i><p id="e2" style="font-size:112px;font-weight:700;color:var(--accent)">שמתאים לתקציב</p></div></div>
+  <i class="rd"></i><i class="lane" style="left:80px"></i><i class="lane" style="left:360px"></i><i class="lane" style="left:640px"></i><i class="lane" style="left:920px"></i>
+  <div class="abs" id="drv" style="left:280px;top:930px;width:520px;height:260px"><div class="car n" id="car4"><i class="cbd"></i><i class="ccb"></i><i class="cw1"></i><i class="cw2"></i><i class="hlt"></i><i class="whl"></i><i class="whl" style="left:340px"></i></div></div>
+  <div class="pill" id="cta" style="left:170px;top:1370px;width:740px;height:120px"><p id="ctat" style="font-size:52px">בודקים הלוואה לרכב</p></div>
+  <p class="fine c2" id="f4" style="top:1530px;font-size:32px">בכפוף לאישור אשראי · להמחשה בלבד</p>
+</div>
+</section>
+<div id="ov" class="clip ov" data-start="0" data-duration="15.2">
+<div class="brand" id="brand"><i></i><p id="brt">המותג שלכם</p></div>
+</div>
+</div>
+<script>
+const tl=gsap.timeline({paused:true});
+const S=[0,3.8,8,12,15.2],D=15.2;
+const X="expo.out",P="power3.out",B="back.out(1.7)",E="power2.inOut";
+function sIn(i){tl.fromTo("#c"+(i+1),{opacity:0},{opacity:1,duration:.35,ease:"power1.out"},S[i]);}
+function sOut(i){tl.to("#c"+(i+1),{opacity:0,duration:.35,ease:"power1.in"},S[i+1]-.35);}
+function LT(id,t){tl.fromTo("#"+id,{y:50,opacity:0},{y:0,opacity:1,duration:.5,ease:P},t);
+tl.fromTo("#"+id+" p",{clipPath:"inset(-30% 0% -30% 100%)"},{clipPath:"inset(-30% 0% -30% 0%)",duration:.55,ease:"none",stagger:.5},t+.2);
+tl.fromTo("#"+id+"k",{opacity:1},{opacity:0,duration:.05,repeat:5,yoyo:true,repeatDelay:.25,ease:"none"},t+.3);}
+function HL(sel,t){tl.fromTo(sel,{scaleX:0},{scaleX:1,duration:.5,ease:P},t);}
+function UP(sel,t,st){tl.fromTo(sel,{y:40,opacity:0},{y:0,opacity:1,duration:.6,ease:P,stagger:st||0},t);}
+function LAB(sel,t,st){tl.fromTo(sel,{x:60,opacity:0,rotation:-4},{x:0,opacity:1,rotation:(i,e)=>+(e.dataset.r||0),duration:.5,ease:B,stagger:st||.15},t);}
+function DRAW(sel,t,d,st){tl.fromTo(sel,{strokeDasharray:1,strokeDashoffset:1},{strokeDashoffset:0,duration:d||.8,ease:E,stagger:st||0,autoRound:false},t);}
+tl.fromTo("#brand",{opacity:0,y:-20},{opacity:1,y:0,duration:.5,ease:P},.2);
+// s1 two flipping car cards
+sIn(0);
+UP("#h1",S[0]+.1);LAB("#h2",S[0]+.35);
+tl.fromTo("#c1 .fc",{y:120,opacity:0},{y:0,opacity:1,duration:.7,ease:X,stagger:.15},S[0]+.3);
+tl.fromTo("#bk1",{scaleX:1},{scaleX:0,duration:.22,ease:"power2.in"},S[0]+1.1);
+tl.fromTo("#fr1",{scaleX:0},{scaleX:1,duration:.3,ease:"back.out(1.4)"},S[0]+1.32);
+tl.fromTo("#bk2",{scaleX:1},{scaleX:0,duration:.22,ease:"power2.in"},S[0]+1.5);
+tl.fromTo("#fr2",{scaleX:0},{scaleX:1,duration:.3,ease:"back.out(1.4)"},S[0]+1.72);
+tl.fromTo("#or",{scale:0},{scale:1,duration:.45,ease:B},S[0]+2);
+UP("#h0",S[0]+2.2);
+LT("lt1",S[0]+.9);
+sOut(0);
+// s2 stacked monthly-cost columns
+sIn(1);
+UP("#h3",S[1]+.1);HL("#hl2",S[1]+.6);UP("#h4",S[1]+.3);
+tl.fromTo("#c2 .bs",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.5,ease:P},S[1]+.3);
+tl.fromTo("#c2 .sg1",{scaleY:0},{scaleY:1,duration:.35,ease:"power2.out",stagger:.32},S[1]+.6);
+tl.fromTo("#c2 .sg2",{scaleY:0},{scaleY:1,duration:.35,ease:"power2.out",stagger:.32},S[1]+.75);
+tl.fromTo(["#tv1","#tv2"],{y:30,opacity:0},{y:0,opacity:1,duration:.45,ease:B,stagger:.15},S[1]+1.7);
+UP(["#cl1","#cl2"],S[1]+.5,.1);
+tl.fromTo("#lgd .li",{y:20,opacity:0},{y:0,opacity:1,duration:.4,ease:P,stagger:.1},S[1]+1.9);
+UP("#f2",S[1]+2.2);
+LT("lt2",S[1]+1.3);
+sOut(1);
+// s3 clipboard checklist
+sIn(2);
+UP("#h5",S[2]+.1);LAB("#h6",S[2]+.35);
+tl.fromTo("#cbd2",{y:120,opacity:0,rotation:1.5},{y:0,opacity:1,rotation:0,duration:.8,ease:X},S[2]+.1);
+tl.fromTo("#c3 .cr",{x:50,opacity:0},{x:0,opacity:1,duration:.4,ease:P,stagger:.3},S[2]+.5);
+DRAW("#c3 .tick",S[2]+.9,.3,.32);
+LT("lt3",S[2]+1.5);
+sOut(2);
+// s4 car drives in on the road line
+sIn(3);
+tl.fromTo("#c4 .rd",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.5,ease:P},S[3]+.05);
+tl.fromTo("#c4 .lane",{x:0},{x:-280,duration:1.4,ease:"power2.out"},S[3]+.1);
+tl.fromTo("#drv",{x:760},{x:0,duration:1.2,ease:"power3.out"},S[3]+.1);
+tl.fromTo("#car4 .whl",{rotation:0},{rotation:-560,duration:1.2,ease:"power3.out"},S[3]+.1);
+tl.fromTo("#drv",{y:0},{y:-6,duration:.12,yoyo:true,repeat:3,ease:"sine.inOut",immediateRender:false},S[3]+1.3);
+UP("#e1",S[3]+.3);UP("#e2",S[3]+.45);HL("#ul4",S[3]+.95);
+tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+1.2);
+UP("#f4",S[3]+1.5);
+tl.set({},{},D);
+window.__timelines=window.__timelines||{};window.__timelines["bank-car-choice"]=tl;
+<\/script>
+</body>
+</html>
+`;export{e as default};

package/app/assets/bank-card-freeze-J1JfFmLr.js ADDED Viewed

@@ -0,0 +1,281 @@
+var e=`<!doctype html>
+<html lang="he" dir="rtl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1080, height=1920">
+<title>הקפאת כרטיס</title>
+<script src="vendor/gsap.min.js"><\/script>
+<style>
+@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}
+@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}
+@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}
+@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}
+:root{--bg:#F1F2F4;--fg:#141A26;--accent:#E3063B;--card:#FFFFFF;--mute:#8A919E}
+*{box-sizing:border-box;margin:0;padding:0}
+html,body{width:1080px;height:1920px;overflow:hidden;background:var(--bg)}
+body{font-family:"Heebo",Arial,sans-serif;-webkit-font-smoothing:antialiased}
+#root{position:relative;width:1080px;height:1920px;overflow:hidden;background:var(--bg);color:var(--fg);direction:rtl;font-family:"Heebo",Arial,sans-serif}
+.scene{position:absolute;inset:0;overflow:hidden}
+.cam,.layer{position:absolute;inset:0}
+.abs{position:absolute}
+.m{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .08em}
+.w{display:inline-block;white-space:nowrap}
+.t{position:absolute;white-space:nowrap;line-height:1.15;color:var(--fg)}
+.c{left:0;right:0;text-align:center}
+.cw{position:absolute;left:0;right:0;display:flex;justify-content:center}
+.row{display:flex;gap:.26em;align-items:baseline;white-space:nowrap;line-height:1.15;font-weight:700;color:var(--fg)}
+.em{color:var(--accent)}
+.hw{position:relative}
+.hw p{position:relative}
+.hb{position:absolute;left:-.1em;right:-.1em;bottom:.08em;height:.34em;background:color-mix(in srgb,var(--accent) 24%,transparent)}
+.pl{position:absolute;background:color-mix(in srgb,var(--card) 62%,transparent)}
+.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)}
+.brand .bm{width:16px;height:16px;border-radius:3px;background:var(--accent)}
+.brand p{font-size:26px;font-weight:700;color:var(--fg);white-space:nowrap}
+.capw{position:absolute;left:0;right:0;bottom:58px;display:flex;justify-content:center}
+.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)}
+.cap .mk{flex:none;width:16px;height:16px;background:var(--accent)}
+.cap .ct{display:flex;gap:.26em;overflow:hidden;min-width:0;font-size:40px;line-height:1.3;white-space:nowrap;color:var(--fg)}
+.cap .ct .em{font-weight:700}
+.cap .cur{flex:none;width:12px;height:40px;background:var(--fg)}
+.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)}
+.tape{position:absolute;z-index:2;width:120px;height:32px;background:var(--accent);opacity:.94}
+.tape::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;background:var(--card)}
+.tl{top:-6px;left:-34px;transform:rotate(-36deg)}
+.tr{top:-6px;right:-34px;transform:rotate(36deg)}
+.ln{display:block;height:12px;border-radius:6px;background:color-mix(in srgb,var(--mute) 38%,var(--card));margin-top:18px}
+.ln.r{background:color-mix(in srgb,var(--accent) 45%,var(--card))}
+.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)}
+.lab.r{background:var(--accent);color:var(--card)}
+.win{position:absolute;background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 24px 54px color-mix(in srgb,var(--fg) 14%,transparent)}
+.win .wb{height:44px;background:var(--fg);display:flex;align-items:center;gap:10px;padding:0 18px;direction:ltr}
+.win .wb i{width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,var(--card) 50%,var(--fg))}
+.fig{position:absolute;width:200px;height:300px}
+.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))}
+.fig .bd{position:absolute;left:0;top:104px;width:200px;height:196px;border-radius:100px 100px 14px 14px;background:var(--fg)}
+.fig .nk{position:absolute;left:78px;top:104px;width:44px;height:58px;background:var(--card);clip-path:polygon(0 0,100% 0,50% 100%)}
+.fig.a .bd{background:var(--accent)}
+.fig.m .bd{background:var(--mute)}
+.endmk{width:64px;height:64px;border-radius:8px;background:var(--accent)}
+.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)}
+.cta{display:flex;align-items:center;gap:14px;height:84px;padding:0 40px;border-radius:42px;background:var(--fg)}
+.cta i{width:16px;height:16px;background:var(--accent)}
+.cta p{font-size:36px;font-weight:700;color:var(--card);white-space:nowrap}
+.fine{font-size:24px;color:color-mix(in srgb,var(--fg) 58%,var(--bg))}
+.ck{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
+.capw{bottom:150px}
+.cap .ct{font-size:38px}
+.cap .cur{height:38px}
+.wb2{position:absolute;left:220px;top:700px;width:640px;height:380px;border-radius:40px;background:var(--fg)}
+.wf{position:absolute;left:220px;top:780px;width:640px;height:300px;border-radius:24px 24px 40px 40px;background:color-mix(in srgb,var(--fg) 86%,var(--card));box-shadow:0 -6px 18px color-mix(in srgb,var(--fg) 30%,transparent)}
+.wf::after{content:"";position:absolute;inset:22px;border-radius:18px;border:3px dashed color-mix(in srgb,var(--card) 30%,transparent)}
+.pc{position:absolute;top:610px;width:270px;height:170px;border-radius:18px}
+.pc.g{left:262px;background:var(--mute)}
+.pc.g::after{content:"";position:absolute;right:26px;top:26px;width:52px;height:38px;border-radius:8px;background:color-mix(in srgb,var(--card) 55%,var(--mute))}
+.pc.e{left:552px;border:6px dashed var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
+.qb{position:absolute;left:640px;top:470px;width:110px;height:110px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 35%,transparent)}
+.qb p{font-size:70px;font-weight:700;color:var(--card);line-height:1}
+.lab{font-size:50px}
+.phn{position:absolute;left:190px;top:300px;width:700px;height:1260px;border-radius:90px;background:var(--fg);box-shadow:0 30px 70px color-mix(in srgb,var(--fg) 25%,transparent)}
+.scr{position:absolute;inset:20px;border-radius:72px;overflow:hidden;background:var(--card)}
+.ntc{position:absolute;left:280px;top:20px;width:140px;height:38px;border-radius:19px;background:var(--fg)}
+.ctl{position:absolute;border-radius:28px;background:var(--fg);overflow:hidden;box-shadow:0 18px 36px color-mix(in srgb,var(--fg) 25%,transparent)}
+.ctl .chp{position:absolute;right:44px;top:110px;width:84px;height:62px;border-radius:12px;background:color-mix(in srgb,var(--mute) 70%,var(--card))}
+.ctl .sq{position:absolute;left:44px;top:44px;width:34px;height:34px;border-radius:6px;background:var(--accent)}
+.ctl .bnd{position:absolute;left:0;right:0;bottom:0;height:22px;background:var(--accent)}
+.ctl p{position:absolute;right:44px;white-space:nowrap;color:var(--card);line-height:1.15}
+.frz{position:absolute;inset:0;background:repeating-linear-gradient(115deg,color-mix(in srgb,var(--card) 62%,transparent) 0 26px,color-mix(in srgb,var(--card) 48%,transparent) 26px 52px)}
+.lkb{position:absolute;width:140px;height:140px;border-radius:50%;background:var(--accent);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 40%,transparent)}
+.lkb .sh{position:absolute;left:44px;top:24px;width:52px;height:56px;border:12px solid var(--card);border-bottom:0;border-radius:26px 26px 0 0}
+.lkb .bo{position:absolute;left:34px;top:66px;width:72px;height:52px;border-radius:10px;background:var(--card)}
+.tg{position:absolute;left:50px;width:150px;height:80px;border-radius:40px;background:color-mix(in srgb,var(--mute) 38%,var(--card));overflow:hidden}
+.tg .on{position:absolute;inset:0;border-radius:40px;background:var(--accent)}
+.tg .kn{position:absolute;right:8px;top:8px;width:64px;height:64px;border-radius:50%;background:var(--card);box-shadow:0 3px 8px color-mix(in srgb,var(--fg) 25%,transparent)}
+.slot{position:absolute;width:220px;height:54px;overflow:hidden}
+.slot p{position:absolute;right:0;top:0;font-size:38px;font-weight:700;white-space:nowrap;line-height:1.3;color:var(--fg)}
+.slot p.em{top:56px;color:var(--accent)}
+.slot.r p{top:56px;color:var(--fg)}
+.slot.r p.em{top:0;color:var(--accent)}
+.dv{position:absolute;left:50px;right:50px;height:2px;background:color-mix(in srgb,var(--mute) 26%,var(--card))}
+.nav{position:absolute;left:0;right:0;bottom:0;height:130px;border-top:2px solid color-mix(in srgb,var(--mute) 22%,var(--card));display:flex;justify-content:space-around;align-items:center;direction:ltr}
+.nav i{width:46px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--mute) 35%,var(--card))}
+.nav i.a{background:var(--accent)}
+.tap{position:absolute;left:0;top:0;width:96px;height:96px;border-radius:50%;background:color-mix(in srgb,var(--fg) 22%,transparent);border:5px solid color-mix(in srgb,var(--card) 80%,transparent)}
+.rip{position:absolute;width:96px;height:96px;border-radius:50%;border:6px solid var(--accent)}
+.pr{position:absolute;left:390px;top:410px;width:300px;height:300px;border-radius:50%;border:8px solid var(--accent)}
+.lcb{position:absolute;left:390px;top:410px;width:300px;height:300px;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,var(--bg))}
+#bl3{left:470px;top:490px;transform:scale(1)}
+.irow{left:120px;width:840px;height:112px}
+.imk{position:absolute;right:44px;top:40px;width:32px;height:32px;border-radius:6px;background:var(--accent)}
+.stp{position:absolute;top:1230px;width:360px;height:96px;border-radius:48px;display:flex;align-items:center;justify-content:center;gap:16px}
+.stp p{font-size:38px;font-weight:700;white-space:nowrap}
+.stp.d{right:150px;background:color-mix(in srgb,var(--mute) 22%,var(--card))}
+.stp.d p{color:var(--fg)}
+.stp.n{left:150px;background:var(--accent)}
+.stp.n p{color:var(--card)}
+.cn{position:absolute;left:510px;top:1274px;width:60px;height:6px;background:var(--accent)}
+.okc{position:absolute;width:96px;height:96px}
+.okc circle{fill:var(--accent)}
+.okc polyline{fill:none;stroke:var(--card);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
+</style>
+</head>
+<body>
+<div id="root" data-composition-id="bank-card-freeze" data-start="0" data-width="1080" data-height="1920" data-duration="15.2">
+<section id="s1" class="clip scene" data-start="0" data-duration="3.6">
+<div class="cam" id="c1">
+  <i class="pl" style="left:-420px;top:-200px;width:820px;height:2600px;transform:rotate(24deg)"></i>
+  <div class="cw" style="top:180px"><div class="row" style="font-size:120px"><p id="h1a">הכרטיס</p></div></div>
+  <div class="cw" style="top:320px"><div class="row" style="font-size:120px"><div class="hw"><i class="hb" id="hb-h1b"></i><p id="h1b" class="em">נעלם?</p></div></div></div>
+  <i class="wb2" id="wb"></i>
+  <i class="pc g" id="pcg"></i><i class="pc e" id="pce"></i>
+  <i class="wf" id="wf"></i>
+  <div class="qb" id="qb"><p id="qbt">?</p></div>
+  <div class="fig m" id="fg1" style="left:140px;top:1180px"><i class="hd"></i><i class="bd"></i><i class="nk"></i></div>
+  <p class="lab" id="lb0" style="right:150px;top:1170px;transform:rotate(-2deg)">בתיק?</p>
+  <p class="lab" id="lb1" style="right:440px;top:1270px;transform:rotate(1.5deg)">ברכב?</p>
+  <p class="lab r" id="lb2" style="right:200px;top:1380px;transform:rotate(-1.5deg)">במסעדה?</p>
+  <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>
+</div>
+</section>
+<section id="s2" class="clip scene" data-start="3.6" data-duration="4.2">
+<div class="cam" id="c2">
+  <i class="pl" style="left:600px;top:-300px;width:800px;height:2600px;transform:rotate(-22deg)"></i>
+  <div class="cw" style="top:140px"><div class="row" style="font-size:88px"><p id="t2a">מקפיאים</p><div class="hw"><i class="hb" id="hb-t2b"></i><p id="t2b" class="em">בנגיעה</p></div></div></div>
+  <div class="phn" id="phn"><div class="scr">
+    <p class="t" id="a1" style="right:50px;top:90px;font-size:44px;font-weight:700">הכרטיסים שלי</p>
+    <div class="ctl" id="cd2" style="left:50px;top:180px;width:560px;height:350px"><i class="sq"></i><i class="chp"></i><i class="bnd"></i>
+      <p id="k1" style="top:40px;font-size:30px">כרטיס אשראי</p><p id="k2" style="top:240px;font-size:44px;font-weight:700;direction:ltr">•••• 4821</p>
+      <i class="frz" id="fz2"></i></div>
+    <div class="lkb" id="lk2" style="left:260px;top:285px"><i class="sh" id="lk2s"></i><i class="bo"></i></div>
+    <p class="t" id="a2" style="right:50px;top:600px;font-size:42px;font-weight:700">הקפאת כרטיס</p>
+    <div class="tg" id="tg2" style="top:592px"><i class="on" id="on2"></i><i class="kn" id="kn2"></i></div>
+    <p class="t" id="a3" style="right:50px;top:676px;font-size:36px;color:var(--mute)">סטטוס:</p>
+    <div class="slot" style="right:190px;top:672px"><p id="st1">פעיל</p><p class="em" id="st2">מוקפא</p></div>
+    <i class="dv" style="top:760px"></i>
+    <p class="t" id="rw0" style="right:50px;top:790px;font-size:38px">פירוט עסקאות</p><i class="dv" style="top:860px"></i><p class="t" id="rw1" style="right:50px;top:886px;font-size:38px">מסגרת וניצול</p><i class="dv" style="top:956px"></i><p class="t" id="rw2" style="right:50px;top:982px;font-size:38px">הגדרות כרטיס</p><i class="dv" style="top:1052px"></i>
+    <div class="nav"><i class="a"></i><i></i><i></i><i></i></div>
+  </div><i class="ntc"></i></div>
+  <i class="rip" id="rp2" style="left:287px;top:904px"></i>
+  <i class="tap" id="tp2"></i>
+  <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>
+</div>
+</section>
+<section id="s3" class="clip scene" data-start="7.8" data-duration="3.8">
+<div class="cam" id="c3">
+  <i class="pl" style="left:-380px;top:-300px;width:800px;height:2600px;transform:rotate(22deg)"></i>
+  <i class="lcb" id="lcb"></i><i class="pr" id="pr0"></i><i class="pr" id="pr1"></i><i class="pr" id="pr2"></i>
+  <div class="lkb" id="bl3"><i class="sh" id="bl3s"></i><i class="bo"></i></div>
+  <div class="cw" style="top:780px"><div class="row" style="font-size:100px"><p id="t3a">הכרטיס</p><div class="hw"><i class="hb" id="hb-t3b"></i><p id="t3b" class="em">מוקפא</p></div></div></div>
+  <div class="card irow" id="ir0" style="top:1010px"><i class="imk"></i><p class="t" id="it0" style="right:110px;top:30px;font-size:42px;font-weight:700">עסקאות חדשות נחסמות</p></div><div class="card irow" id="ir1" style="top:1148px"><i class="imk"></i><p class="t" id="it1" style="right:110px;top:30px;font-size:42px;font-weight:700">הכרטיס לא מבוטל</p></div><div class="card irow" id="ir2" style="top:1286px"><i class="imk"></i><p class="t" id="it2" style="right:110px;top:30px;font-size:42px;font-weight:700">הכול מתוך האפליקציה</p></div>
+  <p class="t c fine" id="fn3" style="top:1440px;font-size:28px">בכפוף לתנאי הבנק</p>
+  <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>
+</div>
+</section>
+<section id="s4" class="clip scene" data-start="11.6" data-duration="3.6">
+<div class="cam" id="c4">
+  <i class="pl" style="left:620px;top:-300px;width:800px;height:2600px;transform:rotate(-22deg)"></i>
+  <div class="cw" style="top:170px"><div class="row" style="font-size:110px"><p id="e1">נמצא?</p></div></div>
+  <div class="cw" style="top:310px"><div class="row" style="font-size:110px"><div class="hw"><i class="hb" id="hb-e2"></i><p id="e2" class="em">משחררים</p></div></div></div>
+  <div class="ctl" id="cd4" style="left:250px;top:500px;width:580px;height:360px"><i class="sq"></i><i class="chp"></i><i class="bnd"></i>
+    <p id="k3" style="top:40px;font-size:30px">כרטיס אשראי</p><p id="k4" style="top:250px;font-size:44px;font-weight:700;direction:ltr">•••• 4821</p>
+    <i class="frz" id="fz4"></i></div>
+  <div class="lkb" id="lk4" style="left:470px;top:610px"><i class="sh" id="lk4s"></i><i class="bo"></i></div>
+  <svg class="okc" id="ok4" viewBox="0 0 96 96" style="left:770px;top:450px"><circle cx="48" cy="48" r="48"/><polyline id="okt" pathLength="1" points="27,50 42,65 70,34"/></svg>
+  <div class="card" id="rw4" style="left:160px;top:920px;width:760px;height:170px">
+    <p class="t" id="r1" style="right:40px;top:28px;font-size:42px;font-weight:700">הקפאת כרטיס</p>
+    <div class="tg" id="tg4" style="top:45px;left:40px"><i class="on" id="on4"></i><i class="kn" id="kn4" style="transform:translateX(-70px)"></i></div>
+    <p class="t" id="r2" style="right:40px;top:98px;font-size:34px;color:var(--mute)">סטטוס:</p>
+    <div class="slot r" style="right:160px;top:94px"><p id="st3">פעיל</p><p class="em" id="st4">מוקפא</p></div>
+  </div>
+  <div class="stp d" id="sp1"><p id="sp1t">1 · מקפיאים</p></div><i class="cn" id="cn"></i>
+  <div class="stp n" id="sp2"><p id="sp2t">2 · משחררים</p></div>
+  <div class="cw" style="top:1380px"><div class="cta" id="cta"><i></i><p id="ctat">מנהלים את הכרטיס באפליקציה</p></div></div>
+  <p class="t c fine" id="fn4" style="top:1500px;font-size:28px">בכפוף לתנאי הבנק · להמחשה בלבד</p>
+</div>
+</section>
+<div id="ov" class="clip" data-start="0" data-duration="15.2">
+<div class="brand" id="brw"><i class="bm"></i><p id="brand">המותג שלכם</p></div>
+</div>
+</div>
+<script>
+const tl=gsap.timeline({paused:true});
+const S=[0,3.6,7.8,11.6,15.2],D=15.2;
+const P="power3.out",X="expo.out",B="back.out(1.7)";
+tl.fromTo("#brw",{opacity:0,y:-16},{opacity:1,y:0,duration:.5,ease:P},.15);
+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;
+tl.fromTo("#ct"+n,{maxWidth:0},{maxWidth:W,duration:d,ease:"steps("+Math.max(8,Math.round(W/28))+")"},t0);
+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);}
+function hl(id,at){tl.fromTo("#hb-"+id,{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.5,ease:"power2.inOut"},at);}
+function draw(sel,at,d,e){tl.fromTo(sel,{strokeDasharray:1,strokeDashoffset:1},{strokeDashoffset:0,duration:d,ease:e||"power2.inOut",autoRound:false},at);}
+function fadeOut(i,d){tl.to("#c"+(i+1),{opacity:0,duration:d||.35,ease:"power1.in"},S[i+1]-(d||.35));}
+function camIn(i){tl.fromTo("#c"+(i+1),{opacity:0},{opacity:1,duration:.3},S[i]);}
+// s1 wallet with an empty slot
+camIn(0);
+tl.fromTo("#c1",{scale:1.04},{scale:1,duration:3.6,ease:"none"},S[0]);
+tl.fromTo(["#h1a","#h1b"],{opacity:0,y:60},{opacity:1,y:0,duration:.55,ease:P,stagger:.14},S[0]+.15);
+hl("h1b",S[0]+.75);
+tl.fromTo(["#wb","#wf"],{y:140,opacity:0},{y:0,opacity:1,duration:.7,ease:X,stagger:.05},S[0]+.3);
+tl.fromTo("#pcg",{y:140},{y:0,duration:.6,ease:B},S[0]+.7);
+tl.fromTo("#pce",{opacity:0,scale:.9},{opacity:1,scale:1,duration:.4,ease:P},S[0]+1);
+tl.fromTo("#pce",{x:0},{x:-10,duration:.08,yoyo:true,repeat:5,ease:"sine.inOut"},S[0]+1.4);
+tl.fromTo("#qb",{scale:0,rotation:-20},{scale:1,rotation:0,duration:.5,ease:B},S[0]+1.2);
+tl.fromTo("#fg1",{y:80,opacity:0},{y:0,opacity:1,duration:.6,ease:X},S[0]+.6);
+tl.fromTo(["#lb0","#lb1","#lb2"],{scale:.4,opacity:0},{scale:1,opacity:1,duration:.4,ease:B,stagger:.2},S[0]+1.3);
+capIn(1,S[0]+1.2,560,S[1]);
+fadeOut(0);
+// s2 phone toggle
+camIn(1);
+tl.fromTo(["#t2a","#t2b"],{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P,stagger:.12},S[1]+.1);
+hl("t2b",S[1]+.55);
+tl.fromTo("#phn",{y:200,opacity:0},{y:0,opacity:1,duration:.8,ease:X},S[1]+.05);
+tl.fromTo("#cd2",{scale:.9,opacity:0},{scale:1,opacity:1,duration:.5,ease:P},S[1]+.45);
+tl.fromTo("#tp2",{x:820,y:1700,opacity:0},{x:287,y:904,opacity:1,duration:.8,ease:"power2.inOut"},S[1]+.9);
+tl.to("#tp2",{scale:.8,duration:.12,yoyo:true,repeat:1,ease:"power1.inOut"},S[1]+1.72);
+tl.fromTo("#rp2",{scale:.6,opacity:0},{keyframes:[{opacity:1,duration:.02},{scale:1.8,opacity:0,duration:.6,ease:"power2.out"}]},S[1]+1.78);
+tl.fromTo("#kn2",{x:0},{x:-70,duration:.35,ease:"power2.inOut"},S[1]+1.8);
+tl.fromTo("#on2",{opacity:0},{opacity:1,duration:.3},S[1]+1.8);
+tl.to(["#st1","#st2"],{y:-56,duration:.4,ease:"power3.inOut"},S[1]+2.05);
+tl.fromTo("#fz2",{opacity:0},{opacity:1,duration:.5,ease:"power1.out"},S[1]+2.05);
+tl.fromTo("#lk2",{scale:0},{scale:1,duration:.45,ease:B},S[1]+2.2);
+tl.to("#tp2",{opacity:0,y:"+=60",duration:.4},S[1]+2.4);
+capIn(2,S[1]+1.3,380,S[2]);
+fadeOut(1);
+// s3 red lock pulse
+camIn(2);
+tl.fromTo("#lcb",{scale:0},{scale:1,duration:.5,ease:B},S[2]+.1);
+tl.fromTo("#bl3",{scale:0,rotation:-15},{scale:1.5,rotation:0,duration:.55,ease:B},S[2]+.25);
+tl.fromTo(".pr",{scale:.75,opacity:.9},{scale:1.7,opacity:0,duration:1.1,ease:"power1.out",stagger:{each:.4,repeat:1}},S[2]+.6);
+tl.fromTo(["#t3a","#t3b"],{opacity:0,y:40},{opacity:1,y:0,duration:.5,ease:P,stagger:.12},S[2]+.4);
+hl("t3b",S[2]+.85);
+tl.fromTo(".irow",{opacity:0,x:-60},{opacity:1,x:0,duration:.45,ease:P,stagger:.15},S[2]+.8);
+tl.fromTo("#fn3",{opacity:0},{opacity:1,duration:.4},S[2]+1.5);
+capIn(3,S[2]+1.3,440,S[3]);
+fadeOut(2);
+// s4 found it -> release
+camIn(3);
+tl.fromTo(["#e1","#e2"],{opacity:0,y:50},{opacity:1,y:0,duration:.5,ease:P,stagger:.14},S[3]+.1);
+hl("e2",S[3]+.6);
+tl.fromTo("#cd4",{y:80,opacity:0,rotation:-4},{y:0,opacity:1,rotation:0,duration:.6,ease:X},S[3]+.05);
+tl.fromTo("#lk4",{opacity:0},{opacity:1,duration:.3},S[3]+.2);
+tl.fromTo("#rw4",{y:60,opacity:0},{y:0,opacity:1,duration:.5,ease:P},S[3]+.3);
+tl.to("#kn4",{x:0,duration:.35,ease:"power2.inOut"},S[3]+.9);
+tl.to("#on4",{opacity:0,duration:.3},S[3]+.9);
+tl.to(["#st3","#st4"],{y:-56,duration:.4,ease:"power3.inOut"},S[3]+1.1);
+tl.to("#lk4s",{y:-22,duration:.3,ease:"power2.out"},S[3]+.95);
+tl.to("#lk4",{scale:0,opacity:0,duration:.35,ease:"power2.in"},S[3]+1.3);
+tl.to("#fz4",{opacity:0,duration:.5},S[3]+1.1);
+tl.fromTo("#ok4",{scale:0},{scale:1,duration:.45,ease:B},S[3]+1.45);
+draw("#okt",S[3]+1.65,.35,"power2.out");
+tl.fromTo("#sp1",{opacity:0,x:40},{opacity:1,x:0,duration:.4,ease:P},S[3]+1.2);
+tl.fromTo("#cn",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.3,ease:"power2.out"},S[3]+1.45);
+tl.fromTo("#sp2",{opacity:0,x:40},{opacity:1,x:0,duration:.4,ease:P},S[3]+1.6);
+tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+1.9);
+tl.fromTo("#fn4",{opacity:0},{opacity:1,duration:.4},S[3]+2.1);
+tl.set({},{},D);
+window.__timelines=window.__timelines||{};window.__timelines["bank-card-freeze"]=tl;
+<\/script>
+</body>
+</html>
+`;export{e as default};