motiondesk-studio 0.0.0-stage → 1.3.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 (506) hide show
  1. package/LICENSE +8 -0
  2. package/README.md +53 -2
  3. package/THIRD_PARTY_NOTICES.md +13 -0
  4. package/app/assets/ai-assistant-DOEK1wrr.js +138 -0
  5. package/app/assets/annual-report-C59pnbh2.js +147 -0
  6. package/app/assets/app-tour-B8525Qt1.js +164 -0
  7. package/app/assets/apps-DwnIwigQ.js +1 -0
  8. package/app/assets/arrows-_CCvumhN.js +1 -0
  9. package/app/assets/auto-CJsCPj1R.js +1 -0
  10. package/app/assets/badges-BPgMBVy0.js +1 -0
  11. package/app/assets/balloon-party-BDWzrF-Z.js +160 -0
  12. package/app/assets/beauty-DgeCsQdf.js +1 -0
  13. package/app/assets/boarding-pass-i17EemsZ.js +192 -0
  14. package/app/assets/business-BQslCr0i.js +1 -0
  15. package/app/assets/business-DfyVziqj.js +1 -0
  16. package/app/assets/catalog-Cdx5nbp0.js +1 -0
  17. package/app/assets/celebration-COCZTKjl.js +1 -0
  18. package/app/assets/celebrations-CkfTGLEK.js +1 -0
  19. package/app/assets/chalk-menu-CQSqwxNP.js +158 -0
  20. package/app/assets/claim-steps-BNFeoYYZ.js +180 -0
  21. package/app/assets/clinic-booking-CvQEpBWn.js +178 -0
  22. package/app/assets/community-BV13F-Wp.js +1 -0
  23. package/app/assets/concert-poster-iUOM-elw.js +189 -0
  24. package/app/assets/course-syllabus-CnM_03XP.js +164 -0
  25. package/app/assets/culture-DpL14_5r.js +1 -0
  26. package/app/assets/cyber-shield-B_6oatye.js +192 -0
  27. package/app/assets/data-DgES5FIF.js +1 -0
  28. package/app/assets/dev-hiring-code-Bg00S1Iz.js +138 -0
  29. package/app/assets/devices-D1500q8F.js +1 -0
  30. package/app/assets/donation-meter-C3wuRmFA.js +164 -0
  31. package/app/assets/editorial-mag-DsTVzQMx.js +180 -0
  32. package/app/assets/education-CGTOg3_0.js +1 -0
  33. package/app/assets/ev-charge-KaMIQd_s.js +218 -0
  34. package/app/assets/event-announce-cLmuvt45.js +147 -0
  35. package/app/assets/events-kZ6HshfK.js +1 -0
  36. package/app/assets/family-De56hVSo.js +1 -0
  37. package/app/assets/fashion-DbGAD96W.js +1 -0
  38. package/app/assets/finance-BUdlKAud.js +1 -0
  39. package/app/assets/finance-growth-CYgFE0RC.js +140 -0
  40. package/app/assets/fitness-rings-streak-Cp7n4zq_.js +141 -0
  41. package/app/assets/flash-sale-Tc0Jw34H.js +143 -0
  42. package/app/assets/flipclock-countdown-BkrU9ZhF.js +153 -0
  43. package/app/assets/floorplan-linedraw-B4ZwEDv3.js +192 -0
  44. package/app/assets/food-CiEyQAd1.js +1 -0
  45. package/app/assets/food-PijmcKM-.js +1 -0
  46. package/app/assets/gaming-DnzPj6Uv.js +1 -0
  47. package/app/assets/glass-product-CsUqplIf.js +139 -0
  48. package/app/assets/glossy-cosmetics-DBb-YonD.js +203 -0
  49. package/app/assets/gold-couture-e6c5nsVY.js +190 -0
  50. package/app/assets/gradient-blobs-Daiu9eFf.js +139 -0
  51. package/app/assets/graduation-day-vdz-kGI1.js +134 -0
  52. package/app/assets/headline-news-ticker-GgZ_nRXK.js +181 -0
  53. package/app/assets/health-CbyTqvSM.js +1 -0
  54. package/app/assets/health-DMeKWmDa.js +1 -0
  55. package/app/assets/hiring-team-Bia3GQaH.js +137 -0
  56. package/app/assets/holiday-greeting-B7TFl0_5.js +144 -0
  57. package/app/assets/holidays-BmXfhKdf.js +1 -0
  58. package/app/assets/hr-2i-f-S-M.js +1 -0
  59. package/app/assets/hyperframes-BM7eWgx2.js +1 -0
  60. package/app/assets/index-BlSoi5FK.css +1 -0
  61. package/app/assets/index-D3rEDfqX.js +290 -0
  62. package/app/assets/index-b2-CMdBrCiU.js +1 -0
  63. package/app/assets/index-b3-egAjkT9z.js +1 -0
  64. package/app/assets/index-b4-Cnj_xde0.js +1 -0
  65. package/app/assets/index-b5-CoZgwX8-.js +1 -0
  66. package/app/assets/iso-product-3d-DQT1lHDq.js +229 -0
  67. package/app/assets/itinerary-map-pins-BTX0ZebL.js +201 -0
  68. package/app/assets/key-handover-DuIj4oKe.js +171 -0
  69. package/app/assets/kids-BNwXKe4O.js +1 -0
  70. package/app/assets/kinetic-launch-D2rSnewM.js +161 -0
  71. package/app/assets/launch-DqkMfeFI.js +1 -0
  72. package/app/assets/legal-Caoeh9dp.js +1 -0
  73. package/app/assets/legal-trust-T01BmIDB.js +186 -0
  74. package/app/assets/level-up-CBXf6nj2.js +205 -0
  75. package/app/assets/logo-sting-Uf0nckUQ.js +106 -0
  76. package/app/assets/manifesto-quote-DCIONyzh.js +120 -0
  77. package/app/assets/match-day-p25bzqbq.js +146 -0
  78. package/app/assets/match-score-CSZ4Tx4B.js +210 -0
  79. package/app/assets/music-hbnVS8dK.js +1 -0
  80. package/app/assets/nature-Bj99iNsv.js +1 -0
  81. package/app/assets/neighborhood-map-BpbZiy-v.js +158 -0
  82. package/app/assets/neon-grid-Bo0xfsL6.js +159 -0
  83. package/app/assets/nonprofit-DK7XI33A.js +1 -0
  84. package/app/assets/objects-DD8bqyWR.js +1 -0
  85. package/app/assets/org-chart-hiring-tGX1UpiJ.js +161 -0
  86. package/app/assets/paper-collage-CK-XODvZ.js +181 -0
  87. package/app/assets/paw-adopt-D5hKgsaL.js +173 -0
  88. package/app/assets/people-l3GsDfAr.js +1 -0
  89. package/app/assets/pets-Dp8EeTjS.js +1 -0
  90. package/app/assets/playful-blocks-BGXW4vra.js +162 -0
  91. package/app/assets/podcast-waveform-promo-D-h_ydpJ.js +182 -0
  92. package/app/assets/premium-Cy680sWT.js +1 -0
  93. package/app/assets/price-grid-DbYGPlJt.js +176 -0
  94. package/app/assets/quote-carousel-bold-D5fpKgSS.js +143 -0
  95. package/app/assets/realestate-BXW-rsfP.js +1 -0
  96. package/app/assets/recipe-ingredients-B_bSw3x_.js +162 -0
  97. package/app/assets/retail-D-XWCWed.js +1 -0
  98. package/app/assets/retro-80s-CCZc9S6x.js +141 -0
  99. package/app/assets/roadmap-timeline-BpbNdfCr.js +164 -0
  100. package/app/assets/saas-dashboard-s-2gR3AN.js +195 -0
  101. package/app/assets/sale-wheel-24h-CsiOja2Z.js +153 -0
  102. package/app/assets/save-the-date-C6O8fH8f.js +141 -0
  103. package/app/assets/seasons-BFYc_klb.js +1 -0
  104. package/app/assets/services-DRPQcCXX.js +1 -0
  105. package/app/assets/shapes-AVMwC-FR.js +1 -0
  106. package/app/assets/social-CNpE0GKG.js +1 -0
  107. package/app/assets/split-wipe-before-after-Lg-NbF0V.js +198 -0
  108. package/app/assets/sports-DyBfpPm5.js +1 -0
  109. package/app/assets/stats-dashboard-CxxFtNfj.js +149 -0
  110. package/app/assets/stickers-J4NDCW2L.js +1 -0
  111. package/app/assets/stock-portfolio-DFpeHEjJ.js +174 -0
  112. package/app/assets/swiss-grid-jfcgySaJ.js +153 -0
  113. package/app/assets/tech-BaRjeFZ0.js +1 -0
  114. package/app/assets/tech-D-xc9pRv.js +1 -0
  115. package/app/assets/transport-Bolufhfq.js +1 -0
  116. package/app/assets/travel-DoqS5vPB.js +1 -0
  117. package/app/assets/travel-route-DUPXi7Qa.js +169 -0
  118. package/app/assets/tutorial-steps-Ep2JeqXu.js +160 -0
  119. package/app/assets/wallet-card-transactions-DtI9Usn9.js +188 -0
  120. package/app/assets/wedding-invite-BhgqMwO7.js +142 -0
  121. package/app/catalog/bank-previews/01-car-choice.webp +0 -0
  122. package/app/catalog/bank-previews/02-holiday-budget.webp +0 -0
  123. package/app/catalog/bank-previews/03-one-click.webp +0 -0
  124. package/app/catalog/bank-previews/04-career-course.webp +0 -0
  125. package/app/catalog/bank-previews/05-home-refresh.webp +0 -0
  126. package/app/catalog/bank-previews/06-summer-plans.webp +0 -0
  127. package/app/catalog/bank-previews/07-car-upgrade.webp +0 -0
  128. package/app/catalog/bank-previews/08-wedding-plan.webp +0 -0
  129. package/app/catalog/bank-previews/09-share-intro.webp +0 -0
  130. package/app/catalog/bank-previews/10-suspicious-message.webp +0 -0
  131. package/app/catalog/bank-previews/11-student-routine.webp +0 -0
  132. package/app/catalog/bank-previews/12-investing-first-step.webp +0 -0
  133. package/app/catalog/bank-previews/13-fomo.webp +0 -0
  134. package/app/catalog/bank-previews/14-market-timing.webp +0 -0
  135. package/app/catalog/bank-previews/15-investing-for-all.webp +0 -0
  136. package/app/catalog/bank-previews/16-two-paths.webp +0 -0
  137. package/app/catalog/bank-previews/17-small-business.webp +0 -0
  138. package/app/catalog/bank-previews/18-travel-forex.webp +0 -0
  139. package/app/catalog/bank-previews/19-mortgage-questions.webp +0 -0
  140. package/app/catalog/bank-previews/20-market-app.webp +0 -0
  141. package/app/catalog/enhanced-v2/01-revenue-quarter/config.motiondesk-config.json +54 -0
  142. package/app/catalog/enhanced-v2/01-revenue-quarter/poster.jpg +0 -0
  143. package/app/catalog/enhanced-v2/01-revenue-quarter/preview.mp4 +0 -0
  144. package/app/catalog/enhanced-v2/01-revenue-quarter/project.motiondesk.json +5127 -0
  145. package/app/catalog/enhanced-v2/02-daily-workout/config.motiondesk-config.json +54 -0
  146. package/app/catalog/enhanced-v2/02-daily-workout/poster.jpg +0 -0
  147. package/app/catalog/enhanced-v2/02-daily-workout/preview.mp4 +0 -0
  148. package/app/catalog/enhanced-v2/02-daily-workout/project.motiondesk.json +5747 -0
  149. package/app/catalog/enhanced-v2/03-italy-trip/config.motiondesk-config.json +44 -0
  150. package/app/catalog/enhanced-v2/03-italy-trip/poster.jpg +0 -0
  151. package/app/catalog/enhanced-v2/03-italy-trip/preview.mp4 +0 -0
  152. package/app/catalog/enhanced-v2/03-italy-trip/project.motiondesk.json +5139 -0
  153. package/app/catalog/enhanced-v2/04-smart-savings/config.motiondesk-config.json +41 -0
  154. package/app/catalog/enhanced-v2/04-smart-savings/poster.jpg +0 -0
  155. package/app/catalog/enhanced-v2/04-smart-savings/preview.mp4 +0 -0
  156. package/app/catalog/enhanced-v2/04-smart-savings/project.motiondesk.json +5322 -0
  157. package/app/catalog/enhanced-v2/05-weekly-challenge/config.motiondesk-config.json +45 -0
  158. package/app/catalog/enhanced-v2/05-weekly-challenge/poster.jpg +0 -0
  159. package/app/catalog/enhanced-v2/05-weekly-challenge/preview.mp4 +0 -0
  160. package/app/catalog/enhanced-v2/05-weekly-challenge/project.motiondesk.json +5442 -0
  161. package/app/catalog/enhanced-v2/06-flash-sale/config.motiondesk-config.json +42 -0
  162. package/app/catalog/enhanced-v2/06-flash-sale/poster.jpg +0 -0
  163. package/app/catalog/enhanced-v2/06-flash-sale/preview.mp4 +0 -0
  164. package/app/catalog/enhanced-v2/06-flash-sale/project.motiondesk.json +5616 -0
  165. package/app/catalog/enhanced-v2/07-flight-savings/config.motiondesk-config.json +43 -0
  166. package/app/catalog/enhanced-v2/07-flight-savings/poster.jpg +0 -0
  167. package/app/catalog/enhanced-v2/07-flight-savings/preview.mp4 +0 -0
  168. package/app/catalog/enhanced-v2/07-flight-savings/project.motiondesk.json +6319 -0
  169. package/app/catalog/enhanced-v2/08-team-dashboard/config.motiondesk-config.json +52 -0
  170. package/app/catalog/enhanced-v2/08-team-dashboard/poster.jpg +0 -0
  171. package/app/catalog/enhanced-v2/08-team-dashboard/preview.mp4 +0 -0
  172. package/app/catalog/enhanced-v2/08-team-dashboard/project.motiondesk.json +5327 -0
  173. package/app/catalog/showcase-v3/11-flow-finance/poster.jpg +0 -0
  174. package/app/catalog/showcase-v3/11-flow-finance/preview.mp4 +0 -0
  175. package/app/catalog/showcase-v3/11-flow-finance/project.motiondesk.json +5690 -0
  176. package/app/catalog/showcase-v3/12-pulse-training/poster.jpg +0 -0
  177. package/app/catalog/showcase-v3/12-pulse-training/preview.mp4 +0 -0
  178. package/app/catalog/showcase-v3/12-pulse-training/project.motiondesk.json +3643 -0
  179. package/app/catalog/showcase-v3/13-orbit-travel/poster.jpg +0 -0
  180. package/app/catalog/showcase-v3/13-orbit-travel/preview.mp4 +0 -0
  181. package/app/catalog/showcase-v3/13-orbit-travel/project.motiondesk.json +3939 -0
  182. package/app/catalog/showcase-v3/14-nova-product/config.motiondesk-config.json +163 -0
  183. package/app/catalog/showcase-v3/14-nova-product/poster.jpg +0 -0
  184. package/app/catalog/showcase-v3/14-nova-product/preview.mp4 +0 -0
  185. package/app/catalog/showcase-v3/14-nova-product/project.motiondesk.json +11196 -0
  186. package/app/catalog/showcase-v3/15-tempo-motion/config.motiondesk-config.json +122 -0
  187. package/app/catalog/showcase-v3/15-tempo-motion/poster.jpg +0 -0
  188. package/app/catalog/showcase-v3/15-tempo-motion/preview.mp4 +0 -0
  189. package/app/catalog/showcase-v3/15-tempo-motion/project.motiondesk.json +7424 -0
  190. package/app/catalog/showcase-v3/16-atlas-journey/config.motiondesk-config.json +132 -0
  191. package/app/catalog/showcase-v3/16-atlas-journey/poster.jpg +0 -0
  192. package/app/catalog/showcase-v3/16-atlas-journey/preview.mp4 +0 -0
  193. package/app/catalog/showcase-v3/16-atlas-journey/project.motiondesk.json +9257 -0
  194. package/app/catalog/showcase-v3/17-revenue-quarter/config.motiondesk-config.json +151 -0
  195. package/app/catalog/showcase-v3/17-revenue-quarter/poster.jpg +0 -0
  196. package/app/catalog/showcase-v3/17-revenue-quarter/preview.mp4 +0 -0
  197. package/app/catalog/showcase-v3/17-revenue-quarter/project.motiondesk.json +10473 -0
  198. package/app/catalog/showcase-v3/18-daily-workout/config.motiondesk-config.json +139 -0
  199. package/app/catalog/showcase-v3/18-daily-workout/poster.jpg +0 -0
  200. package/app/catalog/showcase-v3/18-daily-workout/preview.mp4 +0 -0
  201. package/app/catalog/showcase-v3/18-daily-workout/project.motiondesk.json +8656 -0
  202. package/app/catalog/showcase-v3/19-italy-trip/config.motiondesk-config.json +132 -0
  203. package/app/catalog/showcase-v3/19-italy-trip/poster.jpg +0 -0
  204. package/app/catalog/showcase-v3/19-italy-trip/preview.mp4 +0 -0
  205. package/app/catalog/showcase-v3/19-italy-trip/project.motiondesk.json +9690 -0
  206. package/app/catalog/showcase-v3/20-smart-savings/config.motiondesk-config.json +152 -0
  207. package/app/catalog/showcase-v3/20-smart-savings/poster.jpg +0 -0
  208. package/app/catalog/showcase-v3/20-smart-savings/preview.mp4 +0 -0
  209. package/app/catalog/showcase-v3/20-smart-savings/project.motiondesk.json +9770 -0
  210. package/app/catalog/showcase-v3/21-weekly-challenge/config.motiondesk-config.json +125 -0
  211. package/app/catalog/showcase-v3/21-weekly-challenge/poster.jpg +0 -0
  212. package/app/catalog/showcase-v3/21-weekly-challenge/preview.mp4 +0 -0
  213. package/app/catalog/showcase-v3/21-weekly-challenge/project.motiondesk.json +8404 -0
  214. package/app/catalog/showcase-v3/22-flash-sale/config.motiondesk-config.json +116 -0
  215. package/app/catalog/showcase-v3/22-flash-sale/poster.jpg +0 -0
  216. package/app/catalog/showcase-v3/22-flash-sale/preview.mp4 +0 -0
  217. package/app/catalog/showcase-v3/22-flash-sale/project.motiondesk.json +7482 -0
  218. package/app/catalog/showcase-v3/23-flight-savings/config.motiondesk-config.json +139 -0
  219. package/app/catalog/showcase-v3/23-flight-savings/poster.jpg +0 -0
  220. package/app/catalog/showcase-v3/23-flight-savings/preview.mp4 +0 -0
  221. package/app/catalog/showcase-v3/23-flight-savings/project.motiondesk.json +9205 -0
  222. package/app/catalog/showcase-v3/24-team-dashboard/config.motiondesk-config.json +155 -0
  223. package/app/catalog/showcase-v3/24-team-dashboard/poster.jpg +0 -0
  224. package/app/catalog/showcase-v3/24-team-dashboard/preview.mp4 +0 -0
  225. package/app/catalog/showcase-v3/24-team-dashboard/project.motiondesk.json +10735 -0
  226. package/app/catalog/v4/bank-01-car-choice/config.motiondesk-config.json +86 -0
  227. package/app/catalog/v4/bank-01-car-choice/poster.webp +0 -0
  228. package/app/catalog/v4/bank-01-car-choice/project.motiondesk.json +6962 -0
  229. package/app/catalog/v4/bank-02-holiday-budget/config.motiondesk-config.json +98 -0
  230. package/app/catalog/v4/bank-02-holiday-budget/poster.webp +0 -0
  231. package/app/catalog/v4/bank-02-holiday-budget/project.motiondesk.json +7242 -0
  232. package/app/catalog/v4/bank-03-one-click/config.motiondesk-config.json +97 -0
  233. package/app/catalog/v4/bank-03-one-click/poster.webp +0 -0
  234. package/app/catalog/v4/bank-03-one-click/project.motiondesk.json +6789 -0
  235. package/app/catalog/v4/bank-04-career-course/config.motiondesk-config.json +88 -0
  236. package/app/catalog/v4/bank-04-career-course/poster.webp +0 -0
  237. package/app/catalog/v4/bank-04-career-course/project.motiondesk.json +6514 -0
  238. package/app/catalog/v4/bank-05-five-years-new-word/config.motiondesk-config.json +86 -0
  239. package/app/catalog/v4/bank-05-five-years-new-word/poster.webp +0 -0
  240. package/app/catalog/v4/bank-05-five-years-new-word/project.motiondesk.json +5865 -0
  241. package/app/catalog/v4/bank-06-home-upgrade/config.motiondesk-config.json +88 -0
  242. package/app/catalog/v4/bank-06-home-upgrade/poster.webp +0 -0
  243. package/app/catalog/v4/bank-06-home-upgrade/project.motiondesk.json +7187 -0
  244. package/app/catalog/v4/bank-07-car-upgrade/config.motiondesk-config.json +87 -0
  245. package/app/catalog/v4/bank-07-car-upgrade/poster.webp +0 -0
  246. package/app/catalog/v4/bank-07-car-upgrade/project.motiondesk.json +6018 -0
  247. package/app/catalog/v4/bank-08-summer-dollar/config.motiondesk-config.json +85 -0
  248. package/app/catalog/v4/bank-08-summer-dollar/poster.webp +0 -0
  249. package/app/catalog/v4/bank-08-summer-dollar/project.motiondesk.json +6291 -0
  250. package/app/catalog/v4/bank-09-wedding/config.motiondesk-config.json +88 -0
  251. package/app/catalog/v4/bank-09-wedding/poster.webp +0 -0
  252. package/app/catalog/v4/bank-09-wedding/project.motiondesk.json +6517 -0
  253. package/app/catalog/v4/bank-10-family-dinner-pay/config.motiondesk-config.json +100 -0
  254. package/app/catalog/v4/bank-10-family-dinner-pay/poster.webp +0 -0
  255. package/app/catalog/v4/bank-10-family-dinner-pay/project.motiondesk.json +7053 -0
  256. package/app/catalog/v4/bank-11-youth-pitch-creator/config.motiondesk-config.json +100 -0
  257. package/app/catalog/v4/bank-11-youth-pitch-creator/poster.webp +0 -0
  258. package/app/catalog/v4/bank-11-youth-pitch-creator/project.motiondesk.json +6820 -0
  259. package/app/catalog/v4/bank-12-gift-shares/config.motiondesk-config.json +90 -0
  260. package/app/catalog/v4/bank-12-gift-shares/poster.webp +0 -0
  261. package/app/catalog/v4/bank-12-gift-shares/project.motiondesk.json +6025 -0
  262. package/app/catalog/v4/bank-13-suspicious-call/config.motiondesk-config.json +96 -0
  263. package/app/catalog/v4/bank-13-suspicious-call/poster.webp +0 -0
  264. package/app/catalog/v4/bank-13-suspicious-call/project.motiondesk.json +6734 -0
  265. package/app/catalog/v4/bank-14-urgent-message/config.motiondesk-config.json +89 -0
  266. package/app/catalog/v4/bank-14-urgent-message/poster.webp +0 -0
  267. package/app/catalog/v4/bank-14-urgent-message/project.motiondesk.json +6724 -0
  268. package/app/catalog/v4/bank-15-olympic-excellence/config.motiondesk-config.json +88 -0
  269. package/app/catalog/v4/bank-15-olympic-excellence/poster.webp +0 -0
  270. package/app/catalog/v4/bank-15-olympic-excellence/project.motiondesk.json +6431 -0
  271. package/app/catalog/v4/bank-16-savings-pocket/config.motiondesk-config.json +97 -0
  272. package/app/catalog/v4/bank-16-savings-pocket/poster.webp +0 -0
  273. package/app/catalog/v4/bank-16-savings-pocket/project.motiondesk.json +6628 -0
  274. package/app/catalog/v4/bank-17-students/config.motiondesk-config.json +91 -0
  275. package/app/catalog/v4/bank-17-students/poster.webp +0 -0
  276. package/app/catalog/v4/bank-17-students/project.motiondesk.json +6629 -0
  277. package/app/catalog/v4/bank-18-phone-phobia/config.motiondesk-config.json +86 -0
  278. package/app/catalog/v4/bank-18-phone-phobia/poster.webp +0 -0
  279. package/app/catalog/v4/bank-18-phone-phobia/project.motiondesk.json +6140 -0
  280. package/app/catalog/v4/bank-19-financial-fomo/config.motiondesk-config.json +91 -0
  281. package/app/catalog/v4/bank-19-financial-fomo/poster.webp +0 -0
  282. package/app/catalog/v4/bank-19-financial-fomo/project.motiondesk.json +7189 -0
  283. package/app/catalog/v4/bank-20-start-investing/config.motiondesk-config.json +95 -0
  284. package/app/catalog/v4/bank-20-start-investing/poster.webp +0 -0
  285. package/app/catalog/v4/bank-20-start-investing/project.motiondesk.json +7149 -0
  286. package/app/catalog/v4/bank-21-market-timing/config.motiondesk-config.json +95 -0
  287. package/app/catalog/v4/bank-21-market-timing/poster.webp +0 -0
  288. package/app/catalog/v4/bank-21-market-timing/project.motiondesk.json +6166 -0
  289. package/app/catalog/v4/bank-22-market-vs-realestate/config.motiondesk-config.json +88 -0
  290. package/app/catalog/v4/bank-22-market-vs-realestate/poster.webp +0 -0
  291. package/app/catalog/v4/bank-22-market-vs-realestate/project.motiondesk.json +7698 -0
  292. package/app/catalog/v4/bank-23-investing-for-all/config.motiondesk-config.json +92 -0
  293. package/app/catalog/v4/bank-23-investing-for-all/poster.webp +0 -0
  294. package/app/catalog/v4/bank-23-investing-for-all/project.motiondesk.json +6150 -0
  295. package/app/catalog/v4/bank-24-business-loan/config.motiondesk-config.json +85 -0
  296. package/app/catalog/v4/bank-24-business-loan/poster.webp +0 -0
  297. package/app/catalog/v4/bank-24-business-loan/project.motiondesk.json +6804 -0
  298. package/app/catalog/v4/bank-25-open-door/config.motiondesk-config.json +84 -0
  299. package/app/catalog/v4/bank-25-open-door/poster.webp +0 -0
  300. package/app/catalog/v4/bank-25-open-door/project.motiondesk.json +5976 -0
  301. package/app/catalog/v4/bank-26-first-card-challenge/config.motiondesk-config.json +84 -0
  302. package/app/catalog/v4/bank-26-first-card-challenge/poster.webp +0 -0
  303. package/app/catalog/v4/bank-26-first-card-challenge/project.motiondesk.json +6167 -0
  304. package/app/catalog/v4/bank-27-holiday-trip/config.motiondesk-config.json +85 -0
  305. package/app/catalog/v4/bank-27-holiday-trip/poster.webp +0 -0
  306. package/app/catalog/v4/bank-27-holiday-trip/project.motiondesk.json +6291 -0
  307. package/app/catalog/v4/bank-28-renew-home/config.motiondesk-config.json +87 -0
  308. package/app/catalog/v4/bank-28-renew-home/poster.webp +0 -0
  309. package/app/catalog/v4/bank-28-renew-home/project.motiondesk.json +6489 -0
  310. package/app/catalog/v4/bank-29-fastest-way-to-pay/config.motiondesk-config.json +98 -0
  311. package/app/catalog/v4/bank-29-fastest-way-to-pay/poster.webp +0 -0
  312. package/app/catalog/v4/bank-29-fastest-way-to-pay/project.motiondesk.json +6915 -0
  313. package/app/catalog/v4/bank-30-forex-terminal/config.motiondesk-config.json +103 -0
  314. package/app/catalog/v4/bank-30-forex-terminal/poster.webp +0 -0
  315. package/app/catalog/v4/bank-30-forex-terminal/project.motiondesk.json +6997 -0
  316. package/app/catalog/v4/bank-31-youth-campaign-brief/config.motiondesk-config.json +103 -0
  317. package/app/catalog/v4/bank-31-youth-campaign-brief/poster.webp +0 -0
  318. package/app/catalog/v4/bank-31-youth-campaign-brief/project.motiondesk.json +7136 -0
  319. package/app/catalog/v4/bank-32-dream-vacation/config.motiondesk-config.json +87 -0
  320. package/app/catalog/v4/bank-32-dream-vacation/poster.webp +0 -0
  321. package/app/catalog/v4/bank-32-dream-vacation/project.motiondesk.json +6531 -0
  322. package/app/catalog/v4/bank-33-mortgage-advice/config.motiondesk-config.json +87 -0
  323. package/app/catalog/v4/bank-33-mortgage-advice/poster.webp +0 -0
  324. package/app/catalog/v4/bank-33-mortgage-advice/project.motiondesk.json +6767 -0
  325. package/app/catalog/v4/bank-34-who-are-you-saver/config.motiondesk-config.json +97 -0
  326. package/app/catalog/v4/bank-34-who-are-you-saver/poster.webp +0 -0
  327. package/app/catalog/v4/bank-34-who-are-you-saver/project.motiondesk.json +6309 -0
  328. package/app/catalog/v4/bank-35-strange-calls/config.motiondesk-config.json +85 -0
  329. package/app/catalog/v4/bank-35-strange-calls/poster.webp +0 -0
  330. package/app/catalog/v4/bank-35-strange-calls/project.motiondesk.json +7034 -0
  331. package/app/catalog/v4/bank-36-one-shekel-flight/config.motiondesk-config.json +91 -0
  332. package/app/catalog/v4/bank-36-one-shekel-flight/poster.webp +0 -0
  333. package/app/catalog/v4/bank-36-one-shekel-flight/project.motiondesk.json +6364 -0
  334. package/app/catalog/v4/bank-37-street-quiz-pay/config.motiondesk-config.json +81 -0
  335. package/app/catalog/v4/bank-37-street-quiz-pay/poster.webp +0 -0
  336. package/app/catalog/v4/bank-37-street-quiz-pay/project.motiondesk.json +6466 -0
  337. package/app/catalog/v4/bank-38-pension-compare/config.motiondesk-config.json +92 -0
  338. package/app/catalog/v4/bank-38-pension-compare/poster.webp +0 -0
  339. package/app/catalog/v4/bank-38-pension-compare/project.motiondesk.json +6752 -0
  340. package/app/catalog/v4/bank-39-new-look-app/config.motiondesk-config.json +103 -0
  341. package/app/catalog/v4/bank-39-new-look-app/poster.webp +0 -0
  342. package/app/catalog/v4/bank-39-new-look-app/project.motiondesk.json +6954 -0
  343. package/app/catalog/v4/bank-40-interest-pocket/config.motiondesk-config.json +83 -0
  344. package/app/catalog/v4/bank-40-interest-pocket/poster.webp +0 -0
  345. package/app/catalog/v4/bank-40-interest-pocket/project.motiondesk.json +5783 -0
  346. package/app/catalog/v4/bank-41-young-telenovela/config.motiondesk-config.json +95 -0
  347. package/app/catalog/v4/bank-41-young-telenovela/poster.webp +0 -0
  348. package/app/catalog/v4/bank-41-young-telenovela/project.motiondesk.json +5967 -0
  349. package/app/catalog/v4/bank-42-market-app/config.motiondesk-config.json +103 -0
  350. package/app/catalog/v4/bank-42-market-app/poster.webp +0 -0
  351. package/app/catalog/v4/bank-42-market-app/project.motiondesk.json +6766 -0
  352. package/app/catalog/v4/bank-43-passover-sites/config.motiondesk-config.json +92 -0
  353. package/app/catalog/v4/bank-43-passover-sites/poster.webp +0 -0
  354. package/app/catalog/v4/bank-43-passover-sites/project.motiondesk.json +7173 -0
  355. package/app/catalog/v4/bank-44-end-of-excuses/config.motiondesk-config.json +93 -0
  356. package/app/catalog/v4/bank-44-end-of-excuses/poster.webp +0 -0
  357. package/app/catalog/v4/bank-44-end-of-excuses/project.motiondesk.json +6010 -0
  358. package/app/catalog/v4/bank-45-good-reasons/config.motiondesk-config.json +90 -0
  359. package/app/catalog/v4/bank-45-good-reasons/poster.webp +0 -0
  360. package/app/catalog/v4/bank-45-good-reasons/project.motiondesk.json +7122 -0
  361. package/app/catalog/v4/bank-46-mortgage-hotline/config.motiondesk-config.json +99 -0
  362. package/app/catalog/v4/bank-46-mortgage-hotline/poster.webp +0 -0
  363. package/app/catalog/v4/bank-46-mortgage-hotline/project.motiondesk.json +6923 -0
  364. package/app/catalog/v4/bank-47-financial-growth-center/config.motiondesk-config.json +84 -0
  365. package/app/catalog/v4/bank-47-financial-growth-center/poster.webp +0 -0
  366. package/app/catalog/v4/bank-47-financial-growth-center/project.motiondesk.json +6424 -0
  367. package/app/catalog/v4/bank-48-judo-grand-prix/config.motiondesk-config.json +88 -0
  368. package/app/catalog/v4/bank-48-judo-grand-prix/poster.webp +0 -0
  369. package/app/catalog/v4/bank-48-judo-grand-prix/project.motiondesk.json +6335 -0
  370. package/app/catalog/v4/bank-49-currency-convert/config.motiondesk-config.json +98 -0
  371. package/app/catalog/v4/bank-49-currency-convert/poster.webp +0 -0
  372. package/app/catalog/v4/bank-49-currency-convert/project.motiondesk.json +7036 -0
  373. package/app/catalog/v4/bank-50-salary-young/config.motiondesk-config.json +95 -0
  374. package/app/catalog/v4/bank-50-salary-young/poster.webp +0 -0
  375. package/app/catalog/v4/bank-50-salary-young/project.motiondesk.json +6414 -0
  376. package/app/catalog/v4/v4-onboarding-beats-16x9/config.motiondesk-config.json +162 -0
  377. package/app/catalog/v4/v4-onboarding-beats-16x9/poster.webp +0 -0
  378. package/app/catalog/v4/v4-onboarding-beats-16x9/project.motiondesk.json +9796 -0
  379. package/app/catalog/v4/v4-savings-goal-9x16/config.motiondesk-config.json +151 -0
  380. package/app/catalog/v4/v4-savings-goal-9x16/poster.webp +0 -0
  381. package/app/catalog/v4/v4-savings-goal-9x16/project.motiondesk.json +11847 -0
  382. package/app/catalog/v4/v4-trip-planner-1x1/config.motiondesk-config.json +137 -0
  383. package/app/catalog/v4/v4-trip-planner-1x1/poster.webp +0 -0
  384. package/app/catalog/v4/v4-trip-planner-1x1/project.motiondesk.json +10797 -0
  385. package/app/catalog/v4/v4-wallet-launch-16x9/config.motiondesk-config.json +172 -0
  386. package/app/catalog/v4/v4-wallet-launch-16x9/poster.webp +0 -0
  387. package/app/catalog/v4/v4-wallet-launch-16x9/project.motiondesk.json +14270 -0
  388. package/app/fonts/heebo-hebrew-400-normal.woff2 +0 -0
  389. package/app/fonts/heebo-hebrew-700-normal.woff2 +0 -0
  390. package/app/fonts/heebo-latin-400-normal.woff2 +0 -0
  391. package/app/fonts/heebo-latin-700-normal.woff2 +0 -0
  392. package/app/fonts/motiondesk-symbols.ttf +0 -0
  393. package/app/fonts/noto-sans-math-OFL.txt +93 -0
  394. package/app/index.html +15 -0
  395. package/app/studio-hf/fonts/heebo-hebrew-400-normal.woff2 +0 -0
  396. package/app/studio-hf/fonts/heebo-hebrew-700-normal.woff2 +0 -0
  397. package/app/studio-hf/fonts/heebo-latin-400-normal.woff2 +0 -0
  398. package/app/studio-hf/fonts/heebo-latin-700-normal.woff2 +0 -0
  399. package/app/studio-hf/frame.html +21 -0
  400. package/app/studio-hf/vendor/gsap.min.js +11 -0
  401. package/bin/motiondesk-studio.mjs +244 -0
  402. package/lib/catalog/hyperframes/ai-assistant.html +137 -0
  403. package/lib/catalog/hyperframes/annual-report.html +146 -0
  404. package/lib/catalog/hyperframes/app-tour.html +163 -0
  405. package/lib/catalog/hyperframes/balloon-party.html +159 -0
  406. package/lib/catalog/hyperframes/boarding-pass.html +191 -0
  407. package/lib/catalog/hyperframes/chalk-menu.html +157 -0
  408. package/lib/catalog/hyperframes/claim-steps.html +179 -0
  409. package/lib/catalog/hyperframes/clinic-booking.html +177 -0
  410. package/lib/catalog/hyperframes/concert-poster.html +188 -0
  411. package/lib/catalog/hyperframes/course-syllabus.html +163 -0
  412. package/lib/catalog/hyperframes/cyber-shield.html +191 -0
  413. package/lib/catalog/hyperframes/dev-hiring-code.html +137 -0
  414. package/lib/catalog/hyperframes/donation-meter.html +163 -0
  415. package/lib/catalog/hyperframes/editorial-mag.html +179 -0
  416. package/lib/catalog/hyperframes/ev-charge.html +217 -0
  417. package/lib/catalog/hyperframes/event-announce.html +146 -0
  418. package/lib/catalog/hyperframes/finance-growth.html +139 -0
  419. package/lib/catalog/hyperframes/fitness-rings-streak.html +140 -0
  420. package/lib/catalog/hyperframes/flash-sale.html +142 -0
  421. package/lib/catalog/hyperframes/flipclock-countdown.html +152 -0
  422. package/lib/catalog/hyperframes/floorplan-linedraw.html +191 -0
  423. package/lib/catalog/hyperframes/glass-product.html +138 -0
  424. package/lib/catalog/hyperframes/glossy-cosmetics.html +202 -0
  425. package/lib/catalog/hyperframes/gold-couture.html +189 -0
  426. package/lib/catalog/hyperframes/gradient-blobs.html +138 -0
  427. package/lib/catalog/hyperframes/graduation-day.html +133 -0
  428. package/lib/catalog/hyperframes/headline-news-ticker.html +180 -0
  429. package/lib/catalog/hyperframes/hiring-team.html +136 -0
  430. package/lib/catalog/hyperframes/holiday-greeting.html +143 -0
  431. package/lib/catalog/hyperframes/index-b2.json +194 -0
  432. package/lib/catalog/hyperframes/index-b3.json +194 -0
  433. package/lib/catalog/hyperframes/index-b4.json +162 -0
  434. package/lib/catalog/hyperframes/index-b5.json +130 -0
  435. package/lib/catalog/hyperframes/index.json +322 -0
  436. package/lib/catalog/hyperframes/iso-product-3d.html +228 -0
  437. package/lib/catalog/hyperframes/itinerary-map-pins.html +200 -0
  438. package/lib/catalog/hyperframes/key-handover.html +170 -0
  439. package/lib/catalog/hyperframes/kinetic-launch.html +160 -0
  440. package/lib/catalog/hyperframes/legal-trust.html +185 -0
  441. package/lib/catalog/hyperframes/level-up.html +204 -0
  442. package/lib/catalog/hyperframes/logo-sting.html +105 -0
  443. package/lib/catalog/hyperframes/manifesto-quote.html +119 -0
  444. package/lib/catalog/hyperframes/match-day.html +145 -0
  445. package/lib/catalog/hyperframes/match-score.html +209 -0
  446. package/lib/catalog/hyperframes/neighborhood-map.html +157 -0
  447. package/lib/catalog/hyperframes/neon-grid.html +158 -0
  448. package/lib/catalog/hyperframes/org-chart-hiring.html +160 -0
  449. package/lib/catalog/hyperframes/paper-collage.html +180 -0
  450. package/lib/catalog/hyperframes/paw-adopt.html +172 -0
  451. package/lib/catalog/hyperframes/playful-blocks.html +161 -0
  452. package/lib/catalog/hyperframes/podcast-waveform-promo.html +181 -0
  453. package/lib/catalog/hyperframes/price-grid.html +175 -0
  454. package/lib/catalog/hyperframes/quote-carousel-bold.html +142 -0
  455. package/lib/catalog/hyperframes/recipe-ingredients.html +161 -0
  456. package/lib/catalog/hyperframes/retro-80s.html +140 -0
  457. package/lib/catalog/hyperframes/roadmap-timeline.html +163 -0
  458. package/lib/catalog/hyperframes/saas-dashboard.html +194 -0
  459. package/lib/catalog/hyperframes/sale-wheel-24h.html +152 -0
  460. package/lib/catalog/hyperframes/save-the-date.html +140 -0
  461. package/lib/catalog/hyperframes/split-wipe-before-after.html +197 -0
  462. package/lib/catalog/hyperframes/stats-dashboard.html +148 -0
  463. package/lib/catalog/hyperframes/stock-portfolio.html +173 -0
  464. package/lib/catalog/hyperframes/swiss-grid.html +152 -0
  465. package/lib/catalog/hyperframes/travel-route.html +168 -0
  466. package/lib/catalog/hyperframes/tutorial-steps.html +159 -0
  467. package/lib/catalog/hyperframes/wallet-card-transactions.html +187 -0
  468. package/lib/catalog/hyperframes/wedding-invite.html +141 -0
  469. package/lib/catalog/studio/apps.json +2134 -0
  470. package/lib/catalog/studio/auto.json +2019 -0
  471. package/lib/catalog/studio/beauty.json +1630 -0
  472. package/lib/catalog/studio/business.json +2064 -0
  473. package/lib/catalog/studio/celebrations.json +2142 -0
  474. package/lib/catalog/studio/community.json +1926 -0
  475. package/lib/catalog/studio/culture.json +2156 -0
  476. package/lib/catalog/studio/data.json +1934 -0
  477. package/lib/catalog/studio/education.json +1914 -0
  478. package/lib/catalog/studio/events.json +1921 -0
  479. package/lib/catalog/studio/family.json +2159 -0
  480. package/lib/catalog/studio/fashion.json +1958 -0
  481. package/lib/catalog/studio/finance.json +1922 -0
  482. package/lib/catalog/studio/food.json +2128 -0
  483. package/lib/catalog/studio/gaming.json +1756 -0
  484. package/lib/catalog/studio/health.json +1934 -0
  485. package/lib/catalog/studio/hr.json +1860 -0
  486. package/lib/catalog/studio/kids.json +1697 -0
  487. package/lib/catalog/studio/launch.json +2161 -0
  488. package/lib/catalog/studio/legal.json +1732 -0
  489. package/lib/catalog/studio/music.json +1721 -0
  490. package/lib/catalog/studio/nonprofit.json +1665 -0
  491. package/lib/catalog/studio/pets.json +2196 -0
  492. package/lib/catalog/studio/premium.json +5577 -0
  493. package/lib/catalog/studio/realestate.json +2018 -0
  494. package/lib/catalog/studio/retail.json +1959 -0
  495. package/lib/catalog/studio/services.json +2154 -0
  496. package/lib/catalog/studio/social.json +2004 -0
  497. package/lib/catalog/studio/sports.json +1999 -0
  498. package/lib/catalog/studio/tech.json +2124 -0
  499. package/lib/catalog/studio/travel.json +1966 -0
  500. package/lib/core-v4.cjs +4897 -0
  501. package/lib/core.cjs +4223 -0
  502. package/lib/motion-blur.cjs +36 -0
  503. package/lib/studio.cjs +4419 -0
  504. package/lib/vercel-render.mjs +494 -0
  505. package/lib/vercel-source.cjs +88 -0
  506. package/package.json +16 -4
package/lib/catalog/hyperframes/itinerary-map-pins.html ADDED
@@ -0,0 +1,200 @@
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:#0d2629;--fg:#eef6f1;--accent:#ffb23f;--mint:#46d6a6;--land:#17413f}
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
+ .sea{position:absolute;inset:-60px;background:repeating-linear-gradient(0deg,transparent 0 30px,color-mix(in srgb,var(--mint) 7%,transparent) 30px 32px)}
24
+ .map{position:absolute;left:0;top:0;overflow:visible}
25
+ .land{fill:var(--land);stroke:color-mix(in srgb,var(--mint) 60%,transparent);stroke-width:3}
26
+ .islets circle{fill:var(--land);stroke:color-mix(in srgb,var(--mint) 40%,transparent);stroke-width:2}
27
+ .ct{fill:none;stroke:color-mix(in srgb,var(--mint) 30%,transparent);stroke-width:2.5;vector-effect:non-scaling-stroke}
28
+ .rt{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 70%,transparent))}
29
+ .rg{fill:none;stroke:color-mix(in srgb,var(--fg) 30%,transparent);stroke-width:4;stroke-dasharray:4 16;stroke-linecap:round}
30
+ .pin{position:absolute;width:0;height:0}
31
+ .pd{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 30%,transparent),0 0 30px var(--accent);display:block}
32
+ .pr{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;border:3px solid var(--accent);display:block;opacity:0}
33
+ .pl{position:absolute;padding:10px 24px 12px;border-radius:16px;background:color-mix(in srgb,var(--bg) 85%,transparent);border:2px solid color-mix(in srgb,var(--mint) 35%,transparent)}
34
+ .pld{font-size:22px;font-weight:700;color:var(--accent);white-space:nowrap}
35
+ .pln{font-size:36px;font-weight:700;white-space:nowrap;line-height:1.15}
36
+ .trav{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;background:var(--fg);box-shadow:0 0 0 8px color-mix(in srgb,var(--fg) 25%,transparent),0 0 24px var(--fg)}
37
+ .panel{position:absolute;border-radius:30px;background:color-mix(in srgb,var(--bg) 80%,transparent);border:2px solid color-mix(in srgb,var(--mint) 30%,transparent);box-shadow:0 30px 60px color-mix(in srgb,var(--bg) 70%,transparent)}
38
+ .row{position:absolute;left:36px;right:36px;height:130px;opacity:.3}
39
+ .rbar{position:absolute;right:0;top:12px;width:8px;height:100px;border-radius:4px;background:var(--accent)}
40
+ .rd{position:absolute;right:30px;top:10px;font-size:26px;font-weight:700;color:var(--accent);white-space:nowrap}
41
+ .rn{position:absolute;right:30px;top:42px;font-size:44px;font-weight:700;white-space:nowrap}
42
+ .rs{position:absolute;right:30px;top:98px;font-size:26px;color:color-mix(in srgb,var(--fg) 65%,var(--bg));white-space:nowrap}
43
+ .kick{font-size:34px;font-weight:700;letter-spacing:.22em;color:var(--mint);white-space:nowrap}
44
+ .mega{font-size:190px;font-weight:700;line-height:1.02;letter-spacing:-.02em;white-space:nowrap}
45
+ .comp{position:absolute;width:180px;height:180px;border-radius:50%;border:3px solid color-mix(in srgb,var(--fg) 50%,transparent)}
46
+ .comp i{position:absolute;left:78px;top:14px;width:24px;height:152px;display:block;background:linear-gradient(var(--accent) 50%,var(--fg) 50%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
47
+ .lens{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--mint) 55%,var(--bg)),color-mix(in srgb,var(--accent) 30%,color-mix(in srgb,var(--mint) 40%,var(--bg))) 70%)}
48
+ .mt{position:absolute;bottom:0}
49
+ .fall{position:absolute;left:705px;top:466px;width:150px;height:500px;overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--mint) 45%,var(--fg)),var(--fg) 40%,color-mix(in srgb,var(--mint) 30%,var(--fg)) 75%,color-mix(in srgb,var(--mint) 55%,var(--fg)));-webkit-mask-image:linear-gradient(var(--fg) 85%,transparent);mask-image:linear-gradient(var(--fg) 85%,transparent)}
50
+ .flow{position:absolute;left:0;right:0;top:-520px;height:1200px;background:repeating-linear-gradient(180deg,transparent 0 22px,color-mix(in srgb,var(--mint) 40%,transparent) 30px,transparent 38px 64px)}
51
+ .pine{position:absolute;width:46px;height:80px;margin-top:-70px;background:color-mix(in srgb,var(--land) 70%,var(--bg));clip-path:polygon(50% 0,100% 100%,0 100%);display:block}
52
+ .rip{position:absolute;width:280px;height:60px;border-radius:50%;border:3px solid color-mix(in srgb,var(--fg) 60%,transparent);display:block;opacity:0}
53
+ .mist{position:absolute;border-radius:50%;background:color-mix(in srgb,var(--fg) 30%,transparent);filter:blur(16px)}
54
+ .card{position:absolute;padding:40px 54px;border-radius:30px;background:color-mix(in srgb,var(--bg) 82%,transparent);border:2px solid color-mix(in srgb,var(--mint) 35%,transparent)}
55
+ .cta{position:absolute;padding:24px 60px;border-radius:60px;background:var(--accent);color:var(--bg);font-size:46px;font-weight:700;white-space:nowrap}
56
+ </style>
57
+ </head>
58
+ <body>
59
+ <div id="root" data-composition-id="itinerary-map-pins" data-start="0" data-width="1920" data-height="1080" data-duration="17">
60
+ <section id="s1" class="clip scene" data-start="0" data-duration="3.6">
61
+ <div class="cam" id="c1">
62
+ <div class="sea" id="se1"></div>
63
+ <div class="layer" id="mp1"><svg class="map" width="1920" height="1080"><defs><path id="isl1" d="M210 640 C 170 520, 230 380, 360 300 C 470 230, 560 150, 720 160 C 880 170, 1040 190, 1110 300 C 1180 410, 1130 520, 1160 640 C 1190 760, 1100 900, 950 930 C 800 960, 640 900, 500 920 C 360 940, 250 800, 210 640 Z" pathLength="1"/></defs>
64
+ <g class="islets"><circle cx="1230" cy="880" r="38"/><circle cx="1290" cy="840" r="18"/><circle cx="140" cy="260" r="30"/></g>
65
+ <use href="#isl1" class="land" id="ld1"/>
66
+ <g class="topo" id="tp1"><use href="#isl1" class="ct" transform="translate(105.60000000000002 89.60000000000002) scale(0.84)"/><use href="#isl1" class="ct" transform="translate(211.19999999999996 179.19999999999996) scale(0.68)"/><use href="#isl1" class="ct" transform="translate(316.8 268.8) scale(0.52)"/><use href="#isl1" class="ct" transform="translate(422.40000000000003 358.40000000000003) scale(0.36)"/><use href="#isl1" class="ct" transform="translate(528 448) scale(0.2)"/><use href="#isl1" class="ct" transform="translate(396 108) scale(0.6)"/><use href="#isl1" class="ct" transform="translate(580.8 189.4) scale(0.38)"/><use href="#isl1" class="ct" transform="translate(748.8 263.40000000000003) scale(0.18)"/></g>
67
+ </svg></div>
68
+ <div class="comp" id="cmp" style="left:110px;top:820px"><i id="ndl"></i></div>
69
+ <p class="abs kick" id="t1k" style="right:130px;top:330px">מסע מאורגן · אביב</p>
70
+ <div class="abs" style="right:130px;top:380px"><span class="m"><span class="w mega" id="t1a">אי תכלת</span></span></div>
71
+ <p class="abs" id="t1b" style="right:134px;top:600px;font-size:60px;font-weight:700;white-space:nowrap;color:var(--accent)">5 ימים של שקט</p>
72
+ </div>
73
+ </section>
74
+ <section id="s2" class="clip scene" data-start="3.6" data-duration="5.8">
75
+ <div class="cam" id="c2">
76
+ <div class="sea" id="se2"></div>
77
+ <div class="layer" id="mp2"><svg class="map" width="1920" height="1080"><defs><path id="isl2" d="M210 640 C 170 520, 230 380, 360 300 C 470 230, 560 150, 720 160 C 880 170, 1040 190, 1110 300 C 1180 410, 1130 520, 1160 640 C 1190 760, 1100 900, 950 930 C 800 960, 640 900, 500 920 C 360 940, 250 800, 210 640 Z" pathLength="1"/></defs>
78
+ <g class="islets"><circle cx="1230" cy="880" r="38"/><circle cx="1290" cy="840" r="18"/><circle cx="140" cy="260" r="30"/></g>
79
+ <use href="#isl2" class="land" id="ld2"/>
80
+ <g class="topo" id="tp2"><use href="#isl2" class="ct" transform="translate(105.60000000000002 89.60000000000002) scale(0.84)"/><use href="#isl2" class="ct" transform="translate(211.19999999999996 179.19999999999996) scale(0.68)"/><use href="#isl2" class="ct" transform="translate(316.8 268.8) scale(0.52)"/><use href="#isl2" class="ct" transform="translate(422.40000000000003 358.40000000000003) scale(0.36)"/><use href="#isl2" class="ct" transform="translate(528 448) scale(0.2)"/><use href="#isl2" class="ct" transform="translate(396 108) scale(0.6)"/><use href="#isl2" class="ct" transform="translate(580.8 189.4) scale(0.38)"/><use href="#isl2" class="ct" transform="translate(748.8 263.40000000000003) scale(0.18)"/></g>
81
+ <path class="rg" d="M330 760 C 380 640, 470 560, 560 470 S 780 300, 900 330 S 1060 600, 980 760"/><path class="rt" id="route" d="M330 760 C 380 640, 470 560, 560 470 S 780 300, 900 330 S 1060 600, 980 760"/></svg>
82
+ <div class="pin" id="p21" style="left:330px;top:760px"><i class="pr"></i><i class="pd"></i></div><div class="pl" id="p21l" style="left:364px;top:720px"><p class="pld" id="p21d">יום 1</p><p class="pln" id="p21n">כפר המלח</p></div><div class="pin" id="p22" style="left:560px;top:470px"><i class="pr"></i><i class="pd"></i></div><div class="pl" id="p22l" style="right:1394px;top:430px"><p class="pld" id="p22d">יום 2</p><p class="pln" id="p22n">מפל הענן</p></div><div class="pin" id="p23" style="left:900px;top:330px"><i class="pr"></i><i class="pd"></i></div><div class="pl" id="p23l" style="left:934px;top:290px"><p class="pld" id="p23d">ימים 3–4</p><p class="pln" id="p23n">מצפה הנשרים</p></div><div class="pin" id="p24" style="left:980px;top:760px"><i class="pr"></i><i class="pd"></i></div><div class="pl" id="p24l" style="left:1014px;top:720px"><p class="pld" id="p24d">יום 5</p><p class="pln" id="p24n">חוף הסלעים</p></div>
83
+ <div class="pin" id="tv"><i class="trav"></i></div>
84
+ </div>
85
+ <div class="panel" id="pn2" style="right:80px;top:150px;width:540px;height:790px">
86
+ <p class="abs" id="pnh" style="right:40px;top:36px;font-size:54px;font-weight:700;white-space:nowrap">המסלול שלכם</p>
87
+ <div class="row" id="rw1" style="top:150px"><i class="rbar" id="rw1b"></i><p class="rd" id="rw1d">יום 1</p><p class="rn" id="rw1n">כפר המלח</p><p class="rs" id="rw1s">נחיתה, שוק דגים ושקיעה</p></div><div class="row" id="rw2" style="top:305px"><i class="rbar" id="rw2b"></i><p class="rd" id="rw2d">יום 2</p><p class="rn" id="rw2n">מפל הענן</p><p class="rs" id="rw2s">מסלול הליכה ביער האלונים</p></div><div class="row" id="rw3" style="top:460px"><i class="rbar" id="rw3b"></i><p class="rd" id="rw3d">ימים 3–4</p><p class="rn" id="rw3n">מצפה הנשרים</p><p class="rs" id="rw3s">לינה בבקתות על הרכס</p></div><div class="row" id="rw4" style="top:615px"><i class="rbar" id="rw4b"></i><p class="rd" id="rw4d">יום 5</p><p class="rn" id="rw4n">חוף הסלעים</p><p class="rs" id="rw4s">שייט וצלילה לפני הטיסה</p></div>
88
+ </div>
89
+ </div>
90
+ </section>
91
+ <section id="s3" class="clip scene" data-start="9.4" data-duration="4">
92
+ <div class="cam" id="c3">
93
+ <div class="sea"></div>
94
+ <div class="layer" id="mp3"><svg class="map" width="1920" height="1080"><defs><path id="isl3" d="M210 640 C 170 520, 230 380, 360 300 C 470 230, 560 150, 720 160 C 880 170, 1040 190, 1110 300 C 1180 410, 1130 520, 1160 640 C 1190 760, 1100 900, 950 930 C 800 960, 640 900, 500 920 C 360 940, 250 800, 210 640 Z" pathLength="1"/></defs>
95
+ <g class="islets"><circle cx="1230" cy="880" r="38"/><circle cx="1290" cy="840" r="18"/><circle cx="140" cy="260" r="30"/></g>
96
+ <use href="#isl3" class="land" id="ld3"/>
97
+ <g class="topo" id="tp3"><use href="#isl3" class="ct" transform="translate(105.60000000000002 89.60000000000002) scale(0.84)"/><use href="#isl3" class="ct" transform="translate(211.19999999999996 179.19999999999996) scale(0.68)"/><use href="#isl3" class="ct" transform="translate(316.8 268.8) scale(0.52)"/><use href="#isl3" class="ct" transform="translate(422.40000000000003 358.40000000000003) scale(0.36)"/><use href="#isl3" class="ct" transform="translate(528 448) scale(0.2)"/><use href="#isl3" class="ct" transform="translate(396 108) scale(0.6)"/><use href="#isl3" class="ct" transform="translate(580.8 189.4) scale(0.38)"/><use href="#isl3" class="ct" transform="translate(748.8 263.40000000000003) scale(0.18)"/></g>
98
+ </svg><div class="pin" id="p32" style="left:560px;top:470px"><i class="pr"></i><i class="pd"></i></div><div class="pl" id="p32l" style="right:1394px;top:430px"><p class="pld" id="p32d">יום 2</p><p class="pln" id="p32n">מפל הענן</p></div></div>
99
+ <div class="lens" id="lens">
100
+ <div class="abs" id="sun" style="left:250px;top:130px;width:190px;height:190px;border-radius:50%;background:var(--accent);box-shadow:0 0 120px var(--accent)"></div>
101
+ <div class="mt" id="mtb" style="left:-100px;width:2120px;height:820px;background:color-mix(in srgb,var(--mint) 40%,var(--land));clip-path:polygon(0 100%,0 50%,10% 28%,20% 44%,31% 14%,43% 40%,55% 8%,67% 36%,79% 18%,90% 40%,100% 26%,100% 100%)"></div>
102
+ <div class="mt" id="mtm" style="left:-100px;width:2120px;height:700px;background:color-mix(in srgb,var(--mint) 18%,var(--land));clip-path:polygon(0 100%,0 40%,14% 22%,27% 38%,41% 16%,52% 30%,66% 12%,80% 34%,92% 20%,100% 32%,100% 100%)"></div>
103
+ <div class="fall" id="fall"><div class="flow" id="flw"></div></div>
104
+ <div class="mt" id="mtl" style="left:-40px;width:750px;height:640px;background:var(--land);clip-path:polygon(0 100%,0 20%,25% 12%,55% 18%,80% 6%,100% 4%,100% 100%)"></div>
105
+ <div class="mt" id="mtr" style="left:850px;width:1110px;height:610px;background:var(--land);clip-path:polygon(0 100%,0 2%,18% 7%,40% 0%,70% 10%,100% 4%,100% 100%)"></div>
106
+ <i class="pine" style="left:90px;top:500px"></i><i class="pine" style="left:180px;top:480px"></i><i class="pine" style="left:470px;top:470px"></i><i class="pine" style="left:960px;top:480px"></i><i class="pine" style="left:1060px;top:470px"></i><i class="pine" style="left:1140px;top:490px"></i>
107
+ <div class="mt" id="pool" style="left:560px;width:440px;height:170px;bottom:-70px;border-radius:50%;background:color-mix(in srgb,var(--mint) 60%,var(--bg))"></div>
108
+ <i class="rip" style="left:640px;top:980px"></i><i class="rip" style="left:640px;top:986px"></i><i class="rip" style="left:640px;top:992px"></i>
109
+ <div class="mist" id="ms1" style="left:610px;top:850px;width:210px;height:120px"></div><div class="mist" id="ms2" style="left:760px;top:830px;width:230px;height:140px"></div>
110
+ <div class="card" id="cd3" style="right:110px;top:600px"><p class="kick" id="t3k" style="color:var(--accent)">יום 2</p><p id="t3a" style="font-size:110px;font-weight:700;line-height:1.1;white-space:nowrap">מפל הענן</p><p id="t3b" style="font-size:34px;white-space:nowrap;color:color-mix(in srgb,var(--fg) 75%,var(--bg))">הליכה של 6 ק״מ בין אלונים ומעיינות</p></div>
111
+ </div>
112
+ </div>
113
+ </section>
114
+ <section id="s4" class="clip scene" data-start="13.4" data-duration="3.6">
115
+ <div class="cam" id="c4">
116
+ <div class="sea" id="se4"></div>
117
+ <div class="layer" id="mp4"><svg class="map" width="1920" height="1080"><defs><path id="isl4" d="M210 640 C 170 520, 230 380, 360 300 C 470 230, 560 150, 720 160 C 880 170, 1040 190, 1110 300 C 1180 410, 1130 520, 1160 640 C 1190 760, 1100 900, 950 930 C 800 960, 640 900, 500 920 C 360 940, 250 800, 210 640 Z" pathLength="1"/></defs>
118
+ <g class="islets"><circle cx="1230" cy="880" r="38"/><circle cx="1290" cy="840" r="18"/><circle cx="140" cy="260" r="30"/></g>
119
+ <use href="#isl4" class="land" id="ld4"/>
120
+ <g class="topo" id="tp4"><use href="#isl4" class="ct" transform="translate(105.60000000000002 89.60000000000002) scale(0.84)"/><use href="#isl4" class="ct" transform="translate(211.19999999999996 179.19999999999996) scale(0.68)"/><use href="#isl4" class="ct" transform="translate(316.8 268.8) scale(0.52)"/><use href="#isl4" class="ct" transform="translate(422.40000000000003 358.40000000000003) scale(0.36)"/><use href="#isl4" class="ct" transform="translate(528 448) scale(0.2)"/><use href="#isl4" class="ct" transform="translate(396 108) scale(0.6)"/><use href="#isl4" class="ct" transform="translate(580.8 189.4) scale(0.38)"/><use href="#isl4" class="ct" transform="translate(748.8 263.40000000000003) scale(0.18)"/></g>
121
+ <path class="rt" d="M330 760 C 380 640, 470 560, 560 470 S 780 300, 900 330 S 1060 600, 980 760"/></svg><div class="pin" style="left:330px;top:760px"><i class="pd"></i></div><div class="pin" style="left:560px;top:470px"><i class="pd"></i></div><div class="pin" style="left:900px;top:330px"><i class="pd"></i></div><div class="pin" style="left:980px;top:760px"><i class="pd"></i></div></div>
122
+ <div class="card" id="cd4" style="right:110px;top:220px;width:700px;height:640px">
123
+ <p class="kick" id="t4k">נוודים · חבילות מאורגנות</p>
124
+ <p id="t4a" style="font-size:88px;font-weight:700;line-height:1.15;white-space:nowrap;margin-top:18px">חבילת אי תכלת</p>
125
+ <p id="t4b" style="font-size:96px;font-weight:700;line-height:1.1;white-space:nowrap;color:var(--accent)">₪3,450</p>
126
+ <p id="t4c" style="font-size:36px;white-space:nowrap;color:color-mix(in srgb,var(--fg) 75%,var(--bg))">לאדם · לינה, שייט ומדריך כלולים</p>
127
+ </div>
128
+ <div class="cta" id="ct4" style="right:164px;top:740px"><span id="ct4t">הזמינו עד סוף החודש</span></div>
129
+ </div>
130
+ </section>
131
+ </div>
132
+ <script>
133
+ const tl=gsap.timeline({paused:true});
134
+ const S=[0,3.6,9.4,13.4,17],D=17;
135
+ const X="expo.out",P="power3.out";
136
+ const sea=(i,id)=>tl.fromTo(id,{y:0},{y:-64,duration:S[i+1]-S[i],ease:"none"},S[i]);
137
+ const drawSel=(sel,at,d,st)=>tl.fromTo(sel,{strokeDasharray:1,strokeDashoffset:1},{strokeDashoffset:0,duration:d,ease:"power2.inOut",stagger:st||0,autoRound:false},at);
138
+ // s1: contours draw in, title
139
+ sea(0,"#se1");
140
+ tl.fromTo("#mp1",{scale:1.15,x:-60},{scale:1,x:-120,duration:S[1]-S[0],ease:"power2.out"},S[0]);
141
+ tl.fromTo("#ld1",{opacity:0},{opacity:1,duration:.8},S[0]);
142
+ drawSel("#ld1",S[0],1.2);
143
+ drawSel("#tp1 .ct",S[0]+.3,1.4,.08);
144
+ tl.fromTo("#mp1 .islets circle",{scale:0,transformOrigin:"50% 50%"},{scale:1,duration:.6,ease:"back.out(2)",stagger:.1},S[0]+.6);
145
+ tl.fromTo("#cmp",{scale:0,rotation:-180},{scale:1,rotation:0,duration:.9,ease:"back.out(1.6)"},S[0]+.3);
146
+ tl.fromTo("#ndl",{rotation:-140},{keyframes:[{rotation:30,duration:.6},{rotation:-15,duration:.5},{rotation:6,duration:.5},{rotation:0,duration:.4}],ease:"sine.inOut"},S[0]+.6);
147
+ tl.fromTo("#t1k",{opacity:0,letterSpacing:"0.6em"},{opacity:1,letterSpacing:"0.22em",duration:.9,ease:P},S[0]+.4);
148
+ tl.fromTo("#t1a",{yPercent:110},{yPercent:0,duration:.9,ease:X},S[0]+.55);
149
+ tl.fromTo("#t1b",{opacity:0,y:24},{opacity:1,y:0,duration:.6,ease:P},S[0]+1.1);
150
+ tl.to("#c1",{opacity:0,duration:.35},S[1]-.35);
151
+ // s2: traveller follows the route, pins + panel rows light up in sync
152
+ sea(1,"#se2");
153
+ tl.fromTo("#c2",{opacity:0},{opacity:1,duration:.3},S[1]);
154
+ tl.fromTo("#mp2",{scale:1,x:-120,y:0},{scale:1.06,x:-150,y:-20,duration:S[2]-S[1],ease:"sine.inOut"},S[1]);
155
+ tl.fromTo("#pn2",{x:200,opacity:0},{x:0,opacity:1,duration:.8,ease:X},S[1]+.15);
156
+ tl.fromTo("#pnh",{opacity:0,y:-16},{opacity:1,y:0,duration:.5,ease:P},S[1]+.4);
157
+ tl.fromTo(".row",{opacity:0},{opacity:.3,duration:.4,stagger:.08},S[1]+.5);
158
+ const R=document.getElementById("route"),RL=R.getTotalLength(),pr={p:0};
159
+ const place=(p)=>{const a=R.getPointAtLength(p*RL);gsap.set("#tv",{x:a.x,y:a.y});};
160
+ const pins=[[330,760],[560,470],[900,330],[980,760]].map(([x,y])=>{let best=0,bd=1e9;for(let k=0;k<=400;k++){const a=R.getPointAtLength(k/400*RL),d=(a.x-x)**2+(a.y-y)**2;if(d<bd){bd=d;best=k/400;}}return best;});
161
+ const T0=S[1]+.9,TD=3.9;
162
+ place(0);
163
+ tl.fromTo("#route",{strokeDasharray:RL,strokeDashoffset:RL},{strokeDashoffset:0,duration:TD,ease:"none",autoRound:false},T0);
164
+ tl.fromTo(pr,{p:0},{p:1,duration:TD,ease:"none",onUpdate:()=>place(pr.p)},T0);
165
+ tl.fromTo("#tv",{scale:0},{scale:1,duration:.4,ease:"back.out(3)"},T0-.3);
166
+ pins.forEach((f,i)=>{const at=T0+TD*f-.05,id="#p2"+(i+1);
167
+ tl.fromTo(id,{scale:0},{scale:1,duration:.45,ease:"back.out(3)"},at);
168
+ tl.fromTo(id+" .pr",{scale:.4,opacity:1},{scale:1.8,opacity:0,duration:1,ease:"power2.out"},at);
169
+ tl.fromTo(id+"l",{opacity:0,y:16},{opacity:1,y:0,duration:.45,ease:P},at+.1);
170
+ tl.to("#rw"+(i+1),{opacity:1,duration:.3},at);
171
+ tl.fromTo("#rw"+(i+1)+"b",{scaleY:0},{scaleY:1,duration:.4,ease:P},at);
172
+ });
173
+ tl.to("#c2",{opacity:0,duration:.3},S[2]-.3);
174
+ // s3: lens opens from the waterfall pin into the destination
175
+ sea(2,".sea");
176
+ tl.fromTo("#mp3",{scale:1.06,x:-150,y:-20},{scale:1.12,duration:1.2,ease:"power2.in"},S[2]);
177
+ tl.fromTo("#lens",{clipPath:"circle(0% at 375px 445px)"},{clipPath:"circle(140% at 375px 445px)",duration:1.3,ease:"power3.inOut"},S[2]+.35);
178
+ tl.fromTo(["#mtb","#mtm","#mtl","#mtr"],{y:300},{y:0,duration:1.4,ease:X,stagger:.08},S[2]+.4);
179
+ tl.fromTo("#lens .pine",{scaleY:0,transformOrigin:"50% 100%"},{scaleY:1,duration:.5,ease:"back.out(2)",stagger:.06},S[2]+1.2);
180
+ tl.fromTo("#lens .rip",{scale:.3,opacity:1},{scale:1.4,opacity:0,duration:1,ease:"power1.out",stagger:{each:.3,repeat:1}},S[2]+1.3);
181
+ tl.fromTo("#sun",{y:200,scale:.6},{y:0,scale:1,duration:1.6,ease:X},S[2]+.5);
182
+ tl.fromTo("#fall",{scaleY:0,transformOrigin:"50% 0%"},{scaleY:1,duration:.9,ease:"power2.out"},S[2]+.9);
183
+ tl.fromTo("#flw",{y:0},{y:512,duration:3,ease:"none"},S[2]+.9);
184
+ tl.fromTo(["#ms1","#ms2"],{scale:.6,opacity:0},{scale:1.3,opacity:1,duration:1.1,ease:"sine.inOut",yoyo:true,repeat:1,stagger:.25},S[2]+1.1);
185
+ tl.fromTo("#mtb",{x:0},{x:-50,duration:2.4,ease:"sine.inOut"},S[2]+1.4);tl.fromTo("#mtm",{x:0},{x:-25,duration:2.4,ease:"sine.inOut"},S[2]+1.4);
186
+ tl.fromTo("#cd3",{opacity:0,y:60},{opacity:1,y:0,duration:.8,ease:X},S[2]+1.5);
187
+ tl.to("#c3",{opacity:0,duration:.3},S[3]-.3);
188
+ // s4: whole route + offer
189
+ sea(3,"#se4");
190
+ tl.fromTo("#c4",{opacity:0},{opacity:1,duration:.3},S[3]);
191
+ tl.fromTo("#mp4",{scale:1.1,x:-140},{scale:.92,x:-160,duration:S[4]-S[3],ease:"power2.out"},S[3]);
192
+ tl.fromTo("#cd4",{x:160,opacity:0},{x:0,opacity:1,duration:.8,ease:X},S[3]+.2);
193
+ tl.fromTo(["#t4k","#t4a","#t4b","#t4c"],{opacity:0,y:24},{opacity:1,y:0,duration:.6,ease:P,stagger:.1},S[3]+.4);
194
+ tl.fromTo("#ct4",{scale:0},{scale:1,duration:.55,ease:"back.out(2.2)"},S[3]+1.1);
195
+ tl.to("#ct4",{scale:1.05,duration:.35,yoyo:true,repeat:1,ease:"sine.inOut"},S[3]+2.2);
196
+ tl.set({},{},D);
197
+ window.__timelines=window.__timelines||{};window.__timelines["itinerary-map-pins"]=tl;
198
+ </script>
199
+ </body>
200
+ </html>
package/lib/catalog/hyperframes/key-handover.html ADDED
@@ -0,0 +1,170 @@
1
+ <!doctype html>
2
+ <html lang="he" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=1080, height=1920">
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:#f6efe4;--fg:#2b2a33;--door:#2f5d50;--sun:#ffc65c;--wood:#b9774a}
14
+ *{box-sizing:border-box;margin:0;padding:0}
15
+ html,body{width:1080px;height:1920px;overflow:hidden;background:var(--bg)}
16
+ body{font-family:"Heebo",Arial,sans-serif;-webkit-font-smoothing:antialiased}
17
+ #root{position:relative;width:1080px;height:1920px;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:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg) 82%,var(--wood)))}
24
+ .t{position:absolute;white-space:nowrap;line-height:1.15;color:var(--fg)}
25
+ .c{left:0;right:0;text-align:center}
26
+ .frm{position:absolute;left:220px;top:440px;width:640px;height:1000px;border:26px solid var(--wood);border-bottom:0;border-radius:10px 10px 0 0;perspective:1600px}
27
+ .room{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--sun) 35%,var(--bg)),var(--bg) 62%,color-mix(in srgb,var(--wood) 55%,var(--bg)) 62%)}
28
+ .win{position:absolute;left:150px;top:150px;width:290px;height:340px;border:14px solid var(--bg);background:color-mix(in srgb,var(--sun) 70%,var(--bg));box-shadow:0 0 90px color-mix(in srgb,var(--sun) 80%,transparent)}
29
+ .win::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:12px;margin-left:-6px;background:var(--bg)}
30
+ .win::after{content:"";position:absolute;top:50%;left:0;right:0;height:12px;margin-top:-6px;background:var(--bg)}
31
+ .sunc{position:absolute;left:190px;top:190px;width:110px;height:110px;border-radius:50%;background:var(--sun)}
32
+ .beam{position:absolute;left:0;top:0;width:588px;height:1000px;background:linear-gradient(180deg,color-mix(in srgb,var(--sun) 55%,transparent),transparent 90%);clip-path:polygon(150px 490px,440px 490px,560px 1000px,30px 1000px)}
33
+ .plant{position:absolute;left:470px;top:640px;width:70px;height:110px;border-radius:12px 12px 20px 20px;background:var(--wood)}
34
+ .plant::before{content:"";position:absolute;left:-30px;top:-120px;width:130px;height:140px;border-radius:50% 50% 40% 40%;background:var(--door)}
35
+ .door{position:absolute;inset:0;background:var(--door);border-radius:4px;box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--door) 70%,var(--fg))}
36
+ .pn{position:absolute;left:70px;right:70px;height:360px;border:8px solid color-mix(in srgb,var(--door) 75%,var(--bg));border-radius:10px}
37
+ .knob{position:absolute;left:44px;top:500px;width:44px;height:44px;border-radius:50%;background:var(--sun);box-shadow:0 6px 0 color-mix(in srgb,var(--sun) 60%,var(--fg))}
38
+ .mat{position:absolute;left:300px;top:1440px;width:480px;height:40px;border-radius:8px;background:color-mix(in srgb,var(--wood) 70%,var(--fg))}
39
+ .hook{position:absolute;left:510px;top:400px;width:60px;height:60px;border-radius:50%;border:10px solid var(--fg)}
40
+ .sw{position:absolute;left:340px;top:440px;width:400px;height:1000px}
41
+ .str{position:absolute;left:197px;top:0;width:6px;height:140px;background:var(--fg)}
42
+ .ring{position:absolute;left:150px;top:130px;width:100px;height:100px;border-radius:50%;border:14px solid var(--wood)}
43
+ .key{position:absolute;left:110px;top:200px;width:180px;height:560px;fill:var(--sun)}
44
+ .tag{position:absolute;left:230px;top:200px;width:260px;height:360px}
45
+ .tag .tb{position:absolute;left:0;top:70px;width:260px;height:290px;border-radius:24px;background:var(--door);box-shadow:0 20px 40px color-mix(in srgb,var(--fg) 25%,transparent)}
46
+ .tag .th{position:absolute;left:105px;top:100px;width:50px;height:50px;border-radius:50%;background:var(--bg)}
47
+ .tag .ts{position:absolute;left:127px;top:0;width:6px;height:110px;background:var(--fg)}
48
+ .rg{position:absolute;left:180px;top:500px;width:720px;height:720px;transform:rotate(-90deg)}
49
+ .rg circle{fill:none;stroke-width:40}
50
+ .trk{stroke:color-mix(in srgb,var(--door) 18%,var(--bg))}
51
+ .prg{stroke:var(--door);stroke-linecap:round}
52
+ .roll{position:absolute;left:240px;width:600px;top:720px;height:240px;overflow:hidden}
53
+ .rl{position:absolute;left:0;right:0;top:0}
54
+ .rv{height:240px;line-height:240px;text-align:center;font-size:200px;font-weight:700;color:var(--fg);white-space:nowrap}
55
+ .card{position:absolute;left:110px;right:110px;top:380px;height:1060px;border-radius:44px;background:var(--bg);overflow:hidden;box-shadow:0 40px 90px color-mix(in srgb,var(--fg) 25%,transparent)}
56
+ .hero{position:absolute;left:0;right:0;top:0;height:470px;background:linear-gradient(180deg,color-mix(in srgb,var(--sun) 55%,var(--bg)),color-mix(in srgb,var(--sun) 20%,var(--bg)))}
57
+ .hs{position:absolute;left:250px;top:110px;width:360px;height:360px}
58
+ .hs .rf{fill:var(--wood)}.hs .bd{fill:var(--bg)}.hs .dr{fill:var(--door)}.hs .wn{fill:var(--sun)}
59
+ .pin{position:absolute;left:390px;top:20px;width:80px;height:110px}
60
+ .pin i{position:absolute;left:0;top:0;width:80px;height:80px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--door);box-shadow:inset 0 0 0 22px var(--door),inset 0 0 0 40px var(--bg)}
61
+ .chip{position:absolute;top:760px;width:240px;height:90px;border-radius:45px;background:color-mix(in srgb,var(--door) 12%,var(--bg));display:flex;align-items:center;justify-content:center}
62
+ .chip p{font-size:40px;font-weight:700;color:var(--door);white-space:nowrap}
63
+ .hr{position:absolute;left:60px;right:60px;top:900px;height:4px;background:color-mix(in srgb,var(--fg) 12%,var(--bg))}
64
+ .cta{position:absolute;left:170px;right:170px;top:1560px;height:140px;border-radius:70px;background:var(--door);display:flex;align-items:center;justify-content:center}
65
+ .cta p{font-size:58px;font-weight:700;color:var(--bg);white-space:nowrap}
66
+ </style>
67
+ </head>
68
+ <body>
69
+ <div id="root" data-composition-id="key-handover" data-start="0" data-width="1080" data-height="1920" data-duration="15.6">
70
+ <section id="s1" class="clip scene" data-start="0" data-duration="4">
71
+ <div class="cam" id="c1">
72
+ <h1 class="t c" id="t1" style="top:180px;font-size:88px;font-weight:700">ברוכים הבאים הביתה</h1>
73
+ <div class="frm" id="frm">
74
+ <div class="room"><i class="beam" id="beam"></i><i class="win"></i><i class="sunc" id="sunc"></i><i class="plant"></i></div>
75
+ <div class="door" id="door"><i class="pn" style="top:70px"></i><i class="pn" style="top:560px"></i><i class="knob"></i></div>
76
+ </div>
77
+ <i class="mat"></i>
78
+ <p class="t c" id="sb1" style="top:1560px;font-size:62px;font-weight:700">המפתח שלכם מחכה</p>
79
+ <p class="t c" id="sb1b" style="top:1660px;font-size:44px">דירת 4 חדרים · מוכנה לכניסה</p>
80
+ </div>
81
+ </section>
82
+ <section id="s2" class="clip scene" data-start="4" data-duration="4">
83
+ <div class="cam" id="c2">
84
+ <h2 class="t c" id="t2" style="top:180px;font-size:96px;font-weight:700">מסירת מפתח</h2>
85
+ <i class="hook"></i>
86
+ <div class="sw" id="sw">
87
+ <i class="str"></i>
88
+ <div class="tag" id="tag"><i class="ts"></i><i class="tb"></i><i class="th"></i>
89
+ <p class="t c" id="tg1" style="top:190px;font-size:60px;font-weight:700;color:var(--bg)">דירה 12</p>
90
+ <p class="t c" id="tg2" style="top:280px;font-size:40px;color:var(--sun)">קומה 3</p></div>
91
+ <svg class="key" viewBox="0 0 180 560"><path d="M90 0a90 90 0 1 1 0 180a90 90 0 1 1 0-180zm0 50a40 40 0 1 0 0 80a40 40 0 1 0 0-80zM70 170h40v390h-40zM110 420h50v34h-50zM110 490h36v34h-36z"/></svg>
92
+ <i class="ring"></i>
93
+ </div>
94
+ <p class="t c" id="sb2" style="top:1560px;font-size:60px;font-weight:700">חתמנו. מעכשיו זה שלכם.</p>
95
+ </div>
96
+ </section>
97
+ <section id="s3" class="clip scene" data-start="8" data-duration="4">
98
+ <div class="cam" id="c3">
99
+ <h2 class="t c" id="t3" style="top:180px;font-size:96px;font-weight:700">בית בלי משכנתא</h2>
100
+ <svg class="rg" viewBox="0 0 720 720"><circle class="trk" cx="360" cy="360" r="300"/><circle class="prg" id="prg" cx="360" cy="360" r="300" stroke-dasharray="1885.0" stroke-dashoffset="1885.0"/></svg>
101
+ <div class="roll"><div class="rl" id="rl"><p class="rv" id="rv0">240</p><p class="rv" id="rv1">180</p><p class="rv" id="rv2">120</p><p class="rv" id="rv3">60</p><p class="rv" id="rv4">12</p><p class="rv" id="rv5">0</p></div></div>
102
+ <p class="t c" id="lb3" style="top:980px;font-size:50px;color:var(--door);font-weight:700">תשלומים שנותרו</p>
103
+ <p class="t c" id="sb3" style="top:1360px;font-size:54px">מסלול מימון חכם עם ליווי צמוד</p>
104
+ <p class="t c" id="sb3b" style="top:1460px;font-size:44px;color:var(--wood)">יועצי משכנתאות שעובדים בשבילכם</p>
105
+ </div>
106
+ </section>
107
+ <section id="s4" class="clip scene" data-start="12" data-duration="3.6">
108
+ <div class="cam" id="c4">
109
+ <p class="t c" id="e4" style="top:190px;font-size:76px;font-weight:700">הבית החדש שלכם</p>
110
+ <div class="card" id="cd">
111
+ <div class="hero"><svg class="hs" viewBox="0 0 360 360"><path class="rf" d="M20 170L180 30l160 140z"/><rect class="bd" x="60" y="160" width="240" height="200"/><rect class="dr" x="150" y="250" width="60" height="110"/><rect class="wn" x="90" y="200" width="44" height="44"/><rect class="wn" x="226" y="200" width="44" height="44"/></svg>
112
+ <div class="pin" id="pin"><i></i></div></div>
113
+ <p class="t" id="ad1" style="right:60px;top:520px;font-size:72px;font-weight:700">רחוב הזית 12</p>
114
+ <p class="t" id="ad2" style="right:60px;top:620px;font-size:52px;color:var(--wood)">רמת גן</p>
115
+ <div class="chip" style="right:60px"><p id="ch1">4 חדרים</p></div>
116
+ <div class="chip" style="right:320px"><p id="ch2">110 מ״ר</p></div>
117
+ <div class="chip" style="right:580px"><p id="ch3">קומה 3</p></div>
118
+ <i class="hr"></i>
119
+ <p class="t" id="ag" style="right:60px;top:950px;font-size:44px">נדל״ן אופק · מסירה מיידית</p>
120
+ </div>
121
+ <div class="cta" id="cta"><p id="ctat">תאמו סיור בנכס</p></div>
122
+ </div>
123
+ </section>
124
+ </div>
125
+ <script>
126
+ const tl=gsap.timeline({paused:true});
127
+ const S=[0,4,8,12,15.6],D=15.6;
128
+ const X="expo.out",P="power3.out",B="back.out(1.8)";
129
+ function fadeOut(i){tl.to("#c"+(i+1),{opacity:0,duration:.4,ease:"power1.in"},S[i+1]-.4);}
130
+ // s1 door opens onto a sunlit room
131
+ tl.fromTo("#c1",{opacity:0},{opacity:1,duration:.4},S[0]);
132
+ tl.fromTo("#t1",{opacity:0,y:-30},{opacity:1,y:0,duration:.6,ease:P},S[0]+.1);
133
+ tl.fromTo("#frm",{y:60,opacity:0},{y:0,opacity:1,duration:.7,ease:X},S[0]+.1);
134
+ tl.fromTo("#door",{rotationY:0,transformOrigin:"100% 50%",transformPerspective:1600},{rotationY:-100,duration:1.4,ease:"power2.inOut"},S[0]+.8);
135
+ tl.fromTo("#beam",{opacity:0},{opacity:1,duration:1,ease:"power1.inOut"},S[0]+1.5);
136
+ tl.fromTo("#sunc",{y:60},{y:0,duration:1.6,ease:"sine.out"},S[0]+1.2);
137
+ tl.fromTo("#sb1",{opacity:0,y:30},{opacity:1,y:0,duration:.6,ease:P},S[0]+2);
138
+ tl.fromTo("#sb1b",{opacity:0,y:30},{opacity:1,y:0,duration:.6,ease:P},S[0]+2.2);
139
+ fadeOut(0);
140
+ // s2 key + tag swing
141
+ tl.fromTo("#c2",{opacity:0},{opacity:1,duration:.3},S[1]);
142
+ tl.fromTo("#t2",{opacity:0,y:-30},{opacity:1,y:0,duration:.6,ease:P},S[1]+.1);
143
+ tl.fromTo("#sw",{rotation:32,transformOrigin:"50% 0%"},{keyframes:[{rotation:-20,duration:.6},{rotation:12,duration:.55},{rotation:-6,duration:.5},{rotation:2,duration:.45},{rotation:0,duration:.4}],ease:"sine.inOut"},S[1]+.1);
144
+ tl.fromTo("#tag",{rotation:-24,transformOrigin:"50% 0%"},{keyframes:[{rotation:16,duration:.65},{rotation:-9,duration:.6},{rotation:4,duration:.5},{rotation:0,duration:.5}],ease:"sine.inOut"},S[1]+.2);
145
+ tl.fromTo("#sb2",{opacity:0,y:30},{opacity:1,y:0,duration:.6,ease:P},S[1]+1.8);
146
+ fadeOut(1);
147
+ // s3 countdown to mortgage-free
148
+ tl.fromTo("#c3",{opacity:0},{opacity:1,duration:.3},S[2]);
149
+ tl.fromTo("#t3",{opacity:0,y:-30},{opacity:1,y:0,duration:.6,ease:P},S[2]+.1);
150
+ tl.fromTo("#prg",{attr:{"stroke-dashoffset":1885.0}},{attr:{"stroke-dashoffset":0},duration:2.4,ease:"power2.inOut"},S[2]+.4);
151
+ tl.fromTo("#rl",{y:0},{y:-1200,duration:2.4,ease:"steps(5)"},S[2]+.4);
152
+ tl.fromTo("#lb3",{opacity:0},{opacity:1,duration:.4},S[2]+.4);
153
+ tl.fromTo("#sb3",{opacity:0,y:30},{opacity:1,y:0,duration:.6,ease:P},S[2]+1.4);
154
+ tl.fromTo("#sb3b",{opacity:0,y:30},{opacity:1,y:0,duration:.6,ease:P},S[2]+1.7);
155
+ tl.fromTo(".roll",{scale:1},{scale:1.12,duration:.3,yoyo:true,repeat:1,ease:"sine.inOut"},S[2]+2.85);
156
+ fadeOut(2);
157
+ // s4 address card
158
+ tl.fromTo("#c4",{opacity:0},{opacity:1,duration:.3},S[3]);
159
+ tl.fromTo("#e4",{opacity:0,y:-20},{opacity:1,y:0,duration:.5,ease:P},S[3]+.1);
160
+ tl.fromTo("#cd",{y:140,opacity:0},{y:0,opacity:1,duration:.8,ease:X},S[3]+.1);
161
+ tl.fromTo("#pin",{y:-260,opacity:0},{y:0,opacity:1,duration:.7,ease:"bounce.out"},S[3]+.6);
162
+ tl.fromTo(["#ad1","#ad2"],{opacity:0,x:-40},{opacity:1,x:0,duration:.5,ease:P,stagger:.12},S[3]+.7);
163
+ tl.fromTo("#cd .chip",{scale:0},{scale:1,duration:.45,ease:B,stagger:.1},S[3]+1.1);
164
+ tl.fromTo("#ag",{opacity:0},{opacity:1,duration:.4},S[3]+1.5);
165
+ tl.fromTo("#cta",{scale:.5,opacity:0},{scale:1,opacity:1,duration:.6,ease:B},S[3]+1.7);
166
+ tl.set({},{},D);
167
+ window.__timelines=window.__timelines||{};window.__timelines["key-handover"]=tl;
168
+ </script>
169
+ </body>
170
+ </html>
package/lib/catalog/hyperframes/kinetic-launch.html ADDED
@@ -0,0 +1,160 @@
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:#0d0d12;--fg:#f5f3ee;--accent:#ff4d2e;--accent2:#ffd23f;--ink:#1c1c26}
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
+ .big{position:absolute;font-weight:700;line-height:.92;white-space:nowrap;letter-spacing:-.03em}
24
+ .stripes{position:absolute;inset:-300px;background:repeating-linear-gradient(-45deg,var(--ink) 0 46px,var(--bg) 46px 92px)}
25
+ .vig{position:absolute;inset:0;background:radial-gradient(ellipse at 60% 50%,transparent 30%,var(--bg) 85%)}
26
+ .bar{position:absolute;height:26px;background:var(--accent);transform-origin:100% 50%}
27
+ .tag{position:absolute;font-size:38px;font-weight:700;letter-spacing:.04em;padding:12px 28px;border:3px solid currentColor;border-radius:60px}
28
+ .wipe{position:absolute;inset:0;background:var(--accent);transform-origin:100% 50%;transform:scaleX(0)}
29
+ .burst{position:absolute;background:var(--ink);clip-path:polygon(50% 0,58% 21%,75% 7%,73% 29%,93% 25%,82% 43%,100% 50%,82% 57%,93% 75%,73% 71%,75% 93%,58% 79%,50% 100%,42% 79%,25% 93%,27% 71%,7% 75%,18% 57%,0 50%,18% 43%,7% 25%,27% 29%,25% 7%,42% 21%)}
30
+ .ring{position:absolute;border-radius:50%;border:4px solid var(--ink)}
31
+ .dot{position:absolute;border-radius:50%;background:var(--fg)}
32
+ .iris{position:absolute;inset:0;background:var(--bg);clip-path:circle(0% at 26% 48%)}
33
+ .frame{position:absolute;border:3px solid color-mix(in srgb,var(--fg) 30%,transparent)}
34
+ .corner{position:absolute;width:44px;height:44px;border-color:var(--accent);border-style:solid;border-width:0}
35
+ .slot{position:absolute;overflow:hidden}
36
+ .slot .big{position:absolute;right:0;top:0}
37
+ .num{font-size:360px;color:transparent;-webkit-text-stroke:4px var(--accent2)}
38
+ .prog{position:absolute;height:8px;background:var(--accent);transform-origin:100% 50%}
39
+ .vbar{position:absolute;top:0;bottom:0;background:var(--accent2);transform-origin:50% 100%;transform:scaleY(0)}
40
+ .sheen{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--fg) 55%,transparent) 50%,transparent 70%)}
41
+ .cta{position:absolute;overflow:hidden;background:var(--ink);color:var(--accent2);font-size:46px;font-weight:700;padding:22px 64px;border-radius:80px}
42
+ .mark{position:absolute;width:300px;height:300px}
43
+ </style>
44
+ </head>
45
+ <body>
46
+ <div id="root" data-composition-id="kinetic-launch" data-start="0" data-width="1920" data-height="1080" data-duration="12.5">
47
+ <section id="s1" class="clip scene" data-start="0" data-duration="3">
48
+ <div class="cam" id="c1">
49
+ <div class="stripes" id="st1"></div>
50
+ <div class="vig"></div>
51
+ <div class="big" id="k1" style="top:190px;right:150px;font-size:300px;color:var(--fg)">מוכנים</div>
52
+ <div class="big" id="k2" style="top:500px;right:150px;font-size:300px;color:var(--accent)">לשינוי?</div>
53
+ <div class="bar" id="b1" style="top:850px;right:160px;width:760px"></div>
54
+ <div class="tag" id="lb1" style="top:830px;left:150px;color:var(--fg)">נובה · השקה 2026</div>
55
+ </div>
56
+ <div class="wipe" id="w1"></div>
57
+ </section>
58
+ <section id="s2" class="clip scene" data-start="3" data-duration="3">
59
+ <div class="cam" id="c2" style="background:var(--accent)">
60
+ <div class="ring" id="r2a" style="left:110px;top:150px;width:780px;height:780px"></div>
61
+ <div class="ring" id="r2b" style="left:200px;top:240px;width:600px;height:600px;border-style:dashed"></div>
62
+ <div class="burst" id="bu2" style="left:250px;top:290px;width:500px;height:500px"></div>
63
+ <div class="dot" id="d2" style="left:410px;top:450px;width:180px;height:180px"></div>
64
+ <div class="big" id="k3" style="top:150px;right:150px;font-size:420px;color:var(--ink)">חדש</div>
65
+ <div class="big" id="k4" style="top:600px;right:160px;font-size:220px;color:var(--fg)">לגמרי.</div>
66
+ <div class="tag" id="lb2" style="top:900px;right:165px;color:var(--ink)">גרסה 3.0</div>
67
+ </div>
68
+ <div class="iris" id="ir2"></div>
69
+ </section>
70
+ <section id="s3" class="clip scene" data-start="6" data-duration="3">
71
+ <div class="cam" id="c3">
72
+ <div class="frame" id="fr3" style="left:150px;top:200px;width:1620px;height:640px"></div>
73
+ <div class="corner" id="co1" style="right:138px;top:188px;border-top-width:8px;border-right-width:8px"></div>
74
+ <div class="corner" id="co2" style="left:138px;bottom:228px;border-bottom-width:8px;border-left-width:8px"></div>
75
+ <p class="abs" id="sub3" style="top:110px;right:150px;font-size:44px;font-weight:400;color:var(--fg)">שלושה דברים שתרגישו מהרגע הראשון</p>
76
+ <div class="slot" style="right:260px;top:330px;width:1000px;height:360px">
77
+ <div class="big" id="f1" style="font-size:340px;color:var(--fg)">מהיר.</div>
78
+ <div class="big" id="f2" style="font-size:340px;color:var(--fg)">חכם.</div>
79
+ <div class="big" id="f3" style="font-size:340px;color:var(--accent)">שלך.</div>
80
+ </div>
81
+ <div class="slot" style="left:230px;top:330px;width:520px;height:360px">
82
+ <div class="big num" id="n1">01</div>
83
+ <div class="big num" id="n2">02</div>
84
+ <div class="big num" id="n3">03</div>
85
+ </div>
86
+ <div class="prog" id="pg3" style="right:150px;top:900px;width:1620px"></div>
87
+ </div>
88
+ <div class="vbar" id="vb1" style="right:0;width:384px"></div>
89
+ <div class="vbar" id="vb2" style="right:384px;width:384px"></div>
90
+ <div class="vbar" id="vb3" style="right:768px;width:384px"></div>
91
+ <div class="vbar" id="vb4" style="right:1152px;width:384px"></div>
92
+ <div class="vbar" id="vb5" style="right:1536px;width:384px"></div>
93
+ </section>
94
+ <section id="s4" class="clip scene" data-start="9" data-duration="3.5">
95
+ <div class="cam" id="c4" style="background:var(--accent2)">
96
+ <div class="ring" id="r4" style="left:180px;top:240px;width:600px;height:600px;border-width:3px"></div>
97
+ <div class="mark" id="mk" style="left:330px;top:390px">
98
+ <div class="abs" id="mk1" style="inset:40px;background:var(--ink);border-radius:36px"></div>
99
+ <div class="abs" id="mk2" style="left:90px;top:90px;width:120px;height:120px;border-radius:50%;background:var(--accent)"></div>
100
+ </div>
101
+ <div class="big" id="brand" style="top:200px;right:170px;font-size:320px;color:var(--ink)">נובה</div>
102
+ <p class="abs" id="tg4" style="top:580px;right:180px;font-size:60px;font-weight:400;color:var(--ink)">החל מהיום, בכל מקום שאתם נמצאים</p>
103
+ <div class="cta" id="cta" style="top:730px;right:180px"><div class="sheen" id="sh4"></div><span id="ctat" style="position:relative">הצטרפו עכשיו</span></div>
104
+ </div>
105
+ </section>
106
+ </div>
107
+ <script>
108
+ const tl=gsap.timeline({paused:true});
109
+ const S=[0,3,6,9,12.5],D=12.5;
110
+ const X="expo.out",P="power3.out";
111
+ // scene 1
112
+ tl.fromTo("#c1",{scale:1.14},{scale:1,duration:3,ease:"power2.out"},S[0]);
113
+ tl.fromTo("#st1",{x:0},{x:-260,duration:3,ease:"none"},S[0]);
114
+ tl.fromTo("#k1",{x:1600,skewX:-20},{x:0,skewX:0,duration:.9,ease:X},S[0]+.1);
115
+ tl.fromTo("#k2",{x:-1700,skewX:20},{x:0,skewX:0,duration:.9,ease:X},S[0]+.32);
116
+ tl.to("#k1",{x:-70,duration:1.5,ease:"none"},S[0]+1);
117
+ tl.to("#k2",{x:70,duration:1.3,ease:"none"},S[0]+1.22);
118
+ tl.fromTo("#b1",{scaleX:0},{scaleX:1,duration:.7,ease:"power4.inOut"},S[0]+.6);
119
+ tl.fromTo("#lb1",{y:40,opacity:0},{y:0,opacity:1,duration:.6,ease:P},S[0]+.9);
120
+ tl.fromTo("#w1",{scaleX:0},{scaleX:1,duration:.45,ease:"power4.in"},S[1]-.45);
121
+ // scene 2
122
+ tl.fromTo("#c2",{scale:1},{scale:1.06,duration:3,ease:"none"},S[1]);
123
+ tl.fromTo("#bu2",{scale:0,rotation:-120},{scale:1,rotation:0,duration:.9,ease:"back.out(1.6)"},S[1]+.15);
124
+ tl.to("#bu2",{rotation:60,duration:1.9,ease:"none"},S[1]+1.05);
125
+ tl.fromTo("#d2",{scale:0},{scale:1,duration:.6,ease:"back.out(2)"},S[1]+.45);
126
+ tl.fromTo("#r2a",{scale:.4,opacity:0},{scale:1,opacity:1,duration:1.1,ease:X},S[1]+.1);
127
+ tl.fromTo("#r2b",{scale:.3,opacity:0,rotation:-90},{scale:1,opacity:1,rotation:40,duration:2.6,ease:"power2.out"},S[1]+.2);
128
+ tl.fromTo("#k3",{yPercent:60,opacity:0,scale:1.3},{yPercent:0,opacity:1,scale:1,duration:.8,ease:X},S[1]+.05);
129
+ tl.fromTo("#k4",{x:900,opacity:0},{x:0,opacity:1,duration:.8,ease:X},S[1]+.35);
130
+ tl.fromTo("#lb2",{scale:0},{scale:1,duration:.5,ease:"back.out(2)"},S[1]+.8);
131
+ tl.fromTo("#ir2",{clipPath:"circle(0% at 26% 48%)"},{clipPath:"circle(130% at 26% 48%)",duration:.6,ease:"power3.in"},S[2]-.6);
132
+ // scene 3
133
+ tl.fromTo("#c3",{scale:1.04},{scale:1,duration:3,ease:"none"},S[2]);
134
+ tl.fromTo("#fr3",{clipPath:"inset(0 0 0 100%)"},{clipPath:"inset(0 0 0 0%)",duration:.8,ease:"power3.inOut"},S[2]+.05);
135
+ tl.fromTo(["#co1","#co2"],{scale:0},{scale:1,duration:.5,ease:"back.out(2)",stagger:.1},S[2]+.4);
136
+ tl.fromTo("#sub3",{y:24,opacity:0},{y:0,opacity:1,duration:.6,ease:P},S[2]+.2);
137
+ tl.fromTo("#pg3",{scaleX:0},{scaleX:1,duration:2.9,ease:"none"},S[2]+.05);
138
+ [["#f1","#n1",.25,.95],["#f2","#n2",1.05,1.75],["#f3","#n3",1.85,9]].forEach(([w,n,a,b],i)=>{
139
+ tl.fromTo(w,{yPercent:130},{yPercent:0,duration:.5,ease:X},S[2]+a);
140
+ tl.fromTo(n,{yPercent:-130},{yPercent:0,duration:.5,ease:X},S[2]+a+.04);
141
+ if(i<2){tl.to(w,{yPercent:-130,duration:.32,ease:"power3.in"},S[2]+b-.22);tl.to(n,{yPercent:130,duration:.32,ease:"power3.in"},S[2]+b-.22);}
142
+ });
143
+ tl.fromTo("#f3",{scale:1},{scale:1.04,duration:.6,ease:"none"},S[2]+2.35);
144
+ tl.fromTo(".vbar",{scaleY:0},{scaleY:1,duration:.42,ease:"power3.in",stagger:.05},S[3]-.62);
145
+ // scene 4
146
+ tl.fromTo("#c4",{scale:1.06},{scale:1,duration:3.5,ease:"power1.out"},S[3]);
147
+ tl.fromTo("#r4",{scale:0},{scale:1,duration:1,ease:X},S[3]+.1);
148
+ tl.to("#r4",{scale:1.08,duration:2.4,ease:"none"},S[3]+1.1);
149
+ tl.fromTo("#mk1",{scale:0,rotation:-180},{scale:1,rotation:45,duration:1,ease:"back.out(1.4)"},S[3]+.15);
150
+ tl.fromTo("#mk2",{scale:0},{scale:1,duration:.6,ease:"back.out(2.4)"},S[3]+.55);
151
+ tl.to("#mk",{rotation:-12,y:-14,duration:2.6,ease:"sine.inOut"},S[3]+.9);
152
+ tl.fromTo("#brand",{clipPath:"inset(0 0 0 100%)",x:-60},{clipPath:"inset(0 0 0 0%)",x:0,duration:.9,ease:"power4.out"},S[3]+.35);
153
+ tl.fromTo("#tg4",{y:40,opacity:0},{y:0,opacity:1,duration:.7,ease:P},S[3]+.8);
154
+ tl.fromTo("#cta",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.6,ease:"back.out(1.8)"},S[3]+1.1);
155
+ tl.fromTo("#sh4",{xPercent:-120},{xPercent:120,duration:.9,ease:"power2.inOut"},S[3]+1.9);
156
+ tl.set({},{},D);
157
+ window.__timelines=window.__timelines||{};window.__timelines["kinetic-launch"]=tl;
158
+ </script>
159
+ </body>
160
+ </html>