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/lib/catalog/hyperframes/bank-holiday-budget.html ADDED Viewed

@@ -0,0 +1,223 @@
+<!doctype html>
+<html lang="he" dir="rtl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1920, height=1080">
+<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:1920px;height:1080px;overflow:hidden;background:var(--bg)}
+body{font-family:"Heebo",Arial,sans-serif;-webkit-font-smoothing:antialiased}
+#root{position:relative;width:1920px;height:1080px;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:57.2px;padding:0 26px;border-radius:28.6px;background:var(--card);box-shadow:0 6px 20px color-mix(in srgb,var(--ink) 14%,transparent)}
+.brand i{width:15.6px;height:15.6px;border-radius:3px;background:var(--accent);flex:none}
+.brand p{font-size:26px;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:88px;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}
+.cb{position:absolute;width:52px;height:52px;border-radius:10px;border:4px solid var(--ink)}
+.cb svg{position:absolute;left:-6px;top:-10px;width:62px;height:62px;overflow:visible}
+.ckr{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
+.ring{position:absolute;left:220px;top:180px;width:620px;height:620px;transform:rotate(-90deg)}
+.ring circle{fill:none;stroke-width:74}
+.rc{position:absolute;left:220px;top:180px;width:620px;height:620px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
+.tag{position:absolute;right:140px;height:88px;display:flex;align-items:center;gap:18px;padding:0 28px 0 34px;border-radius:14px;background:var(--card);box-shadow:0 10px 26px color-mix(in srgb,var(--ink) 12%,transparent)}
+.tag p{font-size:40px;font-weight:700;white-space:nowrap;color:var(--ink)}
+.tag .am{font-weight:400;color:color-mix(in srgb,var(--ink) 60%,var(--card))}
+.ic{position:relative;width:52px;height:52px;border-radius:10px;flex:none}
+.ic1{background:var(--accent)}.ic1::before{content:"";position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;border:5px solid var(--card)}
+.ic2{background:var(--ink)}.ic2::before{content:"";position:absolute;left:23px;top:8px;width:6px;height:36px;background:var(--card)}.ic2::after{content:"";position:absolute;left:8px;top:23px;width:36px;height:6px;background:var(--card)}
+.ic3{background:var(--mute)}.ic3::before{content:"";position:absolute;left:10px;top:16px;width:32px;height:24px;border-radius:5px;background:var(--card)}.ic3::after{content:"";position:absolute;left:19px;top:9px;width:14px;height:10px;border:4px solid var(--card);border-bottom:0;border-radius:4px 4px 0 0}
+.bar{position:absolute;bottom:200px;width:56px;border-radius:6px 6px 0 0;transform-origin:50% 100%}
+.bar.pl{background:color-mix(in srgb,var(--mute) 60%,var(--card))}
+.bar.sp{background:var(--accent)}.bar.sp.k{background:var(--ink)}
+.bl{bottom:140px;font-size:34px;font-weight:700;width:140px;text-align:center}
+.base{position:absolute;left:60px;right:60px;bottom:198px;height:4px;background:var(--ink)}
+.ell{position:absolute;overflow:visible}
+.ell ellipse{fill:none;stroke:var(--accent);stroke-width:5}
+.gift{position:absolute;width:150px;height:130px;background:var(--accent);border-radius:8px}
+.gift::before{content:"";position:absolute;left:62px;top:0;width:26px;height:130px;background:var(--card)}
+.gift::after{content:"";position:absolute;left:-12px;top:-34px;width:174px;height:40px;border-radius:6px;background:var(--accent);box-shadow:inset 74px 0 0 color-mix(in srgb,var(--accent) 80%,var(--ink)),inset -74px 0 0 color-mix(in srgb,var(--accent) 80%,var(--ink))}
+.gar{position:absolute;left:0;top:20px;overflow:visible}
+.gar path{fill:none;stroke:var(--ink);stroke-width:3}
+.lg{display:flex;gap:26px;position:absolute;right:60px;top:150px}
+.lg p{font-size:30px;white-space:nowrap;color:var(--ink)}
+.lg i{width:22px;height:22px;border-radius:4px;align-self:center}
+</style>
+</head>
+<body>
+<div id="root" data-composition-id="bank-holiday-budget" data-start="0" data-width="1920" data-height="1080" data-duration="16">
+<section id="s1" class="clip scene" data-start="0" data-duration="4">
+<div class="cam" id="c1">
+  <i class="bgl" style="left:900px;top:60px;transform:rotate(30deg)"></i><i class="bgl" style="left:-100px;top:980px;transform:rotate(-14deg)"></i>
+  <div class="card" id="lc" style="left:140px;top:170px;width:700px;height:680px">
+    <div class="hw" style="right:60px;top:56px"><i class="ul" id="ul1"></i><p id="lh" style="font-size:54px;font-weight:700">רשימת החג</p></div>
+    <i class="cb" style="right:60px;top:172px"><svg viewBox="0 0 60 60"><path class="ckr" id="ck0" pathLength="1" d="M12 31l12 12 24-28"/></svg></i><p class="t" id="it0" style="right:140px;top:166px;font-size:44px">מתנות למשפחה</p><i class="cb" style="right:60px;top:268px"><svg viewBox="0 0 60 60"><path class="ckr" id="ck1" pathLength="1" d="M12 31l12 12 24-28"/></svg></i><p class="t" id="it1" style="right:140px;top:262px;font-size:44px">ארוחת החג</p><i class="cb" style="right:60px;top:364px"><svg viewBox="0 0 60 60"><path class="ckr" id="ck2" pathLength="1" d="M12 31l12 12 24-28"/></svg></i><p class="t" id="it2" style="right:140px;top:358px;font-size:44px">נסיעה לסבא וסבתא</p><i class="cb" style="right:60px;top:460px"></i><p class="t" id="it3" style="right:140px;top:454px;font-size:44px">בגדים חדשים</p><i class="cb" style="right:60px;top:556px"></i><p class="t" id="it4" style="right:140px;top:550px;font-size:44px">אירוח חברים</p>
+  </div>
+  <i class="tape" id="tp1" style="left:100px;top:166px;transform:rotate(-30deg)"></i><i class="tape" id="tp2" style="left:740px;top:166px;transform:rotate(28deg)"></i>
+  <p class="t b" id="h1" style="right:140px;top:200px;font-size:100px">החגים מגיעים</p>
+  <p class="lab r" id="h2" data-r="-1.5" style="right:140px;top:345px;font-size:74px">בואו נתכנן תקציב</p>
+  <p class="t" id="h3" style="right:140px;top:500px;font-size:44px">רשימה אחת, בלי הפתעות בסוף החודש</p>
+  <div class="ltw" style="bottom:56px"><div class="lt" id="lt1"><i class="mk"></i><p id="lt1a">לפני החג,</p><p class="em" id="lt1b">עושים סדר</p><p id="lt1c">בהוצאות</p><i class="cu" id="lt1k"></i></div></div>
+</div>
+</section>
+<section id="s2" class="clip scene" data-start="4" data-duration="4.5">
+<div class="cam" id="c2">
+  <i class="bgl" style="left:860px;top:1000px;transform:rotate(-24deg)"></i>
+  <svg class="ring" viewBox="0 0 620 620"><circle cx="310" cy="310" r="250" pathLength="100" style="stroke:color-mix(in srgb,var(--mute) 16%,var(--card))"/>
+    <circle class="seg" cx="310" cy="310" r="250" pathLength="100" stroke-dasharray="0 100" style="stroke:var(--accent)"/>
+    <circle class="seg" cx="310" cy="310" r="250" pathLength="100" stroke-dasharray="0 100" stroke-dashoffset="-40.5" style="stroke:var(--ink)"/>
+    <circle class="seg" cx="310" cy="310" r="250" pathLength="100" stroke-dasharray="0 100" stroke-dashoffset="-71" style="stroke:var(--mute)"/></svg>
+  <div class="rc" id="rc"><p id="rv" style="font-size:96px;font-weight:700;color:var(--ink)">3,000 ₪</p><p id="rl" style="font-size:40px;color:color-mix(in srgb,var(--ink) 60%,var(--paper))">תקציב החג</p></div>
+  <div class="hw" style="right:140px;top:190px"><i class="hl" id="hl2"></i><p id="h4" style="font-size:100px;font-weight:700">מגדירים תקציב</p></div>
+  <p class="t" id="h5" style="right:140px;top:340px;font-size:46px">ומחלקים אותו לפי נושאים</p>
+  <div class="tag" id="tg0" style="top:470px"><i class="ic ic1"></i><p id="tn0">אוכל ואירוח</p><p class="am" id="ta0">1,200 ₪</p></div><div class="tag" id="tg1" style="top:582px"><i class="ic ic2"></i><p id="tn1">מתנות</p><p class="am" id="ta1">900 ₪</p></div><div class="tag" id="tg2" style="top:694px"><i class="ic ic3"></i><p id="tn2">נסיעות</p><p class="am" id="ta2">540 ₪</p></div>
+  <div class="ltw" style="bottom:56px"><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.5" data-duration="4">
+<div class="cam" id="c3">
+  <div class="win" id="wn" style="left:140px;top:150px;width:780px;height:720px"><i class="wb"></i>
+    <p class="t b" id="wt" style="right:60px;top:76px;font-size:44px">תקציב החג</p>
+    <div class="lg"><i style="background:color-mix(in srgb,var(--mute) 60%,var(--card))"></i><p id="lg1">מתוכנן</p><i style="background:var(--accent)"></i><p id="lg2">בפועל</p></div>
+    <i class="bar pl" style="right:110px;height:300px"></i><i class="bar sp" style="right:170px;height:260px"></i><p class="t bl" id="bl0" style="right:96px">אוכל</p><i class="bar pl" style="right:310px;height:220px"></i><i class="bar sp" style="right:370px;height:250px"></i><p class="t bl" id="bl1" style="right:296px">מתנות</p><i class="bar pl" style="right:510px;height:160px"></i><i class="bar sp" style="right:570px;height:120px"></i><p class="t bl" id="bl2" style="right:496px">נסיעות</p><i class="base"></i>
+    <p class="t b" id="lft" style="right:200px;top:610px;font-size:44px">נשאר בתקציב: 360 ₪</p>
+    <svg class="ell" style="left:130px;top:592px" width="500" height="100" viewBox="0 0 500 100"><ellipse id="el" pathLength="1" cx="250" cy="50" rx="240" ry="44"/></svg>
+  </div>
+  <div class="hw" style="right:140px;top:190px"><i class="hl" id="hl3"></i><p id="h6" style="font-size:100px;font-weight:700">עוקבים בדרך</p></div>
+  <p class="t" id="h7" style="right:140px;top:340px;font-size:46px">רואים בכל רגע כמה נשאר</p>
+  <p class="fine" id="fn3" style="right:140px;top:430px;font-size:30px">נתוני הדגמה בלבד</p>
+  <div class="ltw" style="bottom:56px"><div class="lt" id="lt3"><i class="mk"></i><p id="lt3a">האפליקציה מראה</p><p class="em" id="lt3b">כמה נשאר</p><i class="cu" id="lt3k"></i></div></div>
+</div>
+</section>
+<section id="s4" class="clip scene" data-start="12.5" data-duration="3.5">
+<div class="cam" id="c4">
+  <div class="card" id="fc" style="left:160px;top:170px;width:720px;height:640px;overflow:hidden">
+    <svg class="gar" width="720" height="160" viewBox="0 0 720 160"><path id="gl" pathLength="1" d="M0 40Q360 140 720 40"/><circle cx="90" cy="84" r="17" style="fill:var(--accent)"/><circle cx="180" cy="100" r="17" style="fill:var(--ink)"/><circle cx="270" cy="109" r="17" style="fill:var(--mute)"/><circle cx="360" cy="112" r="17" style="fill:var(--accent)"/><circle cx="450" cy="109" r="17" style="fill:var(--ink)"/><circle cx="540" cy="100" r="17" style="fill:var(--mute)"/><circle cx="630" cy="84" r="17" style="fill:var(--accent)"/></svg>
+    <div class="fig" id="p1" style="left:80px;top:300px;width:260px;height:322px"><i class="h" style="left:75.4px;top:0;width:109.2px;height:109.2px;background:var(--ink)"></i><i class="bd" style="left:0;top:119.2px;width:260px;height:202.8px;background:var(--ink)"></i></div><div class="fig" id="p3" style="left:390px;top:300px;width:260px;height:322px"><i class="h" style="left:75.4px;top:0;width:109.2px;height:109.2px;background:var(--ink)"></i><i class="bd" style="left:0;top:119.2px;width:260px;height:202.8px;background:var(--mute)"></i></div><div class="fig" id="p2" style="left:280px;top:410px;width:180px;height:226px"><i class="h" style="left:52.2px;top:0;width:75.6px;height:75.6px;background:var(--ink)"></i><i class="bd" style="left:0;top:85.6px;width:180px;height:140.4px;background:var(--accent)"></i></div>
+  </div>
+  <i class="tape" id="tp3" style="left:120px;top:168px;transform:rotate(-30deg)"></i><i class="tape" id="tp4" style="left:780px;top:168px;transform:rotate(30deg)"></i>
+  <i class="gift" id="gf" style="left:780px;top:690px"></i>
+  <p class="t b" id="e1" style="right:140px;top:200px;font-size:120px">חג שמח</p>
+  <p class="lab r" id="e2" data-r="-1.5" style="right:140px;top:370px;font-size:76px">ורגוע בכיס</p>
+  <div class="pill" id="cta" style="right:140px;top:560px;width:560px;height:110px"><p id="ctat" style="font-size:48px">מתכננים באפליקציה</p></div>
+  <p class="fine" id="fn4" style="right:140px;top:720px;font-size:30px">להמחשה בלבד. בכפוף לתנאי הבנק</p>
+</div>
+</section>
+<div id="ov" class="clip ov" data-start="0" data-duration="16">
+<div class="brand" id="brand"><i></i><p id="brt">המותג שלכם</p></div>
+</div>
+</div>
+<script>
+const tl=gsap.timeline({paused:true});
+const S=[0,4,8.5,12.5,16],D=16;
+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 list card + checks
+sIn(0);
+tl.fromTo("#lc",{y:80,opacity:0,rotation:-2},{y:0,opacity:1,rotation:0,duration:.8,ease:X},S[0]+.1);
+tl.fromTo(["#tp1","#tp2"],{opacity:0,scale:1.6},{opacity:1,scale:1,duration:.35,ease:P,stagger:.1},S[0]+.6);
+HL("#ul1",S[0]+.7);
+tl.fromTo("#lc .cb,#lc p.t",{opacity:0,x:30},{opacity:1,x:0,duration:.4,ease:P,stagger:.06},S[0]+.6);
+DRAW("#ck0,#ck1,#ck2",S[0]+1.5,.35,.3);
+UP("#h1",S[0]+.2);LAB("#h2",S[0]+.5);UP("#h3",S[0]+.8);
+LT("lt1",S[0]+.9);
+sOut(0);
+// s2 ring + tags
+sIn(1);
+tl.fromTo(".ring",{scale:.8,opacity:0},{scale:1,opacity:1,duration:.7,ease:X},S[1]+.1);
+tl.to(".seg:nth-of-type(2)",{attr:{"stroke-dasharray":"40 60"},duration:.8,ease:E},S[1]+.5);
+tl.to(".seg:nth-of-type(3)",{attr:{"stroke-dasharray":"30 70"},duration:.7,ease:E},S[1]+1.2);
+tl.to(".seg:nth-of-type(4)",{attr:{"stroke-dasharray":"18 82"},duration:.6,ease:E},S[1]+1.8);
+UP(["#rv","#rl"],S[1]+.5,.12);
+UP("#h4",S[1]+.1);HL("#hl2",S[1]+.6);UP("#h5",S[1]+.4);
+tl.fromTo("#c2 .tag",{x:80,opacity:0},{x:0,opacity:1,duration:.5,ease:B,stagger:.6},S[1]+.6);
+LT("lt2",S[1]+1);
+sOut(1);
+// s3 app panel bars + circled remainder
+sIn(2);
+tl.fromTo("#wn",{y:100,opacity:0},{y:0,opacity:1,duration:.8,ease:X},S[2]+.05);
+tl.fromTo("#wn .bar",{scaleY:0},{scaleY:1,duration:.6,ease:P,stagger:.1},S[2]+.5);
+UP("#wn .bl,#lg1,#lg2,#wt",S[2]+.4,.05);
+UP("#lft",S[2]+1.4);
+DRAW("#el",S[2]+1.8,.7);
+UP("#h6",S[2]+.1);HL("#hl3",S[2]+.6);UP(["#h7","#fn3"],S[2]+.4,.2);
+LT("lt3",S[2]+.8);
+sOut(2);
+// s4 calm close
+sIn(3);
+tl.fromTo("#fc",{y:80,opacity:0},{y:0,opacity:1,duration:.8,ease:X},S[3]+.05);
+tl.fromTo(["#tp3","#tp4"],{opacity:0,scale:1.6},{opacity:1,scale:1,duration:.35,ease:P,stagger:.1},S[3]+.5);
+tl.fromTo("#fc .fig",{y:340},{y:0,duration:.7,ease:X,stagger:.12},S[3]+.3);
+DRAW("#gl",S[3]+.4,.6);
+tl.fromTo(".gar circle",{scale:0,transformOrigin:"50% 0%"},{scale:1,duration:.35,ease:B,stagger:.06},S[3]+.6);
+tl.fromTo("#gf",{scale:0,rotation:-20},{scale:1,rotation:-6,duration:.6,ease:B},S[3]+.8);
+UP("#e1",S[3]+.2);LAB("#e2",S[3]+.5);
+tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+1);
+tl.fromTo("#fn4",{opacity:0},{opacity:1,duration:.4},S[3]+1.4);
+tl.set({},{},D);
+window.__timelines=window.__timelines||{};window.__timelines["bank-holiday-budget"]=tl;
+</script>
+</body>
+</html>

package/lib/catalog/hyperframes/bank-mortgage-papers.html ADDED Viewed

@@ -0,0 +1,213 @@
+<!doctype html>
+<html lang="he" dir="rtl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1920, height=1080">
+<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:#F7F3EE;--fg:#1B1B1F;--accent:#C8102E;--card:#FFFFFF;--mute:#958F87}
+*{box-sizing:border-box;margin:0;padding:0}
+html,body{width:1920px;height:1080px;overflow:hidden;background:var(--bg)}
+body{font-family:"Heebo",Arial,sans-serif;-webkit-font-smoothing:antialiased}
+#root{position:relative;width:1920px;height:1080px;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}
+.dc{width:340px;height:470px;border-radius:6px}
+.dl{position:absolute;left:40px;right:40px;top:110px}
+.sg{position:absolute;left:40px;bottom:50px;width:150px;height:40px;border-bottom:4px solid var(--fg);border-radius:0 0 40% 60%}
+.br{bottom:-6px;right:-34px;transform:rotate(-36deg)}
+.rc{top:300px;width:460px;height:470px;overflow:hidden}
+.rb{position:absolute;left:0;right:0;top:0;height:10px;background:color-mix(in srgb,var(--mute) 55%,var(--card))}
+.hi .rb{background:var(--accent)}
+.hi{box-shadow:0 0 0 5px var(--accent),0 30px 60px color-mix(in srgb,var(--accent) 22%,transparent)}
+.rv{font-size:120px;font-weight:700}
+.hi .rv{color:var(--accent)}
+.stk{position:absolute;right:1060px;top:262px;font-size:32px;transform:rotate(-3deg);z-index:3}
+.mw{left:200px;top:150px;width:1000px;height:640px}
+.room{position:absolute;inset:44px 0 0 0;background:color-mix(in srgb,var(--mute) 14%,var(--card));overflow:hidden}
+.wnd{position:absolute;left:380px;top:60px;width:240px;height:170px;border:10px solid var(--card);background:color-mix(in srgb,var(--mute) 26%,var(--card))}
+.tbl{position:absolute;left:120px;right:120px;top:430px;height:70px;border-radius:12px;background:var(--fg)}
+.tbl::after{content:"";position:absolute;left:330px;right:330px;top:70px;height:130px;background:var(--fg)}
+.pap{position:absolute;left:420px;top:398px;width:160px;height:52px;background:var(--card);transform:rotate(-4deg)}
+.pap::before{content:"";position:absolute;left:-14px;top:-8px;width:50px;height:16px;background:var(--accent);transform:rotate(-30deg)}
+.mc{right:120px;top:200px;width:560px;height:520px}
+.mc .t{right:56px}
+.cal{position:absolute;right:56px;top:190px;width:64px;height:64px;border-radius:10px;border:5px solid var(--fg);border-top-width:16px}
+.cal i{position:absolute;left:12px;top:12px;width:20px;height:16px;background:var(--accent)}
+.pin{position:absolute;right:66px;top:292px;width:44px;height:44px;border-radius:50% 50% 50% 0;background:var(--accent);transform:rotate(-45deg)}
+.mb{position:absolute;right:56px;top:390px;height:90px;padding:0 40px;border-radius:45px;background:var(--accent);display:flex;align-items:center}
+.mb p{font-size:38px;font-weight:700;color:var(--card);white-space:nowrap}
+</style>
+</head>
+<body>
+<div id="root" data-composition-id="bank-mortgage-papers" data-start="0" data-width="1920" data-height="1080" data-duration="16">
+<section id="s1" class="clip scene" data-start="0" data-duration="4">
+<div class="cam" id="c1">
+  <i class="pl" style="left:-300px;top:-400px;width:860px;height:1800px;transform:rotate(33deg)"></i>
+  <div class="card dc" id="dc0" style="left:110px;top:270px;transform:rotate(-5deg)"><i class="tape tl"></i><p class="t" id="dn0" style="right:40px;top:44px;font-size:38px;font-weight:700">חוזה רכישה</p><div class="dl"><i class="ln" style="width:92%"></i><i class="ln" style="width:70%"></i><i class="ln" style="width:84%"></i><i class="ln" style="width:60%"></i><i class="ln" style="width:88%"></i><i class="ln" style="width:50%"></i></div><i class="sg"></i></div><div class="card dc" id="dc1" style="left:440px;top:220px;transform:rotate(3deg)"><i class="tape tl"></i><i class="tape br"></i><p class="t" id="dn1" style="right:40px;top:44px;font-size:38px;font-weight:700">אישור עקרוני</p><div class="dl"><i class="ln" style="width:92%"></i><i class="ln" style="width:70%"></i><i class="ln r" style="width:84%"></i><i class="ln" style="width:60%"></i><i class="ln" style="width:88%"></i><i class="ln" style="width:50%"></i></div><i class="sg"></i></div><div class="card dc" id="dc2" style="left:770px;top:290px;transform:rotate(-3deg)"><i class="tape tr"></i><p class="t" id="dn2" style="right:40px;top:44px;font-size:38px;font-weight:700">דוח שמאי</p><div class="dl"><i class="ln" style="width:92%"></i><i class="ln" style="width:70%"></i><i class="ln" style="width:84%"></i><i class="ln" style="width:60%"></i><i class="ln" style="width:88%"></i><i class="ln" style="width:50%"></i></div><i class="sg"></i></div>
+  <p class="t" id="h1" style="right:120px;top:250px;font-size:100px;font-weight:700">משכנתא?</p>
+  <p class="t" id="h2" style="right:120px;top:380px;font-size:84px;font-weight:700">מתחילים</p>
+  <div class="row" style="position:absolute;right:120px;top:490px;font-size:84px"><div class="hw"><i class="hb" id="hb-h3"></i><p id="h3" class="em">מהמסמכים</p></div></div>
+  <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>
+</div>
+</section>
+<section id="s2" class="clip scene" data-start="4" data-duration="4">
+<div class="cam" id="c2">
+  <i class="pl" style="left:1300px;top:-400px;width:800px;height:1800px;transform:rotate(-30deg)"></i>
+  <div class="cw" style="top:140px"><div class="row" style="font-size:78px"><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="card rc" id="rc0" style="right:190px"><i class="rb"></i><p class="t c" id="rn0" style="top:54px;font-size:44px;font-weight:700">פריים</p><p class="t c" id="rl0" style="top:118px;font-size:28px;color:var(--mute)">ריבית לדוגמה</p><p class="t c rv" id="rv0" style="top:160px">4.1%</p><p class="t c" id="rm0" style="top:330px;font-size:30px;color:var(--mute)">החזר חודשי</p><p class="t c" id="rp0" style="top:374px;font-size:44px;font-weight:700">5,950 ₪</p></div><div class="card rc hi" id="rc1" style="right:730px"><i class="rb"></i><p class="t c" id="rn1" style="top:54px;font-size:44px;font-weight:700">קבועה לא צמודה</p><p class="t c" id="rl1" style="top:118px;font-size:28px;color:var(--mute)">ריבית לדוגמה</p><p class="t c rv" id="rv1" style="top:160px">4.6%</p><p class="t c" id="rm1" style="top:330px;font-size:30px;color:var(--mute)">החזר חודשי</p><p class="t c" id="rp1" style="top:374px;font-size:44px;font-weight:700">6,240 ₪</p></div><div class="card rc" id="rc2" style="right:1270px"><i class="rb"></i><p class="t c" id="rn2" style="top:54px;font-size:44px;font-weight:700">משתנה כל 5 שנים</p><p class="t c" id="rl2" style="top:118px;font-size:28px;color:var(--mute)">ריבית לדוגמה</p><p class="t c rv" id="rv2" style="top:160px">3.9%</p><p class="t c" id="rm2" style="top:330px;font-size:30px;color:var(--mute)">החזר חודשי</p><p class="t c" id="rp2" style="top:374px;font-size:44px;font-weight:700">5,830 ₪</p></div>
+  <p class="lab r stk" id="stk">שווה בדיקה</p>
+  <p class="t c fine" id="f2" style="top:806px">ריביות והחזרים להמחשה בלבד</p>
+  <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="8" data-duration="4">
+<div class="cam" id="c3">
+  <i class="pl" style="left:-300px;top:-400px;width:860px;height:1800px;transform:rotate(33deg)"></i>
+  <div class="win mw" id="mw"><div class="wb"><i></i><i></i><i></i></div>
+    <div class="room"><i class="wnd"></i>
+      <div class="fig " id="fb" style="left:190px;top:170px;transform:scale(1.1);transform-origin:50% 100%"><i class="hd"></i><i class="bd"></i><i class="nk"></i></div>
+      <div class="fig a" id="fc" style="left:610px;top:180px;transform:scale(1.05);transform-origin:50% 100%"><i class="hd"></i><i class="bd"></i><i class="nk"></i></div>
+      <i class="tbl"></i><i class="pap" id="pap"></i>
+    </div>
+  </div>
+  <div class="card mc" id="mc">
+    <p class="t" id="m1" style="top:56px;font-size:46px;font-weight:700">פגישה עם</p>
+    <div class="row" style="position:absolute;right:56px;top:112px;font-size:46px"><div class="hw"><i class="hb" id="hb-m2"></i><p id="m2" class="em">הבנקאי שלכם</p></div></div>
+    <i class="cal"><i></i></i>
+    <p class="t" id="m3" style="right:150px;top:196px;font-size:38px">יום שלישי · 10:00</p>
+    <i class="pin"></i>
+    <p class="t" id="m4" style="right:150px;top:290px;font-size:38px">בסניף או בשיחת וידאו</p>
+    <div class="mb" id="mb"><p id="mbt">אישור פגישה</p></div>
+  </div>
+  <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><p id="cp3c">ומקבלים ליווי</p></div><i class="cur" id="cu3"></i></div></div>
+</div>
+</section>
+<section id="s4" class="clip scene" data-start="12" data-duration="4">
+<div class="cam" id="c4">
+  <i class="pl" style="left:1300px;top:-400px;width:800px;height:1800px;transform:rotate(-30deg)"></i>
+  <div class="cw" style="top:250px"><i class="endmk" id="emk"></i></div>
+  <div class="cw" style="top:360px"><p class="ebox" id="eb" style="font-size:84px">הבית מתחיל כאן</p></div>
+  <div class="cw" style="top:540px"><div class="row" style="font-size:58px"><p id="e4a" style="font-weight:400">בודקים</p><p id="e4b" class="em">זכאות</p><p id="e4c" style="font-weight:400">למשכנתא</p></div></div>
+  <div class="cw" style="top:680px"><div class="cta" id="cta"><i></i><p id="ctat">לפרטים ולתנאים</p></div></div>
+  <p class="t c fine" id="fn" style="top:820px">בכפוף לאישור אשראי ולתנאי הבנק</p>
+</div>
+</section>
+<div id="ov" class="clip" data-start="0" data-duration="16">
+<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,4,8,12,16],D=16;
+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]);}
+const DR=[-5,3,-3];
+// s1 taped documents
+camIn(0);
+tl.fromTo("#c1",{scale:1},{scale:1.03,duration:4,ease:"none"},S[0]);
+tl.fromTo(".dc",{y:-700,rotation:i=>DR[i]*4},{y:0,rotation:i=>DR[i],duration:.6,ease:"power3.out",stagger:.22},S[0]+.1);
+tl.fromTo(".dc .tape",{scale:0},{scale:1,duration:.3,ease:B,stagger:.12},S[0]+.8);
+tl.fromTo(".dc .ln",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.35,ease:P,stagger:.03},S[0]+.9);
+tl.fromTo(".dc .sg",{scaleX:0,transformOrigin:"0% 50%"},{scaleX:1,duration:.4,ease:"power2.inOut",stagger:.15},S[0]+1.5);
+tl.fromTo(["#h1","#h2","#h3"],{opacity:0,x:-60},{opacity:1,x:0,duration:.5,ease:P,stagger:.14},S[0]+.3);
+hl("h3",S[0]+.9);
+capIn(1,S[0]+1.5,560,S[1]);
+fadeOut(0);
+// s2 rate cards
+camIn(1);
+tl.fromTo(["#t2a","#t2b"],{opacity:0,y:30},{opacity:1,y:0,duration:.45,ease:P,stagger:.1},S[1]+.1);
+hl("t2b",S[1]+.5);
+tl.fromTo(".rc",{y:120,opacity:0},{y:0,opacity:1,duration:.6,ease:X,stagger:.15},S[1]+.2);
+tl.fromTo("#rc1",{scale:1},{scale:1.06,duration:.5,ease:B},S[1]+1.3);
+tl.fromTo("#stk",{scale:0,opacity:0},{scale:1,opacity:1,duration:.4,ease:B},S[1]+1.5);
+tl.fromTo("#f2",{opacity:0},{opacity:1,duration:.4},S[1]+1.2);
+capIn(2,S[1]+1.4,620,S[2]);
+fadeOut(1);
+// s3 meeting with the banker
+camIn(2);
+tl.fromTo("#mw",{x:-120,opacity:0},{x:0,opacity:1,duration:.7,ease:X},S[2]+.05);
+tl.fromTo(["#fb","#fc"],{y:80,opacity:0},{y:0,opacity:1,duration:.6,ease:X,stagger:.15},S[2]+.4);
+tl.fromTo("#pap",{y:-60,opacity:0},{y:0,opacity:1,duration:.4,ease:"bounce.out"},S[2]+.9);
+tl.fromTo("#fb .hd",{rotation:0},{keyframes:[{y:-8,duration:.25},{y:0,duration:.25},{y:-8,duration:.25},{y:0,duration:.25}]},S[2]+1.4);
+tl.fromTo("#mc",{x:120,opacity:0},{x:0,opacity:1,duration:.7,ease:X},S[2]+.2);
+tl.fromTo(["#m1","#m2","#m3","#m4"],{opacity:0,y:20},{opacity:1,y:0,duration:.4,ease:P,stagger:.12},S[2]+.6);
+hl("m2",S[2]+1);
+tl.fromTo(["#mc .cal","#mc .pin"],{scale:0},{scale:1,duration:.35,ease:B,stagger:.15},S[2]+.9);
+tl.fromTo("#mb",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.45,ease:B},S[2]+1.3);
+tl.to("#mb",{scale:.94,duration:.1,yoyo:true,repeat:1},S[2]+2.2);
+capIn(3,S[2]+1.6,580,S[3]);
+fadeOut(2);
+// s4 close
+camIn(3);
+tl.fromTo("#emk",{scale:0},{scale:1,duration:.5,ease:B},S[3]+.15);
+tl.fromTo("#eb",{clipPath:"inset(0% 0% 0% 100%)"},{clipPath:"inset(0% 0% 0% 0%)",duration:.7,ease:"power2.inOut"},S[3]+.4);
+tl.fromTo(["#e4a","#e4b","#e4c"],{opacity:0,y:30},{opacity:1,y:0,duration:.5,ease:P,stagger:.15},S[3]+.9);
+tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+1.5);
+tl.fromTo("#fn",{opacity:0},{opacity:1,duration:.4},S[3]+1.8);
+tl.fromTo("#emk",{y:0},{y:-10,duration:.9,ease:"sine.inOut",yoyo:true,repeat:1},S[3]+1.9);
+tl.set({},{},D);
+window.__timelines=window.__timelines||{};window.__timelines["bank-mortgage-papers"]=tl;
+</script>
+</body>
+</html>