motiondesk-studio 0.0.0-stage → 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.
- package/LICENSE +8 -0
- package/README.md +58 -2
- package/THIRD_PARTY_NOTICES.md +13 -0
- package/app/assets/ai-assistant-DOEK1wrr.js +138 -0
- package/app/assets/annual-report-C59pnbh2.js +147 -0
- package/app/assets/app-tour-B8525Qt1.js +164 -0
- package/app/assets/apps-DwnIwigQ.js +1 -0
- package/app/assets/arrows-_CCvumhN.js +1 -0
- package/app/assets/auto-CJsCPj1R.js +1 -0
- package/app/assets/badges-BPgMBVy0.js +1 -0
- package/app/assets/balloon-party-BDWzrF-Z.js +160 -0
- package/app/assets/bank-banker-chat-B_iF_sFM.js +257 -0
- package/app/assets/bank-business-loan-BFWWaq-c.js +247 -0
- package/app/assets/bank-car-choice-DLE2OVcc.js +229 -0
- package/app/assets/bank-card-freeze-J1JfFmLr.js +281 -0
- package/app/assets/bank-code-never-CQDlq8GN.js +234 -0
- package/app/assets/bank-dark-interlude-DhcdkPP1.js +190 -0
- package/app/assets/bank-digital-JTuIxFOJ.js +1 -0
- package/app/assets/bank-dinner-split-Be1e7DOQ.js +246 -0
- package/app/assets/bank-fast-pay-DoW0ClI6.js +230 -0
- package/app/assets/bank-first-salary-D9WxYgJf.js +212 -0
- package/app/assets/bank-fomo-stop-uEzdT0HP.js +230 -0
- package/app/assets/bank-forex-trip-BHW39y4z.js +205 -0
- package/app/assets/bank-growth-bars-DirAz4xB.js +203 -0
- package/app/assets/bank-holiday-budget-J41dLHwR.js +224 -0
- package/app/assets/bank-invest-B--KJb5m.js +1 -0
- package/app/assets/bank-life-C-4wZKyu.js +1 -0
- package/app/assets/bank-mortgage-papers-DMtx0XsI.js +214 -0
- package/app/assets/bank-new-app-look-CKmeKBU6.js +228 -0
- package/app/assets/bank-one-click-loan-BVhe1AGv.js +223 -0
- package/app/assets/bank-paper-explainer-CD8mPtnJ.js +191 -0
- package/app/assets/bank-pension-compare-BArvoVu7.js +243 -0
- package/app/assets/bank-remote-access-Df8UNpc7.js +257 -0
- package/app/assets/bank-safety-CBkr-iwJ.js +1 -0
- package/app/assets/bank-savings-pocket-B53nO1Z_.js +220 -0
- package/app/assets/bank-share-explained-DCp805RD.js +228 -0
- package/app/assets/bank-small-business-Bc7Ad4GW.js +217 -0
- package/app/assets/bank-student-routine-CnPPhtoV.js +224 -0
- package/app/assets/bank-suspicious-sms-CwOrdi3d.js +229 -0
- package/app/assets/bank-wedding-budget-CDM2kO0R.js +230 -0
- package/app/assets/bank-young-BwV6418l.js +1 -0
- package/app/assets/beauty-DgeCsQdf.js +1 -0
- package/app/assets/boarding-pass-i17EemsZ.js +192 -0
- package/app/assets/business-BQslCr0i.js +1 -0
- package/app/assets/business-DfyVziqj.js +1 -0
- package/app/assets/catalog-CDdvrdnk.js +1 -0
- package/app/assets/celebration-COCZTKjl.js +1 -0
- package/app/assets/celebrations-CkfTGLEK.js +1 -0
- package/app/assets/chalk-menu-CQSqwxNP.js +158 -0
- package/app/assets/claim-steps-BNFeoYYZ.js +180 -0
- package/app/assets/clinic-booking-CvQEpBWn.js +178 -0
- package/app/assets/community-BV13F-Wp.js +1 -0
- package/app/assets/concert-poster-iUOM-elw.js +189 -0
- package/app/assets/course-syllabus-CnM_03XP.js +164 -0
- package/app/assets/culture-DpL14_5r.js +1 -0
- package/app/assets/cyber-shield-B_6oatye.js +192 -0
- package/app/assets/data-DgES5FIF.js +1 -0
- package/app/assets/dev-hiring-code-Bg00S1Iz.js +138 -0
- package/app/assets/devices-D1500q8F.js +1 -0
- package/app/assets/donation-meter-C3wuRmFA.js +164 -0
- package/app/assets/editorial-mag-DsTVzQMx.js +180 -0
- package/app/assets/education-CGTOg3_0.js +1 -0
- package/app/assets/ev-charge-KaMIQd_s.js +218 -0
- package/app/assets/event-announce-cLmuvt45.js +147 -0
- package/app/assets/events-kZ6HshfK.js +1 -0
- package/app/assets/family-De56hVSo.js +1 -0
- package/app/assets/fashion-DbGAD96W.js +1 -0
- package/app/assets/finance-BUdlKAud.js +1 -0
- package/app/assets/finance-growth-CYgFE0RC.js +140 -0
- package/app/assets/fitness-rings-streak-Cp7n4zq_.js +141 -0
- package/app/assets/flash-sale-Tc0Jw34H.js +143 -0
- package/app/assets/flipclock-countdown-BkrU9ZhF.js +153 -0
- package/app/assets/floorplan-linedraw-B4ZwEDv3.js +192 -0
- package/app/assets/food-CiEyQAd1.js +1 -0
- package/app/assets/food-PijmcKM-.js +1 -0
- package/app/assets/gaming-DnzPj6Uv.js +1 -0
- package/app/assets/glass-product-CsUqplIf.js +139 -0
- package/app/assets/glossy-cosmetics-DBb-YonD.js +203 -0
- package/app/assets/gold-couture-e6c5nsVY.js +190 -0
- package/app/assets/gradient-blobs-Daiu9eFf.js +139 -0
- package/app/assets/graduation-day-vdz-kGI1.js +134 -0
- package/app/assets/headline-news-ticker-GgZ_nRXK.js +181 -0
- package/app/assets/health-CbyTqvSM.js +1 -0
- package/app/assets/health-DMeKWmDa.js +1 -0
- package/app/assets/hiring-team-Bia3GQaH.js +137 -0
- package/app/assets/holiday-greeting-B7TFl0_5.js +144 -0
- package/app/assets/holidays-BmXfhKdf.js +1 -0
- package/app/assets/hr-2i-f-S-M.js +1 -0
- package/app/assets/hyperframes-BM7eWgx2.js +1 -0
- package/app/assets/index-BRse9TUl.js +290 -0
- package/app/assets/index-BlSoi5FK.css +1 -0
- package/app/assets/index-b2-CMdBrCiU.js +1 -0
- package/app/assets/index-b3-egAjkT9z.js +1 -0
- package/app/assets/index-b4-Cnj_xde0.js +1 -0
- package/app/assets/index-b5-CoZgwX8-.js +1 -0
- package/app/assets/index-b6-Cm4vot4j.js +1 -0
- package/app/assets/index-b7-BLEay8YC.js +1 -0
- package/app/assets/index-b8-Jbh-zOZB.js +1 -0
- package/app/assets/index-b9-caOB8GyX.js +1 -0
- package/app/assets/iso-product-3d-DQT1lHDq.js +229 -0
- package/app/assets/itinerary-map-pins-BTX0ZebL.js +201 -0
- package/app/assets/key-handover-DuIj4oKe.js +171 -0
- package/app/assets/kids-BNwXKe4O.js +1 -0
- package/app/assets/kinetic-launch-D2rSnewM.js +161 -0
- package/app/assets/launch-DqkMfeFI.js +1 -0
- package/app/assets/legal-Caoeh9dp.js +1 -0
- package/app/assets/legal-trust-T01BmIDB.js +186 -0
- package/app/assets/level-up-CBXf6nj2.js +205 -0
- package/app/assets/logo-sting-Uf0nckUQ.js +106 -0
- package/app/assets/manifesto-quote-DCIONyzh.js +120 -0
- package/app/assets/match-day-p25bzqbq.js +146 -0
- package/app/assets/match-score-CSZ4Tx4B.js +210 -0
- package/app/assets/music-hbnVS8dK.js +1 -0
- package/app/assets/nature-Bj99iNsv.js +1 -0
- package/app/assets/neighborhood-map-BpbZiy-v.js +158 -0
- package/app/assets/neon-grid-Bo0xfsL6.js +159 -0
- package/app/assets/nonprofit-DK7XI33A.js +1 -0
- package/app/assets/objects-DD8bqyWR.js +1 -0
- package/app/assets/org-chart-hiring-tGX1UpiJ.js +161 -0
- package/app/assets/paper-collage-CK-XODvZ.js +181 -0
- package/app/assets/paw-adopt-D5hKgsaL.js +173 -0
- package/app/assets/people-l3GsDfAr.js +1 -0
- package/app/assets/pets-Dp8EeTjS.js +1 -0
- package/app/assets/playful-blocks-BGXW4vra.js +162 -0
- package/app/assets/podcast-waveform-promo-D-h_ydpJ.js +182 -0
- package/app/assets/premium-Cy680sWT.js +1 -0
- package/app/assets/price-grid-DbYGPlJt.js +176 -0
- package/app/assets/quote-carousel-bold-D5fpKgSS.js +143 -0
- package/app/assets/realestate-BXW-rsfP.js +1 -0
- package/app/assets/recipe-ingredients-B_bSw3x_.js +162 -0
- package/app/assets/retail-D-XWCWed.js +1 -0
- package/app/assets/retro-80s-CCZc9S6x.js +141 -0
- package/app/assets/roadmap-timeline-BpbNdfCr.js +164 -0
- package/app/assets/saas-dashboard-s-2gR3AN.js +195 -0
- package/app/assets/sale-wheel-24h-CsiOja2Z.js +153 -0
- package/app/assets/save-the-date-C6O8fH8f.js +141 -0
- package/app/assets/seasons-BFYc_klb.js +1 -0
- package/app/assets/services-DRPQcCXX.js +1 -0
- package/app/assets/shapes-AVMwC-FR.js +1 -0
- package/app/assets/social-CNpE0GKG.js +1 -0
- package/app/assets/split-wipe-before-after-Lg-NbF0V.js +198 -0
- package/app/assets/sports-DyBfpPm5.js +1 -0
- package/app/assets/stats-dashboard-CxxFtNfj.js +149 -0
- package/app/assets/stickers-J4NDCW2L.js +1 -0
- package/app/assets/stock-portfolio-DFpeHEjJ.js +174 -0
- package/app/assets/swiss-grid-jfcgySaJ.js +153 -0
- package/app/assets/tech-BaRjeFZ0.js +1 -0
- package/app/assets/tech-D-xc9pRv.js +1 -0
- package/app/assets/transport-Bolufhfq.js +1 -0
- package/app/assets/travel-DoqS5vPB.js +1 -0
- package/app/assets/travel-route-DUPXi7Qa.js +169 -0
- package/app/assets/tutorial-steps-Ep2JeqXu.js +160 -0
- package/app/assets/wallet-card-transactions-DtI9Usn9.js +188 -0
- package/app/assets/wedding-invite-BhgqMwO7.js +142 -0
- package/app/catalog/bank-previews/01-car-choice.webp +0 -0
- package/app/catalog/bank-previews/02-holiday-budget.webp +0 -0
- package/app/catalog/bank-previews/03-one-click.webp +0 -0
- package/app/catalog/bank-previews/04-career-course.webp +0 -0
- package/app/catalog/bank-previews/05-home-refresh.webp +0 -0
- package/app/catalog/bank-previews/06-summer-plans.webp +0 -0
- package/app/catalog/bank-previews/07-car-upgrade.webp +0 -0
- package/app/catalog/bank-previews/08-wedding-plan.webp +0 -0
- package/app/catalog/bank-previews/09-share-intro.webp +0 -0
- package/app/catalog/bank-previews/10-suspicious-message.webp +0 -0
- package/app/catalog/bank-previews/11-student-routine.webp +0 -0
- package/app/catalog/bank-previews/12-investing-first-step.webp +0 -0
- package/app/catalog/bank-previews/13-fomo.webp +0 -0
- package/app/catalog/bank-previews/14-market-timing.webp +0 -0
- package/app/catalog/bank-previews/15-investing-for-all.webp +0 -0
- package/app/catalog/bank-previews/16-two-paths.webp +0 -0
- package/app/catalog/bank-previews/17-small-business.webp +0 -0
- package/app/catalog/bank-previews/18-travel-forex.webp +0 -0
- package/app/catalog/bank-previews/19-mortgage-questions.webp +0 -0
- package/app/catalog/bank-previews/20-market-app.webp +0 -0
- package/app/catalog/enhanced-v2/01-revenue-quarter/config.motiondesk-config.json +54 -0
- package/app/catalog/enhanced-v2/01-revenue-quarter/poster.jpg +0 -0
- package/app/catalog/enhanced-v2/01-revenue-quarter/preview.mp4 +0 -0
- package/app/catalog/enhanced-v2/01-revenue-quarter/project.motiondesk.json +5127 -0
- package/app/catalog/enhanced-v2/02-daily-workout/config.motiondesk-config.json +54 -0
- package/app/catalog/enhanced-v2/02-daily-workout/poster.jpg +0 -0
- package/app/catalog/enhanced-v2/02-daily-workout/preview.mp4 +0 -0
- package/app/catalog/enhanced-v2/02-daily-workout/project.motiondesk.json +5747 -0
- package/app/catalog/enhanced-v2/03-italy-trip/config.motiondesk-config.json +44 -0
- package/app/catalog/enhanced-v2/03-italy-trip/poster.jpg +0 -0
- package/app/catalog/enhanced-v2/03-italy-trip/preview.mp4 +0 -0
- package/app/catalog/enhanced-v2/03-italy-trip/project.motiondesk.json +5139 -0
- package/app/catalog/enhanced-v2/04-smart-savings/config.motiondesk-config.json +41 -0
- package/app/catalog/enhanced-v2/04-smart-savings/poster.jpg +0 -0
- package/app/catalog/enhanced-v2/04-smart-savings/preview.mp4 +0 -0
- package/app/catalog/enhanced-v2/04-smart-savings/project.motiondesk.json +5322 -0
- package/app/catalog/enhanced-v2/05-weekly-challenge/config.motiondesk-config.json +45 -0
- package/app/catalog/enhanced-v2/05-weekly-challenge/poster.jpg +0 -0
- package/app/catalog/enhanced-v2/05-weekly-challenge/preview.mp4 +0 -0
- package/app/catalog/enhanced-v2/05-weekly-challenge/project.motiondesk.json +5442 -0
- package/app/catalog/enhanced-v2/06-flash-sale/config.motiondesk-config.json +42 -0
- package/app/catalog/enhanced-v2/06-flash-sale/poster.jpg +0 -0
- package/app/catalog/enhanced-v2/06-flash-sale/preview.mp4 +0 -0
- package/app/catalog/enhanced-v2/06-flash-sale/project.motiondesk.json +5616 -0
- package/app/catalog/enhanced-v2/07-flight-savings/config.motiondesk-config.json +43 -0
- package/app/catalog/enhanced-v2/07-flight-savings/poster.jpg +0 -0
- package/app/catalog/enhanced-v2/07-flight-savings/preview.mp4 +0 -0
- package/app/catalog/enhanced-v2/07-flight-savings/project.motiondesk.json +6319 -0
- package/app/catalog/enhanced-v2/08-team-dashboard/config.motiondesk-config.json +52 -0
- package/app/catalog/enhanced-v2/08-team-dashboard/poster.jpg +0 -0
- package/app/catalog/enhanced-v2/08-team-dashboard/preview.mp4 +0 -0
- package/app/catalog/enhanced-v2/08-team-dashboard/project.motiondesk.json +5327 -0
- package/app/catalog/showcase-v3/11-flow-finance/poster.jpg +0 -0
- package/app/catalog/showcase-v3/11-flow-finance/preview.mp4 +0 -0
- package/app/catalog/showcase-v3/11-flow-finance/project.motiondesk.json +5690 -0
- package/app/catalog/showcase-v3/12-pulse-training/poster.jpg +0 -0
- package/app/catalog/showcase-v3/12-pulse-training/preview.mp4 +0 -0
- package/app/catalog/showcase-v3/12-pulse-training/project.motiondesk.json +3643 -0
- package/app/catalog/showcase-v3/13-orbit-travel/poster.jpg +0 -0
- package/app/catalog/showcase-v3/13-orbit-travel/preview.mp4 +0 -0
- package/app/catalog/showcase-v3/13-orbit-travel/project.motiondesk.json +3939 -0
- package/app/catalog/showcase-v3/14-nova-product/config.motiondesk-config.json +163 -0
- package/app/catalog/showcase-v3/14-nova-product/poster.jpg +0 -0
- package/app/catalog/showcase-v3/14-nova-product/preview.mp4 +0 -0
- package/app/catalog/showcase-v3/14-nova-product/project.motiondesk.json +11196 -0
- package/app/catalog/showcase-v3/15-tempo-motion/config.motiondesk-config.json +122 -0
- package/app/catalog/showcase-v3/15-tempo-motion/poster.jpg +0 -0
- package/app/catalog/showcase-v3/15-tempo-motion/preview.mp4 +0 -0
- package/app/catalog/showcase-v3/15-tempo-motion/project.motiondesk.json +7424 -0
- package/app/catalog/showcase-v3/16-atlas-journey/config.motiondesk-config.json +132 -0
- package/app/catalog/showcase-v3/16-atlas-journey/poster.jpg +0 -0
- package/app/catalog/showcase-v3/16-atlas-journey/preview.mp4 +0 -0
- package/app/catalog/showcase-v3/16-atlas-journey/project.motiondesk.json +9257 -0
- package/app/catalog/showcase-v3/17-revenue-quarter/config.motiondesk-config.json +151 -0
- package/app/catalog/showcase-v3/17-revenue-quarter/poster.jpg +0 -0
- package/app/catalog/showcase-v3/17-revenue-quarter/preview.mp4 +0 -0
- package/app/catalog/showcase-v3/17-revenue-quarter/project.motiondesk.json +10473 -0
- package/app/catalog/showcase-v3/18-daily-workout/config.motiondesk-config.json +139 -0
- package/app/catalog/showcase-v3/18-daily-workout/poster.jpg +0 -0
- package/app/catalog/showcase-v3/18-daily-workout/preview.mp4 +0 -0
- package/app/catalog/showcase-v3/18-daily-workout/project.motiondesk.json +8656 -0
- package/app/catalog/showcase-v3/19-italy-trip/config.motiondesk-config.json +132 -0
- package/app/catalog/showcase-v3/19-italy-trip/poster.jpg +0 -0
- package/app/catalog/showcase-v3/19-italy-trip/preview.mp4 +0 -0
- package/app/catalog/showcase-v3/19-italy-trip/project.motiondesk.json +9690 -0
- package/app/catalog/showcase-v3/20-smart-savings/config.motiondesk-config.json +152 -0
- package/app/catalog/showcase-v3/20-smart-savings/poster.jpg +0 -0
- package/app/catalog/showcase-v3/20-smart-savings/preview.mp4 +0 -0
- package/app/catalog/showcase-v3/20-smart-savings/project.motiondesk.json +9770 -0
- package/app/catalog/showcase-v3/21-weekly-challenge/config.motiondesk-config.json +125 -0
- package/app/catalog/showcase-v3/21-weekly-challenge/poster.jpg +0 -0
- package/app/catalog/showcase-v3/21-weekly-challenge/preview.mp4 +0 -0
- package/app/catalog/showcase-v3/21-weekly-challenge/project.motiondesk.json +8404 -0
- package/app/catalog/showcase-v3/22-flash-sale/config.motiondesk-config.json +116 -0
- package/app/catalog/showcase-v3/22-flash-sale/poster.jpg +0 -0
- package/app/catalog/showcase-v3/22-flash-sale/preview.mp4 +0 -0
- package/app/catalog/showcase-v3/22-flash-sale/project.motiondesk.json +7482 -0
- package/app/catalog/showcase-v3/23-flight-savings/config.motiondesk-config.json +139 -0
- package/app/catalog/showcase-v3/23-flight-savings/poster.jpg +0 -0
- package/app/catalog/showcase-v3/23-flight-savings/preview.mp4 +0 -0
- package/app/catalog/showcase-v3/23-flight-savings/project.motiondesk.json +9205 -0
- package/app/catalog/showcase-v3/24-team-dashboard/config.motiondesk-config.json +155 -0
- package/app/catalog/showcase-v3/24-team-dashboard/poster.jpg +0 -0
- package/app/catalog/showcase-v3/24-team-dashboard/preview.mp4 +0 -0
- package/app/catalog/showcase-v3/24-team-dashboard/project.motiondesk.json +10735 -0
- package/app/catalog/v4/bank-01-car-choice/config.motiondesk-config.json +86 -0
- package/app/catalog/v4/bank-01-car-choice/poster.webp +0 -0
- package/app/catalog/v4/bank-01-car-choice/project.motiondesk.json +6962 -0
- package/app/catalog/v4/bank-02-holiday-budget/config.motiondesk-config.json +98 -0
- package/app/catalog/v4/bank-02-holiday-budget/poster.webp +0 -0
- package/app/catalog/v4/bank-02-holiday-budget/project.motiondesk.json +7242 -0
- package/app/catalog/v4/bank-03-one-click/config.motiondesk-config.json +97 -0
- package/app/catalog/v4/bank-03-one-click/poster.webp +0 -0
- package/app/catalog/v4/bank-03-one-click/project.motiondesk.json +6789 -0
- package/app/catalog/v4/bank-04-career-course/config.motiondesk-config.json +88 -0
- package/app/catalog/v4/bank-04-career-course/poster.webp +0 -0
- package/app/catalog/v4/bank-04-career-course/project.motiondesk.json +6514 -0
- package/app/catalog/v4/bank-05-five-years-new-word/config.motiondesk-config.json +86 -0
- package/app/catalog/v4/bank-05-five-years-new-word/poster.webp +0 -0
- package/app/catalog/v4/bank-05-five-years-new-word/project.motiondesk.json +5865 -0
- package/app/catalog/v4/bank-06-home-upgrade/config.motiondesk-config.json +88 -0
- package/app/catalog/v4/bank-06-home-upgrade/poster.webp +0 -0
- package/app/catalog/v4/bank-06-home-upgrade/project.motiondesk.json +7187 -0
- package/app/catalog/v4/bank-07-car-upgrade/config.motiondesk-config.json +87 -0
- package/app/catalog/v4/bank-07-car-upgrade/poster.webp +0 -0
- package/app/catalog/v4/bank-07-car-upgrade/project.motiondesk.json +6018 -0
- package/app/catalog/v4/bank-08-summer-dollar/config.motiondesk-config.json +85 -0
- package/app/catalog/v4/bank-08-summer-dollar/poster.webp +0 -0
- package/app/catalog/v4/bank-08-summer-dollar/project.motiondesk.json +6291 -0
- package/app/catalog/v4/bank-09-wedding/config.motiondesk-config.json +88 -0
- package/app/catalog/v4/bank-09-wedding/poster.webp +0 -0
- package/app/catalog/v4/bank-09-wedding/project.motiondesk.json +6517 -0
- package/app/catalog/v4/bank-10-family-dinner-pay/config.motiondesk-config.json +100 -0
- package/app/catalog/v4/bank-10-family-dinner-pay/poster.webp +0 -0
- package/app/catalog/v4/bank-10-family-dinner-pay/project.motiondesk.json +7053 -0
- package/app/catalog/v4/bank-11-youth-pitch-creator/config.motiondesk-config.json +100 -0
- package/app/catalog/v4/bank-11-youth-pitch-creator/poster.webp +0 -0
- package/app/catalog/v4/bank-11-youth-pitch-creator/project.motiondesk.json +6820 -0
- package/app/catalog/v4/bank-12-gift-shares/config.motiondesk-config.json +90 -0
- package/app/catalog/v4/bank-12-gift-shares/poster.webp +0 -0
- package/app/catalog/v4/bank-12-gift-shares/project.motiondesk.json +6025 -0
- package/app/catalog/v4/bank-13-suspicious-call/config.motiondesk-config.json +96 -0
- package/app/catalog/v4/bank-13-suspicious-call/poster.webp +0 -0
- package/app/catalog/v4/bank-13-suspicious-call/project.motiondesk.json +6734 -0
- package/app/catalog/v4/bank-14-urgent-message/config.motiondesk-config.json +89 -0
- package/app/catalog/v4/bank-14-urgent-message/poster.webp +0 -0
- package/app/catalog/v4/bank-14-urgent-message/project.motiondesk.json +6724 -0
- package/app/catalog/v4/bank-15-olympic-excellence/config.motiondesk-config.json +88 -0
- package/app/catalog/v4/bank-15-olympic-excellence/poster.webp +0 -0
- package/app/catalog/v4/bank-15-olympic-excellence/project.motiondesk.json +6431 -0
- package/app/catalog/v4/bank-16-savings-pocket/config.motiondesk-config.json +97 -0
- package/app/catalog/v4/bank-16-savings-pocket/poster.webp +0 -0
- package/app/catalog/v4/bank-16-savings-pocket/project.motiondesk.json +6628 -0
- package/app/catalog/v4/bank-17-students/config.motiondesk-config.json +91 -0
- package/app/catalog/v4/bank-17-students/poster.webp +0 -0
- package/app/catalog/v4/bank-17-students/project.motiondesk.json +6629 -0
- package/app/catalog/v4/bank-18-phone-phobia/config.motiondesk-config.json +86 -0
- package/app/catalog/v4/bank-18-phone-phobia/poster.webp +0 -0
- package/app/catalog/v4/bank-18-phone-phobia/project.motiondesk.json +6140 -0
- package/app/catalog/v4/bank-19-financial-fomo/config.motiondesk-config.json +91 -0
- package/app/catalog/v4/bank-19-financial-fomo/poster.webp +0 -0
- package/app/catalog/v4/bank-19-financial-fomo/project.motiondesk.json +7189 -0
- package/app/catalog/v4/bank-20-start-investing/config.motiondesk-config.json +95 -0
- package/app/catalog/v4/bank-20-start-investing/poster.webp +0 -0
- package/app/catalog/v4/bank-20-start-investing/project.motiondesk.json +7149 -0
- package/app/catalog/v4/bank-21-market-timing/config.motiondesk-config.json +95 -0
- package/app/catalog/v4/bank-21-market-timing/poster.webp +0 -0
- package/app/catalog/v4/bank-21-market-timing/project.motiondesk.json +6166 -0
- package/app/catalog/v4/bank-22-market-vs-realestate/config.motiondesk-config.json +88 -0
- package/app/catalog/v4/bank-22-market-vs-realestate/poster.webp +0 -0
- package/app/catalog/v4/bank-22-market-vs-realestate/project.motiondesk.json +7698 -0
- package/app/catalog/v4/bank-23-investing-for-all/config.motiondesk-config.json +92 -0
- package/app/catalog/v4/bank-23-investing-for-all/poster.webp +0 -0
- package/app/catalog/v4/bank-23-investing-for-all/project.motiondesk.json +6150 -0
- package/app/catalog/v4/bank-24-business-loan/config.motiondesk-config.json +85 -0
- package/app/catalog/v4/bank-24-business-loan/poster.webp +0 -0
- package/app/catalog/v4/bank-24-business-loan/project.motiondesk.json +6804 -0
- package/app/catalog/v4/bank-25-open-door/config.motiondesk-config.json +84 -0
- package/app/catalog/v4/bank-25-open-door/poster.webp +0 -0
- package/app/catalog/v4/bank-25-open-door/project.motiondesk.json +5976 -0
- package/app/catalog/v4/bank-26-first-card-challenge/config.motiondesk-config.json +84 -0
- package/app/catalog/v4/bank-26-first-card-challenge/poster.webp +0 -0
- package/app/catalog/v4/bank-26-first-card-challenge/project.motiondesk.json +6167 -0
- package/app/catalog/v4/bank-27-holiday-trip/config.motiondesk-config.json +85 -0
- package/app/catalog/v4/bank-27-holiday-trip/poster.webp +0 -0
- package/app/catalog/v4/bank-27-holiday-trip/project.motiondesk.json +6291 -0
- package/app/catalog/v4/bank-28-renew-home/config.motiondesk-config.json +87 -0
- package/app/catalog/v4/bank-28-renew-home/poster.webp +0 -0
- package/app/catalog/v4/bank-28-renew-home/project.motiondesk.json +6489 -0
- package/app/catalog/v4/bank-29-fastest-way-to-pay/config.motiondesk-config.json +98 -0
- package/app/catalog/v4/bank-29-fastest-way-to-pay/poster.webp +0 -0
- package/app/catalog/v4/bank-29-fastest-way-to-pay/project.motiondesk.json +6915 -0
- package/app/catalog/v4/bank-30-forex-terminal/config.motiondesk-config.json +103 -0
- package/app/catalog/v4/bank-30-forex-terminal/poster.webp +0 -0
- package/app/catalog/v4/bank-30-forex-terminal/project.motiondesk.json +6997 -0
- package/app/catalog/v4/bank-31-youth-campaign-brief/config.motiondesk-config.json +103 -0
- package/app/catalog/v4/bank-31-youth-campaign-brief/poster.webp +0 -0
- package/app/catalog/v4/bank-31-youth-campaign-brief/project.motiondesk.json +7136 -0
- package/app/catalog/v4/bank-32-dream-vacation/config.motiondesk-config.json +87 -0
- package/app/catalog/v4/bank-32-dream-vacation/poster.webp +0 -0
- package/app/catalog/v4/bank-32-dream-vacation/project.motiondesk.json +6531 -0
- package/app/catalog/v4/bank-33-mortgage-advice/config.motiondesk-config.json +87 -0
- package/app/catalog/v4/bank-33-mortgage-advice/poster.webp +0 -0
- package/app/catalog/v4/bank-33-mortgage-advice/project.motiondesk.json +6767 -0
- package/app/catalog/v4/bank-34-who-are-you-saver/config.motiondesk-config.json +97 -0
- package/app/catalog/v4/bank-34-who-are-you-saver/poster.webp +0 -0
- package/app/catalog/v4/bank-34-who-are-you-saver/project.motiondesk.json +6309 -0
- package/app/catalog/v4/bank-35-strange-calls/config.motiondesk-config.json +85 -0
- package/app/catalog/v4/bank-35-strange-calls/poster.webp +0 -0
- package/app/catalog/v4/bank-35-strange-calls/project.motiondesk.json +7034 -0
- package/app/catalog/v4/bank-36-one-shekel-flight/config.motiondesk-config.json +91 -0
- package/app/catalog/v4/bank-36-one-shekel-flight/poster.webp +0 -0
- package/app/catalog/v4/bank-36-one-shekel-flight/project.motiondesk.json +6364 -0
- package/app/catalog/v4/bank-37-street-quiz-pay/config.motiondesk-config.json +81 -0
- package/app/catalog/v4/bank-37-street-quiz-pay/poster.webp +0 -0
- package/app/catalog/v4/bank-37-street-quiz-pay/project.motiondesk.json +6466 -0
- package/app/catalog/v4/bank-38-pension-compare/config.motiondesk-config.json +92 -0
- package/app/catalog/v4/bank-38-pension-compare/poster.webp +0 -0
- package/app/catalog/v4/bank-38-pension-compare/project.motiondesk.json +6752 -0
- package/app/catalog/v4/bank-39-new-look-app/config.motiondesk-config.json +103 -0
- package/app/catalog/v4/bank-39-new-look-app/poster.webp +0 -0
- package/app/catalog/v4/bank-39-new-look-app/project.motiondesk.json +6954 -0
- package/app/catalog/v4/bank-40-interest-pocket/config.motiondesk-config.json +83 -0
- package/app/catalog/v4/bank-40-interest-pocket/poster.webp +0 -0
- package/app/catalog/v4/bank-40-interest-pocket/project.motiondesk.json +5783 -0
- package/app/catalog/v4/bank-41-young-telenovela/config.motiondesk-config.json +95 -0
- package/app/catalog/v4/bank-41-young-telenovela/poster.webp +0 -0
- package/app/catalog/v4/bank-41-young-telenovela/project.motiondesk.json +5967 -0
- package/app/catalog/v4/bank-42-market-app/config.motiondesk-config.json +103 -0
- package/app/catalog/v4/bank-42-market-app/poster.webp +0 -0
- package/app/catalog/v4/bank-42-market-app/project.motiondesk.json +6766 -0
- package/app/catalog/v4/bank-43-passover-sites/config.motiondesk-config.json +92 -0
- package/app/catalog/v4/bank-43-passover-sites/poster.webp +0 -0
- package/app/catalog/v4/bank-43-passover-sites/project.motiondesk.json +7173 -0
- package/app/catalog/v4/bank-44-end-of-excuses/config.motiondesk-config.json +93 -0
- package/app/catalog/v4/bank-44-end-of-excuses/poster.webp +0 -0
- package/app/catalog/v4/bank-44-end-of-excuses/project.motiondesk.json +6010 -0
- package/app/catalog/v4/bank-45-good-reasons/config.motiondesk-config.json +90 -0
- package/app/catalog/v4/bank-45-good-reasons/poster.webp +0 -0
- package/app/catalog/v4/bank-45-good-reasons/project.motiondesk.json +7122 -0
- package/app/catalog/v4/bank-46-mortgage-hotline/config.motiondesk-config.json +99 -0
- package/app/catalog/v4/bank-46-mortgage-hotline/poster.webp +0 -0
- package/app/catalog/v4/bank-46-mortgage-hotline/project.motiondesk.json +6923 -0
- package/app/catalog/v4/bank-47-financial-growth-center/config.motiondesk-config.json +84 -0
- package/app/catalog/v4/bank-47-financial-growth-center/poster.webp +0 -0
- package/app/catalog/v4/bank-47-financial-growth-center/project.motiondesk.json +6424 -0
- package/app/catalog/v4/bank-48-judo-grand-prix/config.motiondesk-config.json +88 -0
- package/app/catalog/v4/bank-48-judo-grand-prix/poster.webp +0 -0
- package/app/catalog/v4/bank-48-judo-grand-prix/project.motiondesk.json +6335 -0
- package/app/catalog/v4/bank-49-currency-convert/config.motiondesk-config.json +98 -0
- package/app/catalog/v4/bank-49-currency-convert/poster.webp +0 -0
- package/app/catalog/v4/bank-49-currency-convert/project.motiondesk.json +7036 -0
- package/app/catalog/v4/bank-50-salary-young/config.motiondesk-config.json +95 -0
- package/app/catalog/v4/bank-50-salary-young/poster.webp +0 -0
- package/app/catalog/v4/bank-50-salary-young/project.motiondesk.json +6414 -0
- package/app/catalog/v4/v4-onboarding-beats-16x9/config.motiondesk-config.json +162 -0
- package/app/catalog/v4/v4-onboarding-beats-16x9/poster.webp +0 -0
- package/app/catalog/v4/v4-onboarding-beats-16x9/project.motiondesk.json +9796 -0
- package/app/catalog/v4/v4-savings-goal-9x16/config.motiondesk-config.json +151 -0
- package/app/catalog/v4/v4-savings-goal-9x16/poster.webp +0 -0
- package/app/catalog/v4/v4-savings-goal-9x16/project.motiondesk.json +11847 -0
- package/app/catalog/v4/v4-trip-planner-1x1/config.motiondesk-config.json +137 -0
- package/app/catalog/v4/v4-trip-planner-1x1/poster.webp +0 -0
- package/app/catalog/v4/v4-trip-planner-1x1/project.motiondesk.json +10797 -0
- package/app/catalog/v4/v4-wallet-launch-16x9/config.motiondesk-config.json +172 -0
- package/app/catalog/v4/v4-wallet-launch-16x9/poster.webp +0 -0
- package/app/catalog/v4/v4-wallet-launch-16x9/project.motiondesk.json +14270 -0
- package/app/fonts/heebo-hebrew-400-normal.woff2 +0 -0
- package/app/fonts/heebo-hebrew-700-normal.woff2 +0 -0
- package/app/fonts/heebo-latin-400-normal.woff2 +0 -0
- package/app/fonts/heebo-latin-700-normal.woff2 +0 -0
- package/app/fonts/motiondesk-symbols.ttf +0 -0
- package/app/fonts/noto-sans-math-OFL.txt +93 -0
- package/app/index.html +15 -0
- package/app/studio-hf/fonts/heebo-hebrew-400-normal.woff2 +0 -0
- package/app/studio-hf/fonts/heebo-hebrew-700-normal.woff2 +0 -0
- package/app/studio-hf/fonts/heebo-latin-400-normal.woff2 +0 -0
- package/app/studio-hf/fonts/heebo-latin-700-normal.woff2 +0 -0
- package/app/studio-hf/frame.html +21 -0
- package/app/studio-hf/vendor/gsap.min.js +11 -0
- package/bin/motiondesk-studio.mjs +251 -0
- package/lib/catalog/hyperframes/ai-assistant.html +137 -0
- package/lib/catalog/hyperframes/annual-report.html +146 -0
- package/lib/catalog/hyperframes/app-tour.html +163 -0
- package/lib/catalog/hyperframes/balloon-party.html +159 -0
- package/lib/catalog/hyperframes/bank-banker-chat.html +256 -0
- package/lib/catalog/hyperframes/bank-business-loan.html +246 -0
- package/lib/catalog/hyperframes/bank-car-choice.html +228 -0
- package/lib/catalog/hyperframes/bank-card-freeze.html +280 -0
- package/lib/catalog/hyperframes/bank-code-never.html +233 -0
- package/lib/catalog/hyperframes/bank-dark-interlude.html +189 -0
- package/lib/catalog/hyperframes/bank-dinner-split.html +245 -0
- package/lib/catalog/hyperframes/bank-fast-pay.html +229 -0
- package/lib/catalog/hyperframes/bank-first-salary.html +211 -0
- package/lib/catalog/hyperframes/bank-fomo-stop.html +229 -0
- package/lib/catalog/hyperframes/bank-forex-trip.html +204 -0
- package/lib/catalog/hyperframes/bank-growth-bars.html +202 -0
- package/lib/catalog/hyperframes/bank-holiday-budget.html +223 -0
- package/lib/catalog/hyperframes/bank-mortgage-papers.html +213 -0
- package/lib/catalog/hyperframes/bank-new-app-look.html +227 -0
- package/lib/catalog/hyperframes/bank-one-click-loan.html +222 -0
- package/lib/catalog/hyperframes/bank-paper-explainer.html +190 -0
- package/lib/catalog/hyperframes/bank-pension-compare.html +242 -0
- package/lib/catalog/hyperframes/bank-remote-access.html +256 -0
- package/lib/catalog/hyperframes/bank-savings-pocket.html +219 -0
- package/lib/catalog/hyperframes/bank-share-explained.html +227 -0
- package/lib/catalog/hyperframes/bank-small-business.html +216 -0
- package/lib/catalog/hyperframes/bank-student-routine.html +223 -0
- package/lib/catalog/hyperframes/bank-suspicious-sms.html +228 -0
- package/lib/catalog/hyperframes/bank-wedding-budget.html +229 -0
- package/lib/catalog/hyperframes/boarding-pass.html +191 -0
- package/lib/catalog/hyperframes/chalk-menu.html +157 -0
- package/lib/catalog/hyperframes/claim-steps.html +179 -0
- package/lib/catalog/hyperframes/clinic-booking.html +177 -0
- package/lib/catalog/hyperframes/concert-poster.html +188 -0
- package/lib/catalog/hyperframes/course-syllabus.html +163 -0
- package/lib/catalog/hyperframes/cyber-shield.html +191 -0
- package/lib/catalog/hyperframes/dev-hiring-code.html +137 -0
- package/lib/catalog/hyperframes/donation-meter.html +163 -0
- package/lib/catalog/hyperframes/editorial-mag.html +179 -0
- package/lib/catalog/hyperframes/ev-charge.html +217 -0
- package/lib/catalog/hyperframes/event-announce.html +146 -0
- package/lib/catalog/hyperframes/finance-growth.html +139 -0
- package/lib/catalog/hyperframes/fitness-rings-streak.html +140 -0
- package/lib/catalog/hyperframes/flash-sale.html +142 -0
- package/lib/catalog/hyperframes/flipclock-countdown.html +152 -0
- package/lib/catalog/hyperframes/floorplan-linedraw.html +191 -0
- package/lib/catalog/hyperframes/glass-product.html +138 -0
- package/lib/catalog/hyperframes/glossy-cosmetics.html +202 -0
- package/lib/catalog/hyperframes/gold-couture.html +189 -0
- package/lib/catalog/hyperframes/gradient-blobs.html +138 -0
- package/lib/catalog/hyperframes/graduation-day.html +133 -0
- package/lib/catalog/hyperframes/headline-news-ticker.html +180 -0
- package/lib/catalog/hyperframes/hiring-team.html +136 -0
- package/lib/catalog/hyperframes/holiday-greeting.html +143 -0
- package/lib/catalog/hyperframes/index-b2.json +194 -0
- package/lib/catalog/hyperframes/index-b3.json +194 -0
- package/lib/catalog/hyperframes/index-b4.json +162 -0
- package/lib/catalog/hyperframes/index-b5.json +130 -0
- package/lib/catalog/hyperframes/index-b6.json +146 -0
- package/lib/catalog/hyperframes/index-b7.json +121 -0
- package/lib/catalog/hyperframes/index-b8.json +92 -0
- package/lib/catalog/hyperframes/index-b9.json +87 -0
- package/lib/catalog/hyperframes/index.json +322 -0
- package/lib/catalog/hyperframes/iso-product-3d.html +228 -0
- package/lib/catalog/hyperframes/itinerary-map-pins.html +200 -0
- package/lib/catalog/hyperframes/key-handover.html +170 -0
- package/lib/catalog/hyperframes/kinetic-launch.html +160 -0
- package/lib/catalog/hyperframes/legal-trust.html +185 -0
- package/lib/catalog/hyperframes/level-up.html +204 -0
- package/lib/catalog/hyperframes/logo-sting.html +105 -0
- package/lib/catalog/hyperframes/manifesto-quote.html +119 -0
- package/lib/catalog/hyperframes/match-day.html +145 -0
- package/lib/catalog/hyperframes/match-score.html +209 -0
- package/lib/catalog/hyperframes/neighborhood-map.html +157 -0
- package/lib/catalog/hyperframes/neon-grid.html +158 -0
- package/lib/catalog/hyperframes/org-chart-hiring.html +160 -0
- package/lib/catalog/hyperframes/paper-collage.html +180 -0
- package/lib/catalog/hyperframes/paw-adopt.html +172 -0
- package/lib/catalog/hyperframes/playful-blocks.html +161 -0
- package/lib/catalog/hyperframes/podcast-waveform-promo.html +181 -0
- package/lib/catalog/hyperframes/price-grid.html +175 -0
- package/lib/catalog/hyperframes/quote-carousel-bold.html +142 -0
- package/lib/catalog/hyperframes/recipe-ingredients.html +161 -0
- package/lib/catalog/hyperframes/retro-80s.html +140 -0
- package/lib/catalog/hyperframes/roadmap-timeline.html +163 -0
- package/lib/catalog/hyperframes/saas-dashboard.html +194 -0
- package/lib/catalog/hyperframes/sale-wheel-24h.html +152 -0
- package/lib/catalog/hyperframes/save-the-date.html +140 -0
- package/lib/catalog/hyperframes/split-wipe-before-after.html +197 -0
- package/lib/catalog/hyperframes/stats-dashboard.html +148 -0
- package/lib/catalog/hyperframes/stock-portfolio.html +173 -0
- package/lib/catalog/hyperframes/swiss-grid.html +152 -0
- package/lib/catalog/hyperframes/travel-route.html +168 -0
- package/lib/catalog/hyperframes/tutorial-steps.html +159 -0
- package/lib/catalog/hyperframes/wallet-card-transactions.html +187 -0
- package/lib/catalog/hyperframes/wedding-invite.html +141 -0
- package/lib/catalog/studio/apps.json +2134 -0
- package/lib/catalog/studio/auto.json +2019 -0
- package/lib/catalog/studio/bank-digital.json +3586 -0
- package/lib/catalog/studio/bank-invest.json +3653 -0
- package/lib/catalog/studio/bank-life.json +3605 -0
- package/lib/catalog/studio/bank-safety.json +3198 -0
- package/lib/catalog/studio/bank-young.json +3426 -0
- package/lib/catalog/studio/beauty.json +1630 -0
- package/lib/catalog/studio/business.json +2064 -0
- package/lib/catalog/studio/celebrations.json +2142 -0
- package/lib/catalog/studio/community.json +1926 -0
- package/lib/catalog/studio/culture.json +2156 -0
- package/lib/catalog/studio/data.json +1934 -0
- package/lib/catalog/studio/education.json +1914 -0
- package/lib/catalog/studio/events.json +1921 -0
- package/lib/catalog/studio/family.json +2159 -0
- package/lib/catalog/studio/fashion.json +1958 -0
- package/lib/catalog/studio/finance.json +1922 -0
- package/lib/catalog/studio/food.json +2128 -0
- package/lib/catalog/studio/gaming.json +1756 -0
- package/lib/catalog/studio/health.json +1934 -0
- package/lib/catalog/studio/hr.json +1860 -0
- package/lib/catalog/studio/kids.json +1697 -0
- package/lib/catalog/studio/launch.json +2161 -0
- package/lib/catalog/studio/legal.json +1732 -0
- package/lib/catalog/studio/music.json +1721 -0
- package/lib/catalog/studio/nonprofit.json +1665 -0
- package/lib/catalog/studio/pets.json +2196 -0
- package/lib/catalog/studio/premium.json +5577 -0
- package/lib/catalog/studio/realestate.json +2018 -0
- package/lib/catalog/studio/retail.json +1959 -0
- package/lib/catalog/studio/services.json +2154 -0
- package/lib/catalog/studio/social.json +2004 -0
- package/lib/catalog/studio/sports.json +1999 -0
- package/lib/catalog/studio/tech.json +2124 -0
- package/lib/catalog/studio/travel.json +1966 -0
- package/lib/core-v4.cjs +4897 -0
- package/lib/core.cjs +4223 -0
- package/lib/motion-blur.cjs +36 -0
- package/lib/studio.cjs +4419 -0
- package/lib/vercel-render.mjs +509 -0
- package/lib/vercel-source.cjs +88 -0
- package/package.json +39 -4
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="he" dir="rtl">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=1920, height=1080">
|
|
6
|
+
<title>דשבורד נתונים רבעוני</title>
|
|
7
|
+
<script src="vendor/gsap.min.js"></script>
|
|
8
|
+
<style>
|
|
9
|
+
@font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
|
|
10
|
+
@font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
|
|
11
|
+
@font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
|
|
12
|
+
@font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
|
|
13
|
+
:root{--bg:#0e1525;--fg:#f3f6fb;--accent:#3dd6a3;--accent2:#5b8cff;--warn:#ffb547;--panel:#18223a}
|
|
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
|
+
.gridbg{position:absolute;inset:-100px;background:linear-gradient(color-mix(in srgb,var(--fg) 5%,transparent) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,color-mix(in srgb,var(--fg) 5%,transparent) 1px,transparent 1px) 0 0/80px 80px}
|
|
24
|
+
.glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:.35}
|
|
25
|
+
.h{position:absolute;font-weight:700;white-space:nowrap;line-height:1.1}
|
|
26
|
+
.sub{position:absolute;font-size:40px;font-weight:400;color:color-mix(in srgb,var(--fg) 65%,transparent);white-space:nowrap}
|
|
27
|
+
.chip{position:absolute;padding:10px 26px;border-radius:40px;font-size:30px;font-weight:700;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
|
|
28
|
+
.tile{position:absolute;width:500px;height:440px;border-radius:32px;background:var(--panel);border:2px solid color-mix(in srgb,var(--fg) 10%,transparent);overflow:hidden}
|
|
29
|
+
.tl{position:absolute;right:40px;top:40px;font-size:36px;font-weight:400;color:color-mix(in srgb,var(--fg) 70%,transparent)}
|
|
30
|
+
.num{font-size:108px;font-weight:700;direction:ltr;line-height:1.1}
|
|
31
|
+
.spark{position:absolute;left:40px;bottom:50px}
|
|
32
|
+
.tbar{position:absolute;left:0;right:0;bottom:0;height:8px;transform-origin:100% 50%}
|
|
33
|
+
.panel{position:absolute;border-radius:32px;background:var(--panel);border:2px solid color-mix(in srgb,var(--fg) 10%,transparent)}
|
|
34
|
+
.chart{position:absolute;right:200px;left:200px;top:260px;height:560px;display:flex;align-items:flex-end;gap:44px;padding:0 40px}
|
|
35
|
+
.bc{flex:1;position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
|
|
36
|
+
.bar{width:100%;border-radius:14px 14px 4px 4px;background:linear-gradient(var(--accent2),color-mix(in srgb,var(--accent2) 35%,var(--panel)));transform-origin:50% 100%}
|
|
37
|
+
.bar.hi{background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 35%,var(--panel)))}
|
|
38
|
+
.bl{position:absolute;bottom:-60px;font-size:30px;color:color-mix(in srgb,var(--fg) 70%,transparent);white-space:nowrap}
|
|
39
|
+
.gl{position:absolute;left:200px;right:200px;height:2px;background:color-mix(in srgb,var(--fg) 9%,transparent);transform-origin:100% 50%}
|
|
40
|
+
.tip{position:absolute;padding:14px 28px;border-radius:18px;background:var(--accent);color:var(--bg);font-size:34px;font-weight:700;white-space:nowrap}
|
|
41
|
+
.tip::after{content:"";position:absolute;left:50%;bottom:-12px;margin-left:-12px;border:12px solid transparent;border-bottom:0;border-top-color:var(--accent)}
|
|
42
|
+
.seg{fill:none;stroke-width:56}
|
|
43
|
+
.lg{position:absolute;display:flex;align-items:center;gap:22px;font-size:40px;font-weight:400;white-space:nowrap}
|
|
44
|
+
.lg i{width:30px;height:30px;border-radius:8px;flex:none}
|
|
45
|
+
.lg b{font-weight:700}
|
|
46
|
+
</style>
|
|
47
|
+
</head>
|
|
48
|
+
<body>
|
|
49
|
+
<div id="root" data-composition-id="stats-dashboard" data-start="0" data-width="1920" data-height="1080" data-duration="15">
|
|
50
|
+
<section id="s1" class="clip scene" data-start="0" data-duration="3.4">
|
|
51
|
+
<div class="cam" id="c1">
|
|
52
|
+
<div class="gridbg" id="gb1"></div>
|
|
53
|
+
<div class="glow" style="left:1100px;top:100px;width:700px;height:700px;background:var(--accent2)"></div>
|
|
54
|
+
<div class="glow" style="left:100px;top:500px;width:600px;height:600px;background:var(--accent)"></div>
|
|
55
|
+
<div class="panel" id="f1" style="left:140px;top:600px;width:520px;height:300px"></div>
|
|
56
|
+
<div class="panel" id="f2" style="left:700px;top:660px;width:380px;height:240px"></div>
|
|
57
|
+
<div class="chip" id="ch1" style="right:180px;top:250px">רבעון 3 · 2026</div>
|
|
58
|
+
<h1 class="h" id="t1a" style="right:170px;top:330px;font-size:150px">התמונה המלאה</h1>
|
|
59
|
+
<p class="sub" id="t1b" style="right:180px;top:520px">טרה לוגיסטיקה · דוח ביצועים</p>
|
|
60
|
+
<div class="abs" id="mini" style="left:190px;top:660px;width:420px;height:190px;display:flex;align-items:flex-end;gap:18px"><i class="mb" style="flex:1;height:40%;background:var(--accent2);border-radius:8px"></i><i class="mb" style="flex:1;height:70%;background:var(--accent2);border-radius:8px"></i><i class="mb" style="flex:1;height:55%;background:var(--accent2);border-radius:8px"></i><i class="mb" style="flex:1;height:100%;background:var(--accent);border-radius:8px"></i></div>
|
|
61
|
+
<svg class="abs" style="left:740px;top:700px" width="300" height="160" viewBox="0 0 300 160"><path id="ml" d="M10 140 L80 100 L140 115 L210 50 L290 20" style="fill:none;stroke:var(--warn);stroke-width:7;stroke-linecap:round;stroke-linejoin:round"/></svg>
|
|
62
|
+
</div>
|
|
63
|
+
</section>
|
|
64
|
+
<section id="s2" class="clip scene" data-start="3.4" data-duration="4">
|
|
65
|
+
<div class="cam" id="c2">
|
|
66
|
+
<div class="gridbg" id="gb2"></div>
|
|
67
|
+
<h2 class="h" id="t2" style="right:180px;top:150px;font-size:76px">מדדים מרכזיים</h2>
|
|
68
|
+
<p class="sub" id="t2s" style="left:180px;top:170px;font-size:34px">לעומת הרבעון הקודם</p>
|
|
69
|
+
<div class="tile" id="k1" style="right:180px;top:330px"><p class="tl" id="k1l">הכנסות במיליונים</p><div class="m" style="position:absolute;right:40px;top:96px"><p class="num w" id="k1n">₪4.2</p></div><svg class="spark" width="420" height="120" viewBox="0 0 420 120"><path id="k1p" d="M10 100 L80 85 L150 92 L220 60 L290 66 L360 30 L410 18" style="fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-linejoin:round"/></svg><div class="tbar" id="k1b" style="background:var(--accent)"></div></div>
|
|
70
|
+
<div class="tile" id="k2" style="right:710px;top:330px"><p class="tl" id="k2l">צמיחה</p><div class="m" style="position:absolute;right:40px;top:96px"><p class="num w" id="k2n">+38%</p></div><svg class="spark" width="420" height="120" viewBox="0 0 420 120"><path id="k2p" d="M10 110 L70 100 L140 80 L210 84 L280 50 L350 36 L410 10" style="fill:none;stroke:var(--accent2);stroke-width:6;stroke-linecap:round;stroke-linejoin:round"/></svg><div class="tbar" id="k2b" style="background:var(--accent2)"></div></div>
|
|
71
|
+
<div class="tile" id="k3" style="right:1240px;top:330px"><p class="tl" id="k3l">לקוחות פעילים</p><div class="m" style="position:absolute;right:40px;top:96px"><p class="num w" id="k3n">12,480</p></div><svg class="spark" width="420" height="120" viewBox="0 0 420 120"><path id="k3p" d="M10 90 L80 96 L150 70 L220 74 L290 44 L360 40 L410 22" style="fill:none;stroke:var(--warn);stroke-width:6;stroke-linecap:round;stroke-linejoin:round"/></svg><div class="tbar" id="k3b" style="background:var(--warn)"></div></div>
|
|
72
|
+
</div>
|
|
73
|
+
</section>
|
|
74
|
+
<section id="s3" class="clip scene" data-start="7.4" data-duration="4">
|
|
75
|
+
<div class="cam" id="c3">
|
|
76
|
+
<div class="gridbg"></div>
|
|
77
|
+
<h2 class="h" id="t3" style="right:180px;top:90px;font-size:68px">הכנסות לפי חודש</h2>
|
|
78
|
+
<p class="sub" id="t3s" style="left:180px;top:108px;font-size:34px">באלפי ₪</p>
|
|
79
|
+
<div class="gl" style="top:330px"></div><div class="gl" style="top:460px"></div><div class="gl" style="top:590px"></div><div class="gl" style="top:720px"></div><div class="gl" style="top:820px;background:color-mix(in srgb,var(--fg) 30%,transparent)"></div>
|
|
80
|
+
<div class="chart" id="ch"><div class="bc"><div class="bar" id="br0" style="height:210px"></div><p class="bl" id="bl0">ינו׳</p></div><div class="bc"><div class="bar" id="br1" style="height:275px"></div><p class="bl" id="bl1">פבר׳</p></div><div class="bc"><div class="bar" id="br2" style="height:240px"></div><p class="bl" id="bl2">מרץ</p></div><div class="bc"><div class="bar" id="br3" style="height:330px"></div><p class="bl" id="bl3">אפר׳</p></div><div class="bc"><div class="bar" id="br4" style="height:360px"></div><p class="bl" id="bl4">מאי</p></div><div class="bc"><div class="bar" id="br5" style="height:305px"></div><p class="bl" id="bl5">יוני</p></div><div class="bc"><div class="bar" id="br6" style="height:420px"></div><p class="bl" id="bl6">יולי</p></div><div class="bc"><div class="bar hi" id="br7" style="height:480px"></div><p class="bl" id="bl7">אוג׳</p></div></div>
|
|
81
|
+
<div class="tip" id="tp" style="left:200px;top:236px">שיא חדש</div>
|
|
82
|
+
</div>
|
|
83
|
+
</section>
|
|
84
|
+
<section id="s4" class="clip scene" data-start="11.4" data-duration="3.6">
|
|
85
|
+
<div class="cam" id="c4">
|
|
86
|
+
<div class="gridbg"></div>
|
|
87
|
+
<div class="glow" style="left:200px;top:200px;width:600px;height:600px;background:var(--accent2)"></div>
|
|
88
|
+
<svg class="abs" id="dn" style="left:240px;top:310px" width="460" height="460" viewBox="0 0 460 460"><circle cx="230" cy="230" r="170" style="fill:none;stroke:color-mix(in srgb,var(--fg) 8%,transparent);stroke-width:56"/><circle class="seg" id="sg0" cx="230" cy="230" r="170" style="stroke:var(--accent);stroke-dasharray:483.3 1068.1;transform:rotate(-90.0deg);transform-origin:230px 230px"/><circle class="seg" id="sg1" cx="230" cy="230" r="170" style="stroke:var(--accent2);stroke-dasharray:333.8 1068.1;transform:rotate(75.6deg);transform-origin:230px 230px"/><circle class="seg" id="sg2" cx="230" cy="230" r="170" style="stroke:var(--warn);stroke-dasharray:227.0 1068.1;transform:rotate(190.8deg);transform-origin:230px 230px"/></svg>
|
|
89
|
+
<p class="h" id="dc" style="left:240px;width:460px;text-align:center;top:470px;font-size:96px;direction:ltr">46%</p>
|
|
90
|
+
<h2 class="h" id="t4a" style="right:180px;top:220px;font-size:120px">שנה של צמיחה</h2>
|
|
91
|
+
<p class="sub" id="t4b" style="right:184px;top:380px">פילוח הכנסות לפי תחום</p>
|
|
92
|
+
<div class="lg" id="lg1" style="right:184px;top:500px"><i style="background:var(--accent)"></i><span id="lg1t">משלוחים עירוניים</span></div>
|
|
93
|
+
<div class="lg" id="lg2" style="right:184px;top:580px"><i style="background:var(--accent2)"></i><span id="lg2t">אחסון חכם</span></div>
|
|
94
|
+
<div class="lg" id="lg3" style="right:184px;top:660px"><i style="background:var(--warn)"></i><span id="lg3t">שירותי ייעוץ</span></div>
|
|
95
|
+
<div class="chip" id="ch4" style="right:184px;top:790px">טרה לוגיסטיקה</div>
|
|
96
|
+
</div>
|
|
97
|
+
</section>
|
|
98
|
+
</div>
|
|
99
|
+
<script>
|
|
100
|
+
const tl=gsap.timeline({paused:true});
|
|
101
|
+
const S=[0,3.4,7.4,11.4,15],D=15;
|
|
102
|
+
const X="expo.out",P="power3.out",Q="power3.inOut";
|
|
103
|
+
function swipe(i){tl.to("#c"+(i+1),{x:-260,opacity:0,duration:.45,ease:"power2.in"},S[i+1]-.45);tl.fromTo("#c"+(i+2),{x:260,opacity:0},{x:0,opacity:1,duration:.6,ease:P},S[i+1]);}
|
|
104
|
+
// s1
|
|
105
|
+
tl.fromTo("#gb1",{y:0},{y:80,duration:3.4,ease:"none"},S[0]);
|
|
106
|
+
tl.fromTo("#c1",{scale:1.08},{scale:1,duration:3.4,ease:"power2.out"},S[0]);
|
|
107
|
+
tl.fromTo("#ch1",{opacity:0,y:20},{opacity:1,y:0,duration:.5,ease:P},S[0]+.2);
|
|
108
|
+
tl.fromTo("#t1a",{clipPath:"inset(0 0 0 100%)"},{clipPath:"inset(0 0 0 0%)",duration:1,ease:"power4.out"},S[0]+.35);
|
|
109
|
+
tl.fromTo("#t1b",{opacity:0,y:20},{opacity:1,y:0,duration:.6,ease:P},S[0]+.8);
|
|
110
|
+
tl.fromTo(["#f1","#f2"],{y:120,opacity:0},{y:0,opacity:1,duration:.8,ease:X,stagger:.12},S[0]+.6);
|
|
111
|
+
tl.fromTo("#mini .mb",{scaleY:0,transformOrigin:"50% 100%"},{scaleY:1,duration:.6,ease:"back.out(1.6)",stagger:.08},S[0]+1);
|
|
112
|
+
tl.fromTo("#ml",{strokeDasharray:400,strokeDashoffset:400},{strokeDashoffset:0,duration:1,ease:Q},S[0]+1.1);
|
|
113
|
+
swipe(0);
|
|
114
|
+
// s2
|
|
115
|
+
tl.fromTo("#t2",{opacity:0,y:-20},{opacity:1,y:0,duration:.6,ease:P},S[1]+.2);
|
|
116
|
+
tl.fromTo("#t2s",{opacity:0},{opacity:1,duration:.6},S[1]+.4);
|
|
117
|
+
["#k1","#k2","#k3"].forEach((k,i)=>{const a=S[1]+.35+i*.18;
|
|
118
|
+
tl.fromTo(k,{y:140,opacity:0,rotationX:-30},{y:0,opacity:1,rotationX:0,duration:.9,ease:X},a);
|
|
119
|
+
tl.fromTo(k+"n",{yPercent:110},{yPercent:0,duration:.8,ease:X},a+.35);
|
|
120
|
+
tl.fromTo(k+"p",{strokeDasharray:520,strokeDashoffset:520},{strokeDashoffset:0,duration:1.2,ease:Q},a+.5);
|
|
121
|
+
tl.fromTo(k+"b",{scaleX:0},{scaleX:1,duration:1.4,ease:Q},a+.4);
|
|
122
|
+
tl.to(k,{y:i%2?8:-8,duration:1.6,ease:"sine.inOut"},a+1.2);});
|
|
123
|
+
swipe(1);
|
|
124
|
+
// s3
|
|
125
|
+
tl.fromTo("#t3",{opacity:0,y:-20},{opacity:1,y:0,duration:.6,ease:P},S[2]+.2);
|
|
126
|
+
tl.fromTo("#t3s",{opacity:0},{opacity:1,duration:.5},S[2]+.4);
|
|
127
|
+
tl.fromTo("#c3 .gl",{scaleX:0},{scaleX:1,duration:.8,ease:Q,stagger:.06},S[2]+.2);
|
|
128
|
+
tl.fromTo("#ch .bar",{scaleY:0},{scaleY:1,duration:.8,ease:"back.out(1.3)",stagger:.1},S[2]+.5);
|
|
129
|
+
tl.fromTo("#ch .bl",{opacity:0,y:10},{opacity:1,y:0,duration:.4,stagger:.1},S[2]+.6);
|
|
130
|
+
tl.fromTo("#tp",{opacity:0,y:30,scale:.6},{opacity:1,y:0,scale:1,duration:.6,ease:"back.out(2)"},S[2]+1.6);
|
|
131
|
+
tl.to("#tp",{y:-12,duration:.6,ease:"sine.inOut",yoyo:true,repeat:2},S[2]+2.2);
|
|
132
|
+
tl.to("#br7",{filter:"brightness(1.35)",duration:.5,yoyo:true,repeat:3,ease:"sine.inOut"},S[2]+1.7);
|
|
133
|
+
tl.fromTo("#c3",{scale:1.04},{scale:1,duration:4,ease:"none"},S[2]);
|
|
134
|
+
swipe(2);
|
|
135
|
+
// s4
|
|
136
|
+
tl.fromTo("#dn",{rotation:-60,scale:.8},{rotation:0,scale:1,duration:1.2,ease:X},S[3]+.1);
|
|
137
|
+
["483.3","333.8","227.0"].forEach((L,i)=>tl.fromTo("#sg"+i,{strokeDashoffset:+L},{strokeDashoffset:0,duration:.8,ease:Q},S[3]+.3+i*.35));
|
|
138
|
+
tl.fromTo("#dc",{opacity:0,scale:.5},{opacity:1,scale:1,duration:.6,ease:"back.out(2)"},S[3]+1.2);
|
|
139
|
+
tl.fromTo("#t4a",{clipPath:"inset(0 0 0 100%)"},{clipPath:"inset(0 0 0 0%)",duration:1,ease:"power4.out"},S[3]+.3);
|
|
140
|
+
tl.fromTo("#t4b",{opacity:0},{opacity:1,duration:.6},S[3]+.7);
|
|
141
|
+
tl.fromTo(["#lg1","#lg2","#lg3"],{opacity:0,x:60},{opacity:1,x:0,duration:.6,ease:X,stagger:.35},S[3]+.4);
|
|
142
|
+
tl.fromTo("#ch4",{opacity:0,scale:.7},{opacity:1,scale:1,duration:.5,ease:"back.out(2)"},S[3]+1.7);
|
|
143
|
+
tl.to("#dn",{rotation:12,duration:2.2,ease:"sine.inOut"},S[3]+1.3);
|
|
144
|
+
tl.set({},{},D);
|
|
145
|
+
window.__timelines=window.__timelines||{};window.__timelines["stats-dashboard"]=tl;
|
|
146
|
+
</script>
|
|
147
|
+
</body>
|
|
148
|
+
</html>
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="he" dir="rtl">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=1920, height=1080">
|
|
6
|
+
<title>תיק השקעות חי</title>
|
|
7
|
+
<script src="vendor/gsap.min.js"></script>
|
|
8
|
+
<style>
|
|
9
|
+
@font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
|
|
10
|
+
@font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
|
|
11
|
+
@font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
|
|
12
|
+
@font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
|
|
13
|
+
:root{--bg:#0a1220;--fg:#e6edf7;--up:#22c993;--down:#ff5d6c;--acc:#5b8cff;--panel:#121d31}
|
|
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 70% 30%,var(--panel),var(--bg) 70%)}
|
|
24
|
+
.t{position:absolute;white-space:nowrap;line-height:1.15;color:var(--fg)}
|
|
25
|
+
.eb{font-size:36px;font-weight:700;letter-spacing:.25em;color:var(--acc)}
|
|
26
|
+
.big{font-size:110px;font-weight:700;letter-spacing:-.01em}
|
|
27
|
+
.mut{color:color-mix(in srgb,var(--fg) 60%,var(--bg))}
|
|
28
|
+
.u{color:var(--up)}.d{color:var(--down)}
|
|
29
|
+
.spl{fill:none;stroke:var(--up);stroke-width:6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
|
|
30
|
+
.spa{fill:url(#gA);opacity:0}
|
|
31
|
+
.tape{position:absolute;left:0;right:0;top:880px;height:100px;background:var(--panel);border-top:2px solid color-mix(in srgb,var(--acc) 40%,transparent);border-bottom:2px solid color-mix(in srgb,var(--acc) 40%,transparent);overflow:hidden}
|
|
32
|
+
.trk{position:absolute;top:22px;right:0;display:flex;gap:0;white-space:nowrap}
|
|
33
|
+
.ti{display:inline-flex;align-items:center;gap:14px;margin-left:70px}
|
|
34
|
+
.tn,.tv{font-size:44px;font-weight:700;line-height:1.15}
|
|
35
|
+
.tn{color:var(--fg)}
|
|
36
|
+
.tri{display:inline-block;width:26px;height:22px;clip-path:polygon(50% 0,100% 100%,0 100%)}
|
|
37
|
+
.tri.u{background:var(--up)}.tri.d{background:var(--down);transform:rotate(180deg)}
|
|
38
|
+
.panel{position:absolute;left:160px;right:160px;top:180px;height:720px;border-radius:30px;background:color-mix(in srgb,var(--panel) 80%,transparent);border:2px solid color-mix(in srgb,var(--fg) 8%,transparent)}
|
|
39
|
+
.gl{position:absolute;left:300px;width:1440px;height:2px;background:color-mix(in srgb,var(--fg) 9%,transparent)}
|
|
40
|
+
.gv{position:absolute;left:180px;font-size:30px;line-height:1.15;color:color-mix(in srgb,var(--fg) 50%,var(--bg));white-space:nowrap}
|
|
41
|
+
.wk{position:absolute;width:4px;background:color-mix(in srgb,var(--fg) 45%,transparent);transform-origin:50% 50%}
|
|
42
|
+
.cd{position:absolute;width:40px;border-radius:4px;transform-origin:50% 50%}
|
|
43
|
+
.cd.u{background:var(--up)}.cd.d{background:var(--down)}
|
|
44
|
+
.ma{fill:none;stroke:var(--acc);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
|
|
45
|
+
.tag{position:absolute;left:1690px;height:56px;padding:0 18px;border-radius:10px;background:var(--up);display:flex;align-items:center}
|
|
46
|
+
.tag p{font-size:34px;font-weight:700;color:var(--bg);white-space:nowrap}
|
|
47
|
+
.hl{position:absolute;left:300px;width:1390px;height:0;border-top:3px dashed color-mix(in srgb,var(--up) 70%,transparent)}
|
|
48
|
+
.sg{fill:none;stroke-width:96}
|
|
49
|
+
.trkd{fill:none;stroke:color-mix(in srgb,var(--fg) 7%,transparent);stroke-width:96}
|
|
50
|
+
.sw{position:absolute;right:160px;width:40px;height:40px;border-radius:10px}
|
|
51
|
+
.ln{right:230px;font-size:56px;font-weight:700}
|
|
52
|
+
.lp{right:620px;font-size:56px;font-weight:700;color:color-mix(in srgb,var(--fg) 75%,var(--bg))}
|
|
53
|
+
.badge{position:absolute;left:280px;top:230px;width:580px;height:580px;background:var(--up)}
|
|
54
|
+
.arw{position:absolute;left:1000px;top:540px;width:120px;height:200px;background:var(--up);clip-path:polygon(50% 0,100% 45%,68% 45%,68% 100%,32% 100%,32% 45%,0 45%)}
|
|
55
|
+
.cta{position:absolute;right:160px;top:660px;height:110px;padding:0 60px;border-radius:60px;background:var(--acc);display:flex;align-items:center}
|
|
56
|
+
.cta p{font-size:46px;font-weight:700;color:var(--fg);white-space:nowrap}
|
|
57
|
+
</style>
|
|
58
|
+
</head>
|
|
59
|
+
<body>
|
|
60
|
+
<div id="root" data-composition-id="stock-portfolio" data-start="0" data-width="1920" data-height="1080" data-duration="15.2">
|
|
61
|
+
<section id="s1" class="clip scene" data-start="0" data-duration="3.6">
|
|
62
|
+
<div class="cam" id="c1">
|
|
63
|
+
<svg class="abs" style="left:0;top:0;overflow:visible" width="1920" height="1080" viewBox="0 0 1920 1080">
|
|
64
|
+
<defs><linearGradient id="gA" x1="0" y1="0" x2="0" y2="1"><stop offset="0" style="stop-color:var(--up);stop-opacity:.35"/><stop offset="1" style="stop-color:var(--up);stop-opacity:0"/></linearGradient></defs>
|
|
65
|
+
<path class="spa" id="spa" d="M160 700 L240 640 L320 670 L400 560 L480 590 L560 480 L640 520 L720 400 L800 430 L880 300 L880 780 L160 780 Z"/>
|
|
66
|
+
<path class="spl" id="spl" pathLength="1" d="M160 700 L240 640 L320 670 L400 560 L480 590 L560 480 L640 520 L720 400 L800 430 L880 300"/>
|
|
67
|
+
<circle id="spd" cx="880" cy="300" r="14" style="fill:var(--up)"/>
|
|
68
|
+
</svg>
|
|
69
|
+
<p class="t eb" id="e1" style="right:160px;top:190px">קרן אופק</p>
|
|
70
|
+
<h1 class="t big" id="t1" style="right:150px;top:240px">התיק שלך,</h1>
|
|
71
|
+
<h1 class="t big u" id="t1b" style="right:150px;top:370px">בזמן אמת</h1>
|
|
72
|
+
<p class="t mut" id="lb1" style="right:160px;top:560px;font-size:40px">שווי התיק היום</p>
|
|
73
|
+
<p class="t" id="vl1" style="right:160px;top:610px;font-size:96px;font-weight:700">₪1,284,500</p>
|
|
74
|
+
<div class="tape"><div class="trk" id="trk"><span class="ti"><b class="tn" id="tna0">אלפא טק</b><i class="tri u"></i><b class="tv u" id="tva0">2.4%</b></span><span class="ti"><b class="tn" id="tna1">נמל ים</b><i class="tri d"></i><b class="tv d" id="tva1">0.8%</b></span><span class="ti"><b class="tn" id="tna2">אנרגיה ירוקה</b><i class="tri u"></i><b class="tv u" id="tva2">3.1%</b></span><span class="ti"><b class="tn" id="tna3">ביומד</b><i class="tri u"></i><b class="tv u" id="tva3">1.2%</b></span><span class="ti"><b class="tn" id="tna4">רשת זהב</b><i class="tri d"></i><b class="tv d" id="tva4">0.4%</b></span><span class="ti"><b class="tn" id="tna5">שבב ישראלי</b><i class="tri u"></i><b class="tv u" id="tva5">4.6%</b></span><span class="ti"><b class="tn" id="tnb0">אלפא טק</b><i class="tri u"></i><b class="tv u" id="tvb0">2.4%</b></span><span class="ti"><b class="tn" id="tnb1">נמל ים</b><i class="tri d"></i><b class="tv d" id="tvb1">0.8%</b></span><span class="ti"><b class="tn" id="tnb2">אנרגיה ירוקה</b><i class="tri u"></i><b class="tv u" id="tvb2">3.1%</b></span><span class="ti"><b class="tn" id="tnb3">ביומד</b><i class="tri u"></i><b class="tv u" id="tvb3">1.2%</b></span><span class="ti"><b class="tn" id="tnb4">רשת זהב</b><i class="tri d"></i><b class="tv d" id="tvb4">0.4%</b></span><span class="ti"><b class="tn" id="tnb5">שבב ישראלי</b><i class="tri u"></i><b class="tv u" id="tvb5">4.6%</b></span></div></div>
|
|
75
|
+
</div>
|
|
76
|
+
</section>
|
|
77
|
+
<section id="s2" class="clip scene" data-start="3.6" data-duration="4.2">
|
|
78
|
+
<div class="cam" id="c2">
|
|
79
|
+
<p class="t" id="t2" style="right:160px;top:70px;font-size:64px;font-weight:700">ביצועי התיק · 20 שבועות</p>
|
|
80
|
+
<p class="t u" id="ch2" style="left:160px;top:80px;font-size:52px;font-weight:700;direction:ltr">+27.6%</p>
|
|
81
|
+
<div class="panel" id="pn"></div>
|
|
82
|
+
<i class="gl" style="top:762.9px"></i><p class="gv" id="gv0" style="top:740.9px">1,108</p><i class="gl" style="top:604.8px"></i><p class="gv" id="gv1" style="top:582.8px">1,163</p><i class="gl" style="top:446.7px"></i><p class="gv" id="gv2" style="top:424.7px">1,219</p><i class="gl" style="top:288.6px"></i><p class="gv" id="gv3" style="top:266.6px">1,274</p>
|
|
83
|
+
<div class="layer" id="cds"><i class="wk" style="left:348px;top:740px;height:54.3px"></i><i class="cd u" style="left:330px;top:751.4px;height:34.3px"></i><i class="wk" style="left:416px;top:720px;height:71.4px"></i><i class="cd d" style="left:398px;top:751.4px;height:17.2px"></i><i class="wk" style="left:484px;top:691.4px;height:91.5px"></i><i class="cd u" style="left:466px;top:717.1px;height:51.5px"></i><i class="wk" style="left:552px;top:671.4px;height:74.3px"></i><i class="cd u" style="left:534px;top:691.4px;height:25.7px"></i><i class="wk" style="left:620px;top:677.1px;height:74.3px"></i><i class="cd d" style="left:602px;top:691.4px;height:40.0px"></i><i class="wk" style="left:688px;top:640px;height:102.9px"></i><i class="cd u" style="left:670px;top:674.3px;height:57.1px"></i><i class="wk" style="left:756px;top:625.7px;height:74.3px"></i><i class="cd u" style="left:738px;top:654.3px;height:20.0px"></i><i class="wk" style="left:824px;top:631.4px;height:54.3px"></i><i class="cd d" style="left:806px;top:654.3px;height:14.3px"></i><i class="wk" style="left:892px;top:608.6px;height:68.5px"></i><i class="cd u" style="left:874px;top:625.7px;height:42.9px"></i><i class="wk" style="left:960px;top:551.4px;height:97.2px"></i><i class="cd u" style="left:942px;top:562.9px;height:62.8px"></i><i class="wk" style="left:1028px;top:531.4px;height:71.5px"></i><i class="cd d" style="left:1010px;top:562.9px;height:25.7px"></i><i class="wk" style="left:1096px;top:531.4px;height:85.7px"></i><i class="cd u" style="left:1078px;top:557.1px;height:31.5px"></i><i class="wk" style="left:1164px;top:491.4px;height:85.7px"></i><i class="cd u" style="left:1146px;top:511.4px;height:45.7px"></i><i class="wk" style="left:1232px;top:497.1px;height:60.0px"></i><i class="cd d" style="left:1214px;top:511.4px;height:34.3px"></i><i class="wk" style="left:1300px;top:442.9px;height:128.5px"></i><i class="cd u" style="left:1282px;top:477.1px;height:68.6px"></i><i class="wk" style="left:1368px;top:425.7px;height:68.6px"></i><i class="cd u" style="left:1350px;top:454.3px;height:22.8px"></i><i class="wk" style="left:1436px;top:431.4px;height:42.9px"></i><i class="cd d" style="left:1418px;top:454.3px;height:11.4px"></i><i class="wk" style="left:1504px;top:394.3px;height:94.3px"></i><i class="cd u" style="left:1486px;top:411.4px;height:54.3px"></i><i class="wk" style="left:1572px;top:362.9px;height:62.8px"></i><i class="cd u" style="left:1554px;top:374.3px;height:37.1px"></i><i class="wk" style="left:1640px;top:268.6px;height:134.3px"></i><i class="cd u" style="left:1622px;top:300px;height:74.3px"></i></div>
|
|
84
|
+
<svg class="abs" style="left:0;top:0;overflow:visible" width="1920" height="1080" viewBox="0 0 1920 1080"><path class="ma" id="ma" pathLength="1" d="M350 768.6 L418 764.3 L486 757.1 L554 743.9 L622 729.6 L690 715.4 L758 695.7 L826 685 L894 668.9 L962 641.8 L1030 619.6 L1098 597.5 L1166 569.3 L1234 552.9 L1302 536.8 L1370 510 L1438 491.4 L1506 468.9 L1574 439.3 L1642 407.1"/></svg>
|
|
85
|
+
<i class="hl" id="hl" style="top:300px"></i>
|
|
86
|
+
<div class="tag" id="tag" style="top:272px"><p id="tagt">1,270</p></div>
|
|
87
|
+
</div>
|
|
88
|
+
</section>
|
|
89
|
+
<section id="s3" class="clip scene" data-start="7.8" data-duration="3.8">
|
|
90
|
+
<div class="cam" id="c3">
|
|
91
|
+
<svg class="abs" style="left:0;top:0;overflow:visible" width="1920" height="1080" viewBox="0 0 1920 1080"><circle class="trkd" cx="560" cy="560" r="230"/><g id="dn"><circle class="sg" id="sg0" pathLength="1" cx="560" cy="560" r="230" transform="rotate(-90.0 560 560)" style="stroke:var(--acc);stroke-dasharray:0.544 1;stroke-dashoffset:0.55"/><circle class="sg" id="sg1" pathLength="1" cx="560" cy="560" r="230" transform="rotate(108.0 560 560)" style="stroke:var(--up);stroke-dasharray:0.244 1;stroke-dashoffset:0.25"/><circle class="sg" id="sg2" pathLength="1" cx="560" cy="560" r="230" transform="rotate(198.0 560 560)" style="stroke:color-mix(in srgb,var(--fg) 70%,var(--bg));stroke-dasharray:0.094 1;stroke-dashoffset:0.1"/><circle class="sg" id="sg3" pathLength="1" cx="560" cy="560" r="230" transform="rotate(234.0 560 560)" style="stroke:color-mix(in srgb,var(--acc) 50%,var(--down));stroke-dasharray:0.094 1;stroke-dashoffset:0.1"/></g></svg>
|
|
92
|
+
<p class="t" id="dc1" style="left:360px;width:400px;text-align:center;top:500px;font-size:56px;font-weight:700">פיזור חכם</p>
|
|
93
|
+
<p class="t mut" id="dc2" style="left:360px;width:400px;text-align:center;top:575px;font-size:36px">4 אפיקי השקעה</p>
|
|
94
|
+
<p class="t eb" id="e3" style="right:160px;top:180px">הרכב התיק</p>
|
|
95
|
+
<h2 class="t" id="t3" style="right:160px;top:230px;font-size:90px;font-weight:700">פיזור נכסים</h2>
|
|
96
|
+
<i class="sw" id="lw0" style="top:384px;background:var(--acc)"></i><p class="t ln" id="ln0" style="top:360px">מניות</p><p class="t lp" id="lp0" style="top:360px">55%</p><i class="sw" id="lw1" style="top:504px;background:var(--up)"></i><p class="t ln" id="ln1" style="top:480px">אג״ח</p><p class="t lp" id="lp1" style="top:480px">25%</p><i class="sw" id="lw2" style="top:624px;background:color-mix(in srgb,var(--fg) 70%,var(--bg))"></i><p class="t ln" id="ln2" style="top:600px">מזומן</p><p class="t lp" id="lp2" style="top:600px">10%</p><i class="sw" id="lw3" style="top:744px;background:color-mix(in srgb,var(--acc) 50%,var(--down))"></i><p class="t ln" id="ln3" style="top:720px">סחורות</p><p class="t lp" id="lp3" style="top:720px">10%</p>
|
|
97
|
+
</div>
|
|
98
|
+
</section>
|
|
99
|
+
<section id="s4" class="clip scene" data-start="11.6" data-duration="3.6">
|
|
100
|
+
<div class="cam" id="c4">
|
|
101
|
+
<div class="badge" id="bg4" style="clip-path:polygon(100.0% 50.0%,93.6% 55.7%,98.3% 62.9%,90.7% 66.8%,93.3% 75.0%,84.9% 76.8%,85.4% 85.4%,76.8% 84.9%,75.0% 93.3%,66.8% 90.7%,62.9% 98.3%,55.7% 93.6%,50.0% 100.0%,44.3% 93.6%,37.1% 98.3%,33.2% 90.7%,25.0% 93.3%,23.2% 84.9%,14.6% 85.4%,15.1% 76.8%,6.7% 75.0%,9.3% 66.8%,1.7% 62.9%,6.4% 55.7%,0.0% 50.0%,6.4% 44.3%,1.7% 37.1%,9.3% 33.2%,6.7% 25.0%,15.1% 23.2%,14.6% 14.6%,23.2% 15.1%,25.0% 6.7%,33.2% 9.3%,37.1% 1.7%,44.3% 6.4%,50.0% 0.0%,55.7% 6.4%,62.9% 1.7%,66.8% 9.3%,75.0% 6.7%,76.8% 15.1%,85.4% 14.6%,84.9% 23.2%,93.3% 25.0%,90.7% 33.2%,98.3% 37.1%,93.6% 44.3%)"></div>
|
|
102
|
+
<p class="t" id="rt" style="left:280px;width:580px;text-align:center;top:440px;font-size:120px;font-weight:700;color:var(--bg);direction:ltr">+18.4%</p>
|
|
103
|
+
<p class="t" id="rl" style="left:280px;width:580px;text-align:center;top:610px;font-size:42px;font-weight:700;color:var(--bg)">תשואה שנתית</p>
|
|
104
|
+
<i class="arw" id="arw"></i>
|
|
105
|
+
<h2 class="t big" id="t4" style="right:160px;top:280px">התיק שלך</h2>
|
|
106
|
+
<h2 class="t big u" id="t4b" style="right:160px;top:410px">עובד בשבילך</h2>
|
|
107
|
+
<div class="cta" id="cta"><p id="ctat">פתחו חשבון בקרן אופק</p></div>
|
|
108
|
+
<p class="t mut" id="dis" style="right:160px;top:960px;font-size:26px">אין באמור המלצה להשקעה. תשואת עבר אינה מבטיחה תשואה עתידית.</p>
|
|
109
|
+
</div>
|
|
110
|
+
</section>
|
|
111
|
+
</div>
|
|
112
|
+
<script>
|
|
113
|
+
const tl=gsap.timeline({paused:true});
|
|
114
|
+
const S=[0,3.6,7.8,11.6,15.2],D=15.2;
|
|
115
|
+
const X="expo.out",P="power3.out",B="back.out(2)";
|
|
116
|
+
function fadeOut(i){tl.to("#c"+(i+1),{opacity:0,duration:.4,ease:"power1.in"},S[i+1]-.4);}
|
|
117
|
+
// s1 sparkline + ticker
|
|
118
|
+
tl.fromTo("#c1",{opacity:0},{opacity:1,duration:.4},S[0]);
|
|
119
|
+
tl.fromTo("#spl",{strokeDashoffset:1},{strokeDashoffset:0,duration:1.6,ease:"power2.inOut",autoRound:false},S[0]+.3);
|
|
120
|
+
tl.fromTo("#spa",{opacity:0},{opacity:1,duration:.8},S[0]+1.4);
|
|
121
|
+
tl.fromTo("#spd",{scale:0,transformOrigin:"50% 50%"},{scale:1,duration:.4,ease:B},S[0]+1.8);
|
|
122
|
+
tl.to("#spd",{scale:1.5,duration:.3,yoyo:true,repeat:3,ease:"sine.inOut",transformOrigin:"50% 50%"},S[0]+2.2);
|
|
123
|
+
tl.fromTo("#trk",{x:0},{x:900,duration:3.6,ease:"none"},S[0]);
|
|
124
|
+
tl.fromTo("#e1",{opacity:0,x:-40},{opacity:1,x:0,duration:.6,ease:P},S[0]+.2);
|
|
125
|
+
tl.fromTo("#t1",{clipPath:"inset(0% 0% 0% 100%)"},{clipPath:"inset(0% 0% 0% 0%)",duration:.9,ease:"power4.out"},S[0]+.35);
|
|
126
|
+
tl.fromTo("#t1b",{clipPath:"inset(0% 0% 0% 100%)"},{clipPath:"inset(0% 0% 0% 0%)",duration:.9,ease:"power4.out"},S[0]+.6);
|
|
127
|
+
tl.fromTo("#lb1",{opacity:0},{opacity:1,duration:.5},S[0]+1.1);
|
|
128
|
+
tl.fromTo("#vl1",{opacity:0,y:30,filter:"blur(10px)"},{opacity:1,y:0,filter:"blur(0px)",duration:.8,ease:X},S[0]+1.2);
|
|
129
|
+
fadeOut(0);
|
|
130
|
+
// s2 candles
|
|
131
|
+
tl.fromTo("#c2",{opacity:0},{opacity:1,duration:.4},S[1]);
|
|
132
|
+
tl.fromTo("#pn",{opacity:0,scale:.97},{opacity:1,scale:1,duration:.6,ease:P},S[1]);
|
|
133
|
+
tl.fromTo(["#t2","#ch2"],{opacity:0,y:-20},{opacity:1,y:0,duration:.5,ease:P,stagger:.15},S[1]+.1);
|
|
134
|
+
tl.fromTo(".gl",{scaleX:0,transformOrigin:"0% 50%"},{scaleX:1,duration:.6,ease:P,stagger:.06},S[1]+.2);
|
|
135
|
+
tl.fromTo(".gv",{opacity:0},{opacity:1,duration:.4,stagger:.06},S[1]+.3);
|
|
136
|
+
tl.fromTo("#cds .wk",{scaleY:0},{scaleY:1,duration:.3,ease:P,stagger:.09},S[1]+.5);
|
|
137
|
+
tl.fromTo("#cds .cd",{scaleY:0},{scaleY:1,duration:.35,ease:"back.out(2.5)",stagger:.09},S[1]+.55);
|
|
138
|
+
tl.fromTo("#ma",{strokeDashoffset:1},{strokeDashoffset:0,duration:1.8,ease:"none",autoRound:false},S[1]+.7);
|
|
139
|
+
tl.fromTo("#hl",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.6,ease:P},S[1]+2.5);
|
|
140
|
+
tl.fromTo("#tag",{x:60,opacity:0},{x:0,opacity:1,duration:.5,ease:B},S[1]+2.6);
|
|
141
|
+
tl.to("#tag",{scale:1.08,duration:.25,yoyo:true,repeat:3,ease:"sine.inOut"},S[1]+3.1);
|
|
142
|
+
fadeOut(1);
|
|
143
|
+
// s3 donut
|
|
144
|
+
tl.fromTo("#c3",{opacity:0},{opacity:1,duration:.4},S[2]);
|
|
145
|
+
tl.fromTo("#dn",{rotation:-40,svgOrigin:"560 560"},{rotation:0,svgOrigin:"560 560",duration:2,ease:"power3.out"},S[2]);
|
|
146
|
+
tl.fromTo("#sg0",{strokeDashoffset:0.55},{strokeDashoffset:0,duration:.6,ease:"power2.out",autoRound:false},S[2]+.3+0*.35);
|
|
147
|
+
tl.fromTo("#sg1",{strokeDashoffset:0.25},{strokeDashoffset:0,duration:.6,ease:"power2.out",autoRound:false},S[2]+.3+1*.35);
|
|
148
|
+
tl.fromTo("#sg2",{strokeDashoffset:0.1},{strokeDashoffset:0,duration:.6,ease:"power2.out",autoRound:false},S[2]+.3+2*.35);
|
|
149
|
+
tl.fromTo("#sg3",{strokeDashoffset:0.1},{strokeDashoffset:0,duration:.6,ease:"power2.out",autoRound:false},S[2]+.3+3*.35);
|
|
150
|
+
tl.fromTo(["#dc1","#dc2"],{opacity:0,scale:.8},{opacity:1,scale:1,duration:.6,ease:B,stagger:.15},S[2]+.6);
|
|
151
|
+
tl.fromTo("#e3",{opacity:0},{opacity:1,duration:.4},S[2]+.1);
|
|
152
|
+
tl.fromTo("#t3",{opacity:0,y:30},{opacity:1,y:0,duration:.7,ease:X},S[2]+.15);
|
|
153
|
+
[0,1,2,3].forEach(i=>{const a=S[2]+.35+i*.35;
|
|
154
|
+
tl.fromTo("#lw"+i,{scale:0},{scale:1,duration:.4,ease:B},a);
|
|
155
|
+
tl.fromTo(["#ln"+i,"#lp"+i],{opacity:0,x:-40},{opacity:1,x:0,duration:.5,ease:P,stagger:.1},a+.05);});
|
|
156
|
+
fadeOut(2);
|
|
157
|
+
// s4 return badge
|
|
158
|
+
tl.fromTo("#c4",{opacity:0},{opacity:1,duration:.4},S[3]);
|
|
159
|
+
tl.fromTo("#bg4",{scale:0,rotation:-60},{scale:1,rotation:0,duration:.8,ease:"back.out(1.6)"},S[3]+.1);
|
|
160
|
+
tl.to("#bg4",{rotation:20,duration:2.6,ease:"none"},S[3]+.9);
|
|
161
|
+
tl.fromTo("#rt",{opacity:0,scale:.4},{opacity:1,scale:1,duration:.6,ease:B},S[3]+.5);
|
|
162
|
+
tl.fromTo("#rl",{opacity:0},{opacity:1,duration:.5},S[3]+.8);
|
|
163
|
+
tl.fromTo("#arw",{y:120,opacity:0},{y:0,opacity:1,duration:.6,ease:B},S[3]+.7);
|
|
164
|
+
tl.to("#arw",{y:-24,duration:.35,yoyo:true,repeat:3,ease:"sine.inOut"},S[3]+1.4);
|
|
165
|
+
tl.fromTo("#t4",{opacity:0,x:-50},{opacity:1,x:0,duration:.6,ease:P},S[3]+.4);
|
|
166
|
+
tl.fromTo("#t4b",{opacity:0,x:-50},{opacity:1,x:0,duration:.6,ease:P},S[3]+.6);
|
|
167
|
+
tl.fromTo("#cta",{scale:.5,opacity:0},{scale:1,opacity:1,duration:.6,ease:B},S[3]+1.2);
|
|
168
|
+
tl.fromTo("#dis",{opacity:0},{opacity:1,duration:.5},S[3]+1.6);
|
|
169
|
+
tl.set({},{},D);
|
|
170
|
+
window.__timelines=window.__timelines||{};window.__timelines["stock-portfolio"]=tl;
|
|
171
|
+
</script>
|
|
172
|
+
</body>
|
|
173
|
+
</html>
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="he" dir="rtl">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=1920, height=1080">
|
|
6
|
+
<title>גריד שוויצרי מינימלי</title>
|
|
7
|
+
<script src="vendor/gsap.min.js"></script>
|
|
8
|
+
<style>
|
|
9
|
+
@font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
|
|
10
|
+
@font-face{font-family:"Heebo";font-weight:400;src:url(fonts/heebo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
|
|
11
|
+
@font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
|
|
12
|
+
@font-face{font-family:"Heebo";font-weight:700;src:url(fonts/heebo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
|
|
13
|
+
:root{--bg:#f2f0eb;--fg:#111111;--accent:#e3241b;--muted:#8d8a84}
|
|
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
|
+
.vl{position:absolute;top:0;bottom:0;width:2px;background:color-mix(in srgb,var(--muted) 35%,transparent);transform-origin:50% 0}
|
|
24
|
+
.vl.d{background:color-mix(in srgb,var(--bg) 16%,transparent)}
|
|
25
|
+
.hl{position:absolute;left:120px;right:120px;height:3px;background:var(--fg);transform-origin:100% 50%}
|
|
26
|
+
.giant{position:absolute;font-weight:700;line-height:1;letter-spacing:-.045em;white-space:nowrap}
|
|
27
|
+
.sm{position:absolute;font-size:32px;font-weight:700;white-space:nowrap}
|
|
28
|
+
.cap{position:absolute;font-size:42px;font-weight:400;white-space:nowrap}
|
|
29
|
+
.blk{position:absolute;background:var(--accent)}
|
|
30
|
+
.pan{position:absolute;inset:0;transform:translateY(100%)}
|
|
31
|
+
.ruler{position:absolute;height:60px;background:linear-gradient(90deg,var(--fg) 3px,transparent 3px) 0 0/140px 60px,linear-gradient(90deg,var(--fg) 2px,transparent 2px) 0 30px/35px 30px no-repeat;background-repeat:repeat-x;transform-origin:100% 50%}
|
|
32
|
+
.hb{position:absolute;height:56px;background:var(--bg);transform-origin:100% 50%}
|
|
33
|
+
.hb.r{background:var(--accent)}
|
|
34
|
+
.arrow{position:absolute;height:4px;background:var(--fg);transform-origin:100% 50%}
|
|
35
|
+
.arrow::after{content:"";position:absolute;left:-2px;top:-12px;width:24px;height:24px;border-left:4px solid var(--fg);border-bottom:4px solid var(--fg);transform:rotate(45deg)}
|
|
36
|
+
</style>
|
|
37
|
+
</head>
|
|
38
|
+
<body>
|
|
39
|
+
<div id="root" data-composition-id="swiss-grid" data-start="0" data-width="1920" data-height="1080" data-duration="12.6">
|
|
40
|
+
<section id="s1" class="clip scene" data-start="0" data-duration="3">
|
|
41
|
+
<div class="cam" id="c1">
|
|
42
|
+
<i class="vl" style="left:120px"></i><i class="vl" style="left:260px"></i><i class="vl" style="left:400px"></i><i class="vl" style="left:540px"></i><i class="vl" style="left:680px"></i><i class="vl" style="left:820px"></i><i class="vl" style="left:960px"></i><i class="vl" style="left:1100px"></i><i class="vl" style="left:1240px"></i><i class="vl" style="left:1380px"></i><i class="vl" style="left:1520px"></i><i class="vl" style="left:1660px"></i><i class="vl" style="left:1800px"></i>
|
|
43
|
+
<div class="hl" id="h1a" style="top:200px"></div><div class="hl" id="h1b" style="top:860px"></div>
|
|
44
|
+
<p class="sm" id="l1a" style="right:120px;top:140px">סטודיו קו</p>
|
|
45
|
+
<p class="sm" id="l1b" style="left:120px;top:140px">2026</p>
|
|
46
|
+
<div class="blk" id="bk1" style="left:402px;top:340px;width:278px;height:278px"></div>
|
|
47
|
+
<h1 class="giant" id="g1" style="right:112px;top:290px;font-size:340px">פשוט.</h1>
|
|
48
|
+
<p class="sm" id="i1" style="right:120px;top:900px;color:var(--accent)">01</p>
|
|
49
|
+
<p class="cap" id="cp1" style="right:262px;top:894px">בלי רעש. רק מה שחשוב.</p>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="pan" id="pn1" style="background:var(--bg)"></div>
|
|
52
|
+
</section>
|
|
53
|
+
<section id="s2" class="clip scene" data-start="3" data-duration="3">
|
|
54
|
+
<div class="cam" id="c2">
|
|
55
|
+
<i class="vl" style="left:120px"></i><i class="vl" style="left:260px"></i><i class="vl" style="left:400px"></i><i class="vl" style="left:540px"></i><i class="vl" style="left:680px"></i><i class="vl" style="left:820px"></i><i class="vl" style="left:960px"></i><i class="vl" style="left:1100px"></i><i class="vl" style="left:1240px"></i><i class="vl" style="left:1380px"></i><i class="vl" style="left:1520px"></i><i class="vl" style="left:1660px"></i><i class="vl" style="left:1800px"></i>
|
|
56
|
+
<div class="hl" id="h2a" style="top:200px"></div>
|
|
57
|
+
<p class="sm" id="l2a" style="right:120px;top:140px">סטודיו קו</p>
|
|
58
|
+
<p class="sm" id="l2b" style="left:120px;top:140px">שיטה</p>
|
|
59
|
+
<div class="abs" id="ci2" style="left:262px;top:300px;width:396px;height:396px;border-radius:50%;border:4px solid var(--fg)"></div>
|
|
60
|
+
<div class="blk" id="bk2" style="left:402px;top:440px;width:116px;height:116px;border-radius:50%"></div>
|
|
61
|
+
<div class="abs" id="x2a" style="left:230px;top:497px;width:460px;height:2px;background:var(--fg)"></div>
|
|
62
|
+
<div class="abs" id="x2b" style="left:459px;top:268px;width:2px;height:460px;background:var(--fg)"></div>
|
|
63
|
+
<h1 class="giant" id="g2" style="right:112px;top:290px;font-size:340px">מדויק.</h1>
|
|
64
|
+
<div class="ruler" id="ru2" style="left:120px;right:120px;top:780px"></div>
|
|
65
|
+
<p class="sm" id="i2" style="right:120px;top:900px;color:var(--accent)">02</p>
|
|
66
|
+
<p class="cap" id="cp2" style="right:262px;top:894px">כל פיקסל במקום שלו.</p>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="pan" id="pn2" style="background:var(--fg)"></div>
|
|
69
|
+
</section>
|
|
70
|
+
<section id="s3" class="clip scene" data-start="6" data-duration="3.2">
|
|
71
|
+
<div class="cam" id="c3" style="background:var(--fg);color:var(--bg)">
|
|
72
|
+
<i class="vl d" style="left:120px"></i><i class="vl d" style="left:260px"></i><i class="vl d" style="left:400px"></i><i class="vl d" style="left:540px"></i><i class="vl d" style="left:680px"></i><i class="vl d" style="left:820px"></i><i class="vl d" style="left:960px"></i><i class="vl d" style="left:1100px"></i><i class="vl d" style="left:1240px"></i><i class="vl d" style="left:1380px"></i><i class="vl d" style="left:1520px"></i><i class="vl d" style="left:1660px"></i><i class="vl d" style="left:1800px"></i>
|
|
73
|
+
<h1 class="giant" id="g3" style="right:112px;top:150px;font-size:300px">אפקטיבי.</h1>
|
|
74
|
+
<p class="giant" id="st3" style="left:110px;top:560px;font-size:250px;color:var(--accent);direction:ltr">87%</p>
|
|
75
|
+
<p class="sm" id="st3c" style="left:124px;top:840px;font-weight:400;color:var(--muted)">שיפור ממוצע בהמרות</p>
|
|
76
|
+
<p class="sm" id="b1l" style="right:120px;top:592px">מעורבות</p><div class="hb" id="b1" style="right:400px;top:584px;width:560px"></div>
|
|
77
|
+
<p class="sm" id="b2l" style="right:120px;top:692px">המרות</p><div class="hb r" id="b2" style="right:400px;top:684px;width:700px"></div>
|
|
78
|
+
<p class="sm" id="b3l" style="right:120px;top:792px">שימור</p><div class="hb" id="b3" style="right:400px;top:784px;width:420px"></div>
|
|
79
|
+
<p class="sm" id="i3" style="right:120px;top:950px;color:var(--accent)">03</p>
|
|
80
|
+
</div>
|
|
81
|
+
<div class="pan" id="pn3" style="background:var(--bg)"></div>
|
|
82
|
+
</section>
|
|
83
|
+
<section id="s4" class="clip scene" data-start="9.2" data-duration="3.4">
|
|
84
|
+
<div class="cam" id="c4">
|
|
85
|
+
<i class="vl" style="left:120px"></i><i class="vl" style="left:260px"></i><i class="vl" style="left:400px"></i><i class="vl" style="left:540px"></i><i class="vl" style="left:680px"></i><i class="vl" style="left:820px"></i><i class="vl" style="left:960px"></i><i class="vl" style="left:1100px"></i><i class="vl" style="left:1240px"></i><i class="vl" style="left:1380px"></i><i class="vl" style="left:1520px"></i><i class="vl" style="left:1660px"></i><i class="vl" style="left:1800px"></i>
|
|
86
|
+
<div class="hl" id="h4a" style="top:200px"></div><div class="hl" id="h4b" style="top:860px"></div>
|
|
87
|
+
<div class="blk" id="lg1" style="left:542px;top:340px;width:276px;height:276px;border-radius:50%"></div>
|
|
88
|
+
<div class="blk" id="lg2" style="left:402px;top:478px;width:556px;height:20px;background:var(--fg)"></div>
|
|
89
|
+
<h1 class="giant" id="g4" style="right:112px;top:300px;font-size:220px">סטודיו קו</h1>
|
|
90
|
+
<p class="cap" id="t4" style="right:122px;top:560px">עיצוב שעובד בשבילכם</p>
|
|
91
|
+
<p class="sm" id="ct4" style="right:120px;top:900px;font-size:40px">בואו נדבר</p>
|
|
92
|
+
<div class="arrow" id="ar4" style="right:340px;top:924px;width:220px"></div>
|
|
93
|
+
</div>
|
|
94
|
+
</section>
|
|
95
|
+
</div>
|
|
96
|
+
<script>
|
|
97
|
+
const tl=gsap.timeline({paused:true});
|
|
98
|
+
const S=[0,3,6,9.2,12.6],D=12.6;
|
|
99
|
+
const X="expo.out",Q="power4.inOut";
|
|
100
|
+
function grid(i){tl.fromTo("#c"+(i+1)+" .vl",{scaleY:0},{scaleY:1,duration:.8,ease:Q,stagger:{each:.03,from:"end"}},S[i]+(i?0:.05));}
|
|
101
|
+
function push(i,pn){tl.fromTo(pn,{yPercent:100},{yPercent:0,duration:.5,ease:"power4.in"},S[i+1]-.5);tl.to("#c"+(i+1),{y:-160,duration:.5,ease:"power4.in"},S[i+1]-.5);}
|
|
102
|
+
function enter(i){tl.fromTo("#c"+(i+1),{y:200},{y:0,duration:.7,ease:X},S[i]);}
|
|
103
|
+
function rise(sel,at){tl.fromTo(sel,{yPercent:100,clipPath:"inset(0 0 100% 0)"},{yPercent:0,clipPath:"inset(0 0 0% 0)",duration:.8,ease:X},at);}
|
|
104
|
+
// s1
|
|
105
|
+
grid(0);
|
|
106
|
+
tl.fromTo(["#h1a","#h1b"],{scaleX:0},{scaleX:1,duration:.9,ease:Q,stagger:.1},S[0]+.1);
|
|
107
|
+
tl.fromTo(["#l1a","#l1b"],{opacity:0},{opacity:1,duration:.4,stagger:.1},S[0]+.4);
|
|
108
|
+
rise("#g1",S[0]+.35);
|
|
109
|
+
tl.fromTo("#bk1",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.6,ease:Q},S[0]+.6);
|
|
110
|
+
tl.to("#bk1",{x:-140,duration:.6,ease:Q},S[0]+1.5);
|
|
111
|
+
tl.to("#bk1",{y:140,duration:.5,ease:Q},S[0]+2.1);
|
|
112
|
+
tl.fromTo(["#i1","#cp1"],{opacity:0,x:40},{opacity:1,x:0,duration:.6,ease:X,stagger:.12},S[0]+.9);
|
|
113
|
+
tl.fromTo("#g1",{x:0},{x:-30,duration:2.2,ease:"none"},S[0]+.8);
|
|
114
|
+
push(0,"#pn1");
|
|
115
|
+
// s2
|
|
116
|
+
enter(1);grid(1);
|
|
117
|
+
tl.fromTo("#h2a",{scaleX:0},{scaleX:1,duration:.9,ease:Q},S[1]+.1);
|
|
118
|
+
tl.fromTo(["#l2a","#l2b"],{opacity:0},{opacity:1,duration:.4,stagger:.1},S[1]+.3);
|
|
119
|
+
rise("#g2",S[1]+.25);
|
|
120
|
+
tl.fromTo("#ci2",{scale:0,rotation:-90},{scale:1,rotation:0,duration:.9,ease:X},S[1]+.3);
|
|
121
|
+
tl.fromTo("#x2a",{scaleX:0},{scaleX:1,duration:.6,ease:Q},S[1]+.6);
|
|
122
|
+
tl.fromTo("#x2b",{scaleY:0},{scaleY:1,duration:.6,ease:Q},S[1]+.7);
|
|
123
|
+
tl.fromTo("#bk2",{x:-180,y:-180,scale:.4},{x:0,y:0,scale:1,duration:1,ease:"elastic.out(1,.6)"},S[1]+.9);
|
|
124
|
+
tl.fromTo("#ru2",{scaleX:0},{scaleX:1,duration:1.2,ease:Q},S[1]+.5);
|
|
125
|
+
tl.fromTo(["#i2","#cp2"],{opacity:0,x:40},{opacity:1,x:0,duration:.6,ease:X,stagger:.12},S[1]+1);
|
|
126
|
+
tl.to("#ci2",{rotation:45,duration:1.6,ease:"none"},S[1]+1.2);
|
|
127
|
+
push(1,"#pn2");
|
|
128
|
+
// s3
|
|
129
|
+
enter(2);grid(2);
|
|
130
|
+
rise("#g3",S[2]+.2);
|
|
131
|
+
tl.fromTo("#st3",{opacity:0,y:60},{opacity:1,y:0,duration:.8,ease:X},S[2]+.6);
|
|
132
|
+
tl.fromTo("#st3c",{opacity:0},{opacity:1,duration:.5},S[2]+1.1);
|
|
133
|
+
["#b1","#b2","#b3"].forEach((b,i)=>{tl.fromTo(b,{scaleX:0},{scaleX:1,duration:.9,ease:Q},S[2]+.8+i*.15);tl.fromTo(b+"l",{opacity:0,x:30},{opacity:1,x:0,duration:.5,ease:X},S[2]+.7+i*.15);});
|
|
134
|
+
tl.fromTo("#i3",{opacity:0},{opacity:1,duration:.4},S[2]+1.2);
|
|
135
|
+
tl.to("#b2",{scaleX:1.12,duration:1.2,ease:"sine.inOut"},S[2]+1.8);
|
|
136
|
+
push(2,"#pn3");
|
|
137
|
+
// s4
|
|
138
|
+
enter(3);grid(3);
|
|
139
|
+
tl.fromTo(["#h4a","#h4b"],{scaleX:0},{scaleX:1,duration:.9,ease:Q,stagger:.1},S[3]+.1);
|
|
140
|
+
tl.fromTo("#lg1",{scale:0},{scale:1,duration:.8,ease:"back.out(1.6)"},S[3]+.35);
|
|
141
|
+
tl.fromTo("#lg2",{scaleX:0,transformOrigin:"0% 50%"},{scaleX:1,duration:.7,ease:Q},S[3]+.6);
|
|
142
|
+
tl.to("#lg1",{x:140,duration:1.8,ease:"sine.inOut"},S[3]+1.3);
|
|
143
|
+
rise("#g4",S[3]+.4);
|
|
144
|
+
tl.fromTo("#t4",{opacity:0,y:20},{opacity:1,y:0,duration:.6,ease:X},S[3]+.9);
|
|
145
|
+
tl.fromTo("#ct4",{opacity:0},{opacity:1,duration:.5},S[3]+1.2);
|
|
146
|
+
tl.fromTo("#ar4",{scaleX:0},{scaleX:1,duration:.7,ease:Q},S[3]+1.3);
|
|
147
|
+
tl.to("#ar4",{x:-30,duration:.5,ease:"sine.inOut",yoyo:true,repeat:1},S[3]+2);
|
|
148
|
+
tl.set({},{},D);
|
|
149
|
+
window.__timelines=window.__timelines||{};window.__timelines["swiss-grid"]=tl;
|
|
150
|
+
</script>
|
|
151
|
+
</body>
|
|
152
|
+
</html>
|