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/swiss-grid.html ADDED
@@ -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>
package/lib/catalog/hyperframes/travel-route.html ADDED
@@ -0,0 +1,168 @@
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:#cfe7ea;--fg:#12313a;--accent:#ff6a3d;--land:#f5ecd7;--accent2:#2f8f83}
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
+ .waves{position:absolute;inset:-100px;background:repeating-linear-gradient(170deg,transparent 0 38px,color-mix(in srgb,var(--fg) 6%,transparent) 38px 41px)}
24
+ .map{position:absolute;left:0;top:0}
25
+ .ld{fill:var(--land);stroke:color-mix(in srgb,var(--fg) 25%,transparent);stroke-width:3}
26
+ .ghost{fill:none;stroke:color-mix(in srgb,var(--fg) 35%,transparent);stroke-width:5;stroke-dasharray:4 18;stroke-linecap:round}
27
+ .rt{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round}
28
+ .pin{position:absolute;width:60px;height:78px;transform-origin:50% 100%}
29
+ .pinh{position:absolute;left:0;top:0;width:60px;height:60px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent);box-shadow:0 6px 12px color-mix(in srgb,var(--fg) 25%,transparent)}
30
+ .pind{position:absolute;left:19px;top:19px;width:22px;height:22px;border-radius:50%;background:var(--land)}
31
+ .plab{position:absolute;padding:12px 26px;border-radius:18px;background:var(--fg);color:var(--land);transform-origin:0 50%}
32
+ .pc{font-size:24px;font-weight:700;color:var(--accent);white-space:nowrap}
33
+ .pn{font-size:44px;font-weight:700;white-space:nowrap;line-height:1.1}
34
+ .plane{position:absolute;left:-48px;top:-48px;width:96px;height:96px;filter:drop-shadow(0 10px 8px color-mix(in srgb,var(--fg) 30%,transparent))}
35
+ .plane i{position:absolute;display:block;background:var(--fg)}
36
+ .pb{left:6px;top:34px;width:70px;height:12px;border-radius:10px 40px 40px 10px}
37
+ .pw{left:30px;top:6px;width:16px;height:68px;border-radius:8px;transform:skewY(-20deg)}
38
+ .pt{left:6px;top:24px;width:10px;height:32px;border-radius:4px}
39
+ .compass{position:absolute;width:220px;height:220px;border-radius:50%;border:4px solid var(--fg);background:color-mix(in srgb,var(--land) 70%,transparent)}
40
+ .needle{position:absolute;left:100px;top:20px;width:20px;height:180px;background:linear-gradient(var(--accent) 50%,var(--fg) 50%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
41
+ .title{position:absolute;padding:40px 70px;border-radius:30px;background:var(--fg);color:var(--land);box-shadow:0 30px 60px color-mix(in srgb,var(--fg) 30%,transparent)}
42
+ .card{position:absolute;top:200px;width:480px;height:640px;padding:24px;background:var(--land);border-radius:14px;box-shadow:0 30px 60px color-mix(in srgb,var(--fg) 25%,transparent)}
43
+ .art{position:relative;height:400px;border-radius:8px;overflow:hidden}
44
+ .ct{position:absolute;right:30px;top:446px;font-size:60px;font-weight:700;white-space:nowrap}
45
+ .cs{position:absolute;right:30px;top:530px;font-size:34px;color:color-mix(in srgb,var(--fg) 70%,transparent);white-space:nowrap}
46
+ .stampc{position:absolute;left:24px;top:440px;width:110px;height:110px;border-radius:50%;border:5px dashed var(--accent);transform:rotate(-14deg)}
47
+ .big{position:absolute;font-weight:700;white-space:nowrap;line-height:1.1}
48
+ .cta{position:absolute;padding:26px 70px;border-radius:70px;background:var(--accent);color:var(--land);font-size:52px;font-weight:700}
49
+ </style>
50
+ </head>
51
+ <body>
52
+ <div id="root" data-composition-id="travel-route" data-start="0" data-width="1920" data-height="1080" data-duration="16">
53
+ <section id="s1" class="clip scene" data-start="0" data-duration="3.6">
54
+ <div class="cam" id="c1">
55
+ <div class="waves" id="wv1"></div>
56
+ <div class="layer" id="mp1"><svg class="map" width="1920" height="1080" viewBox="0 0 1920 1080">
57
+ <path d="M760 0 L1500 0 C1460 90 1330 120 1240 190 C1150 250 1110 300 1130 360 C1160 450 1240 520 1330 600 C1420 680 1500 720 1560 800 C1600 860 1540 900 1470 880 C1400 860 1380 920 1420 980 L1450 1080 L1330 1080 C1300 1000 1250 940 1180 880 C1080 790 990 700 930 600 C880 520 830 470 760 430 C690 390 640 330 700 260 C760 190 720 90 760 0 Z" class="ld"/>
58
+ <path d="M0 120 C120 90 260 150 330 240 C400 330 360 430 260 470 C160 510 60 480 0 520 Z" class="ld"/>
59
+ <path d="M820 860 C900 830 990 860 1000 920 C1010 980 930 1010 860 990 C790 970 760 890 820 860 Z" class="ld"/>
60
+ <path d="M600 640 C650 610 700 640 690 700 C680 780 620 800 590 760 C560 720 560 670 600 640 Z" class="ld"/>
61
+ <path d="M1700 200 C1780 160 1920 180 1920 180 L1920 520 C1860 500 1780 520 1720 460 C1660 400 1640 240 1700 200 Z" class="ld"/>
62
+ </svg><svg class="map" width="1920" height="1080"><path class="ghost" d="M1880 1030 C 1700 960, 1460 900, 1300 760 C 1240 660, 1090 650, 1050 520 C 1015 420, 1080 330, 1150 300"/></svg></div>
63
+ <div class="compass" id="cp" style="left:120px;top:720px"><div class="needle" id="nd"></div></div>
64
+ <div class="title" id="tt" style="right:180px;top:300px"><p class="big" id="t1k" style="position:static;font-size:40px;color:var(--accent)">חבילת סתיו</p><p class="big" id="t1a" style="position:static;font-size:130px">איטליה</p><p class="big" id="t1b" style="position:static;font-size:64px;font-weight:400">שבעה ימים, שלוש ערים</p></div>
65
+ </div>
66
+ </section>
67
+ <section id="s2" class="clip scene" data-start="3.6" data-duration="4.4">
68
+ <div class="cam" id="c2">
69
+ <div class="waves" id="wv2"></div>
70
+ <div class="layer" id="mp2"><svg class="map" width="1920" height="1080" viewBox="0 0 1920 1080">
71
+ <path d="M760 0 L1500 0 C1460 90 1330 120 1240 190 C1150 250 1110 300 1130 360 C1160 450 1240 520 1330 600 C1420 680 1500 720 1560 800 C1600 860 1540 900 1470 880 C1400 860 1380 920 1420 980 L1450 1080 L1330 1080 C1300 1000 1250 940 1180 880 C1080 790 990 700 930 600 C880 520 830 470 760 430 C690 390 640 330 700 260 C760 190 720 90 760 0 Z" class="ld"/>
72
+ <path d="M0 120 C120 90 260 150 330 240 C400 330 360 430 260 470 C160 510 60 480 0 520 Z" class="ld"/>
73
+ <path d="M820 860 C900 830 990 860 1000 920 C1010 980 930 1010 860 990 C790 970 760 890 820 860 Z" class="ld"/>
74
+ <path d="M600 640 C650 610 700 640 690 700 C680 780 620 800 590 760 C560 720 560 670 600 640 Z" class="ld"/>
75
+ <path d="M1700 200 C1780 160 1920 180 1920 180 L1920 520 C1860 500 1780 520 1720 460 C1660 400 1640 240 1700 200 Z" class="ld"/>
76
+ </svg>
77
+ <svg class="map" width="1920" height="1080"><path class="ghost" d="M1880 1030 C 1700 960, 1460 900, 1300 760 C 1240 660, 1090 650, 1050 520 C 1015 420, 1080 330, 1150 300"/><path class="rt" id="route" d="M1880 1030 C 1700 960, 1460 900, 1300 760 C 1240 660, 1090 650, 1050 520 C 1015 420, 1080 330, 1150 300"/></svg>
78
+ <div class="pin" id="pa" style="left:1270px;top:682px"><div class="pinh"></div><div class="pind"></div></div><div class="plab" id="pal" style="left:1340px;top:690px"><p class="pc" id="pac">ימים 1-3</p><p class="pn" id="pan">רומא</p></div><div class="pin" id="pb" style="left:1020px;top:442px"><div class="pinh"></div><div class="pind"></div></div><div class="plab" id="pbl" style="left:1090px;top:450px"><p class="pc" id="pbc">ימים 4-5</p><p class="pn" id="pbn">פירנצה</p></div><div class="pin" id="pcx" style="left:1120px;top:222px"><div class="pinh"></div><div class="pind"></div></div><div class="plab" id="pcxl" style="left:1190px;top:230px"><p class="pc" id="pcxc">ימים 6-7</p><p class="pn" id="pcxn">ונציה</p></div>
79
+ <div class="plane" id="pl"><svg width="96" height="96" viewBox="0 0 80 80"><path d="M78 40 C78 37 74 35.5 70 35.5 L50 35 L34 8 L26 8 L36 35 L16 35 L9 25 L3 25 L7 40 L3 55 L9 55 L16 45 L36 45 L26 72 L34 72 L50 45 L70 44.5 C74 44.5 78 43 78 40 Z" style="fill:var(--fg);stroke:var(--land);stroke-width:2.5"/></svg></div>
80
+ </div>
81
+ </div>
82
+ </section>
83
+ <section id="s3" class="clip scene" data-start="8" data-duration="4">
84
+ <div class="cam" id="c3">
85
+ <div class="waves"></div>
86
+ <div class="card" id="k1" style="right:160px"><div class="art" style="background:linear-gradient(var(--bg),var(--land))">
87
+ <div class="abs" style="left:40px;right:40px;bottom:0;height:250px;background:var(--accent);border-radius:10px 10px 0 0"></div>
88
+ <div class="abs arch" style="left:66px;bottom:30px;width:60px;height:110px;border-radius:30px 30px 0 0;background:var(--fg)"></div><div class="abs arch" style="left:66px;bottom:160px;width:60px;height:70px;border-radius:30px 30px 0 0;background:var(--fg)"></div><div class="abs arch" style="left:154px;bottom:30px;width:60px;height:110px;border-radius:30px 30px 0 0;background:var(--fg)"></div><div class="abs arch" style="left:154px;bottom:160px;width:60px;height:70px;border-radius:30px 30px 0 0;background:var(--fg)"></div><div class="abs arch" style="left:242px;bottom:30px;width:60px;height:110px;border-radius:30px 30px 0 0;background:var(--fg)"></div><div class="abs arch" style="left:242px;bottom:160px;width:60px;height:70px;border-radius:30px 30px 0 0;background:var(--fg)"></div><div class="abs arch" style="left:330px;bottom:30px;width:60px;height:110px;border-radius:30px 30px 0 0;background:var(--fg)"></div><div class="abs arch" style="left:330px;bottom:160px;width:60px;height:70px;border-radius:30px 30px 0 0;background:var(--fg)"></div>
89
+ </div><p class="ct" id="k1t">רומא</p><p class="cs" id="k1s">ארוחת ערב בסמטאות העתיקות</p></div>
90
+ <div class="card" id="k2" style="right:720px"><div class="art" style="background:linear-gradient(var(--bg),var(--land))">
91
+ <div class="abs" id="dome" style="left:100px;top:110px;width:240px;height:240px;border-radius:50%;background:var(--accent)"></div>
92
+ <div class="abs" style="left:205px;top:70px;width:30px;height:60px;background:var(--fg);border-radius:6px"></div>
93
+ <div class="abs" style="left:60px;top:230px;width:320px;height:170px;background:var(--fg)"></div>
94
+ <div class="abs" style="left:110px;top:280px;width:40px;height:70px;border-radius:20px 20px 0 0;background:var(--land)"></div><div class="abs" style="left:200px;top:280px;width:40px;height:70px;border-radius:20px 20px 0 0;background:var(--land)"></div><div class="abs" style="left:290px;top:280px;width:40px;height:70px;border-radius:20px 20px 0 0;background:var(--land)"></div>
95
+ </div><p class="ct" id="k2t">פירנצה</p><p class="cs" id="k2s">שקיעה מעל גגות הרעפים</p></div>
96
+ <div class="card" id="k3" style="right:1280px"><div class="art" style="background:linear-gradient(var(--bg),var(--accent2))">
97
+ <div class="abs" style="left:-20px;right:-20px;top:120px;height:160px;border:26px solid var(--fg);border-bottom:none;border-radius:200px 200px 0 0"></div>
98
+ <div class="abs" id="gon" style="left:90px;top:300px;width:260px;height:44px;background:var(--fg);border-radius:0 0 140px 140px"></div>
99
+ <div class="abs wv" style="left:0;right:0;top:340px;height:60px;background:repeating-linear-gradient(90deg,var(--bg) 0 30px,transparent 30px 60px);opacity:.6"></div>
100
+ </div><p class="ct" id="k3t">ונציה</p><p class="cs" id="k3s">שיט בתעלות עם שחר</p></div>
101
+ <div class="stampc" id="sc1" style="left:1660px;top:150px"></div>
102
+ </div>
103
+ </section>
104
+ <section id="s4" class="clip scene" data-start="12" data-duration="4">
105
+ <div class="cam" id="c4">
106
+ <div class="waves" id="wv4"></div>
107
+ <div class="layer" id="mp4" style="opacity:.55"><svg class="map" width="1920" height="1080" viewBox="0 0 1920 1080">
108
+ <path d="M760 0 L1500 0 C1460 90 1330 120 1240 190 C1150 250 1110 300 1130 360 C1160 450 1240 520 1330 600 C1420 680 1500 720 1560 800 C1600 860 1540 900 1470 880 C1400 860 1380 920 1420 980 L1450 1080 L1330 1080 C1300 1000 1250 940 1180 880 C1080 790 990 700 930 600 C880 520 830 470 760 430 C690 390 640 330 700 260 C760 190 720 90 760 0 Z" class="ld"/>
109
+ <path d="M0 120 C120 90 260 150 330 240 C400 330 360 430 260 470 C160 510 60 480 0 520 Z" class="ld"/>
110
+ <path d="M820 860 C900 830 990 860 1000 920 C1010 980 930 1010 860 990 C790 970 760 890 820 860 Z" class="ld"/>
111
+ <path d="M600 640 C650 610 700 640 690 700 C680 780 620 800 590 760 C560 720 560 670 600 640 Z" class="ld"/>
112
+ <path d="M1700 200 C1780 160 1920 180 1920 180 L1920 520 C1860 500 1780 520 1720 460 C1660 400 1640 240 1700 200 Z" class="ld"/>
113
+ </svg><svg class="map" width="1920" height="1080"><path class="rt" d="M1880 1030 C 1700 960, 1460 900, 1300 760 C 1240 660, 1090 650, 1050 520 C 1015 420, 1080 330, 1150 300"/></svg></div>
114
+ <div class="title" id="tt4" style="right:180px;top:200px;width:980px;height:680px"></div>
115
+ <p class="big" id="t4k" style="right:250px;top:260px;font-size:44px;color:var(--accent)">מסלולים · סוכנות טיולים</p>
116
+ <p class="big" id="t4a" style="right:250px;top:330px;font-size:100px;color:var(--land)">החל מ־₪4,990</p>
117
+ <p class="big" id="t4b" style="right:250px;top:480px;font-size:50px;font-weight:400;color:var(--land)">טיסות, מלונות וסיורים מודרכים</p>
118
+ <div class="cta" id="ct4" style="right:250px;top:640px"><span id="ct4t">הזמינו את המקום שלכם</span></div>
119
+ <div class="plane" id="pl4"><svg width="96" height="96" viewBox="0 0 80 80"><path d="M78 40 C78 37 74 35.5 70 35.5 L50 35 L34 8 L26 8 L36 35 L16 35 L9 25 L3 25 L7 40 L3 55 L9 55 L16 45 L36 45 L26 72 L34 72 L50 45 L70 44.5 C74 44.5 78 43 78 40 Z" style="fill:var(--fg);stroke:var(--land);stroke-width:2.5"/></svg></div>
120
+ </div>
121
+ </section>
122
+ </div>
123
+ <script>
124
+ const tl=gsap.timeline({paused:true});
125
+ const S=[0,3.6,8,12,16],D=16;
126
+ const X="expo.out",P="power3.out";
127
+ function waves(i,id){tl.fromTo(id,{x:0},{x:-120,duration:S[i+1]-S[i],ease:"none"},S[i]);}
128
+ // s1
129
+ waves(0,"#wv1");
130
+ tl.fromTo("#mp1",{scale:.82,rotation:-4},{scale:.92,rotation:0,duration:3.6,ease:"power1.out"},S[0]);
131
+ tl.fromTo("#cp",{scale:0,rotation:-180},{scale:1,rotation:0,duration:.9,ease:"back.out(1.6)"},S[0]+.2);
132
+ tl.fromTo("#nd",{rotation:-120},{keyframes:[{rotation:40,duration:.6},{rotation:-20,duration:.5},{rotation:8,duration:.5},{rotation:0,duration:.5}],ease:"sine.inOut"},S[0]+.5);
133
+ tl.fromTo("#tt",{y:80,opacity:0,rotation:3},{y:0,opacity:1,rotation:-2,duration:.9,ease:X},S[0]+.3);
134
+ tl.fromTo(["#t1k","#t1a","#t1b"],{opacity:0,x:-40},{opacity:1,x:0,duration:.6,ease:P,stagger:.12},S[0]+.6);
135
+ tl.to("#c1",{scale:1.5,opacity:0,duration:.5,ease:"power2.in"},S[1]-.5);
136
+ // s2: route + plane
137
+ waves(1,"#wv2");
138
+ tl.fromTo("#mp2",{scale:1.4,x:-300,y:-120,transformOrigin:"1300px 760px"},{scale:1.05,x:-120,y:60,duration:4.4,ease:"power2.inOut"},S[1]);
139
+ const R=document.getElementById("route"),L=R.getTotalLength(),pr={p:0};
140
+ const place=(el,p)=>{const a=R.getPointAtLength(p*L),b=R.getPointAtLength(Math.min(L,p*L+2));gsap.set(el,{x:a.x,y:a.y,rotation:Math.atan2(b.y-a.y,b.x-a.x)*180/Math.PI});};
141
+ place("#pl",0);
142
+ tl.fromTo("#route",{strokeDasharray:L,strokeDashoffset:L},{strokeDashoffset:0,duration:3.2,ease:"power1.inOut"},S[1]+.3);
143
+ tl.fromTo(pr,{p:0},{p:1,duration:3.2,ease:"power1.inOut",onUpdate:()=>place("#pl",pr.p)},S[1]+.3);
144
+ [["#pa",.35],["#pb",.68],["#pcx",.98]].forEach(([p,f])=>{const at=S[1]+.3+3.2*f-.1;tl.fromTo(p,{scale:0,y:-40},{scale:1,y:0,duration:.5,ease:"back.out(3)"},at);tl.fromTo(p+"l",{scaleX:0,opacity:0},{scaleX:1,opacity:1,duration:.4,ease:P},at+.15);});
145
+ tl.to("#c2",{opacity:0,duration:.35},S[2]-.35);
146
+ // s3: postcards
147
+ tl.fromTo(["#k1","#k2","#k3"],{y:700,rotation:(k)=>[-14,10,-8][k]},{y:0,rotation:(k)=>[-4,2,-3][k],duration:.9,ease:X,stagger:.2},S[2]+.1);
148
+ tl.to(["#k1","#k3"],{y:-16,duration:1.6,ease:"sine.inOut"},S[2]+1.4);
149
+ tl.to("#k2",{y:14,duration:1.6,ease:"sine.inOut"},S[2]+1.4);
150
+ tl.fromTo("#dome",{scale:0,transformOrigin:"50% 100%"},{scale:1,duration:.6,ease:"back.out(2)"},S[2]+.9);
151
+ tl.fromTo("#c3 .arch",{scaleY:0,transformOrigin:"50% 100%"},{scaleY:1,duration:.4,ease:"back.out(2)",stagger:.05},S[2]+.7);
152
+ tl.fromTo("#gon",{x:-120},{x:60,duration:2.6,ease:"sine.inOut"},S[2]+1);
153
+ tl.fromTo("#c3 .wv",{backgroundPosition:"0px 0px"},{backgroundPosition:"120px 0px",duration:3,ease:"none"},S[2]+.8);
154
+ tl.fromTo("#sc1",{scale:2.5,opacity:0},{scale:1,opacity:1,duration:.35,ease:"power4.in"},S[2]+1.8);
155
+ tl.to(["#k1","#k2","#k3"],{y:-900,duration:.45,ease:"power3.in",stagger:.06},S[3]-.6);
156
+ // s4
157
+ waves(3,"#wv4");
158
+ tl.fromTo("#mp4",{scale:1.1},{scale:1,duration:4,ease:"power1.out"},S[3]);
159
+ tl.fromTo("#tt4",{scaleY:0,transformOrigin:"50% 0%"},{scaleY:1,duration:.7,ease:"power4.out"},S[3]+.1);
160
+ tl.fromTo(["#t4k","#t4a","#t4b"],{opacity:0,y:30},{opacity:1,y:0,duration:.6,ease:X,stagger:.12},S[3]+.5);
161
+ tl.fromTo("#ct4",{scale:0},{scale:1,duration:.5,ease:"back.out(2.4)"},S[3]+1.1);
162
+ tl.to("#ct4",{scale:1.05,duration:.35,yoyo:true,repeat:3,ease:"sine.inOut"},S[3]+1.8);
163
+ tl.fromTo("#pl4",{x:1900,y:980,rotation:200},{x:500,y:140,rotation:210,duration:3.2,ease:"power1.inOut"},S[3]+.5);
164
+ tl.set({},{},D);
165
+ window.__timelines=window.__timelines||{};window.__timelines["travel-route"]=tl;
166
+ </script>
167
+ </body>
168
+ </html>
package/lib/catalog/hyperframes/tutorial-steps.html ADDED
@@ -0,0 +1,159 @@
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:#0f3b66;--fg:#eaf4ff;--accent:#ffd166;--accent2:#7fd1ff;--line:#2c5f8e}
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
+ .grid{position:absolute;inset:-80px;background:linear-gradient(var(--line) 2px,transparent 2px) 0 0/60px 60px,linear-gradient(90deg,var(--line) 2px,transparent 2px) 0 0/60px 60px;opacity:.55}
24
+ .dr{fill:none;stroke:var(--fg);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
25
+ .nc{position:absolute;right:150px;top:120px}
26
+ .num{position:absolute;right:150px;top:150px;width:300px;text-align:center;font-size:200px;font-weight:700;line-height:1.1;color:var(--accent);direction:ltr}
27
+ .lb{position:absolute;right:500px;top:230px;font-size:40px;font-weight:700;letter-spacing:.12em;color:var(--accent2)}
28
+ .st{position:absolute;right:154px;top:450px;font-size:110px;font-weight:700;line-height:1.1;white-space:nowrap}
29
+ .ds{position:absolute;right:154px;font-size:44px;font-weight:400;white-space:nowrap;color:color-mix(in srgb,var(--fg) 85%,transparent)}
30
+ .art{position:absolute;left:130px;top:200px;width:640px;height:560px}
31
+ .art svg{overflow:visible}
32
+ .cur{position:absolute;left:400px;top:520px;width:56px;height:76px;background:var(--fg);clip-path:polygon(0 0,100% 64%,58% 66%,80% 100%,64% 100%,42% 70%,0 92%)}
33
+ .opt{position:absolute;top:40px;width:180px;height:340px;border-radius:24px;border:7px solid var(--fg)}
34
+ .opt::before{content:"";position:absolute;left:30px;right:30px;top:40px;height:80px;border-radius:50%;background:var(--line)}
35
+ .chk{position:absolute;width:110px;height:110px;border-radius:50%;background:var(--accent);clip-path:circle(50%)}
36
+ .chk::after{content:"";position:absolute;left:22px;top:22px;width:66px;height:66px;background:var(--bg);clip-path:polygon(10% 52%,36% 76%,92% 20%,100% 32%,36% 96%,0 62%)}
37
+ .trk{position:absolute;right:154px;top:880px;width:600px;height:30px}
38
+ .tl0,.tl1{position:absolute;right:0;top:12px;height:6px;border-radius:3px}
39
+ .tl0{left:0;background:var(--line)}
40
+ .tl1{background:var(--accent);transform-origin:100% 50%}
41
+ .td{position:absolute;top:0;width:30px;height:30px;margin-right:-15px;border-radius:50%;background:var(--line)}
42
+ .td.on{background:var(--accent)}
43
+ .big{position:absolute;left:0;right:0;text-align:center;font-weight:700;white-space:nowrap;line-height:1.1}
44
+ </style>
45
+ </head>
46
+ <body>
47
+ <div id="root" data-composition-id="tutorial-steps" data-start="0" data-width="1920" data-height="1080" data-duration="16">
48
+ <section id="s1" class="clip scene" data-start="0" data-duration="3">
49
+ <div class="cam" id="c1">
50
+ <div class="grid" id="g1"></div>
51
+ <svg class="abs" style="left:0;top:0" width="1920" height="1080"><circle class="dr" id="cmp1" cx="300" cy="820" r="180" style="stroke:var(--accent2);stroke-width:4"/><circle class="dr" id="cmp2" cx="1640" cy="230" r="130" style="stroke:var(--accent2);stroke-width:4"/><path class="dr" id="ul1" d="M560 690 C 800 650, 1100 720, 1360 670" style="stroke:var(--accent);stroke-width:12"/></svg>
52
+ <p class="big" id="t1k" style="top:240px;font-size:44px;color:var(--accent2);letter-spacing:.14em">מדריך מהיר · בית ספר גלים</p>
53
+ <h1 class="big" id="t1a" style="top:330px;font-size:150px">שלושה צעדים</h1>
54
+ <h1 class="big" id="t1b" style="top:500px;font-size:110px;color:var(--accent)">להתחיל ללמוד</h1>
55
+ </div>
56
+ </section>
57
+ <section id="s2" class="clip scene" data-start="3" data-duration="3.6">
58
+ <div class="cam" id="c2">
59
+ <div class="grid"></div>
60
+ <svg class="nc" width="300" height="300" viewBox="0 0 300 300"><circle id="cc1" cx="150" cy="150" r="130" class="dr" style="stroke:var(--accent);stroke-width:10"/></svg>
61
+ <p class="num" id="nm1">1</p>
62
+ <p class="lb" id="lb1">שלב ראשון</p>
63
+ <h2 class="st" id="st1">נרשמים</h2>
64
+ <p class="ds" id="d1a" style="top:620px">ממלאים שם ואימייל בטופס הקצר</p>
65
+ <p class="ds" id="d1b" style="top:685px">ומאשרים בלחיצה אחת</p>
66
+ <div class="art" id="art1"><svg width="640" height="560" viewBox="0 0 640 560"><rect class="dr d1" x="20" y="20" width="600" height="520" rx="30"/><path class="dr d1" d="M80 120 H420"/><rect class="dr d1" x="80" y="170" width="480" height="70" rx="14"/><rect class="dr d1" x="80" y="280" width="480" height="70" rx="14"/><rect id="btn1" x="80" y="400" width="260" height="80" rx="40" style="fill:var(--accent)"/></svg><div class="cur" id="cur1"></div></div>
67
+ <div class="trk" id="tk1"><i class="tl0"></i><i class="tl1" id="tk1f" style="width:0%"></i><b class="td on" style="right:0%"></b><b class="td" style="right:50%"></b><b class="td" style="right:100%"></b></div>
68
+ </div>
69
+ </section>
70
+ <section id="s3" class="clip scene" data-start="6.6" data-duration="3.6">
71
+ <div class="cam" id="c3">
72
+ <div class="grid"></div>
73
+ <svg class="nc" width="300" height="300" viewBox="0 0 300 300"><circle id="cc2" cx="150" cy="150" r="130" class="dr" style="stroke:var(--accent);stroke-width:10"/></svg>
74
+ <p class="num" id="nm2">2</p>
75
+ <p class="lb" id="lb2">שלב שני</p>
76
+ <h2 class="st" id="st2">בוחרים מסלול</h2>
77
+ <p class="ds" id="d2a" style="top:620px">מעיינים במסלולים לפי תחום ורמה</p>
78
+ <p class="ds" id="d2b" style="top:685px">ובוחרים את מה שמדבר אליכם</p>
79
+ <div class="art" id="art2"><div class="opt" id="o1" style="left:20px"></div><div class="opt" id="o2" style="left:230px"></div><div class="opt" id="o3" style="left:440px"></div><div class="chk" id="ck2" style="left:300px;top:60px"></div><svg width="640" height="560" viewBox="0 0 640 560" style="position:absolute;left:0;top:0"><path class="dr d2" d="M60 470 H580"/><path class="dr d2" d="M60 520 H420"/></svg></div>
80
+ <div class="trk" id="tk2"><i class="tl0"></i><i class="tl1" id="tk2f" style="width:50%"></i><b class="td on" style="right:0%"></b><b class="td on" style="right:50%"></b><b class="td" style="right:100%"></b></div>
81
+ </div>
82
+ </section>
83
+ <section id="s4" class="clip scene" data-start="10.2" data-duration="3.6">
84
+ <div class="cam" id="c4">
85
+ <div class="grid"></div>
86
+ <svg class="nc" width="300" height="300" viewBox="0 0 300 300"><circle id="cc3" cx="150" cy="150" r="130" class="dr" style="stroke:var(--accent);stroke-width:10"/></svg>
87
+ <p class="num" id="nm3">3</p>
88
+ <p class="lb" id="lb3">שלב שלישי</p>
89
+ <h2 class="st" id="st3">מתחילים ללמוד</h2>
90
+ <p class="ds" id="d3a" style="top:620px">השיעור הראשון זמין מיד</p>
91
+ <p class="ds" id="d3b" style="top:685px">וממשיכים בקצב שלכם</p>
92
+ <div class="art" id="art3"><svg width="640" height="560" viewBox="0 0 640 560"><rect class="dr d3" x="20" y="20" width="600" height="380" rx="30"/><path id="play" d="M270 140 L390 210 L270 280 Z" style="fill:var(--accent)"/><rect x="20" y="450" width="600" height="24" rx="12" style="fill:var(--line)"/><rect id="pf3" x="20" y="450" width="600" height="24" rx="12" style="fill:var(--accent2)"/></svg></div>
93
+ <div class="trk" id="tk3"><i class="tl0"></i><i class="tl1" id="tk3f" style="width:100%"></i><b class="td on" style="right:0%"></b><b class="td on" style="right:50%"></b><b class="td on" style="right:100%"></b></div>
94
+ </div>
95
+ </section>
96
+ <section id="s5" class="clip scene" data-start="13.8" data-duration="2.2">
97
+ <div class="cam" id="c5" style="background:var(--accent);color:var(--bg)">
98
+ <h1 class="big" id="t5a" style="top:340px;font-size:160px">מוכנים? מתחילים!</h1>
99
+ <p class="big" id="t5b" style="top:600px;font-size:54px;font-weight:400">ההרשמה פתוחה עכשיו · בית ספר גלים</p>
100
+ <svg class="abs" style="left:0;top:0" width="1920" height="1080"><path class="dr" id="ul5" d="M640 540 C 860 510, 1080 560, 1290 520" style="stroke:var(--bg);stroke-width:12"/></svg>
101
+ </div>
102
+ </section>
103
+ </div>
104
+ <script>
105
+ const tl=gsap.timeline({paused:true});
106
+ const S=[0,3,6.6,10.2,13.8,16],D=16;
107
+ const X="expo.out",P="power3.out",Q="power2.inOut";
108
+ function draw(sel,len,at,dur){tl.fromTo(sel,{strokeDasharray:len,strokeDashoffset:len},{strokeDashoffset:0,duration:dur,ease:Q},at);}
109
+ function slideOut(i){tl.to("#c"+(i+1),{xPercent:60,opacity:0,duration:.45,ease:"power2.in"},S[i+1]-.45);}
110
+ function slideIn(i){tl.fromTo("#c"+(i+1),{xPercent:-40,opacity:0},{xPercent:0,opacity:1,duration:.6,ease:P},S[i]);}
111
+ function stepIn(n){const i=n,a=S[i];slideIn(i);
112
+ draw("#cc"+n,820,a+.2,.8);
113
+ tl.fromTo("#nm"+n,{scale:.3,opacity:0},{scale:1,opacity:1,duration:.6,ease:"back.out(2)"},a+.5);
114
+ tl.fromTo("#lb"+n,{opacity:0,x:-30},{opacity:1,x:0,duration:.5,ease:P},a+.45);
115
+ tl.fromTo("#st"+n,{clipPath:"inset(0 0 0 100%)"},{clipPath:"inset(0 0 0 0%)",duration:.8,ease:"power4.out"},a+.6);
116
+ tl.fromTo(["#d"+n+"a","#d"+n+"b"],{opacity:0,y:24},{opacity:1,y:0,duration:.5,ease:P,stagger:.12},a+.9);
117
+ tl.fromTo("#tk"+n+"f",{scaleX:n>1?(n-2)/(n-1):0},{scaleX:1,duration:.8,ease:Q},a+.7);
118
+ tl.fromTo("#tk"+n+" .td.on",{scale:.4},{scale:1,duration:.4,ease:"back.out(3)",stagger:.1},a+.7);
119
+ tl.fromTo("#art"+n,{y:30},{y:-10,duration:3.4,ease:"sine.inOut"},a);
120
+ if(n<4)slideOut(i);}
121
+ // s1
122
+ tl.fromTo("#g1",{backgroundPosition:"0px 0px"},{backgroundPosition:"60px 60px",duration:3,ease:"none"},S[0]);
123
+ draw("#cmp1",1200,S[0]+.1,1.4);draw("#cmp2",820,S[0]+.3,1.2);
124
+ tl.fromTo("#cmp1",{rotation:0,transformOrigin:"50% 50%"},{rotation:60,duration:3,ease:"none"},S[0]);
125
+ tl.fromTo("#t1k",{opacity:0,y:20},{opacity:1,y:0,duration:.5,ease:P},S[0]+.2);
126
+ tl.fromTo("#t1a",{opacity:0,y:60},{opacity:1,y:0,duration:.8,ease:X},S[0]+.35);
127
+ tl.fromTo("#t1b",{opacity:0,y:60},{opacity:1,y:0,duration:.8,ease:X},S[0]+.55);
128
+ draw("#ul1",820,S[0]+1.1,.7);
129
+ slideOut(0);
130
+ // step 1
131
+ stepIn(1);
132
+ draw("#art1 .d1",2400,S[1]+.4,1);
133
+ tl.fromTo("#btn1",{scale:0,transformOrigin:"50% 50%"},{scale:1,duration:.4,ease:"back.out(2.5)"},S[1]+1.2);
134
+ tl.fromTo("#cur1",{x:200,y:120,opacity:0},{x:-110,y:-80,opacity:1,duration:.8,ease:"power2.inOut"},S[1]+1.5);
135
+ tl.to("#cur1",{scale:.82,duration:.1,yoyo:true,repeat:1},S[1]+2.35);
136
+ tl.to("#btn1",{scale:.92,duration:.1,yoyo:true,repeat:1,transformOrigin:"50% 50%"},S[1]+2.35);
137
+ // step 2
138
+ stepIn(2);
139
+ tl.fromTo(["#o1","#o2","#o3"],{y:80,opacity:0},{y:0,opacity:1,duration:.5,ease:X,stagger:.12},S[2]+.4);
140
+ draw("#art2 .d2",600,S[2]+.8,.7);
141
+ tl.to("#o2",{y:-30,borderColor:"var(--accent)",duration:.4,ease:"back.out(2)"},S[2]+1.5);
142
+ tl.to(["#o1","#o3"],{opacity:.45,duration:.4},S[2]+1.5);
143
+ tl.fromTo("#ck2",{scale:0,rotation:-90},{scale:1,rotation:0,duration:.5,ease:"back.out(2.5)"},S[2]+1.8);
144
+ // step 3
145
+ stepIn(3);
146
+ draw("#art3 .d3",2000,S[3]+.4,1);
147
+ tl.fromTo("#play",{scale:0,transformOrigin:"50% 50%"},{scale:1,duration:.5,ease:"back.out(2.5)"},S[3]+1);
148
+ tl.to("#play",{scale:1.15,duration:.3,yoyo:true,repeat:1,transformOrigin:"50% 50%"},S[3]+1.6);
149
+ tl.fromTo("#pf3",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:.85,duration:1.6,ease:"power1.inOut"},S[3]+1.4);
150
+ // s5
151
+ tl.fromTo("#c5",{clipPath:"circle(0% at 50% 50%)"},{clipPath:"circle(120% at 50% 50%)",duration:.6,ease:"power3.inOut"},S[4]);
152
+ tl.fromTo("#t5a",{scale:.6,opacity:0},{scale:1,opacity:1,duration:.6,ease:"back.out(1.8)"},S[4]+.3);
153
+ tl.fromTo("#t5b",{opacity:0},{opacity:1,duration:.5},S[4]+.6);
154
+ draw("#ul5",700,S[4]+.7,.6);
155
+ tl.set({},{},D);
156
+ window.__timelines=window.__timelines||{};window.__timelines["tutorial-steps"]=tl;
157
+ </script>
158
+ </body>
159
+ </html>