motiondesk-studio 1.3.0 → 1.5.0

package/app/assets/index-b6-Cm4vot4j.js

@@ -0,0 +1 @@
+var e=[{id:`bank-paper-explainer`,file:`bank-paper-explainer.html`,title:`הסבר על ניירת`,description:`סרטון הסבר בסגנון ערוץ בנק: כרטיס שאלה מודבק בסלוטייפ אדום, ערימת מסמכים שגדלה לצד תוויות, כרטיס צ׳קליסט עם סימוני וי אדומים וסגירה רגועה, עם כיתוב תחתון בגלולה לבנה.`,category:`bank-life`,width:1920,height:1080,duration:15.4,tags:[`בנק`,`ניירת`,`מסמכים`,`צ׳קליסט`,`הסבר`,`יוטיוב`]},{id:`bank-one-click-loan`,file:`bank-one-click-loan.html`,title:`הלוואה בקליק`,description:`סרטון הסבר דיגיטלי בסגנון ערוץ בנק: פתיח עם תוויות, חלון אפליקציה שבו סמן לוחץ על כפתור אדום, שלושה שלבים שנדלקים בזה אחר זה וכרטיס אישור עם וי אדום.`,category:`bank-digital`,width:1920,height:1080,duration:15,tags:[`בנק`,`הלוואה`,`אפליקציה`,`דיגיטל`,`קליק`,`הסבר`]},{id:`bank-suspicious-sms`,file:`bank-suspicious-sms.html`,title:`הודעה חשודה`,description:`שורט אבטחה בסגנון ערוץ בנק: טלפון רוטט עם הודעה דחופה, כרטיס מוגדל עם עיגול אדום סביב הקישור המזויף, שלבי עוצרים · בודקים · מתקשרים וסגירה רגועה.`,category:`bank-safety`,width:1080,height:1920,duration:15,tags:[`בנק`,`אבטחה`,`הונאה`,`הודעה`,`סמס`,`שורט`]},{id:`bank-growth-bars`,file:`bank-growth-bars.html`,title:`גרף צמיחה`,description:`סרטון השקעות בסגנון ערוץ בנק: תוויות מודבקות לצד קבוצת דמויות גאומטריות, עמודות אדום-שחור עולות עם חץ מגמה, מספר מתגלגל להמחשה והשוואת טווח קצר מול ארוך, עם כיתוב תחתון בגלולה לבנה.`,category:`bank-invest`,width:1920,height:1080,duration:15.2,tags:[`בנק`,`השקעות`,`חיסכון`,`גרף`,`צמיחה`,`הסבר`]},{id:`bank-first-salary`,file:`bank-first-salary.html`,title:`המשכורת הראשונה`,description:`שורט לצעירים בסגנון ערוץ בנק: התראת הפקדה מעל דמות גאומטרית שמחה, תלוש שכר מודבק עם נטו מודגש, חלוקת הנטו לשלושה כיסים (הוצאות, חיסכון, בילויים) עם מטבעות נופלים וסגירה רגועה.`,category:`bank-young`,width:1080,height:1920,duration:15,tags:[`בנק`,`צעירים`,`משכורת`,`חיסכון`,`תקציב`,`שורט`]},{id:`bank-mortgage-papers`,file:`bank-mortgage-papers.html`,title:`משכנתא ומסמכים`,description:`סרטון הסבר על משכנתא בסגנון ערוץ בנק: קולאז׳ מסמכים מודבקים בסלוטייפ אדום, שלושה כרטיסי מסלול עם ריביות להמחשה, כרטיס פגישה עם הבנקאי בדמויות גאומטריות וסגירה רגועה.`,category:`bank-life`,width:1920,height:1080,duration:16,tags:[`בנק`,`משכנתא`,`דירה`,`מסמכים`,`ריבית`,`הסבר`]},{id:`bank-dark-interlude`,file:`bank-dark-interlude.html`,title:`רגע לפני שמחליטים`,description:`סרטון השקעות בסגנון ערוץ בנק עם אינטרלוד כהה: פתיח בהיר עם קו שוק קופצני, מעבר לסצנה כהה עם צורה אדומה זוהרת ומשפט קינטי בעברית, ואז חיתוך חזרה לסיכום בהיר עם צ׳קליסט.`,category:`bank-invest`,width:1920,height:1080,duration:15,tags:[`בנק`,`השקעות`,`שוק ההון`,`אינטרלוד`,`קינטי`,`הסבר`]},{id:`bank-small-business`,file:`bank-small-business.html`,title:`העסק הקטן`,description:`פוסט ריבועי לעסקים קטנים בסגנון ערוץ בנק: חזית חנות מצורות שטוחות עם סוכך מפוספס, מיני־גרף תזרים של נכנס מול יוצא, התראות "התקבל תשלום" שנערמות עם סכום יומי, וסגירה רגועה.`,category:`bank-young`,width:1080,height:1080,duration:15,tags:[`בנק`,`עסק קטן`,`תזרים`,`תשלומים`,`עצמאים`,`פוסט`]}];export{e as default};

package/app/assets/index-b7-BLEay8YC.js

@@ -0,0 +1 @@
+var e=[{id:`bank-fast-pay`,file:`bank-fast-pay.html`,title:`העברה מהירה לחברים`,description:`סרטון אנכי בסגנון הסברי בנק: שתי דמויות שטוחות ומטבע שעובר ביניהן, בחירת איש קשר בטלפון, הקלדת סכום במקלדת, כרטיס ״נשלח״ עם וי אדום ושורת כיתוב תחתונה.`,category:`bank-digital`,width:1080,height:1920,duration:15.6,tags:[`בנק`,`אפליקציה`,`העברת כסף`,`תשלום`,`שורטס`]},{id:`bank-holiday-budget`,file:`bank-holiday-budget.html`,title:`תקציב לחגים`,description:`סרטון הסבר בסגנון בנק ביוטיוב: רשימת חג על כרטיס נייר עם סרט הדבקה, טבעת תקציב שמתמלאת לפי מתנות, אוכל ונסיעות, מעקב באפליקציה וסיום רגוע עם משפחה בדמויות שטוחות.`,category:`bank-life`,width:1920,height:1080,duration:16,tags:[`בנק`,`חגים`,`תקציב`,`חיסכון`,`משפחה`]},{id:`bank-code-never`,file:`bank-code-never.html`,title:`קוד אישי לא משתפים`,description:`סרטון בטיחות בסגנון בנק ביוטיוב: צ׳אט חשוד שמבקש קוד בן 6 ספרות, כרטיס קוד שמקבל חותמת אדומה ״לא משתפים״, כלל שלושת הצעדים וסיום כהה עם אריח מנעול אדום זוהר.`,category:`bank-safety`,width:1920,height:1080,duration:16,tags:[`בנק`,`הונאה`,`אבטחה`,`קוד אימות`,`בטיחות`]},{id:`bank-share-explained`,file:`bank-share-explained.html`,title:`מה זו מניה`,description:`סרטון הסבר השקעות בסגנון בנק ביוטיוב: כרטיס חברה עם בניינים שטוחים נחתך ומתפרק לאריחי מניות ואריח אדום אחד ״שלכם״, גרף מחיר להמחשה בחלון דפדפן וסיום עם הבהרה משפטית.`,category:`bank-invest`,width:1920,height:1080,duration:16.5,tags:[`בנק`,`מניה`,`השקעות`,`שוק ההון`,`הסבר`]},{id:`bank-new-app-look`,file:`bank-new-app-look.html`,title:`האפליקציה בעיצוב חדש`,description:`סרטון אנכי להשקת עיצוב חדש לאפליקציה: פתיח כהה עם אריח אדום זוהר, מעבר לפני ואחרי בטלפון, הדגשות אדומות וצ׳יפים של יכולות, וכרטיס ״גרסה חדשה״ עם סרט הדבקה.`,category:`bank-digital`,width:1080,height:1920,duration:15.8,tags:[`בנק`,`אפליקציה`,`עיצוב חדש`,`עדכון`,`שורטס`]},{id:`bank-forex-trip`,file:`bank-forex-trip.html`,title:`מט״ח לפני הטיסה`,description:`פוסט ריבועי בסגנון הסברי בנק: מזוודה שטוחה וכרטיסי מטבע (שקל, דולר, אירו), המרה דו־כיוונית, טיקר שערים על רקע כהה עם מטבע אדום זוהר וצ׳קליסט לפני הטיסה על כרטיס עם סרט הדבקה.`,category:`bank-life`,width:1080,height:1080,duration:16,tags:[`בנק`,`מט״ח`,`חופשה`,`טיסה`,`מטבע`]},{id:`bank-student-routine`,file:`bank-student-routine.html`,title:`שבוע של סטודנטים`,description:`סרטון לצעירים בסגנון בנק ביוטיוב: לוח שבועי על כרטיס נייר, כרטיסי הוצאות לקפה, ספרים ושכירות, כיס חיסכון באפליקציה עם פס שמתמלא וגרף שבועי, וסיום עם דמות סטודנט שטוחה.`,category:`bank-young`,width:1920,height:1080,duration:16.5,tags:[`בנק`,`סטודנטים`,`צעירים`,`תקציב`,`חיסכון`]}];export{e as default};

package/app/assets/index-b8-Jbh-zOZB.js

@@ -0,0 +1 @@
+var e=[{id:`bank-pension-compare`,file:`bank-pension-compare.html`,title:`משווים דמי ניהול`,description:`סרטון הסבר בסגנון ערוץ בנק: שני כרטיסי דמי ניהול זה לצד זה, גרף להמחשה שבו סמן אדום רוכב על הפער שגדל עם השנים, דוח שנתי עם רשימת בדיקה וסגירה רגועה עם לוח שנה והבהרה.`,category:`bank-invest`,width:1920,height:1080,duration:15.4,tags:[`בנק`,`פנסיה`,`דמי ניהול`,`השוואה`,`חיסכון`,`הסבר`]},{id:`bank-card-freeze`,file:`bank-card-freeze.html`,title:`הקפאת כרטיס`,description:`שורט דיגיטלי בסגנון ערוץ בנק: ארנק עם חריץ כרטיס ריק, טלפון שבו נגיעה מעבירה את מתג ההקפאה למצב מוקפא, מנעול אדום פועם עם מה זה אומר, וסגירה של נמצא? משחררים בשני צעדים.`,category:`bank-digital`,width:1080,height:1920,duration:15.2,tags:[`בנק`,`כרטיס אשראי`,`הקפאה`,`אפליקציה`,`אבטחה`,`שורט`]},{id:`bank-dinner-split`,file:`bank-dinner-split.html`,title:`מפצלים את החשבון`,description:`פוסט ריבועי דיגיטלי בסגנון ערוץ בנק: שולחן במבט מלמעלה עם צלחות וסועדים מצורות שטוחות, חשבון שנחתך לארבעה חלקים שווים, התראות תשלום שנערמות עם פס התקדמות וסגירה רגועה.`,category:`bank-digital`,width:1080,height:1080,duration:15,tags:[`בנק`,`תשלומים`,`חשבון`,`מסעדה`,`חברים`,`אפליקציה`]},{id:`bank-wedding-budget`,file:`bank-wedding-budget.html`,title:`תקציב לחתונה`,description:`סרטון הסבר בסגנון ערוץ בנק: שלושה כרטיסים מודבקים לאולם, קייטרינג וצילום, פס תקציב ארוך שמתמלא מימין במקטעים אדומים עם רזרבה, רשימת עדיפויות שבה סמן גורר פריט לראש הרשימה, וסגירה רגועה עם קשת וזוג בדמויות שטוחות.`,category:`bank-life`,width:1920,height:1080,duration:16,tags:[`בנק`,`חתונה`,`תקציב`,`זוגיות`,`תכנון`,`הסבר`]},{id:`bank-fomo-stop`,file:`bank-fomo-stop.html`,title:`רגע לפני שקונים`,description:`שורט השקעות בסגנון ערוץ בנק: צ׳אט קבוצתי שמלהיב מניה עם גרף טס ובועות דחופות, הפסקה כהה עם סימן עצירה אדום זוהר, כרטיס מודבק עם שלוש שאלות לפני קנייה, וסגירה רגועה עם הבהרה.`,category:`bank-invest`,width:1080,height:1920,duration:15.6,tags:[`בנק`,`השקעות`,`מניות`,`פומו`,`החלטות`,`שורט`]}];export{e as default};

package/app/assets/index-b9-caOB8GyX.js

@@ -0,0 +1 @@
+var e=[{id:`bank-remote-access`,file:`bank-remote-access.html`,title:`גישה מרחוק? מנתקים`,description:`סרטון בטיחות בסגנון בנק ביוטיוב: ״נציג תמיכה״ בצ׳אט מבקש להתקין אפליקציית שליטה מרחוק, המסך מקבל מסגרת אזהרה אדומה וסמן זר, פתק עם שלושה כללים וסיום עם תקע שמנותק מהשקע.`,category:`bank-safety`,width:1920,height:1080,duration:16.4,tags:[`בנק`,`הונאה`,`גישה מרחוק`,`אבטחה`,`בטיחות`]},{id:`bank-business-loan`,file:`bank-business-loan.html`,title:`הלוואה לעסק קטן`,description:`סרטון בסגנון בנק ביוטיוב לעסקים צעירים: בעלת עסק שטוחה מאחורי הדלפק, רשימת צרכים על דף מודבק, סרגל סכום הלוואה להמחשה, ציר אישור עם דמות קטנה וסיום ״בודקים זכאות״ בכפוף לאישור אשראי.`,category:`bank-young`,width:1920,height:1080,duration:16.6,tags:[`בנק`,`עסק קטן`,`הלוואה`,`עצמאים`,`אשראי`]},{id:`bank-car-choice`,file:`bank-car-choice.html`,title:`רכב חדש או יד שנייה`,description:`סרטון אנכי בסגנון בנק ביוטיוב: שני כרטיסי רכב שטוחים (חדש ויד שנייה) שמתהפכים, עמודות עלות חודשית להמחשה, רשימת בדיקה על לוח כתיבה וסיום עם רכב שנכנס לכביש וקריאה לבדוק הלוואה לרכב.`,category:`bank-life`,width:1080,height:1920,duration:15.2,tags:[`בנק`,`רכב`,`הלוואה לרכב`,`תקציב`,`שורטס`]},{id:`bank-savings-pocket`,file:`bank-savings-pocket.html`,title:`כיס חיסכון מתמלא`,description:`פוסט ריבועי בסגנון בנק ביוטיוב: צנצנת ״הכיס שלי״ שמתמלאת במטבעות לאורך שלושה חודשים עם סכום מצטבר, תווית ריבית לדוגמה להמחשה וסיום כהה עם צנצנת זוהרת וקריאה לפתוח כיס באפליקציה.`,category:`bank-invest`,width:1080,height:1080,duration:15.2,tags:[`בנק`,`חיסכון`,`כיס חיסכון`,`ריבית`,`פוסט`]},{id:`bank-banker-chat`,file:`bank-banker-chat.html`,title:`צ׳אט עם הבנקאי`,description:`סרטון בסגנון בנק ביוטיוב לערוץ הדיגיטלי: אווטאר בנקאי מופשט עם בועות שאלה, צ׳אט בטלפון עם נקודות הקלדה ובחירת שעה, כרטיס שיחה מתוזמנת עם לוח שנה וחותמת אדומה, וסיום ״הבנקאי שלכם במרחק הודעה״.`,category:`bank-digital`,width:1920,height:1080,duration:16,tags:[`בנק`,`צ׳אט`,`בנקאי`,`אפליקציה`,`שירות`]}];export{e as default};

package/app/index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' blob:; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: motiondesk-media:; media-src 'self' data: blob: motiondesk-media:; frame-src 'self' blob:; connect-src 'self' ws:;" />
     <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23e30613'/%3E%3Cpath d='M18 44V20l14 14 14-14v24' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" />
     <title>MotionDesk</title>
-    <script type="module" crossorigin src="./assets/index-D3rEDfqX.js"></script>
+    <script type="module" crossorigin src="./assets/index-BRse9TUl.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-BlSoi5FK.css">
   </head>
   <body>

package/bin/motiondesk-studio.mjs

@@ -161,7 +161,14 @@ async function start({ quiet = false } = {}) {
   const url = `http://127.0.0.1:${server.address().port}/`;
   if (quiet) return;
   console.log(`\n  MotionDesk Studio ${pkg.version}\n  ➜  ${url}\n`);
-  console.log(findChrome() ? '  ✓ MP4 export uses your installed browser' : '  ! MP4 export needs Google Chrome or Microsoft Edge installed');
+  const { findFfmpeg } = await import(path.join(root, 'lib', 'vercel-render.mjs'));
+  const chrome = findChrome(), ffmpeg = findFfmpeg();
+  if (chrome && ffmpeg) console.log('  ✓ MP4 export ready (your browser + FFmpeg)');
+  else {
+    console.log('  The studio works fully; only MP4 export needs:');
+    if (!chrome) console.log('  ! Google Chrome or Microsoft Edge (or MOTIONDESK_CHROME_PATH)');
+    if (!ffmpeg) console.log('  ! FFmpeg — Mac: brew install ffmpeg · Windows: winget install ffmpeg (or MOTIONDESK_FFMPEG_PATH)');
+  }
   console.log('  Ctrl+C to stop\n');
   if (!has('no-open')) {
     const opener = process.platform === 'darwin' ? ['open', [url]] : process.platform === 'win32' ? ['cmd', ['/c', 'start', '', url]] : ['xdg-open', [url]];

package/lib/catalog/hyperframes/bank-banker-chat.html

@@ -0,0 +1,256 @@
+<!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}
+
+.gr{color:color-mix(in srgb,var(--ink) 58%,var(--card))}
+.c2{left:0;right:0;text-align:center}
+.av{position:absolute;border-radius:50%;background:color-mix(in srgb,var(--mute) 32%,var(--card));overflow:hidden;box-shadow:0 18px 44px color-mix(in srgb,var(--ink) 16%,transparent)}
+.ah{position:absolute;left:34%;top:17%;width:32%;height:32%;border-radius:50%;background:var(--ink)}
+.ab{position:absolute;left:15%;top:55%;width:70%;height:60%;border-radius:50% 50% 0 0;background:var(--ink)}
+.at{position:absolute;left:57%;top:67%;width:13%;height:7%;border-radius:3px;background:var(--accent)}
+.ring{position:absolute;border-radius:50%;border:12px solid var(--accent)}
+.on{position:absolute;border-radius:50%;background:var(--accent);border:10px solid var(--card)}
+.qb{position:absolute;padding:14px 34px 20px;border-radius:30px 30px 30px 8px;background:var(--card);box-shadow:0 14px 34px color-mix(in srgb,var(--ink) 14%,transparent)}
+.qb p{font-size:40px;font-weight:700;white-space:nowrap;color:var(--ink);line-height:1.25}
+.ph{position:absolute;left:220px;top:64px;width:600px;height:850px;border-radius:66px;background:var(--ink);box-shadow:0 28px 64px color-mix(in srgb,var(--ink) 26%,transparent)}
+.ph>.sc{position:absolute;inset:16px;border-radius:52px;background:var(--paper);overflow:hidden}
+.nt{position:absolute;left:240px;top:26px;width:120px;height:30px;border-radius:15px;background:var(--ink)}
+.chd{position:absolute;left:0;right:0;top:0;height:140px;background:var(--card);box-shadow:0 4px 14px color-mix(in srgb,var(--ink) 8%,transparent)}
+.chd .av{box-shadow:none}
+.bb{position:absolute;padding:10px 24px 14px;font-size:30px;line-height:1.3;white-space:nowrap}
+.bi{right:20px;border-radius:24px 6px 24px 24px;background:var(--card);color:var(--ink);box-shadow:0 6px 16px color-mix(in srgb,var(--ink) 8%,transparent)}
+.bo{left:20px;border-radius:6px 24px 24px 24px;background:var(--accent);color:var(--card)}
+.typ{position:absolute;right:20px;top:350px;width:130px;height:62px;border-radius:24px 6px 24px 24px;background:var(--card);display:flex;align-items:center;justify-content:center;gap:12px}
+.dt{width:14px;height:14px;border-radius:50%;background:var(--mute)}
+.qr{position:absolute;top:452px;height:62px;padding:0 24px;border-radius:31px;border:4px solid var(--accent);background:var(--card);display:flex;align-items:center}
+.qr p{font-size:30px;font-weight:700;color:var(--accent);white-space:nowrap}
+.qs{position:absolute;inset:-4px;border-radius:31px;border:4px solid var(--accent);background:color-mix(in srgb,var(--accent) 30%,var(--card))}
+.qr p{position:relative}
+.tap{position:absolute;width:90px;height:90px;border-radius:50%;background:color-mix(in srgb,var(--ink) 22%,transparent)}
+.inp{position:absolute;left:20px;right:20px;top:730px;height:62px;border-radius:31px;background:var(--card)}
+.inp .snd{position:absolute;left:8px;top:8px;width:46px;height:46px;border-radius:50%;background:var(--accent)}
+.cal{position:absolute;right:50px;top:60px;width:210px;height:220px;border-radius:20px;background:var(--card);border:4px solid color-mix(in srgb,var(--mute) 50%,var(--card));overflow:hidden}
+.calh{position:absolute;left:0;right:0;top:0;height:70px;background:var(--accent)}
+.rg{position:absolute;top:-16px;width:16px;height:44px;border-radius:8px;background:var(--ink)}
+.chk{position:absolute;width:150px;height:150px;border-radius:50%;background:var(--accent);box-shadow:0 14px 34px color-mix(in srgb,var(--accent) 36%,transparent)}
+.chk svg{position:absolute;left:30px;top:30px;width:90px;height:90px;overflow:visible}
+.ckp{fill:none;stroke:var(--card);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
+.btn{position:absolute;top:470px;height:92px;border-radius:46px;display:flex;align-items:center;justify-content:center}
+.btn p{font-size:36px;font-weight:700;white-space:nowrap}
+.hs{position:absolute;left:1060px;top:180px;width:220px;height:220px;border-radius:50%;background:var(--accent);box-shadow:0 18px 44px color-mix(in srgb,var(--accent) 34%,transparent)}
+.hs svg{position:absolute;left:50px;top:50px;width:120px;height:120px}
+.hs path{fill:var(--card)}
+.rp{position:absolute;left:1060px;top:180px;width:220px;height:220px;border-radius:50%;border:6px solid var(--accent)}
+.pd{position:absolute;top:278px;width:24px;height:24px;border-radius:50%;background:var(--ink)}
+</style>
+</head>
+<body>
+<div id="root" data-composition-id="bank-banker-chat" data-start="0" data-width="1920" data-height="1080" data-duration="16">
+<section id="s1" class="clip scene" data-start="0" data-duration="3.6">
+<div class="cam" id="c1">
+  <i class="bgl" style="left:-100px;top:960px;transform:rotate(-14deg)"></i>
+  <i class="ring" id="ring1" style="left:316px;top:256px;width:448px;height:448px"></i>
+  <div class="av" id="av1" style="left:340px;top:280px;width:400px;height:400px"><i class="ah"></i><i class="ab"></i><i class="at"></i></div>
+  <i class="on" id="on1" style="left:640px;top:580px;width:76px;height:76px"></i>
+  <div class="qb" id="q1" data-r="-2" style="left:600px;top:150px"><p id="q1t">מה עם הלוואה?</p></div>
+  <div class="qb" id="q2" data-r="1.5" style="left:730px;top:640px"><p id="q2t">אפשר לפרוס תשלום?</p></div>
+  <div class="qb" id="q3" data-r="-1" style="left:110px;top:740px"><p id="q3t">איך מגדילים מסגרת?</p></div>
+  <p class="t b" id="h1" style="right:140px;top:230px;font-size:110px">יש שאלה?</p>
+  <p class="lab r" id="h2" data-r="-2" style="right:140px;top:380px;font-size:84px">יש בנקאי בצ׳אט</p>
+  <p class="t" id="h3" style="right:140px;top:530px;font-size:42px">מתוך האפליקציה, בלי לחפש מספר</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><i class="cu" id="lt1k"></i></div></div>
+</div>
+</section>
+<section id="s2" class="clip scene" data-start="3.6" data-duration="4.8">
+<div class="cam" id="c2">
+  <i class="bgl" style="left:900px;top:20px;transform:rotate(26deg)"></i>
+  <div class="ph" id="ph"><div class="sc">
+    <div class="chd"><div class="av" id="av2" style="left:484px;top:52px;width:68px;height:68px"><i class="ah"></i><i class="ab"></i><i class="at"></i></div><p class="t b" id="cn" style="right:100px;top:46px;font-size:30px">הבנקאי שלכם</p><p class="t" id="cs" style="right:100px;top:86px;font-size:22px;color:var(--accent)">זמין עכשיו</p></div>
+    <p class="bb bi" id="m1" style="top:170px">היי, איך אפשר לעזור?</p>
+    <p class="bb bo" id="m2" style="top:260px">רוצה לבדוק פריסת תשלומים</p>
+    <div class="typ" id="typ"><i class="dt"></i><i class="dt"></i><i class="dt"></i></div>
+    <p class="bb bi" id="m3" style="top:350px">בשמחה! נקבע שיחה קצרה?</p>
+    <div class="qr" id="qa" style="right:20px"><p id="qat">היום 16:00</p></div>
+    <div class="qr" id="qb" style="right:262px"><i class="qs" id="qs"></i><p id="qbt">מחר 10:00</p></div>
+    <i class="tap" id="tap" style="left:160px;top:438px"></i>
+    <p class="bb bo" id="m4" style="top:552px">מחר ב־10:00 מתאים לי</p>
+    <div class="inp"><i class="snd"></i><i class="ln" style="right:30px;left:200px;top:24px"></i></div>
+  </div><i class="nt"></i></div>
+  <div class="hw" style="right:140px;top:200px"><i class="hl" id="hl2"></i><p id="h4" style="font-size:96px;font-weight:700">כותבים שאלה</p></div>
+  <p class="t" id="h5" style="right:140px;top:335px;font-size:46px">ומקבלים מענה מבנקאי</p>
+  <p class="lab w" id="h6" data-r="-1.5" style="right:140px;top:460px;font-size:56px">בלי לחכות על הקו</p>
+  <p class="lab k" id="h7" data-r="1" style="right:200px;top:570px;font-size:56px">גם מחוץ לסניף</p>
+  <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.4" data-duration="4">
+<div class="cam" id="c3">
+  <div class="card" id="sc" style="left:200px;top:180px;width:820px;height:620px">
+    <div class="cal" id="cal"><i class="calh"></i><p class="t b c2" id="cd" style="top:10px;font-size:34px;color:var(--card)">יום ג׳</p><p class="t b c2" id="cn2" style="top:80px;font-size:104px">17</p></div>
+    <p class="t b" id="k1" style="right:300px;top:70px;font-size:54px">שיחה עם הבנקאי</p>
+    <p class="t" id="k2" style="right:300px;top:150px;font-size:44px">יום שלישי · 10:00</p>
+    <p class="t gr" id="k3" style="right:300px;top:216px;font-size:34px">שיחת טלפון · 15 דקות</p>
+    <i class="ln" style="left:50px;right:50px;top:320px;height:6px;border-radius:3px"></i>
+    <p class="t gr" id="k4" style="right:50px;top:360px;font-size:34px">הבנקאי יתקשר אליכם למספר שלכם</p>
+    <div class="btn" id="bt1" style="right:50px;width:220px;background:var(--accent)"><p id="bt1t" style="color:var(--card)">אישור</p></div>
+    <div class="btn" id="bt2" style="right:300px;width:300px;border:4px solid var(--ink)"><p id="bt2t" style="color:var(--ink)">הוספה ליומן</p></div>
+  </div>
+  <i class="tape" id="tp1" style="left:150px;top:160px;transform:rotate(-26deg)"></i><i class="tape" id="tp2" style="left:930px;top:160px;transform:rotate(26deg)"></i>
+  <div class="chk" id="chk" style="left:120px;top:690px"><svg viewBox="0 0 90 90"><path class="ckp" id="ckp" pathLength="1" d="M14 47l20 20 42-46"/></svg></div>
+  <p class="t b" id="h8" style="right:140px;top:210px;font-size:96px">קובעים שיחה</p>
+  <p class="lab r" id="h9" data-r="-2" style="right:140px;top:350px;font-size:72px">בשעה שנוחה לכם</p>
+  <p class="t" id="h10" style="right:140px;top:490px;font-size:44px">והבנקאי חוזר אליכם</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.4" data-duration="3.6">
+<div class="cam" id="c4">
+  <div class="av" id="av4" style="left:640px;top:180px;width:220px;height:220px"><i class="ah"></i><i class="ab"></i><i class="at"></i></div>
+  <i class="pd" style="left:900px"></i><i class="pd" style="left:958px"></i><i class="pd" style="left:1016px"></i>
+  <i class="rp" id="rp1"></i><i class="rp" id="rp2"></i>
+  <div class="hs" id="hs"><svg viewBox="0 0 120 120"><path d="M38 22c5-3 11-2 14 3l9 15c3 5 1 11-3 14l-7 5c5 11 14 20 25 25l5-7c3-4 9-6 14-3l15 9c5 3 6 9 3 14l-6 9c-5 7-13 10-21 7C55 102 30 77 19 46c-3-8 0-16 7-21z"/></svg></div>
+  <div class="cx" style="top:470px"><p id="e1" style="font-size:96px;font-weight:700">הבנקאי שלכם</p><div class="hw"><i class="ul" id="ul4"></i><p id="e2" style="font-size:96px;font-weight:700;color:var(--accent)">במרחק הודעה</p></div></div>
+  <p class="t gr c2" id="e3" style="top:620px;font-size:40px">בצ׳אט באפליקציה, בימים ובשעות הפעילות</p>
+  <div class="pill" id="cta" style="left:650px;top:730px;width:620px;height:106px"><p id="ctat" style="font-size:46px">פותחים צ׳אט באפליקציה</p></div>
+  <p class="fine c2" id="f4" style="top:880px;font-size:28px">השירות בכפוף לתנאי הבנק</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,3.6,8.4,12.4,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);
+
+function POP(sel,t){tl.fromTo(sel,{scale:.6,opacity:0},{scale:1,opacity:1,duration:.4,ease:B},t);}
+// s1 banker avatar + floating question bubbles
+sIn(0);
+tl.fromTo("#av1",{scale:.5,opacity:0},{scale:1,opacity:1,duration:.7,ease:B},S[0]+.1);
+tl.fromTo("#ring1",{scale:.7,opacity:0},{scale:1,opacity:1,duration:.7,ease:X},S[0]+.3);
+POP("#on1",S[0]+.7);
+LAB(["#q1","#q2","#q3"],S[0]+.8,.25);
+tl.fromTo(["#q1","#q2","#q3"],{y:0},{y:-12,duration:.45,yoyo:true,repeat:1,ease:"sine.inOut",stagger:.15,immediateRender:false},S[0]+1.6);
+UP("#h1",S[0]+.15);LAB("#h2",S[0]+.4);UP("#h3",S[0]+.8);
+LT("lt1",S[0]+1);
+sOut(0);
+// s2 phone chat: typing dots, quick-reply chips
+sIn(1);
+tl.fromTo("#ph",{y:110,opacity:0},{y:0,opacity:1,duration:.8,ease:X},S[1]+.05);
+tl.fromTo("#m1",{scale:.6,opacity:0,transformOrigin:"100% 0%"},{scale:1,opacity:1,duration:.4,ease:B},S[1]+.5);
+tl.fromTo("#m2",{scale:.6,opacity:0,transformOrigin:"0% 0%"},{scale:1,opacity:1,duration:.4,ease:B},S[1]+1);
+tl.fromTo("#typ",{scale:.6,opacity:0,transformOrigin:"100% 0%"},{scale:1,opacity:1,duration:.3,ease:B},S[1]+1.45);
+tl.fromTo("#typ .dt",{y:0},{y:-10,duration:.18,yoyo:true,repeat:5,ease:"sine.inOut",stagger:.1},S[1]+1.6);
+tl.to("#typ",{opacity:0,duration:.15},S[1]+2.75);
+tl.fromTo("#m3",{scale:.6,opacity:0,transformOrigin:"100% 0%"},{scale:1,opacity:1,duration:.4,ease:B},S[1]+2.8);
+tl.fromTo(["#qa","#qb"],{y:30,opacity:0},{y:0,opacity:1,duration:.4,ease:P,stagger:.12},S[1]+3.2);
+tl.fromTo("#tap",{scale:.3,opacity:0},{scale:1,opacity:1,duration:.25,ease:P},S[1]+3.65);
+tl.to("#tap",{scale:1.5,opacity:0,duration:.3,ease:"power1.out"},S[1]+3.9);
+tl.fromTo("#qs",{opacity:0},{opacity:1,duration:.2},S[1]+3.8);
+tl.fromTo("#m4",{scale:.6,opacity:0,transformOrigin:"0% 0%"},{scale:1,opacity:1,duration:.4,ease:B},S[1]+4.05);
+UP("#h4",S[1]+.15);HL("#hl2",S[1]+.65);UP("#h5",S[1]+.4);LAB(["#h6","#h7"],S[1]+.8,.2);
+LT("lt2",S[1]+1.5);
+sOut(1);
+// s3 scheduled-call card + red check stamp
+sIn(2);
+tl.fromTo("#sc",{y:90,opacity:0,rotation:2},{y:0,opacity:1,rotation:-1,duration:.8,ease:X},S[2]+.05);
+tl.fromTo(["#tp1","#tp2"],{opacity:0,scale:1.6},{opacity:1,scale:1,duration:.35,ease:P,stagger:.1},S[2]+.5);
+tl.fromTo("#cal",{scale:0},{scale:1,duration:.45,ease:B},S[2]+.5);
+UP(["#k1","#k2","#k3","#k4"],S[2]+.6,.1);
+tl.fromTo(["#bt1","#bt2"],{y:24,opacity:0},{y:0,opacity:1,duration:.4,ease:P,stagger:.1},S[2]+1);
+tl.fromTo("#chk",{scale:2.2,opacity:0,rotation:-20},{scale:1,opacity:1,rotation:0,duration:.35,ease:"power4.in"},S[2]+1.6);
+DRAW("#ckp",S[2]+1.9,.3);
+tl.fromTo("#sc",{x:0},{keyframes:[{x:-8,duration:.05},{x:6,duration:.05},{x:0,duration:.05}],immediateRender:false},S[2]+1.95);
+UP("#h8",S[2]+.2);LAB("#h9",S[2]+.45);UP("#h10",S[2]+.9);
+LT("lt3",S[2]+1.3);
+sOut(2);
+// s4 avatar + ringing handset close
+sIn(3);
+tl.fromTo("#av4",{scale:.5,opacity:0},{scale:1,opacity:1,duration:.6,ease:B},S[3]+.1);
+tl.fromTo("#hs",{scale:.5,opacity:0},{scale:1,opacity:1,duration:.6,ease:B},S[3]+.25);
+tl.fromTo("#c4 .pd",{scale:0},{scale:1,duration:.3,ease:B,stagger:.12},S[3]+.5);
+tl.fromTo(["#rp1","#rp2"],{scale:1,opacity:.8},{scale:1.6,opacity:0,duration:.8,ease:"power1.out",stagger:.35},S[3]+.7);
+tl.fromTo("#hs svg",{rotation:0},{keyframes:[{rotation:-10,duration:.08},{rotation:10,duration:.08},{rotation:-6,duration:.08},{rotation:0,duration:.08}],immediateRender:false},S[3]+.8);
+UP(["#e1","#e2"],S[3]+.5,.15);HL("#ul4",S[3]+1.1);UP("#e3",S[3]+1);
+tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+1.3);
+UP("#f4",S[3]+1.5);
+tl.set({},{},D);
+window.__timelines=window.__timelines||{};window.__timelines["bank-banker-chat"]=tl;
+</script>
+</body>
+</html>

package/lib/catalog/hyperframes/bank-business-loan.html

@@ -0,0 +1,246 @@
+<!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}
+
+.gr{color:color-mix(in srgb,var(--ink) 58%,var(--card))}
+.c2{left:0;right:0;text-align:center}
+.shf{position:absolute;left:170px;top:300px;width:820px;height:16px;border-radius:8px;background:color-mix(in srgb,var(--mute) 70%,var(--card))}
+.jar{position:absolute;bottom:16px;width:70px;border-radius:14px 14px 10px 10px;background:color-mix(in srgb,var(--mute) 55%,var(--card))}
+.jar.a{background:color-mix(in srgb,var(--accent) 70%,var(--card))}
+.ctr{position:absolute;left:180px;top:600px;width:800px;height:300px;border-radius:8px 8px 0 0;background:var(--card);box-shadow:0 22px 50px color-mix(in srgb,var(--ink) 14%,transparent)}
+.ctr::before{content:"";position:absolute;left:-20px;right:-20px;top:-24px;height:28px;border-radius:8px;background:var(--ink)}
+.ctr::after{content:"";position:absolute;left:60px;right:60px;top:90px;height:120px;border-radius:10px;border:5px solid color-mix(in srgb,var(--mute) 45%,var(--card))}
+.reg{position:absolute;left:660px;top:476px;width:200px;height:100px;border-radius:14px 14px 4px 4px;background:var(--ink)}
+.reg::before{content:"";position:absolute;left:24px;top:20px;width:100px;height:34px;border-radius:6px;background:var(--accent)}
+.reg::after{content:"";position:absolute;left:30px;top:-40px;width:110px;height:40px;border-radius:8px 8px 0 0;background:color-mix(in srgb,var(--ink) 75%,var(--mute))}
+.box{position:absolute;width:150px;height:120px;border-radius:6px;background:color-mix(in srgb,var(--mute) 60%,var(--card))}
+.box::after{content:"";position:absolute;left:60px;top:0;width:30px;height:120px;background:color-mix(in srgb,var(--accent) 55%,var(--card))}
+.apr{position:absolute;left:56px;top:136px;width:108px;height:160px;border-radius:14px 14px 6px 6px;background:var(--accent)}
+.apr::before,.apr::after{content:"";position:absolute;top:-36px;width:9px;height:40px;border-radius:4px;background:var(--accent)}
+.apr::before{left:14px}.apr::after{right:14px}
+.box::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;border-radius:6px 6px 0 0;background:color-mix(in srgb,var(--mute) 80%,var(--ink))}
+.tbub{position:absolute;left:610px;top:126px;width:180px;height:150px;border-radius:50%;background:var(--card);box-shadow:0 14px 34px color-mix(in srgb,var(--ink) 14%,transparent);display:flex;align-items:center;justify-content:center}
+.tbub p{font-size:70px;font-weight:700;color:var(--accent);white-space:nowrap}
+.td{position:absolute;border-radius:50%;background:var(--card);box-shadow:0 8px 18px color-mix(in srgb,var(--ink) 12%,transparent)}
+.pap{position:absolute;left:220px;top:170px;width:820px;height:700px;border-radius:6px;background:repeating-linear-gradient(to bottom,transparent 0 97px,color-mix(in srgb,var(--mute) 45%,transparent) 97px 100px),var(--card);box-shadow:0 24px 54px color-mix(in srgb,var(--ink) 16%,transparent)}
+.pap::before{content:"";position:absolute;right:110px;top:0;bottom:0;width:4px;background:color-mix(in srgb,var(--accent) 55%,var(--card))}
+.nr{position:absolute;left:70px;right:150px;height:80px}
+.cb{position:absolute;right:30px;top:14px;width:52px;height:52px;border-radius:10px;border:5px solid var(--ink)}
+.ckv{position:absolute;right:26px;top:4px;width:64px;height:64px;overflow:visible}
+.ckp{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
+.sum{position:absolute;left:70px;right:150px;top:500px;height:6px;border-radius:3px;background:var(--ink)}
+.trk{position:absolute;left:260px;top:560px;width:1400px;height:22px;border-radius:11px;background:color-mix(in srgb,var(--mute) 45%,var(--card));overflow:hidden}
+.fil{position:absolute;inset:0;background:var(--accent);transform-origin:100% 50%}
+.tk{position:absolute;top:596px;width:4px;height:22px;border-radius:2px;background:var(--mute)}
+.tk.big{height:34px;background:var(--ink)}
+.tkl{top:640px;width:240px;text-align:center;font-size:30px}
+.thm{position:absolute;left:1660px;top:571px;width:0;height:0}
+.knb{position:absolute;left:-34px;top:-34px;width:68px;height:68px;border-radius:50%;background:var(--card);border:10px solid var(--accent);box-shadow:0 8px 20px color-mix(in srgb,var(--ink) 20%,transparent)}
+.tip{position:absolute;left:-170px;top:-200px;width:340px;height:124px;border-radius:22px;background:var(--ink)}
+.tip::after{content:"";position:absolute;left:150px;top:122px;width:40px;height:24px;background:var(--ink);clip-path:polygon(0 0,100% 0,50% 100%)}
+.rol{position:absolute;inset:0;overflow:hidden;border-radius:22px}
+.rc{position:absolute;left:0;right:0;top:0}
+.rc p{height:124px;line-height:124px;text-align:center;font-size:64px;font-weight:700;color:var(--card);white-space:nowrap}
+.stw{position:absolute;left:0;right:0;top:730px;display:flex;justify-content:center;gap:40px}
+.stc{display:flex;align-items:center;gap:16px;height:96px;padding:0 40px;border-radius:48px;background:var(--card);box-shadow:0 10px 26px color-mix(in srgb,var(--ink) 12%,transparent)}
+.stc p{white-space:nowrap;line-height:1.2}
+.tb{position:absolute;left:300px;top:470px;width:1320px;height:12px;border-radius:6px;background:color-mix(in srgb,var(--mute) 50%,var(--card))}
+.tpg{position:absolute;inset:0;border-radius:6px;background:var(--accent);transform-origin:100% 50%}
+.nd{position:absolute;top:421px;width:110px;height:110px;border-radius:50%;background:var(--card);border:8px solid color-mix(in srgb,var(--mute) 70%,var(--card));overflow:hidden}
+.nf{position:absolute;inset:-8px;border-radius:50%;background:var(--accent)}
+.nd svg{position:absolute;left:17px;top:17px;width:60px;height:60px;overflow:visible}
+.ndk{fill:none;stroke:var(--card);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
+.c3{top:570px;width:360px;text-align:center;font-size:40px}
+</style>
+</head>
+<body>
+<div id="root" data-composition-id="bank-business-loan" data-start="0" data-width="1920" data-height="1080" data-duration="16.6">
+<section id="s1" class="clip scene" data-start="0" data-duration="4">
+<div class="cam" id="c1">
+  <i class="bgl" style="left:-100px;top:1000px;transform:rotate(-12deg)"></i>
+  <div class="shf" id="shf"><i class="jar" style="left:20px;height:90px"></i><i class="jar a" style="left:110px;height:120px"></i><i class="jar" style="left:200px;height:70px"></i><i class="jar a" style="left:660px;height:100px"></i><i class="jar" style="left:740px;height:80px"></i></div>
+  <div class="fig" id="own" style="left:400px;top:340px;width:220px;height:274px"><i class="h" style="left:63.800000000000004px;top:0;width:92.39999999999999px;height:92.39999999999999px;background:var(--ink)"></i><i class="bd" style="left:0;top:102.39999999999999px;width:220px;height:171.6px;background:var(--ink)"></i><i class="apr"></i></div>
+  <i class="td" id="td1" style="left:562px;top:316px;width:30px;height:30px"></i><i class="td" id="td2" style="left:588px;top:272px;width:44px;height:44px"></i>
+  <div class="tbub" id="tbub"><p id="tbt">₪?</p></div>
+  <div class="ctr" id="ctr"></div>
+  <i class="reg" id="reg"></i>
+  <i class="box" id="bx1" style="left:220px;top:456px"></i><i class="box" id="bx2" style="left:236px;top:346px;width:120px;height:110px"></i>
+  <p class="t b" id="h1" style="right:140px;top:220px;font-size:104px">העסק שלכם</p>
+  <p class="lab r" id="h2" data-r="-2" style="right:140px;top:370px;font-size:84px">צריך דחיפה?</p>
+  <p class="t" id="h3" style="right:140px;top:520px;font-size:42px">ציוד, מלאי, שיפוץ, הכול עולה כסף</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><i class="cu" id="lt1k"></i></div></div>
+</div>
+</section>
+<section id="s2" class="clip scene" data-start="4" data-duration="4">
+<div class="cam" id="c2">
+  <i class="bgl" style="left:860px;top:30px;transform:rotate(28deg)"></i>
+  <div class="pap" id="pap"><p class="t b" id="ph" style="right:150px;top:60px;font-size:60px">מה העסק צריך?</p><div class="nr" style="top:180px"><i class="cb"></i><svg class="ckv" viewBox="0 0 60 60"><path class="ckp" pathLength="1" d="M10 32l14 14 28-34"/></svg><p class="t" id="na0" style="right:120px;top:2px;font-size:46px">מקרר תצוגה</p><p class="t b" id="nb0" style="left:0;top:2px;font-size:46px">18,000 ₪</p></div><div class="nr" style="top:280px"><i class="cb"></i><svg class="ckv" viewBox="0 0 60 60"><path class="ckp" pathLength="1" d="M10 32l14 14 28-34"/></svg><p class="t" id="na1" style="right:120px;top:2px;font-size:46px">מלאי לעונה</p><p class="t b" id="nb1" style="left:0;top:2px;font-size:46px">12,000 ₪</p></div><div class="nr" style="top:380px"><i class="cb"></i><svg class="ckv" viewBox="0 0 60 60"><path class="ckp" pathLength="1" d="M10 32l14 14 28-34"/></svg><p class="t" id="na2" style="right:120px;top:2px;font-size:46px">שילוט חדש</p><p class="t b" id="nb2" style="left:0;top:2px;font-size:46px">5,000 ₪</p></div>
+    <i class="sum" id="sum"></i><p class="t b" id="st" style="right:270px;top:530px;font-size:52px">סה״כ</p>
+    <div class="hw" style="left:70px;top:526px"><i class="ul" id="ul2"></i><p id="sv" style="font-size:64px;font-weight:700;color:var(--accent)">35,000 ₪</p></div></div>
+  <i class="tape" id="tp1" style="left:170px;top:150px;transform:rotate(-26deg)"></i><i class="tape" id="tp2" style="left:950px;top:150px;transform:rotate(26deg)"></i>
+  <p class="t b" id="h4" style="right:140px;top:220px;font-size:100px">רושמים</p>
+  <p class="lab k" id="h5" data-r="1.5" style="right:140px;top:370px;font-size:76px">מה באמת צריך</p>
+  <p class="t" id="h6" style="right:140px;top:520px;font-size:42px">ורק אז בודקים סכום</p>
+  <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" data-duration="4.2">
+<div class="cam" id="c3">
+  <div class="hw" style="right:140px;top:110px"><i class="hl" id="hl3"></i><p id="h7" style="font-size:96px;font-weight:700">בוחרים סכום</p></div>
+  <p class="t" id="h8" style="right:140px;top:245px;font-size:44px">שמתאים לתוכנית של העסק</p>
+  <div class="trk"><i class="fil" id="fil"></i></div><i class="tk big" style="left:1658px"></i><i class="tk" style="left:1502.4444444444443px"></i><i class="tk" style="left:1346.888888888889px"></i><i class="tk" style="left:1191.3333333333335px"></i><i class="tk big" style="left:1035.7777777777778px"></i><i class="tk" style="left:880.2222222222222px"></i><i class="tk" style="left:724.6666666666667px"></i><i class="tk" style="left:569.1111111111111px"></i><i class="tk" style="left:413.55555555555566px"></i><i class="tk big" style="left:258px"></i><p class="t gr tkl" id="tl1" style="left:1540px">10 אלף ₪</p><p class="t gr tkl" id="tl2" style="left:917.7777777777778px">50 אלף ₪</p><p class="t gr tkl" id="tl3" style="left:140px">100 אלף ₪</p>
+  <div class="thm" id="thm"><div class="tip" id="tip"><div class="rol"><div class="rc" id="rc"><p id="r1">10,000 ₪</p><p id="r2">20,000 ₪</p><p id="r3">35,000 ₪</p></div></div></div><i class="knb"></i></div>
+  <div class="stw" id="stw"><div class="stc"><p class="gr" id="s1a" style="font-size:32px">תקופה</p><p class="b" id="s1b" style="font-size:42px">36 חודשים</p></div><div class="stc"><p class="gr" id="s2a" style="font-size:32px">החזר חודשי משוער</p><p class="b" id="s2b" style="font-size:42px;color:var(--accent)">1,080 ₪</p></div></div>
+  <p class="fine c2" id="f3" style="top:850px;font-size:28px">להמחשה בלבד · הסכום וההחזר בכפוף לאישור אשראי</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><p id="lt3c">ולא מעבר</p><i class="cu" id="lt3k"></i></div></div>
+</div>
+</section>
+<section id="s4" class="clip scene" data-start="12.2" data-duration="4.4">
+<div class="cam" id="c4">
+  <div class="cx" style="top:130px"><p id="e1" style="font-size:92px;font-weight:700">מהבקשה</p><div class="hw"><i class="hl" id="hl4"></i><p id="e2" style="font-size:92px;font-weight:700;color:var(--accent)">ועד הכסף בחשבון</p></div></div>
+  <div class="tb"><i class="tpg" id="tpg"></i></div>
+  <div class="nd" id="nd0" style="left:1565px"><i class="nf"></i><svg viewBox="0 0 60 60"><path class="ndk" pathLength="1" d="M14 31l11 11 22-24"/></svg></div><p class="t b c3" id="ndl0" style="left:1440px">שולחים בקשה</p><div class="nd" id="nd1" style="left:1125px"><i class="nf"></i><svg viewBox="0 0 60 60"><path class="ndk" pathLength="1" d="M14 31l11 11 22-24"/></svg></div><p class="t b c3" id="ndl1" style="left:1000px">בדיקת נתונים</p><div class="nd" id="nd2" style="left:685px"><i class="nf"></i><svg viewBox="0 0 60 60"><path class="ndk" pathLength="1" d="M14 31l11 11 22-24"/></svg></div><p class="t b c3" id="ndl2" style="left:560px">הצעה ותנאים</p><div class="nd" id="nd3" style="left:245px"><i class="nf"></i><svg viewBox="0 0 60 60"><path class="ndk" pathLength="1" d="M14 31l11 11 22-24"/></svg></div><p class="t b c3" id="ndl3" style="left:120px">הכסף בחשבון</p>
+  <div class="fig" id="mini" style="left:1585px;top:300px;width:70px;height:94px"><i class="h" style="left:20.3px;top:0;width:29.4px;height:29.4px;background:var(--ink)"></i><i class="bd" style="left:0;top:39.4px;width:70px;height:54.6px;background:var(--accent)"></i></div>
+  <div class="pill" id="cta" style="left:640px;top:730px;width:640px;height:108px"><p id="ctat" style="font-size:46px">בודקים זכאות באפליקציה</p></div>
+  <p class="fine c2" id="f4" style="top:880px;font-size:30px">בכפוף לאישור אשראי ולתנאי הבנק · להמחשה בלבד</p>
+</div>
+</section>
+<div id="ov" class="clip ov" data-start="0" data-duration="16.6">
+<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,12.2,16.6],D=16.6;
+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 shop owner behind the counter
+sIn(0);
+tl.fromTo("#shf",{opacity:0,y:-30},{opacity:1,y:0,duration:.6,ease:P},S[0]+.1);
+tl.fromTo("#own",{y:120},{y:0,duration:.8,ease:X},S[0]+.15);
+tl.fromTo("#ctr",{y:60,opacity:0},{y:0,opacity:1,duration:.7,ease:X},S[0]+.05);
+tl.fromTo(["#reg","#bx1","#bx2"],{y:-60,opacity:0},{y:0,opacity:1,duration:.5,ease:B,stagger:.12},S[0]+.5);
+tl.fromTo(["#td1","#td2","#tbub"],{scale:0},{scale:1,duration:.4,ease:B,stagger:.15},S[0]+1.2);
+tl.fromTo("#tbub",{y:0},{y:-10,duration:.6,yoyo:true,repeat:1,ease:"sine.inOut",immediateRender:false},S[0]+1.9);
+UP("#h1",S[0]+.2);LAB("#h2",S[0]+.5);UP("#h3",S[0]+.9);
+LT("lt1",S[0]+1.2);
+sOut(0);
+// s2 needs list on taped ruled paper
+sIn(1);
+tl.fromTo("#pap",{y:90,opacity:0,rotation:2},{y:0,opacity:1,rotation:-1.5,duration:.8,ease:X},S[1]+.05);
+tl.fromTo(["#tp1","#tp2"],{opacity:0,scale:1.6},{opacity:1,scale:1,duration:.35,ease:P,stagger:.1},S[1]+.5);
+tl.fromTo("#pap .nr",{x:40,opacity:0},{x:0,opacity:1,duration:.4,ease:P,stagger:.3},S[1]+.5);
+DRAW("#pap .ckp",S[1]+.8,.3,.3);
+tl.fromTo("#sum",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.4,ease:P},S[1]+1.6);
+UP(["#st","#sv"],S[1]+1.8,.1);HL("#ul2",S[1]+2.2);
+UP("#h4",S[1]+.2);LAB("#h5",S[1]+.5);UP("#h6",S[1]+.9);
+LT("lt2",S[1]+1.2);
+sOut(1);
+// s3 ruler slider with rolling amount tooltip (illustrative)
+sIn(2);
+UP("#h7",S[2]+.1);HL("#hl3",S[2]+.6);UP("#h8",S[2]+.3);
+tl.fromTo("#c3 .tk",{scaleY:0},{scaleY:1,duration:.3,ease:P,stagger:.03},S[2]+.3);
+tl.fromTo("#c3 .tkl",{opacity:0},{opacity:1,duration:.3},S[2]+.5);
+tl.fromTo("#thm",{scale:0},{scale:1,duration:.4,ease:B},S[2]+.4);
+tl.fromTo("#fil",{scaleX:0},{scaleX:0.1111,duration:.6,ease:E},S[2]+.9);
+tl.fromTo("#thm",{x:0},{x:-155.6,duration:.6,ease:E},S[2]+.9);
+tl.fromTo("#rc",{y:0},{y:-124,duration:.3,ease:P},S[2]+1.2);
+tl.to("#fil",{scaleX:0.2778,duration:.7,ease:E},S[2]+1.65);
+tl.to("#thm",{x:-388.9,duration:.7,ease:E},S[2]+1.65);
+tl.to("#rc",{y:-248,duration:.3,ease:P},S[2]+2.05);
+tl.fromTo("#stw .stc",{y:40,opacity:0},{y:0,opacity:1,duration:.5,ease:P,stagger:.15},S[2]+2.2);
+UP("#f3",S[2]+2.5);
+LT("lt3",S[2]+1);
+sOut(2);
+// s4 approval timeline + CTA
+sIn(3);
+UP(["#e1","#e2"],S[3]+.1,.15);HL("#hl4",S[3]+.6);
+tl.fromTo("#c4 .nd",{scale:0},{scale:1,duration:.4,ease:B,stagger:.1},S[3]+.2);
+tl.fromTo("#c4 .c3",{y:20,opacity:0},{y:0,opacity:1,duration:.4,ease:P,stagger:.1},S[3]+.35);
+tl.fromTo("#c4 .nf",{scale:0},{scale:1,duration:.3,ease:B,stagger:.7},S[3]+.7);
+DRAW("#c4 .ndk",S[3]+.85,.25,.7);
+tl.fromTo("#tpg",{scaleX:0},{scaleX:1,duration:2.1,ease:"none"},S[3]+.7);
+tl.fromTo("#mini",{opacity:0},{opacity:1,duration:.2},S[3]+.5);
+tl.fromTo("#mini",{x:0},{x:-1320,duration:2.1,ease:"none"},S[3]+.7);
+tl.fromTo("#mini",{y:0},{y:-14,duration:.15,yoyo:true,repeat:13,ease:"sine.inOut",immediateRender:false},S[3]+.7);
+tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+2.9);
+UP("#f4",S[3]+3.1);
+tl.set({},{},D);
+window.__timelines=window.__timelines||{};window.__timelines["bank-business-loan"]=tl;
+</script>
+</body>
+</html>