motiondesk-studio 1.3.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/README.md +9 -4
  2. package/app/assets/bank-banker-chat-B_iF_sFM.js +257 -0
  3. package/app/assets/bank-business-loan-BFWWaq-c.js +247 -0
  4. package/app/assets/bank-car-choice-DLE2OVcc.js +229 -0
  5. package/app/assets/bank-card-freeze-J1JfFmLr.js +281 -0
  6. package/app/assets/bank-code-never-CQDlq8GN.js +234 -0
  7. package/app/assets/bank-dark-interlude-DhcdkPP1.js +190 -0
  8. package/app/assets/bank-digital-JTuIxFOJ.js +1 -0
  9. package/app/assets/bank-dinner-split-Be1e7DOQ.js +246 -0
  10. package/app/assets/bank-fast-pay-DoW0ClI6.js +230 -0
  11. package/app/assets/bank-first-salary-D9WxYgJf.js +212 -0
  12. package/app/assets/bank-fomo-stop-uEzdT0HP.js +230 -0
  13. package/app/assets/bank-forex-trip-BHW39y4z.js +205 -0
  14. package/app/assets/bank-growth-bars-DirAz4xB.js +203 -0
  15. package/app/assets/bank-holiday-budget-J41dLHwR.js +224 -0
  16. package/app/assets/bank-invest-B--KJb5m.js +1 -0
  17. package/app/assets/bank-life-C-4wZKyu.js +1 -0
  18. package/app/assets/bank-mortgage-papers-DMtx0XsI.js +214 -0
  19. package/app/assets/bank-new-app-look-CKmeKBU6.js +228 -0
  20. package/app/assets/bank-one-click-loan-BVhe1AGv.js +223 -0
  21. package/app/assets/bank-paper-explainer-CD8mPtnJ.js +191 -0
  22. package/app/assets/bank-pension-compare-BArvoVu7.js +243 -0
  23. package/app/assets/bank-remote-access-Df8UNpc7.js +257 -0
  24. package/app/assets/bank-safety-CBkr-iwJ.js +1 -0
  25. package/app/assets/bank-savings-pocket-B53nO1Z_.js +220 -0
  26. package/app/assets/bank-share-explained-DCp805RD.js +228 -0
  27. package/app/assets/bank-small-business-Bc7Ad4GW.js +217 -0
  28. package/app/assets/bank-student-routine-CnPPhtoV.js +224 -0
  29. package/app/assets/bank-suspicious-sms-CwOrdi3d.js +229 -0
  30. package/app/assets/bank-wedding-budget-CDM2kO0R.js +230 -0
  31. package/app/assets/bank-young-BwV6418l.js +1 -0
  32. package/app/assets/{catalog-Cdx5nbp0.js → catalog-CDdvrdnk.js} +1 -1
  33. package/app/assets/{index-D3rEDfqX.js → index-BRse9TUl.js} +4 -4
  34. package/app/assets/index-b6-Cm4vot4j.js +1 -0
  35. package/app/assets/index-b7-BLEay8YC.js +1 -0
  36. package/app/assets/index-b8-Jbh-zOZB.js +1 -0
  37. package/app/assets/index-b9-caOB8GyX.js +1 -0
  38. package/app/index.html +1 -1
  39. package/bin/motiondesk-studio.mjs +8 -1
  40. package/lib/catalog/hyperframes/bank-banker-chat.html +256 -0
  41. package/lib/catalog/hyperframes/bank-business-loan.html +246 -0
  42. package/lib/catalog/hyperframes/bank-car-choice.html +228 -0
  43. package/lib/catalog/hyperframes/bank-card-freeze.html +280 -0
  44. package/lib/catalog/hyperframes/bank-code-never.html +233 -0
  45. package/lib/catalog/hyperframes/bank-dark-interlude.html +189 -0
  46. package/lib/catalog/hyperframes/bank-dinner-split.html +245 -0
  47. package/lib/catalog/hyperframes/bank-fast-pay.html +229 -0
  48. package/lib/catalog/hyperframes/bank-first-salary.html +211 -0
  49. package/lib/catalog/hyperframes/bank-fomo-stop.html +229 -0
  50. package/lib/catalog/hyperframes/bank-forex-trip.html +204 -0
  51. package/lib/catalog/hyperframes/bank-growth-bars.html +202 -0
  52. package/lib/catalog/hyperframes/bank-holiday-budget.html +223 -0
  53. package/lib/catalog/hyperframes/bank-mortgage-papers.html +213 -0
  54. package/lib/catalog/hyperframes/bank-new-app-look.html +227 -0
  55. package/lib/catalog/hyperframes/bank-one-click-loan.html +222 -0
  56. package/lib/catalog/hyperframes/bank-paper-explainer.html +190 -0
  57. package/lib/catalog/hyperframes/bank-pension-compare.html +242 -0
  58. package/lib/catalog/hyperframes/bank-remote-access.html +256 -0
  59. package/lib/catalog/hyperframes/bank-savings-pocket.html +219 -0
  60. package/lib/catalog/hyperframes/bank-share-explained.html +227 -0
  61. package/lib/catalog/hyperframes/bank-small-business.html +216 -0
  62. package/lib/catalog/hyperframes/bank-student-routine.html +223 -0
  63. package/lib/catalog/hyperframes/bank-suspicious-sms.html +228 -0
  64. package/lib/catalog/hyperframes/bank-wedding-budget.html +229 -0
  65. package/lib/catalog/hyperframes/index-b6.json +146 -0
  66. package/lib/catalog/hyperframes/index-b7.json +121 -0
  67. package/lib/catalog/hyperframes/index-b8.json +92 -0
  68. package/lib/catalog/hyperframes/index-b9.json +87 -0
  69. package/lib/catalog/studio/bank-digital.json +3586 -0
  70. package/lib/catalog/studio/bank-invest.json +3653 -0
  71. package/lib/catalog/studio/bank-life.json +3605 -0
  72. package/lib/catalog/studio/bank-safety.json +3198 -0
  73. package/lib/catalog/studio/bank-young.json +3426 -0
  74. package/lib/vercel-render.mjs +16 -1
  75. package/package.json +30 -7
package/README.md CHANGED
@@ -8,7 +8,7 @@ npx motiondesk-studio
8
8
 
9
9
  הדפדפן נפתח בכתובת `http://127.0.0.1:5199` עם ארבע דרכים פשוטות ליצור סרטון:
10
10
 
11
- 1. **בוחרים תבנית.** כותבים נושא בתיבת החיפוש ומקבלים תבניות מתאימות מתוך 420 תבניות Motion ב־31 קטגוריות (כולל סרטוני פרימיום ארוכים, סטוריז ופוסטים), ועוד 62 תבניות HyperFrames מבוססות GSAP. משנים טקסטים, צבעים, אורך ויחס מסך, ורואים את השינוי מיד. אפשר להגדיר "המותג שלי" (שם, סלוגן, קריאה לפעולה וצבעים), וכל הגלריה מוצגת במותג שלכם. אפשר גם להדביק את הטקסט שלכם, והתבנית נבנית מחדש איתו באותו עיצוב.
11
+ 1. **בוחרים תבנית.** כותבים נושא בתיבת החיפוש ומקבלים תבניות מתאימות מתוך 540 תבניות Motion ב־36 קטגוריות (כולל סרטוני פרימיום ארוכים, סטוריז ופוסטים), ועוד 87 תבניות HyperFrames מבוססות GSAP. משנים טקסטים, צבעים, אורך ויחס מסך, ורואים את השינוי מיד. אפשר להגדיר "המותג שלי" (שם, סלוגן, קריאה לפעולה וצבעים), וכל הגלריה מוצגת במותג שלכם. אפשר גם להדביק את הטקסט שלכם, והתבנית נבנית מחדש איתו באותו עיצוב.
12
12
  2. **מרכיבים מאבנים.** בוחרים נושא ומתכון, ומוסיפים סצנות: פתיח, כרטיסים, טלפון, גרפים, מונה, ציר זמן, צ׳אט, קונפטי ועוד. כל סצנה מקבלת תוכן מוכן מגלריית הנושא, ואפשר לשנות בה הכול.
13
13
  3. **מטקסט לסרטון.** כותבים כמה שורות (פתיח, רשימה, מספרים, קריאה לפעולה) והבונה הופך כל שורה לסצנה מתאימה, בלי מודל שפה.
14
14
  4. **יוצרים עם AI.** בוחרים פרומפט (בסיסי, לפי קטגוריה, במאי מתקדם, או HyperFrames שבו המודל כותב HTML עם GSAP), מעתיקים אותו ל־ChatGPT, Claude או Gemini, ומדביקים בחזרה את ה־JSON שהמודל החזיר. האפליקציה מתקנת תקלות נפוצות, בודקת את הקונפיגורציה ובונה ממנה סרטון עריך.
@@ -19,10 +19,15 @@ npx motiondesk-studio
19
19
 
20
20
  ## ייצוא MP4
21
21
 
22
- הייצוא משתמש ב־Google Chrome או ב־Microsoft Edge שמותקנים במחשב, וב־FFmpeg שמותקן אוטומטית עם החבילה. אם הדפדפן נמצא במקום לא סטנדרטי, מגדירים את הנתיב אליו:
22
+ כל הסטודיו עובד בלי שום התקנה נוספת: גלריה, עריכה, בונה, AI, נכסים, וייצוא JSON ו־HTML. רק ייצוא MP4 צריך שני דברים:
23
+
24
+ - Google Chrome או Microsoft Edge שמותקנים במחשב.
25
+ - FFmpeg. בדרך כלל הוא מותקן אוטומטית עם החבילה. אם ההתקנה שלו נכשלת (רשת חסומה, למשל), החבילה עדיין מותקנת, והסטודיו משתמש ב־FFmpeg שמותקן במחשב. ב־Mac: `brew install ffmpeg`. ב־Windows: `winget install ffmpeg`.
26
+
27
+ בפתיחה, השורה בטרמינל מראה אם ייצוא MP4 מוכן. אם הדפדפן או FFmpeg נמצאים במקום לא סטנדרטי, מגדירים את הנתיב:
23
28
 
24
29
  ```bash
25
- MOTIONDESK_CHROME_PATH="/path/to/chrome" npx motiondesk-studio
30
+ MOTIONDESK_CHROME_PATH="/path/to/chrome" MOTIONDESK_FFMPEG_PATH="/path/to/ffmpeg" npx motiondesk-studio
26
31
  ```
27
32
 
28
33
  ## שורת פקודה
@@ -51,4 +56,4 @@ npx motiondesk-studio template finance-savings-goal --out my.json
51
56
 
52
57
  ---
53
58
 
54
- **English:** `npx motiondesk-studio` opens a local, RTL-first motion-video studio. It has 420 editable motion templates in 31 categories, 62 HyperFrames templates, text-to-video without AI, 301 vector assets, a brand kit, a scene-block builder, and LLM prompts that produce a `motiondesk-config/v4` JSON, which the app turns into an editable video. MP4 export runs through your installed Chrome or Edge plus the bundled ffmpeg-static.
59
+ **English:** `npx motiondesk-studio` opens a local, RTL-first motion-video studio. It has 540 editable motion templates in 36 categories, 87 HyperFrames templates, text-to-video without AI, 301 vector assets, a brand kit, a scene-block builder, and LLM prompts that produce a `motiondesk-config/v4` JSON, which the app turns into an editable video. Everything works without extra installs; only MP4 export needs Chrome/Edge plus FFmpeg (the optional ffmpeg-static dependency, or a system FFmpeg via PATH / MOTIONDESK_FFMPEG_PATH).
package/app/assets/bank-banker-chat-B_iF_sFM.js ADDED
@@ -0,0 +1,257 @@
1
+ var e=`<!doctype html>
2
+ <html lang="he" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=1920, height=1080">
6
+ <title>צ׳אט עם הבנקאי</title>
7
+ <script src="vendor/gsap.min.js"><\/script>
8
+ <style>
9
+ @font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
10
+ @font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
11
+ @font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
12
+ @font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
13
+ :root{--paper:#F4F4F2;--card:#FFFFFF;--ink:#141A26;--accent:#E3063B;--mute:#B4B8C0;--glow:#FF3B5C}
14
+ *{box-sizing:border-box;margin:0;padding:0}
15
+ html,body{width:1920px;height:1080px;overflow:hidden;background:var(--bg)}
16
+ body{font-family:"Heebo",Arial,sans-serif;-webkit-font-smoothing:antialiased}
17
+ #root{position:relative;width:1920px;height:1080px;overflow:hidden;background:var(--bg);color:var(--fg);direction:rtl;font-family:"Heebo",Arial,sans-serif}
18
+ .scene{position:absolute;inset:0;overflow:hidden}
19
+ .cam,.layer{position:absolute;inset:0}
20
+ .abs{position:absolute}
21
+ .m{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .08em}
22
+ .w{display:inline-block;white-space:nowrap}
23
+ #root{background:radial-gradient(ellipse at 72% 18%,var(--card),var(--paper) 62%)}
24
+ .t{position:absolute;white-space:nowrap;line-height:1.15;color:var(--ink)}
25
+ .b{font-weight:700}
26
+ .bgl{position:absolute;height:2px;width:1400px;background:color-mix(in srgb,var(--ink) 7%,transparent);transform-origin:0 0}
27
+ .ov{position:absolute;inset:0;pointer-events:none}
28
+ .ov>*{pointer-events:auto}
29
+ .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)}
30
+ .brand i{width:15.6px;height:15.6px;border-radius:3px;background:var(--accent);flex:none}
31
+ .brand p{font-size:26px;font-weight:700;color:var(--ink);white-space:nowrap}
32
+ .ltw{position:absolute;left:0;right:0;display:flex;justify-content:center}
33
+ .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)}
34
+ .lt .mk{width:16.8px;height:16.8px;border-radius:3px;background:var(--accent);flex:none}
35
+ .lt p{font-size:40px;white-space:nowrap;color:var(--ink);line-height:1.2}
36
+ .lt .em{font-weight:700;color:var(--accent)}
37
+ .lt .cu{width:12px;height:42px;background:var(--ink);flex:none}
38
+ .card{position:absolute;background:var(--card);border-radius:10px;box-shadow:0 20px 48px color-mix(in srgb,var(--ink) 16%,transparent)}
39
+ .tape{position:absolute;width:140px;height:36px;background:var(--accent);box-shadow:0 3px 8px color-mix(in srgb,var(--ink) 18%,transparent)}
40
+ .tape::after{content:"";position:absolute;left:44%;top:12px;width:12px;height:12px;background:color-mix(in srgb,var(--card) 85%,var(--accent))}
41
+ .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)}
42
+ .lab.r{background:var(--accent);color:var(--card)}
43
+ .lab.w{background:var(--card);color:var(--ink)}
44
+ .lab.k{background:var(--ink);color:var(--card)}
45
+ .hw{position:absolute;white-space:nowrap}
46
+ .hw p{position:relative;line-height:1.15;color:var(--ink)}
47
+ .hl{position:absolute;left:-12px;right:-12px;bottom:10%;height:34%;background:color-mix(in srgb,var(--accent) 26%,transparent);transform-origin:100% 50%}
48
+ .ul{position:absolute;left:-6px;right:-6px;bottom:-6px;height:7px;border-radius:4px;background:var(--accent);transform-origin:100% 50%}
49
+ .cx{position:absolute;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:26px;white-space:nowrap}
50
+ .cx .hw{position:relative}
51
+ .cx>p{color:var(--ink);line-height:1.15}
52
+ .ln{position:absolute;height:14px;border-radius:7px;background:color-mix(in srgb,var(--mute) 50%,var(--card))}
53
+ .win{position:absolute;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 20px 48px color-mix(in srgb,var(--ink) 16%,transparent)}
54
+ .win>.wb{position:absolute;left:0;right:0;top:0;height:44px;background:var(--ink)}
55
+ .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)}
56
+ .pill{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--accent)}
57
+ .pill p{color:var(--card);font-weight:700;white-space:nowrap}
58
+ .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)}
59
+ .chip i{width:14px;height:14px;border-radius:3px;background:var(--accent);flex:none}
60
+ .chip p{font-weight:700;white-space:nowrap;color:var(--ink)}
61
+ .fine{position:absolute;white-space:nowrap;color:color-mix(in srgb,var(--ink) 55%,var(--paper))}
62
+ .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%)}
63
+ .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)}
64
+ .fig{position:absolute}
65
+ .fig .h{position:absolute;border-radius:50%}
66
+ .fig .bd{position:absolute;border-radius:48% 48% 14px 14px / 38% 38% 14px 14px}
67
+ .ck{fill:none;stroke:var(--card);stroke-linecap:round;stroke-linejoin:round}
68
+
69
+ .gr{color:color-mix(in srgb,var(--ink) 58%,var(--card))}
70
+ .c2{left:0;right:0;text-align:center}
71
+ .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)}
72
+ .ah{position:absolute;left:34%;top:17%;width:32%;height:32%;border-radius:50%;background:var(--ink)}
73
+ .ab{position:absolute;left:15%;top:55%;width:70%;height:60%;border-radius:50% 50% 0 0;background:var(--ink)}
74
+ .at{position:absolute;left:57%;top:67%;width:13%;height:7%;border-radius:3px;background:var(--accent)}
75
+ .ring{position:absolute;border-radius:50%;border:12px solid var(--accent)}
76
+ .on{position:absolute;border-radius:50%;background:var(--accent);border:10px solid var(--card)}
77
+ .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)}
78
+ .qb p{font-size:40px;font-weight:700;white-space:nowrap;color:var(--ink);line-height:1.25}
79
+ .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)}
80
+ .ph>.sc{position:absolute;inset:16px;border-radius:52px;background:var(--paper);overflow:hidden}
81
+ .nt{position:absolute;left:240px;top:26px;width:120px;height:30px;border-radius:15px;background:var(--ink)}
82
+ .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)}
83
+ .chd .av{box-shadow:none}
84
+ .bb{position:absolute;padding:10px 24px 14px;font-size:30px;line-height:1.3;white-space:nowrap}
85
+ .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)}
86
+ .bo{left:20px;border-radius:6px 24px 24px 24px;background:var(--accent);color:var(--card)}
87
+ .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}
88
+ .dt{width:14px;height:14px;border-radius:50%;background:var(--mute)}
89
+ .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}
90
+ .qr p{font-size:30px;font-weight:700;color:var(--accent);white-space:nowrap}
91
+ .qs{position:absolute;inset:-4px;border-radius:31px;border:4px solid var(--accent);background:color-mix(in srgb,var(--accent) 30%,var(--card))}
92
+ .qr p{position:relative}
93
+ .tap{position:absolute;width:90px;height:90px;border-radius:50%;background:color-mix(in srgb,var(--ink) 22%,transparent)}
94
+ .inp{position:absolute;left:20px;right:20px;top:730px;height:62px;border-radius:31px;background:var(--card)}
95
+ .inp .snd{position:absolute;left:8px;top:8px;width:46px;height:46px;border-radius:50%;background:var(--accent)}
96
+ .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}
97
+ .calh{position:absolute;left:0;right:0;top:0;height:70px;background:var(--accent)}
98
+ .rg{position:absolute;top:-16px;width:16px;height:44px;border-radius:8px;background:var(--ink)}
99
+ .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)}
100
+ .chk svg{position:absolute;left:30px;top:30px;width:90px;height:90px;overflow:visible}
101
+ .ckp{fill:none;stroke:var(--card);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
102
+ .btn{position:absolute;top:470px;height:92px;border-radius:46px;display:flex;align-items:center;justify-content:center}
103
+ .btn p{font-size:36px;font-weight:700;white-space:nowrap}
104
+ .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)}
105
+ .hs svg{position:absolute;left:50px;top:50px;width:120px;height:120px}
106
+ .hs path{fill:var(--card)}
107
+ .rp{position:absolute;left:1060px;top:180px;width:220px;height:220px;border-radius:50%;border:6px solid var(--accent)}
108
+ .pd{position:absolute;top:278px;width:24px;height:24px;border-radius:50%;background:var(--ink)}
109
+ </style>
110
+ </head>
111
+ <body>
112
+ <div id="root" data-composition-id="bank-banker-chat" data-start="0" data-width="1920" data-height="1080" data-duration="16">
113
+ <section id="s1" class="clip scene" data-start="0" data-duration="3.6">
114
+ <div class="cam" id="c1">
115
+ <i class="bgl" style="left:-100px;top:960px;transform:rotate(-14deg)"></i>
116
+ <i class="ring" id="ring1" style="left:316px;top:256px;width:448px;height:448px"></i>
117
+ <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>
118
+ <i class="on" id="on1" style="left:640px;top:580px;width:76px;height:76px"></i>
119
+ <div class="qb" id="q1" data-r="-2" style="left:600px;top:150px"><p id="q1t">מה עם הלוואה?</p></div>
120
+ <div class="qb" id="q2" data-r="1.5" style="left:730px;top:640px"><p id="q2t">אפשר לפרוס תשלום?</p></div>
121
+ <div class="qb" id="q3" data-r="-1" style="left:110px;top:740px"><p id="q3t">איך מגדילים מסגרת?</p></div>
122
+ <p class="t b" id="h1" style="right:140px;top:230px;font-size:110px">יש שאלה?</p>
123
+ <p class="lab r" id="h2" data-r="-2" style="right:140px;top:380px;font-size:84px">יש בנקאי בצ׳אט</p>
124
+ <p class="t" id="h3" style="right:140px;top:530px;font-size:42px">מתוך האפליקציה, בלי לחפש מספר</p>
125
+ <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>
126
+ </div>
127
+ </section>
128
+ <section id="s2" class="clip scene" data-start="3.6" data-duration="4.8">
129
+ <div class="cam" id="c2">
130
+ <i class="bgl" style="left:900px;top:20px;transform:rotate(26deg)"></i>
131
+ <div class="ph" id="ph"><div class="sc">
132
+ <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>
133
+ <p class="bb bi" id="m1" style="top:170px">היי, איך אפשר לעזור?</p>
134
+ <p class="bb bo" id="m2" style="top:260px">רוצה לבדוק פריסת תשלומים</p>
135
+ <div class="typ" id="typ"><i class="dt"></i><i class="dt"></i><i class="dt"></i></div>
136
+ <p class="bb bi" id="m3" style="top:350px">בשמחה! נקבע שיחה קצרה?</p>
137
+ <div class="qr" id="qa" style="right:20px"><p id="qat">היום 16:00</p></div>
138
+ <div class="qr" id="qb" style="right:262px"><i class="qs" id="qs"></i><p id="qbt">מחר 10:00</p></div>
139
+ <i class="tap" id="tap" style="left:160px;top:438px"></i>
140
+ <p class="bb bo" id="m4" style="top:552px">מחר ב־10:00 מתאים לי</p>
141
+ <div class="inp"><i class="snd"></i><i class="ln" style="right:30px;left:200px;top:24px"></i></div>
142
+ </div><i class="nt"></i></div>
143
+ <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>
144
+ <p class="t" id="h5" style="right:140px;top:335px;font-size:46px">ומקבלים מענה מבנקאי</p>
145
+ <p class="lab w" id="h6" data-r="-1.5" style="right:140px;top:460px;font-size:56px">בלי לחכות על הקו</p>
146
+ <p class="lab k" id="h7" data-r="1" style="right:200px;top:570px;font-size:56px">גם מחוץ לסניף</p>
147
+ <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>
148
+ </div>
149
+ </section>
150
+ <section id="s3" class="clip scene" data-start="8.4" data-duration="4">
151
+ <div class="cam" id="c3">
152
+ <div class="card" id="sc" style="left:200px;top:180px;width:820px;height:620px">
153
+ <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>
154
+ <p class="t b" id="k1" style="right:300px;top:70px;font-size:54px">שיחה עם הבנקאי</p>
155
+ <p class="t" id="k2" style="right:300px;top:150px;font-size:44px">יום שלישי · 10:00</p>
156
+ <p class="t gr" id="k3" style="right:300px;top:216px;font-size:34px">שיחת טלפון · 15 דקות</p>
157
+ <i class="ln" style="left:50px;right:50px;top:320px;height:6px;border-radius:3px"></i>
158
+ <p class="t gr" id="k4" style="right:50px;top:360px;font-size:34px">הבנקאי יתקשר אליכם למספר שלכם</p>
159
+ <div class="btn" id="bt1" style="right:50px;width:220px;background:var(--accent)"><p id="bt1t" style="color:var(--card)">אישור</p></div>
160
+ <div class="btn" id="bt2" style="right:300px;width:300px;border:4px solid var(--ink)"><p id="bt2t" style="color:var(--ink)">הוספה ליומן</p></div>
161
+ </div>
162
+ <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>
163
+ <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>
164
+ <p class="t b" id="h8" style="right:140px;top:210px;font-size:96px">קובעים שיחה</p>
165
+ <p class="lab r" id="h9" data-r="-2" style="right:140px;top:350px;font-size:72px">בשעה שנוחה לכם</p>
166
+ <p class="t" id="h10" style="right:140px;top:490px;font-size:44px">והבנקאי חוזר אליכם</p>
167
+ <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>
168
+ </div>
169
+ </section>
170
+ <section id="s4" class="clip scene" data-start="12.4" data-duration="3.6">
171
+ <div class="cam" id="c4">
172
+ <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>
173
+ <i class="pd" style="left:900px"></i><i class="pd" style="left:958px"></i><i class="pd" style="left:1016px"></i>
174
+ <i class="rp" id="rp1"></i><i class="rp" id="rp2"></i>
175
+ <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>
176
+ <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>
177
+ <p class="t gr c2" id="e3" style="top:620px;font-size:40px">בצ׳אט באפליקציה, בימים ובשעות הפעילות</p>
178
+ <div class="pill" id="cta" style="left:650px;top:730px;width:620px;height:106px"><p id="ctat" style="font-size:46px">פותחים צ׳אט באפליקציה</p></div>
179
+ <p class="fine c2" id="f4" style="top:880px;font-size:28px">השירות בכפוף לתנאי הבנק</p>
180
+ </div>
181
+ </section>
182
+ <div id="ov" class="clip ov" data-start="0" data-duration="16">
183
+ <div class="brand" id="brand"><i></i><p id="brt">המותג שלכם</p></div>
184
+ </div>
185
+ </div>
186
+ <script>
187
+ const tl=gsap.timeline({paused:true});
188
+ const S=[0,3.6,8.4,12.4,16],D=16;
189
+ const X="expo.out",P="power3.out",B="back.out(1.7)",E="power2.inOut";
190
+ function sIn(i){tl.fromTo("#c"+(i+1),{opacity:0},{opacity:1,duration:.35,ease:"power1.out"},S[i]);}
191
+ function sOut(i){tl.to("#c"+(i+1),{opacity:0,duration:.35,ease:"power1.in"},S[i+1]-.35);}
192
+ function LT(id,t){tl.fromTo("#"+id,{y:50,opacity:0},{y:0,opacity:1,duration:.5,ease:P},t);
193
+ tl.fromTo("#"+id+" p",{clipPath:"inset(-30% 0% -30% 100%)"},{clipPath:"inset(-30% 0% -30% 0%)",duration:.55,ease:"none",stagger:.5},t+.2);
194
+ tl.fromTo("#"+id+"k",{opacity:1},{opacity:0,duration:.05,repeat:5,yoyo:true,repeatDelay:.25,ease:"none"},t+.3);}
195
+ function HL(sel,t){tl.fromTo(sel,{scaleX:0},{scaleX:1,duration:.5,ease:P},t);}
196
+ function UP(sel,t,st){tl.fromTo(sel,{y:40,opacity:0},{y:0,opacity:1,duration:.6,ease:P,stagger:st||0},t);}
197
+ 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);}
198
+ 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);}
199
+ tl.fromTo("#brand",{opacity:0,y:-20},{opacity:1,y:0,duration:.5,ease:P},.2);
200
+
201
+ function POP(sel,t){tl.fromTo(sel,{scale:.6,opacity:0},{scale:1,opacity:1,duration:.4,ease:B},t);}
202
+ // s1 banker avatar + floating question bubbles
203
+ sIn(0);
204
+ tl.fromTo("#av1",{scale:.5,opacity:0},{scale:1,opacity:1,duration:.7,ease:B},S[0]+.1);
205
+ tl.fromTo("#ring1",{scale:.7,opacity:0},{scale:1,opacity:1,duration:.7,ease:X},S[0]+.3);
206
+ POP("#on1",S[0]+.7);
207
+ LAB(["#q1","#q2","#q3"],S[0]+.8,.25);
208
+ 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);
209
+ UP("#h1",S[0]+.15);LAB("#h2",S[0]+.4);UP("#h3",S[0]+.8);
210
+ LT("lt1",S[0]+1);
211
+ sOut(0);
212
+ // s2 phone chat: typing dots, quick-reply chips
213
+ sIn(1);
214
+ tl.fromTo("#ph",{y:110,opacity:0},{y:0,opacity:1,duration:.8,ease:X},S[1]+.05);
215
+ tl.fromTo("#m1",{scale:.6,opacity:0,transformOrigin:"100% 0%"},{scale:1,opacity:1,duration:.4,ease:B},S[1]+.5);
216
+ tl.fromTo("#m2",{scale:.6,opacity:0,transformOrigin:"0% 0%"},{scale:1,opacity:1,duration:.4,ease:B},S[1]+1);
217
+ tl.fromTo("#typ",{scale:.6,opacity:0,transformOrigin:"100% 0%"},{scale:1,opacity:1,duration:.3,ease:B},S[1]+1.45);
218
+ tl.fromTo("#typ .dt",{y:0},{y:-10,duration:.18,yoyo:true,repeat:5,ease:"sine.inOut",stagger:.1},S[1]+1.6);
219
+ tl.to("#typ",{opacity:0,duration:.15},S[1]+2.75);
220
+ tl.fromTo("#m3",{scale:.6,opacity:0,transformOrigin:"100% 0%"},{scale:1,opacity:1,duration:.4,ease:B},S[1]+2.8);
221
+ tl.fromTo(["#qa","#qb"],{y:30,opacity:0},{y:0,opacity:1,duration:.4,ease:P,stagger:.12},S[1]+3.2);
222
+ tl.fromTo("#tap",{scale:.3,opacity:0},{scale:1,opacity:1,duration:.25,ease:P},S[1]+3.65);
223
+ tl.to("#tap",{scale:1.5,opacity:0,duration:.3,ease:"power1.out"},S[1]+3.9);
224
+ tl.fromTo("#qs",{opacity:0},{opacity:1,duration:.2},S[1]+3.8);
225
+ tl.fromTo("#m4",{scale:.6,opacity:0,transformOrigin:"0% 0%"},{scale:1,opacity:1,duration:.4,ease:B},S[1]+4.05);
226
+ UP("#h4",S[1]+.15);HL("#hl2",S[1]+.65);UP("#h5",S[1]+.4);LAB(["#h6","#h7"],S[1]+.8,.2);
227
+ LT("lt2",S[1]+1.5);
228
+ sOut(1);
229
+ // s3 scheduled-call card + red check stamp
230
+ sIn(2);
231
+ tl.fromTo("#sc",{y:90,opacity:0,rotation:2},{y:0,opacity:1,rotation:-1,duration:.8,ease:X},S[2]+.05);
232
+ tl.fromTo(["#tp1","#tp2"],{opacity:0,scale:1.6},{opacity:1,scale:1,duration:.35,ease:P,stagger:.1},S[2]+.5);
233
+ tl.fromTo("#cal",{scale:0},{scale:1,duration:.45,ease:B},S[2]+.5);
234
+ UP(["#k1","#k2","#k3","#k4"],S[2]+.6,.1);
235
+ tl.fromTo(["#bt1","#bt2"],{y:24,opacity:0},{y:0,opacity:1,duration:.4,ease:P,stagger:.1},S[2]+1);
236
+ 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);
237
+ DRAW("#ckp",S[2]+1.9,.3);
238
+ tl.fromTo("#sc",{x:0},{keyframes:[{x:-8,duration:.05},{x:6,duration:.05},{x:0,duration:.05}],immediateRender:false},S[2]+1.95);
239
+ UP("#h8",S[2]+.2);LAB("#h9",S[2]+.45);UP("#h10",S[2]+.9);
240
+ LT("lt3",S[2]+1.3);
241
+ sOut(2);
242
+ // s4 avatar + ringing handset close
243
+ sIn(3);
244
+ tl.fromTo("#av4",{scale:.5,opacity:0},{scale:1,opacity:1,duration:.6,ease:B},S[3]+.1);
245
+ tl.fromTo("#hs",{scale:.5,opacity:0},{scale:1,opacity:1,duration:.6,ease:B},S[3]+.25);
246
+ tl.fromTo("#c4 .pd",{scale:0},{scale:1,duration:.3,ease:B,stagger:.12},S[3]+.5);
247
+ tl.fromTo(["#rp1","#rp2"],{scale:1,opacity:.8},{scale:1.6,opacity:0,duration:.8,ease:"power1.out",stagger:.35},S[3]+.7);
248
+ 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);
249
+ UP(["#e1","#e2"],S[3]+.5,.15);HL("#ul4",S[3]+1.1);UP("#e3",S[3]+1);
250
+ tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+1.3);
251
+ UP("#f4",S[3]+1.5);
252
+ tl.set({},{},D);
253
+ window.__timelines=window.__timelines||{};window.__timelines["bank-banker-chat"]=tl;
254
+ <\/script>
255
+ </body>
256
+ </html>
257
+ `;export{e as default};
package/app/assets/bank-business-loan-BFWWaq-c.js ADDED
@@ -0,0 +1,247 @@
1
+ var e=`<!doctype html>
2
+ <html lang="he" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=1920, height=1080">
6
+ <title>הלוואה לעסק קטן</title>
7
+ <script src="vendor/gsap.min.js"><\/script>
8
+ <style>
9
+ @font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
10
+ @font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
11
+ @font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
12
+ @font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
13
+ :root{--paper:#F4F4F2;--card:#FFFFFF;--ink:#141A26;--accent:#E3063B;--mute:#B4B8C0;--glow:#FF3B5C}
14
+ *{box-sizing:border-box;margin:0;padding:0}
15
+ html,body{width:1920px;height:1080px;overflow:hidden;background:var(--bg)}
16
+ body{font-family:"Heebo",Arial,sans-serif;-webkit-font-smoothing:antialiased}
17
+ #root{position:relative;width:1920px;height:1080px;overflow:hidden;background:var(--bg);color:var(--fg);direction:rtl;font-family:"Heebo",Arial,sans-serif}
18
+ .scene{position:absolute;inset:0;overflow:hidden}
19
+ .cam,.layer{position:absolute;inset:0}
20
+ .abs{position:absolute}
21
+ .m{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .08em}
22
+ .w{display:inline-block;white-space:nowrap}
23
+ #root{background:radial-gradient(ellipse at 72% 18%,var(--card),var(--paper) 62%)}
24
+ .t{position:absolute;white-space:nowrap;line-height:1.15;color:var(--ink)}
25
+ .b{font-weight:700}
26
+ .bgl{position:absolute;height:2px;width:1400px;background:color-mix(in srgb,var(--ink) 7%,transparent);transform-origin:0 0}
27
+ .ov{position:absolute;inset:0;pointer-events:none}
28
+ .ov>*{pointer-events:auto}
29
+ .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)}
30
+ .brand i{width:15.6px;height:15.6px;border-radius:3px;background:var(--accent);flex:none}
31
+ .brand p{font-size:26px;font-weight:700;color:var(--ink);white-space:nowrap}
32
+ .ltw{position:absolute;left:0;right:0;display:flex;justify-content:center}
33
+ .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)}
34
+ .lt .mk{width:16.8px;height:16.8px;border-radius:3px;background:var(--accent);flex:none}
35
+ .lt p{font-size:40px;white-space:nowrap;color:var(--ink);line-height:1.2}
36
+ .lt .em{font-weight:700;color:var(--accent)}
37
+ .lt .cu{width:12px;height:42px;background:var(--ink);flex:none}
38
+ .card{position:absolute;background:var(--card);border-radius:10px;box-shadow:0 20px 48px color-mix(in srgb,var(--ink) 16%,transparent)}
39
+ .tape{position:absolute;width:140px;height:36px;background:var(--accent);box-shadow:0 3px 8px color-mix(in srgb,var(--ink) 18%,transparent)}
40
+ .tape::after{content:"";position:absolute;left:44%;top:12px;width:12px;height:12px;background:color-mix(in srgb,var(--card) 85%,var(--accent))}
41
+ .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)}
42
+ .lab.r{background:var(--accent);color:var(--card)}
43
+ .lab.w{background:var(--card);color:var(--ink)}
44
+ .lab.k{background:var(--ink);color:var(--card)}
45
+ .hw{position:absolute;white-space:nowrap}
46
+ .hw p{position:relative;line-height:1.15;color:var(--ink)}
47
+ .hl{position:absolute;left:-12px;right:-12px;bottom:10%;height:34%;background:color-mix(in srgb,var(--accent) 26%,transparent);transform-origin:100% 50%}
48
+ .ul{position:absolute;left:-6px;right:-6px;bottom:-6px;height:7px;border-radius:4px;background:var(--accent);transform-origin:100% 50%}
49
+ .cx{position:absolute;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:26px;white-space:nowrap}
50
+ .cx .hw{position:relative}
51
+ .cx>p{color:var(--ink);line-height:1.15}
52
+ .ln{position:absolute;height:14px;border-radius:7px;background:color-mix(in srgb,var(--mute) 50%,var(--card))}
53
+ .win{position:absolute;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 20px 48px color-mix(in srgb,var(--ink) 16%,transparent)}
54
+ .win>.wb{position:absolute;left:0;right:0;top:0;height:44px;background:var(--ink)}
55
+ .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)}
56
+ .pill{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--accent)}
57
+ .pill p{color:var(--card);font-weight:700;white-space:nowrap}
58
+ .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)}
59
+ .chip i{width:14px;height:14px;border-radius:3px;background:var(--accent);flex:none}
60
+ .chip p{font-weight:700;white-space:nowrap;color:var(--ink)}
61
+ .fine{position:absolute;white-space:nowrap;color:color-mix(in srgb,var(--ink) 55%,var(--paper))}
62
+ .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%)}
63
+ .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)}
64
+ .fig{position:absolute}
65
+ .fig .h{position:absolute;border-radius:50%}
66
+ .fig .bd{position:absolute;border-radius:48% 48% 14px 14px / 38% 38% 14px 14px}
67
+ .ck{fill:none;stroke:var(--card);stroke-linecap:round;stroke-linejoin:round}
68
+
69
+ .gr{color:color-mix(in srgb,var(--ink) 58%,var(--card))}
70
+ .c2{left:0;right:0;text-align:center}
71
+ .shf{position:absolute;left:170px;top:300px;width:820px;height:16px;border-radius:8px;background:color-mix(in srgb,var(--mute) 70%,var(--card))}
72
+ .jar{position:absolute;bottom:16px;width:70px;border-radius:14px 14px 10px 10px;background:color-mix(in srgb,var(--mute) 55%,var(--card))}
73
+ .jar.a{background:color-mix(in srgb,var(--accent) 70%,var(--card))}
74
+ .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)}
75
+ .ctr::before{content:"";position:absolute;left:-20px;right:-20px;top:-24px;height:28px;border-radius:8px;background:var(--ink)}
76
+ .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))}
77
+ .reg{position:absolute;left:660px;top:476px;width:200px;height:100px;border-radius:14px 14px 4px 4px;background:var(--ink)}
78
+ .reg::before{content:"";position:absolute;left:24px;top:20px;width:100px;height:34px;border-radius:6px;background:var(--accent)}
79
+ .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))}
80
+ .box{position:absolute;width:150px;height:120px;border-radius:6px;background:color-mix(in srgb,var(--mute) 60%,var(--card))}
81
+ .box::after{content:"";position:absolute;left:60px;top:0;width:30px;height:120px;background:color-mix(in srgb,var(--accent) 55%,var(--card))}
82
+ .apr{position:absolute;left:56px;top:136px;width:108px;height:160px;border-radius:14px 14px 6px 6px;background:var(--accent)}
83
+ .apr::before,.apr::after{content:"";position:absolute;top:-36px;width:9px;height:40px;border-radius:4px;background:var(--accent)}
84
+ .apr::before{left:14px}.apr::after{right:14px}
85
+ .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))}
86
+ .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}
87
+ .tbub p{font-size:70px;font-weight:700;color:var(--accent);white-space:nowrap}
88
+ .td{position:absolute;border-radius:50%;background:var(--card);box-shadow:0 8px 18px color-mix(in srgb,var(--ink) 12%,transparent)}
89
+ .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)}
90
+ .pap::before{content:"";position:absolute;right:110px;top:0;bottom:0;width:4px;background:color-mix(in srgb,var(--accent) 55%,var(--card))}
91
+ .nr{position:absolute;left:70px;right:150px;height:80px}
92
+ .cb{position:absolute;right:30px;top:14px;width:52px;height:52px;border-radius:10px;border:5px solid var(--ink)}
93
+ .ckv{position:absolute;right:26px;top:4px;width:64px;height:64px;overflow:visible}
94
+ .ckp{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
95
+ .sum{position:absolute;left:70px;right:150px;top:500px;height:6px;border-radius:3px;background:var(--ink)}
96
+ .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}
97
+ .fil{position:absolute;inset:0;background:var(--accent);transform-origin:100% 50%}
98
+ .tk{position:absolute;top:596px;width:4px;height:22px;border-radius:2px;background:var(--mute)}
99
+ .tk.big{height:34px;background:var(--ink)}
100
+ .tkl{top:640px;width:240px;text-align:center;font-size:30px}
101
+ .thm{position:absolute;left:1660px;top:571px;width:0;height:0}
102
+ .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)}
103
+ .tip{position:absolute;left:-170px;top:-200px;width:340px;height:124px;border-radius:22px;background:var(--ink)}
104
+ .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%)}
105
+ .rol{position:absolute;inset:0;overflow:hidden;border-radius:22px}
106
+ .rc{position:absolute;left:0;right:0;top:0}
107
+ .rc p{height:124px;line-height:124px;text-align:center;font-size:64px;font-weight:700;color:var(--card);white-space:nowrap}
108
+ .stw{position:absolute;left:0;right:0;top:730px;display:flex;justify-content:center;gap:40px}
109
+ .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)}
110
+ .stc p{white-space:nowrap;line-height:1.2}
111
+ .tb{position:absolute;left:300px;top:470px;width:1320px;height:12px;border-radius:6px;background:color-mix(in srgb,var(--mute) 50%,var(--card))}
112
+ .tpg{position:absolute;inset:0;border-radius:6px;background:var(--accent);transform-origin:100% 50%}
113
+ .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}
114
+ .nf{position:absolute;inset:-8px;border-radius:50%;background:var(--accent)}
115
+ .nd svg{position:absolute;left:17px;top:17px;width:60px;height:60px;overflow:visible}
116
+ .ndk{fill:none;stroke:var(--card);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
117
+ .c3{top:570px;width:360px;text-align:center;font-size:40px}
118
+ </style>
119
+ </head>
120
+ <body>
121
+ <div id="root" data-composition-id="bank-business-loan" data-start="0" data-width="1920" data-height="1080" data-duration="16.6">
122
+ <section id="s1" class="clip scene" data-start="0" data-duration="4">
123
+ <div class="cam" id="c1">
124
+ <i class="bgl" style="left:-100px;top:1000px;transform:rotate(-12deg)"></i>
125
+ <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>
126
+ <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>
127
+ <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>
128
+ <div class="tbub" id="tbub"><p id="tbt">₪?</p></div>
129
+ <div class="ctr" id="ctr"></div>
130
+ <i class="reg" id="reg"></i>
131
+ <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>
132
+ <p class="t b" id="h1" style="right:140px;top:220px;font-size:104px">העסק שלכם</p>
133
+ <p class="lab r" id="h2" data-r="-2" style="right:140px;top:370px;font-size:84px">צריך דחיפה?</p>
134
+ <p class="t" id="h3" style="right:140px;top:520px;font-size:42px">ציוד, מלאי, שיפוץ, הכול עולה כסף</p>
135
+ <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>
136
+ </div>
137
+ </section>
138
+ <section id="s2" class="clip scene" data-start="4" data-duration="4">
139
+ <div class="cam" id="c2">
140
+ <i class="bgl" style="left:860px;top:30px;transform:rotate(28deg)"></i>
141
+ <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>
142
+ <i class="sum" id="sum"></i><p class="t b" id="st" style="right:270px;top:530px;font-size:52px">סה״כ</p>
143
+ <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>
144
+ <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>
145
+ <p class="t b" id="h4" style="right:140px;top:220px;font-size:100px">רושמים</p>
146
+ <p class="lab k" id="h5" data-r="1.5" style="right:140px;top:370px;font-size:76px">מה באמת צריך</p>
147
+ <p class="t" id="h6" style="right:140px;top:520px;font-size:42px">ורק אז בודקים סכום</p>
148
+ <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>
149
+ </div>
150
+ </section>
151
+ <section id="s3" class="clip scene" data-start="8" data-duration="4.2">
152
+ <div class="cam" id="c3">
153
+ <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>
154
+ <p class="t" id="h8" style="right:140px;top:245px;font-size:44px">שמתאים לתוכנית של העסק</p>
155
+ <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>
156
+ <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>
157
+ <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>
158
+ <p class="fine c2" id="f3" style="top:850px;font-size:28px">להמחשה בלבד · הסכום וההחזר בכפוף לאישור אשראי</p>
159
+ <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>
160
+ </div>
161
+ </section>
162
+ <section id="s4" class="clip scene" data-start="12.2" data-duration="4.4">
163
+ <div class="cam" id="c4">
164
+ <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>
165
+ <div class="tb"><i class="tpg" id="tpg"></i></div>
166
+ <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>
167
+ <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>
168
+ <div class="pill" id="cta" style="left:640px;top:730px;width:640px;height:108px"><p id="ctat" style="font-size:46px">בודקים זכאות באפליקציה</p></div>
169
+ <p class="fine c2" id="f4" style="top:880px;font-size:30px">בכפוף לאישור אשראי ולתנאי הבנק · להמחשה בלבד</p>
170
+ </div>
171
+ </section>
172
+ <div id="ov" class="clip ov" data-start="0" data-duration="16.6">
173
+ <div class="brand" id="brand"><i></i><p id="brt">המותג שלכם</p></div>
174
+ </div>
175
+ </div>
176
+ <script>
177
+ const tl=gsap.timeline({paused:true});
178
+ const S=[0,4,8,12.2,16.6],D=16.6;
179
+ const X="expo.out",P="power3.out",B="back.out(1.7)",E="power2.inOut";
180
+ function sIn(i){tl.fromTo("#c"+(i+1),{opacity:0},{opacity:1,duration:.35,ease:"power1.out"},S[i]);}
181
+ function sOut(i){tl.to("#c"+(i+1),{opacity:0,duration:.35,ease:"power1.in"},S[i+1]-.35);}
182
+ function LT(id,t){tl.fromTo("#"+id,{y:50,opacity:0},{y:0,opacity:1,duration:.5,ease:P},t);
183
+ tl.fromTo("#"+id+" p",{clipPath:"inset(-30% 0% -30% 100%)"},{clipPath:"inset(-30% 0% -30% 0%)",duration:.55,ease:"none",stagger:.5},t+.2);
184
+ tl.fromTo("#"+id+"k",{opacity:1},{opacity:0,duration:.05,repeat:5,yoyo:true,repeatDelay:.25,ease:"none"},t+.3);}
185
+ function HL(sel,t){tl.fromTo(sel,{scaleX:0},{scaleX:1,duration:.5,ease:P},t);}
186
+ function UP(sel,t,st){tl.fromTo(sel,{y:40,opacity:0},{y:0,opacity:1,duration:.6,ease:P,stagger:st||0},t);}
187
+ 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);}
188
+ 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);}
189
+ tl.fromTo("#brand",{opacity:0,y:-20},{opacity:1,y:0,duration:.5,ease:P},.2);
190
+
191
+ // s1 shop owner behind the counter
192
+ sIn(0);
193
+ tl.fromTo("#shf",{opacity:0,y:-30},{opacity:1,y:0,duration:.6,ease:P},S[0]+.1);
194
+ tl.fromTo("#own",{y:120},{y:0,duration:.8,ease:X},S[0]+.15);
195
+ tl.fromTo("#ctr",{y:60,opacity:0},{y:0,opacity:1,duration:.7,ease:X},S[0]+.05);
196
+ tl.fromTo(["#reg","#bx1","#bx2"],{y:-60,opacity:0},{y:0,opacity:1,duration:.5,ease:B,stagger:.12},S[0]+.5);
197
+ tl.fromTo(["#td1","#td2","#tbub"],{scale:0},{scale:1,duration:.4,ease:B,stagger:.15},S[0]+1.2);
198
+ tl.fromTo("#tbub",{y:0},{y:-10,duration:.6,yoyo:true,repeat:1,ease:"sine.inOut",immediateRender:false},S[0]+1.9);
199
+ UP("#h1",S[0]+.2);LAB("#h2",S[0]+.5);UP("#h3",S[0]+.9);
200
+ LT("lt1",S[0]+1.2);
201
+ sOut(0);
202
+ // s2 needs list on taped ruled paper
203
+ sIn(1);
204
+ tl.fromTo("#pap",{y:90,opacity:0,rotation:2},{y:0,opacity:1,rotation:-1.5,duration:.8,ease:X},S[1]+.05);
205
+ tl.fromTo(["#tp1","#tp2"],{opacity:0,scale:1.6},{opacity:1,scale:1,duration:.35,ease:P,stagger:.1},S[1]+.5);
206
+ tl.fromTo("#pap .nr",{x:40,opacity:0},{x:0,opacity:1,duration:.4,ease:P,stagger:.3},S[1]+.5);
207
+ DRAW("#pap .ckp",S[1]+.8,.3,.3);
208
+ tl.fromTo("#sum",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.4,ease:P},S[1]+1.6);
209
+ UP(["#st","#sv"],S[1]+1.8,.1);HL("#ul2",S[1]+2.2);
210
+ UP("#h4",S[1]+.2);LAB("#h5",S[1]+.5);UP("#h6",S[1]+.9);
211
+ LT("lt2",S[1]+1.2);
212
+ sOut(1);
213
+ // s3 ruler slider with rolling amount tooltip (illustrative)
214
+ sIn(2);
215
+ UP("#h7",S[2]+.1);HL("#hl3",S[2]+.6);UP("#h8",S[2]+.3);
216
+ tl.fromTo("#c3 .tk",{scaleY:0},{scaleY:1,duration:.3,ease:P,stagger:.03},S[2]+.3);
217
+ tl.fromTo("#c3 .tkl",{opacity:0},{opacity:1,duration:.3},S[2]+.5);
218
+ tl.fromTo("#thm",{scale:0},{scale:1,duration:.4,ease:B},S[2]+.4);
219
+ tl.fromTo("#fil",{scaleX:0},{scaleX:0.1111,duration:.6,ease:E},S[2]+.9);
220
+ tl.fromTo("#thm",{x:0},{x:-155.6,duration:.6,ease:E},S[2]+.9);
221
+ tl.fromTo("#rc",{y:0},{y:-124,duration:.3,ease:P},S[2]+1.2);
222
+ tl.to("#fil",{scaleX:0.2778,duration:.7,ease:E},S[2]+1.65);
223
+ tl.to("#thm",{x:-388.9,duration:.7,ease:E},S[2]+1.65);
224
+ tl.to("#rc",{y:-248,duration:.3,ease:P},S[2]+2.05);
225
+ tl.fromTo("#stw .stc",{y:40,opacity:0},{y:0,opacity:1,duration:.5,ease:P,stagger:.15},S[2]+2.2);
226
+ UP("#f3",S[2]+2.5);
227
+ LT("lt3",S[2]+1);
228
+ sOut(2);
229
+ // s4 approval timeline + CTA
230
+ sIn(3);
231
+ UP(["#e1","#e2"],S[3]+.1,.15);HL("#hl4",S[3]+.6);
232
+ tl.fromTo("#c4 .nd",{scale:0},{scale:1,duration:.4,ease:B,stagger:.1},S[3]+.2);
233
+ tl.fromTo("#c4 .c3",{y:20,opacity:0},{y:0,opacity:1,duration:.4,ease:P,stagger:.1},S[3]+.35);
234
+ tl.fromTo("#c4 .nf",{scale:0},{scale:1,duration:.3,ease:B,stagger:.7},S[3]+.7);
235
+ DRAW("#c4 .ndk",S[3]+.85,.25,.7);
236
+ tl.fromTo("#tpg",{scaleX:0},{scaleX:1,duration:2.1,ease:"none"},S[3]+.7);
237
+ tl.fromTo("#mini",{opacity:0},{opacity:1,duration:.2},S[3]+.5);
238
+ tl.fromTo("#mini",{x:0},{x:-1320,duration:2.1,ease:"none"},S[3]+.7);
239
+ tl.fromTo("#mini",{y:0},{y:-14,duration:.15,yoyo:true,repeat:13,ease:"sine.inOut",immediateRender:false},S[3]+.7);
240
+ tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.5,ease:B},S[3]+2.9);
241
+ UP("#f4",S[3]+3.1);
242
+ tl.set({},{},D);
243
+ window.__timelines=window.__timelines||{};window.__timelines["bank-business-loan"]=tl;
244
+ <\/script>
245
+ </body>
246
+ </html>
247
+ `;export{e as default};