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/floorplan-linedraw.html ADDED
@@ -0,0 +1,191 @@
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:#f3eee5;--fg:#1d2733;--accent:#b48a45;--sage:#8fa89c;--sand:#e2d3b8}
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
+ .gridp{position:absolute;inset:-100px;background:linear-gradient(color-mix(in srgb,var(--fg) 6%,transparent) 1.5px,transparent 1.5px) 0 0/40px 40px,linear-gradient(90deg,color-mix(in srgb,var(--fg) 6%,transparent) 1.5px,transparent 1.5px) 0 0/40px 40px}
24
+ .cl{position:absolute;background:color-mix(in srgb,var(--fg) 30%,transparent)}
25
+ .plan{position:absolute;overflow:visible}
26
+ .plan path,.plan rect,.plan circle{fill:none;stroke-linecap:square}
27
+ .w1{stroke:var(--fg);stroke-width:14}
28
+ .w2{stroke:var(--fg);stroke-width:7}
29
+ .w3{stroke:var(--fg);stroke-width:18}
30
+ .fur path,.fur rect,.fur circle{stroke:color-mix(in srgb,var(--fg) 45%,transparent);stroke-width:3}
31
+ .dr path{stroke:var(--accent);stroke-width:3}
32
+ .wn path{stroke:var(--accent);stroke-width:8}
33
+ .rail{stroke:var(--fg);stroke-width:4;stroke-dasharray:10 8}
34
+ .plan .rf{stroke:none}
35
+ .plan .sa{fill:color-mix(in srgb,var(--sage) 32%,transparent)}
36
+ .plan .sd{fill:color-mix(in srgb,var(--sand) 70%,transparent)}
37
+ .plan .ac{fill:color-mix(in srgb,var(--accent) 18%,transparent)}
38
+ .rl{position:absolute;width:220px;margin-left:-110px;text-align:center}
39
+ .rn{font-size:30px;font-weight:700;white-space:nowrap;line-height:1.15}
40
+ .ra{font-size:24px;color:color-mix(in srgb,var(--fg) 65%,var(--bg));white-space:nowrap}
41
+ .dim{position:absolute;background:var(--accent)}
42
+ .dim::before,.dim::after{content:"";position:absolute;background:var(--accent)}
43
+ .dh{height:3px}.dh::before,.dh::after{top:-12px;width:3px;height:27px}.dh::before{left:0}.dh::after{right:0}
44
+ .dv{width:3px}.dv::before,.dv::after{left:-12px;height:3px;width:27px}.dv::before{top:0}.dv::after{bottom:0}
45
+ .dl{position:absolute;font-size:28px;font-weight:700;color:var(--accent);background:var(--bg);padding:0 14px;white-space:nowrap}
46
+ .kick{font-size:34px;font-weight:700;letter-spacing:.24em;color:var(--accent);white-space:nowrap}
47
+ .hh{font-size:132px;font-weight:700;line-height:1.05;letter-spacing:-.02em;white-space:nowrap}
48
+ .sp{font-size:40px;white-space:nowrap}
49
+ .li{position:absolute;right:120px;display:flex;align-items:center;gap:22px;font-size:40px;font-weight:700;white-space:nowrap}
50
+ .li i{width:44px;height:3px;background:var(--accent);display:block}
51
+ .card{position:absolute;top:300px;width:470px;height:520px;border:3px solid var(--fg);background:var(--bg)}
52
+ .card svg{position:absolute;left:155px;top:60px}
53
+ .card svg path,.card svg circle{fill:none;stroke:var(--fg);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
54
+ .ct{position:absolute;left:0;right:0;top:270px;text-align:center;font-size:54px;font-weight:700;white-space:nowrap}
55
+ .cs{position:absolute;left:0;right:0;top:350px;text-align:center;font-size:34px;color:color-mix(in srgb,var(--fg) 65%,var(--bg));white-space:nowrap}
56
+ .cn{position:absolute;right:30px;top:24px;font-size:30px;font-weight:700;color:var(--accent);direction:ltr}
57
+ .dark{background:var(--fg);color:var(--bg)}
58
+ .frame{position:absolute;left:0;top:0;fill:none;stroke:var(--accent);stroke-width:3}
59
+ .sky{position:absolute;left:0;top:0;fill:none;stroke:color-mix(in srgb,var(--bg) 35%,transparent);stroke-width:3}
60
+ .cta{position:absolute;padding:24px 60px;border:3px solid var(--accent);background:var(--fg);color:var(--accent);font-size:44px;font-weight:700;white-space:nowrap}
61
+ </style>
62
+ </head>
63
+ <body>
64
+ <div id="root" data-composition-id="floorplan-linedraw" data-start="0" data-width="1920" data-height="1080" data-duration="16.8">
65
+ <section id="s1" class="clip scene" data-start="0" data-duration="3.6">
66
+ <div class="cam" id="c1">
67
+ <div class="gridp" id="gp1"></div>
68
+ <div class="layer" id="cls">
69
+ <i class="cl" style="left:0;top:262px;width:1920px;height:2px"></i><i class="cl" style="left:0;top:820px;width:1920px;height:2px"></i>
70
+ <i class="cl" style="left:300px;top:0;width:2px;height:1080px"></i><i class="cl" style="left:1150px;top:0;width:2px;height:1080px"></i>
71
+ </div>
72
+ <svg class="plan" id="arc1" width="1920" height="1080" style="left:0;top:0"><circle class="w2" pathLength="1" cx="300" cy="820" r="420" style="stroke:var(--accent);stroke-width:3"/><path class="w2" pathLength="1" d="M300 820 L700 690" style="stroke:var(--accent);stroke-width:3"/></svg>
73
+ <p class="abs kick" id="t1k" style="right:150px;top:300px">אלמה · גני האלון</p>
74
+ <div class="abs" style="right:150px;top:360px"><span class="m"><span class="w hh" id="t1a">בית שמתחיל</span></span></div>
75
+ <div class="abs" style="right:150px;top:510px"><span class="m"><span class="w hh" id="t1b" style="color:var(--accent)">בקו אחד.</span></span></div>
76
+ <p class="abs sp" id="t1c" style="right:154px;top:690px;color:color-mix(in srgb,var(--fg) 70%,var(--bg))">דירות 4–5 חדרים בתכנון אדריכלי</p>
77
+ </div>
78
+ </section>
79
+ <section id="s2" class="clip scene" data-start="3.6" data-duration="5.4">
80
+ <div class="cam" id="c2">
81
+ <div class="gridp" id="gp2"></div>
82
+ <div class="abs" id="pw2" style="left:110px;top:130px;width:1040px;height:820px">
83
+ <svg class="plan" style="left:0;top:0" id="pl2" width="1040" height="820" viewBox="-20 -20 1040 820">
84
+ <g id="rf2"><rect class="rf sa" x="0" y="0" width="300" height="260"/><rect class="rf sd" x="0" y="260" width="620" height="360"/><rect class="rf sd" x="520" y="0" width="100" height="260"/><rect class="rf sa" x="300" y="0" width="220" height="260"/><rect class="rf sd" x="620" y="0" width="380" height="280"/><rect class="rf sa" x="620" y="280" width="160" height="160"/><rect class="rf sd" x="620" y="440" width="160" height="180"/><rect class="rf sa" x="780" y="280" width="220" height="340"/><rect class="rf ac" x="40" y="620" width="380" height="120"/></g>
85
+ <g id="fu2" class="fur"><path pathLength="1" d="M20 20 H280 V70 H70 V240 H20 Z"/><rect pathLength="1" x="120" y="150" width="130" height="50" rx="6"/><circle pathLength="1" cx="150" cy="45" r="12"/><circle pathLength="1" cx="190" cy="45" r="12"/>
86
+ <rect pathLength="1" x="60" y="520" width="230" height="70" rx="14"/><path pathLength="1" d="M137 520 V590 M213 520 V590"/><rect pathLength="1" x="100" y="430" width="140" height="50" rx="8"/>
87
+ <circle pathLength="1" cx="430" cy="380" r="50"/><circle pathLength="1" cx="430" cy="312" r="13"/><circle pathLength="1" cx="430" cy="448" r="13"/><circle pathLength="1" cx="362" cy="380" r="13"/><circle pathLength="1" cx="498" cy="380" r="13"/>
88
+ <rect pathLength="1" x="780" y="30" width="180" height="200" rx="10"/><rect pathLength="1" x="795" y="42" width="70" height="34" rx="8"/><rect pathLength="1" x="875" y="42" width="70" height="34" rx="8"/>
89
+ <rect pathLength="1" x="850" y="400" width="130" height="190" rx="10"/><rect pathLength="1" x="865" y="412" width="100" height="30" rx="8"/>
90
+ <circle pathLength="1" cx="752" cy="408" r="14"/><rect pathLength="1" x="650" y="565" width="110" height="40" rx="4"/><circle pathLength="1" cx="705" cy="540" r="15"/>
91
+ <rect pathLength="1" x="320" y="22" width="180" height="30" rx="4"/><rect pathLength="1" x="330" y="170" width="160" height="60" rx="10"/>
92
+ <rect pathLength="1" x="60" y="640" width="60" height="90" rx="10"/><rect pathLength="1" x="135" y="640" width="60" height="90" rx="10"/><circle pathLength="1" cx="380" cy="690" r="24"/></g>
93
+ <g id="wl2"><path class="w1" pathLength="1" d="M300 620 H0 V0 H1000 V620 H420"/>
94
+ <path class="w3" pathLength="1" d="M300 0 V260 H380 M450 260 H520 V0"/>
95
+ <path class="w2" pathLength="1" d="M620 0 V170 M620 250 V350 M620 420 V530 M620 600 V620"/>
96
+ <path class="w2" pathLength="1" d="M620 280 H1000"/><path class="w2" pathLength="1" d="M780 280 V620"/><path class="w2" pathLength="1" d="M620 440 H780"/></g>
97
+ <g id="dr2" class="dr"><path pathLength="1" d="M620 250 H700 A80 80 0 0 0 620 170"/><path pathLength="1" d="M620 420 H690 A70 70 0 0 0 620 350"/><path pathLength="1" d="M620 600 H690 A70 70 0 0 0 620 530"/><path pathLength="1" d="M380 260 V190 A70 70 0 0 1 450 260"/><path pathLength="1" d="M300 620 H420"/></g>
98
+ <g id="wn2" class="wn"><path d="M90 0 H230 M700 0 H900 M1000 360 V540 M0 330 V470 M840 620 H960"/></g>
99
+ <path class="rail" d="M40 620 V740 H420 V620"/>
100
+ </svg>
101
+ <div class="rl" id="rm1" style="left:270px;top:325px"><p class="rn" id="rm1n">סלון ומטבח</p><p class="ra" id="rm1a">46 מ״ר</p></div><div class="rl" id="rm2" style="left:430px;top:105px"><p class="rn" id="rm2n">ממ״ד</p><p class="ra" id="rm2a">12 מ״ר</p></div><div class="rl" id="rm3" style="left:720px;top:110px"><p class="rn" id="rm3n">חדר הורים</p><p class="ra" id="rm3a">17 מ״ר</p></div><div class="rl" id="rm4" style="left:720px;top:305px"><p class="rn" id="rm4n">רחצה</p><p class="ra" id="rm4a">6 מ״ר</p></div><div class="rl" id="rm5" style="left:720px;top:475px"><p class="rn" id="rm5n">חדר עבודה</p><p class="ra" id="rm5a">9 מ״ר</p></div><div class="rl" id="rm6" style="left:910px;top:320px"><p class="rn" id="rm6n">חדר שינה</p><p class="ra" id="rm6a">14 מ״ר</p></div><div class="rl" id="rm7" style="left:300px;top:670px"><p class="rn" id="rm7n">מרפסת</p><p class="ra" id="rm7a">14 מ״ר</p></div>
102
+ <i class="dim dh" id="dm1" style="left:20px;top:-22px;width:1000px"></i><p class="dl" id="dm1t" style="left:452px;top:-42px">12.40 מ׳</p>
103
+ <i class="dim dv" id="dm2" style="left:1058px;top:20px;height:620px"></i><p class="dl" id="dm2t" style="left:1000px;top:308px;transform:rotate(90deg)">7.80 מ׳</p>
104
+ </div>
105
+ <p class="abs kick" id="t2k" style="right:120px;top:190px">דגם א׳ · קומות 3–8</p>
106
+ <p class="abs hh" id="t2a" style="right:120px;top:240px;font-size:112px">5 חדרים</p>
107
+ <p class="abs hh" id="t2b" style="right:120px;top:370px;font-size:112px;color:var(--accent)">132 מ״ר</p>
108
+ <div class="li" id="li1" style="top:560px"><i></i><span id="li1t">מרפסת שמש 14 מ״ר</span></div>
109
+ <div class="li" id="li2" style="top:640px"><i></i><span id="li2t">ממ״ד ומחסן צמוד</span></div>
110
+ <div class="li" id="li3" style="top:720px"><i></i><span id="li3t">כיווני אוויר: דרום ומערב</span></div>
111
+ </div>
112
+ </section>
113
+ <section id="s3" class="clip scene" data-start="9" data-duration="4.2">
114
+ <div class="cam" id="c3">
115
+ <div class="gridp"></div>
116
+ <div class="abs" id="pg3" style="left:300px;top:60px;width:1040px;height:820px;opacity:.09"><svg class="plan" width="1040" height="820" viewBox="-20 -20 1040 820" style="left:0;top:0;transform:scale(1.5);transform-origin:0 0"><path class="w1" pathLength="1" d="M300 620 H0 V0 H1000 V620 H420"/>
117
+ <path class="w3" pathLength="1" d="M300 0 V260 H380 M450 260 H520 V0"/>
118
+ <path class="w2" pathLength="1" d="M620 0 V170 M620 250 V350 M620 420 V530 M620 600 V620"/>
119
+ <path class="w2" pathLength="1" d="M620 280 H1000"/><path class="w2" pathLength="1" d="M780 280 V620"/><path class="w2" pathLength="1" d="M620 440 H780"/></svg></div>
120
+ <p class="abs kick" id="t3k" style="left:0;right:0;top:100px;text-align:center">פרטים שעושים בית</p>
121
+ <p class="abs" id="t3a" style="left:0;right:0;top:150px;text-align:center;font-size:84px;font-weight:700;white-space:nowrap">מתוכנן עד הסנטימטר</p>
122
+ <div class="card" id="fc1" style="left:1325px"><p class="cn" id="fc1n">01</p><svg width="160" height="160" viewBox="0 0 160 160" id="fi1"><circle pathLength="1" cx="80" cy="80" r="30"/><path pathLength="1" d="M80 18 V34 M80 126 V142 M18 80 H34 M126 80 H142 M36 36 L47 47 M113 113 L124 124 M36 124 L47 113 M113 47 L124 36"/></svg><p class="ct" id="fc1t">מרפסת שמש</p><p class="cs" id="fc1s">14 מ״ר עם נוף פתוח</p></div><div class="card" id="fc2" style="left:810px"><p class="cn" id="fc2n">02</p><svg width="160" height="160" viewBox="0 0 160 160" id="fi2"><path pathLength="1" d="M20 24 H140 M20 136 H140"/><path pathLength="1" d="M80 40 V120 M64 56 L80 40 L96 56 M64 104 L80 120 L96 104"/></svg><p class="ct" id="fc2t">תקרות גבוהות</p><p class="cs" id="fc2s">2.90 מ׳ בכל החדרים</p></div><div class="card" id="fc3" style="left:295px"><p class="cn" id="fc3n">03</p><svg width="160" height="160" viewBox="0 0 160 160" id="fi3"><path pathLength="1" d="M18 104 V82 L34 54 H112 L134 82 H142 V104 Z"/><path pathLength="1" d="M44 58 L54 80 H118"/><circle pathLength="1" cx="48" cy="108" r="14"/><circle pathLength="1" cx="114" cy="108" r="14"/></svg><p class="ct" id="fc3t">שתי חניות</p><p class="cs" id="fc3s">ומחסן צמוד במרתף</p></div>
123
+ </div>
124
+ </section>
125
+ <section id="s4" class="clip scene" data-start="13.2" data-duration="3.6">
126
+ <div class="cam dark" id="c4">
127
+ <svg class="sky" id="sky" width="1920" height="1080"><path pathLength="1" d="M0 1000 H180 V800 H300 V750 H420 V1000 H520 V720 H560 V680 H600 V720 H660 V1000 H760 V840 H900 V1000 H1040 V760 H1180 V1000 H1300 V820 H1360 V770 H1420 V820 H1480 V1000 H1600 V860 H1740 V1000 H1920"/></svg>
128
+ <svg class="frame" id="frm" width="1920" height="1080"><rect pathLength="1" x="80" y="80" width="1760" height="920"/></svg>
129
+ <p class="abs kick" id="t4k" style="left:0;right:0;top:170px;text-align:center">גני האלון · מכירה מוקדמת</p>
130
+ <div class="abs" style="left:0;right:0;top:220px;text-align:center"><span class="m"><span class="w" id="t4a" style="font-size:220px;font-weight:700;line-height:1.05">אלמה</span></span></div>
131
+ <p class="abs sp" id="t4b" style="left:0;right:0;top:480px;text-align:center;font-size:52px">מחיר השקה מ־₪3.2 מיליון</p>
132
+ <div class="cta" id="ct4" style="left:50%;top:590px;transform:translateX(-50%)"><span id="ct4t">תאמו סיור במשרדי המכירות</span></div>
133
+ </div>
134
+ </section>
135
+ </div>
136
+ <script>
137
+ const tl=gsap.timeline({paused:true});
138
+ const S=[0,3.6,9,13.2,16.8],D=16.8;
139
+ const X="expo.out",P="power3.out";
140
+ const draw=(sel,at,d,st,e)=>tl.fromTo(sel,{strokeDasharray:1,strokeDashoffset:1},{strokeDashoffset:0,duration:d,ease:e||"power2.inOut",stagger:st||0,autoRound:false},at);
141
+ // s1: construction lines + kinetic title
142
+ tl.fromTo("#gp1",{scale:1.15,opacity:0},{scale:1,opacity:1,duration:1.6,ease:P},S[0]);
143
+ tl.fromTo("#cls .cl",{scaleX:0,scaleY:0},{scaleX:1,scaleY:1,duration:1.1,ease:"power3.inOut",stagger:.12},S[0]+.1);
144
+ draw("#arc1 circle",S[0]+.4,1.6,0,"power2.inOut");draw("#arc1 path",S[0]+.5,.8);
145
+ tl.fromTo("#arc1",{rotation:-20,transformOrigin:"300px 820px"},{rotation:10,duration:S[1]-S[0],ease:"sine.inOut"},S[0]);
146
+ tl.fromTo("#t1k",{opacity:0,letterSpacing:"0.6em"},{opacity:1,letterSpacing:"0.24em",duration:.9,ease:P},S[0]+.4);
147
+ tl.fromTo(["#t1a","#t1b"],{yPercent:110},{yPercent:0,duration:.9,ease:X,stagger:.15},S[0]+.6);
148
+ tl.fromTo("#t1c",{opacity:0,y:20},{opacity:1,y:0,duration:.6,ease:P},S[0]+1.3);
149
+ tl.to("#c1",{opacity:0,duration:.35},S[1]-.35);
150
+ // s2: plan draws itself
151
+ tl.fromTo("#c2",{opacity:0},{opacity:1,duration:.3},S[1]);
152
+ tl.fromTo("#pw2",{scale:1.08,x:30},{scale:1,x:0,duration:S[2]-S[1],ease:"power2.out"},S[1]);
153
+ draw("#wl2 .w1",S[1]+.2,1.3,0,"power2.inOut");
154
+ draw("#wl2 .w3,#wl2 .w2",S[1]+.9,.7,.12);
155
+ draw("#dr2 path",S[1]+1.6,.5,.08);
156
+ tl.fromTo("#wn2 path",{opacity:0},{opacity:1,duration:.4},S[1]+1.5);
157
+ tl.fromTo("#pl2 .rail",{opacity:0},{opacity:1,duration:.4},S[1]+1.6);
158
+ tl.fromTo("#rf2 rect",{opacity:0},{opacity:1,duration:.5,stagger:.08},S[1]+1.9);
159
+ draw("#fu2 path,#fu2 rect,#fu2 circle",S[1]+2,.6,.025);
160
+ for(let i=1;i<=7;i++)tl.fromTo("#rm"+i,{scale:0,opacity:0},{scale:1,opacity:1,duration:.45,ease:"back.out(2.2)"},S[1]+2.3+i*.1);
161
+ tl.fromTo("#dm1",{scaleX:0},{scaleX:1,duration:.7,ease:P},S[1]+1.4);tl.fromTo("#dm2",{scaleY:0},{scaleY:1,duration:.7,ease:P},S[1]+1.5);
162
+ tl.fromTo(["#dm1t","#dm2t"],{opacity:0},{opacity:1,duration:.4},S[1]+1.9);
163
+ tl.fromTo(["#t2k","#t2a","#t2b"],{opacity:0,x:60},{opacity:1,x:0,duration:.8,ease:X,stagger:.12},S[1]+.4);
164
+ tl.fromTo(["#li1","#li2","#li3"],{opacity:0,x:40},{opacity:1,x:0,duration:.6,ease:P,stagger:.14},S[1]+1.2);
165
+ tl.fromTo(".li i",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:.5,ease:P,stagger:.14},S[1]+1.2);
166
+ tl.to("#c2",{opacity:0,duration:.35},S[2]-.35);
167
+ // s3: feature cards with self-drawing icons, plan parallax behind
168
+ tl.fromTo("#c3",{opacity:0},{opacity:1,duration:.3},S[2]);
169
+ tl.fromTo("#pg3",{x:0,y:0},{x:-260,y:-80,duration:S[3]-S[2],ease:"none"},S[2]);
170
+ tl.fromTo(["#t3k","#t3a"],{opacity:0,y:-24},{opacity:1,y:0,duration:.7,ease:P,stagger:.1},S[2]+.1);
171
+ for(let i=1;i<=3;i++){const t=S[2]+.3+i*.18;
172
+ tl.fromTo("#fc"+i,{clipPath:"inset(100% 0% 0% 0%)",y:40},{clipPath:"inset(0% 0% 0% 0%)",y:0,duration:.8,ease:"power3.inOut"},t);
173
+ draw("#fi"+i+" path,#fi"+i+" circle",t+.6,.9,.08);
174
+ tl.fromTo(["#fc"+i+"t","#fc"+i+"s","#fc"+i+"n"],{opacity:0,y:20},{opacity:1,y:0,duration:.5,ease:P,stagger:.08},t+.7);
175
+ }
176
+ tl.to("#fi1",{rotation:30,duration:2,ease:"sine.inOut",transformOrigin:"50% 50%"},S[2]+1.5);
177
+ tl.to("#c3",{opacity:0,duration:.35},S[3]-.35);
178
+ // s4: dark finale with brass frame + skyline
179
+ tl.fromTo("#c4",{clipPath:"inset(50% 0% 50% 0%)"},{clipPath:"inset(0% 0% 0% 0%)",duration:.8,ease:"power4.inOut"},S[3]);
180
+ draw("#frm rect",S[3]+.4,1.4,0,"power2.inOut");
181
+ draw("#sky path",S[3]+.3,2.4,0,"power1.inOut");
182
+ tl.fromTo("#t4k",{opacity:0,letterSpacing:"0.6em"},{opacity:1,letterSpacing:"0.24em",duration:.9,ease:P},S[3]+.6);
183
+ tl.fromTo("#t4a",{yPercent:110},{yPercent:0,duration:1,ease:X},S[3]+.7);
184
+ tl.fromTo("#t4a",{letterSpacing:"0.22em"},{letterSpacing:"0em",duration:1.6,ease:P},S[3]+.7);
185
+ tl.fromTo("#t4b",{opacity:0,y:20},{opacity:1,y:0,duration:.6,ease:P},S[3]+1.2);
186
+ tl.fromTo("#ct4",{opacity:0,scale:.8},{opacity:1,scale:1,duration:.6,ease:"back.out(2)"},S[3]+1.5);
187
+ tl.set({},{},D);
188
+ window.__timelines=window.__timelines||{};window.__timelines["floorplan-linedraw"]=tl;
189
+ </script>
190
+ </body>
191
+ </html>
package/lib/catalog/hyperframes/glass-product.html ADDED
@@ -0,0 +1,138 @@
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:#090a18;--fg:#ffffff;--accent:#7c5cff;--accent2:#29d3c2;--hot:#ff5fcf}
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
+ .orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.75}
24
+ .glass{position:absolute;background:color-mix(in srgb,var(--fg) 9%,transparent);border:2px solid color-mix(in srgb,var(--fg) 24%,transparent);backdrop-filter:blur(34px);-webkit-backdrop-filter:blur(34px);border-radius:36px;box-shadow:0 40px 90px color-mix(in srgb,var(--bg) 70%,transparent),inset 0 1px 0 color-mix(in srgb,var(--fg) 40%,transparent)}
25
+ .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--fg) 18%,transparent),transparent 45%)}
26
+ .lbl{font-size:42px;font-weight:700;letter-spacing:.08em;color:var(--fg)}
27
+ .ttl{font-size:150px;font-weight:700;line-height:1.05;letter-spacing:-.02em}
28
+ .sm{font-size:40px;font-weight:400;color:color-mix(in srgb,var(--fg) 75%,transparent)}
29
+ .spk{position:absolute;width:300px;height:520px}
30
+ .spk-body{position:absolute;left:0;right:0;top:40px;bottom:0;border-radius:150px/48px;overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--fg) 8%,var(--bg)),color-mix(in srgb,var(--fg) 34%,var(--bg)) 32%,color-mix(in srgb,var(--fg) 12%,var(--bg)) 62%,color-mix(in srgb,var(--fg) 22%,var(--bg)))}
31
+ .grill{position:absolute;left:0;right:0;top:70px;bottom:80px;background:radial-gradient(circle,color-mix(in srgb,var(--bg) 60%,transparent) 2.4px,transparent 3px) 0 0/15px 15px}
32
+ .hl{position:absolute;top:0;bottom:0;left:22%;width:14%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--fg) 30%,transparent),transparent)}
33
+ .spk-top{position:absolute;left:0;right:0;top:0;height:96px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--fg) 30%,var(--bg)),var(--bg) 75%);border:2px solid color-mix(in srgb,var(--fg) 30%,transparent)}
34
+ .ringglow{position:absolute;inset:14px 30px;border-radius:50%;border:5px solid var(--accent2);box-shadow:0 0 30px var(--accent2),inset 0 0 20px var(--accent2)}
35
+ .spk-shadow{position:absolute;left:-40px;right:-40px;bottom:-40px;height:70px;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%)}
36
+ .chip{display:flex;align-items:center;gap:22px;padding:24px 34px;border-radius:28px;font-size:40px;font-weight:700;white-space:nowrap}
37
+ .ico{width:46px;height:46px;border-radius:50%;flex:none}
38
+ .big{font-size:96px;font-weight:700;line-height:1;direction:ltr;text-align:right}
39
+ .sw{width:64px;height:64px;border-radius:50%;border:3px solid color-mix(in srgb,var(--fg) 60%,transparent)}
40
+ .beam{position:absolute;width:520px;height:1400px;top:-200px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--fg) 10%,transparent),transparent);transform:rotate(20deg)}
41
+ .pill{position:absolute;padding:18px 48px;border-radius:60px;background:linear-gradient(90deg,var(--accent),var(--hot));font-size:46px;font-weight:700}
42
+ </style>
43
+ </head>
44
+ <body>
45
+ <div id="root" data-composition-id="glass-product" data-start="0" data-width="1920" data-height="1080" data-duration="15">
46
+ <section id="s1" class="clip scene" data-start="0" data-duration="3.6">
47
+ <div class="cam" id="c1">
48
+ <div class="layer" id="ob1"><div class="orb" style="left:220px;top:120px;width:620px;height:620px;background:var(--accent)"></div><div class="orb" style="left:1150px;top:420px;width:640px;height:640px;background:var(--accent2)"></div><div class="orb" style="left:700px;top:-200px;width:500px;height:500px;background:var(--hot);opacity:.5"></div></div>
49
+ <div class="glass" id="g1" style="left:330px;top:250px;width:1260px;height:580px"></div>
50
+ <p class="abs lbl" id="l1" style="top:330px;right:0;left:0;text-align:center">מציגים לראשונה</p>
51
+ <div class="abs" style="top:400px;left:0;right:0;display:flex;justify-content:center;gap:40px"><span class="m"><span class="w ttl" id="t1a">הצליל,</span></span> <span class="m"><span class="w ttl" id="t1b">מחדש.</span></span></div>
52
+ <p class="abs sm" id="t1c" style="top:640px;left:0;right:0;text-align:center">חוויית שמע שממלאת כל חדר</p>
53
+ <div class="beam" id="bm1" style="left:-600px"></div>
54
+ </div>
55
+ </section>
56
+ <section id="s2" class="clip scene" data-start="3.6" data-duration="4.2">
57
+ <div class="cam" id="c2">
58
+ <div class="layer" id="ob2"><div class="orb" style="left:560px;top:260px;width:800px;height:700px;background:var(--accent)"></div><div class="orb" style="left:100px;top:600px;width:500px;height:500px;background:var(--hot);opacity:.45"></div><div class="orb" style="left:1400px;top:60px;width:500px;height:500px;background:var(--accent2);opacity:.55"></div></div>
59
+ <p class="abs" id="h2" style="top:70px;left:0;right:0;text-align:center;font-size:64px;font-weight:700">אורה פרו</p>
60
+ <div class="spk" id="p2" style="left:810px;top:300px"><div class="spk-shadow"></div><div class="spk-body"><div class="grill"></div><div class="hl"></div></div><div class="spk-top"><div class="ringglow"></div></div></div>
61
+ <div class="glass chip" id="ch1" style="right:250px;top:330px"><span class="ico" style="background:var(--accent2)"></span><span id="ch1t">סאונד 360°</span></div>
62
+ <div class="glass chip" id="ch2" style="right:330px;top:600px"><span class="ico" style="background:var(--hot)"></span><span id="ch2t">20 שעות סוללה</span></div>
63
+ <div class="glass chip" id="ch3" style="left:270px;top:460px"><span class="ico" style="background:var(--accent)"></span><span id="ch3t">שליטה קולית</span></div>
64
+ </div>
65
+ </section>
66
+ <section id="s3" class="clip scene" data-start="7.8" data-duration="3.6">
67
+ <div class="cam" id="c3">
68
+ <div class="layer" id="ob3"><div class="orb" style="left:180px;top:200px;width:760px;height:760px;background:var(--accent2);opacity:.55"></div><div class="orb" style="left:1200px;top:500px;width:600px;height:600px;background:var(--accent);opacity:.6"></div></div>
69
+ <div class="spk" id="p3" style="left:380px;top:240px;transform:scale(1.45)"><div class="spk-shadow"></div><div class="spk-body"><div class="grill"></div><div class="hl"></div></div><div class="spk-top"><div class="ringglow"></div></div></div>
70
+ <div class="glass" id="k1" style="right:180px;top:170px;width:680px;height:210px"><div class="abs" style="right:44px;top:34px"><div class="big" id="k1n">40 וואט</div><p class="sm" id="k1l">עוצמה מלאה, אפס עיוות</p></div></div>
71
+ <div class="glass" id="k2" style="right:180px;top:420px;width:680px;height:210px"><div class="abs" style="right:44px;top:34px"><div class="big" id="k2n">1.2 ק״ג</div><p class="sm" id="k2l">קל לנשיאה מחדר לחדר</p></div></div>
72
+ <div class="glass" id="k3" style="right:180px;top:670px;width:680px;height:210px"><div class="abs" style="right:44px;top:44px"><p class="abs" id="k3l" style="right:0;top:0;font-size:56px;font-weight:700;white-space:nowrap">שלושה גוונים</p></div><div class="abs" style="left:50px;top:72px;display:flex;gap:20px"><div class="sw" id="sw1" style="background:var(--accent)"></div><div class="sw" id="sw2" style="background:var(--accent2)"></div><div class="sw" id="sw3" style="background:var(--hot)"></div></div></div>
73
+ </div>
74
+ </section>
75
+ <section id="s4" class="clip scene" data-start="11.4" data-duration="3.6">
76
+ <div class="cam" id="c4">
77
+ <div class="layer" id="ob4"><div class="orb" style="left:420px;top:150px;width:700px;height:700px;background:var(--accent)"></div><div class="orb" style="left:900px;top:360px;width:700px;height:600px;background:var(--hot);opacity:.55"></div><div class="orb" style="left:300px;top:600px;width:500px;height:500px;background:var(--accent2);opacity:.5"></div></div>
78
+ <div class="glass" id="g4" style="left:460px;top:220px;width:1000px;height:640px"></div>
79
+ <div class="spk" id="p4" style="left:520px;top:280px;transform:scale(.62)"><div class="spk-shadow"></div><div class="spk-body"><div class="grill"></div><div class="hl"></div></div><div class="spk-top"><div class="ringglow"></div></div></div>
80
+ <h1 class="abs" id="b4" style="right:540px;top:290px;font-size:190px;font-weight:700;line-height:1.1">אורה</h1>
81
+ <p class="abs sm" id="t4" style="right:540px;top:520px">זמין עכשיו בהזמנה מוקדמת</p>
82
+ <div class="pill" id="pr4" style="right:540px;top:640px"><span id="pr4t">₪890</span></div>
83
+ <div class="beam" id="bm4" style="left:-600px"></div>
84
+ </div>
85
+ </section>
86
+ </div>
87
+ <script>
88
+ const tl=gsap.timeline({paused:true});
89
+ const S=[0,3.6,7.8,11.4,15],D=15;
90
+ const X="expo.out",P="power3.out";
91
+ function orbs(sel,i){tl.fromTo(sel+" .orb",{x:0,y:0},{x:(k)=>[60,-80,40][k]||0,y:(k)=>[-40,50,30][k]||0,duration:S[i+1]-S[i],ease:"sine.inOut"},S[i]);}
92
+ function blurOut(sel,i){tl.to(sel,{opacity:0,filter:"blur(24px)",duration:.45,ease:"power2.in"},S[i+1]-.45);}
93
+ function blurIn(sel,i){tl.fromTo(sel,{opacity:0,filter:"blur(24px)"},{opacity:1,filter:"blur(0px)",duration:.6,ease:P},S[i]);}
94
+ // s1
95
+ orbs("#ob1",0);blurIn("#c1",0);
96
+ tl.fromTo("#c1",{scale:1.1},{scale:1,duration:3.15,ease:"power2.out"},S[0]);
97
+ tl.fromTo("#g1",{y:80,rotationX:30,opacity:0},{y:0,rotationX:0,opacity:1,duration:1.2,ease:X},S[0]+.2);
98
+ tl.fromTo("#l1",{opacity:0,letterSpacing:"0.6em"},{opacity:1,letterSpacing:"0.08em",duration:1,ease:P},S[0]+.5);
99
+ tl.fromTo(["#t1a","#t1b"],{yPercent:110},{yPercent:0,duration:.9,ease:X,stagger:.14},S[0]+.7);
100
+ tl.fromTo("#t1c",{y:30,opacity:0},{y:0,opacity:1,duration:.7,ease:P},S[0]+1.3);
101
+ tl.fromTo("#bm1",{x:0},{x:2900,duration:1.6,ease:"power2.inOut"},S[0]+1.4);
102
+ blurOut("#c1",0);
103
+ // s2
104
+ orbs("#ob2",1);blurIn("#c2",1);
105
+ tl.fromTo("#c2",{scale:1.08,y:30},{scale:1,y:0,duration:4.2,ease:"power1.out"},S[1]);
106
+ tl.fromTo("#p2",{y:420,opacity:0},{y:0,opacity:1,duration:1.4,ease:X},S[1]+.15);
107
+ tl.fromTo("#p2 .ringglow",{opacity:0,scale:.6},{opacity:1,scale:1,duration:.8,ease:P},S[1]+1);
108
+ tl.to("#p2",{y:-18,duration:2.4,ease:"sine.inOut"},S[1]+1.55);
109
+ tl.fromTo("#h2",{y:-30,opacity:0},{y:0,opacity:1,duration:.8,ease:P},S[1]+.4);
110
+ tl.fromTo("#ch1",{x:220,opacity:0},{x:0,opacity:1,duration:.8,ease:X},S[1]+1.0);
111
+ tl.fromTo("#ch2",{x:220,opacity:0},{x:0,opacity:1,duration:.8,ease:X},S[1]+1.25);
112
+ tl.fromTo("#ch3",{x:-220,opacity:0},{x:0,opacity:1,duration:.8,ease:X},S[1]+1.5);
113
+ tl.to(["#ch1","#ch3"],{y:-14,duration:1.8,ease:"sine.inOut"},S[1]+1.9);
114
+ tl.to("#ch2",{y:12,duration:1.8,ease:"sine.inOut"},S[1]+1.9);
115
+ blurOut("#c2",1);
116
+ // s3
117
+ orbs("#ob3",2);blurIn("#c3",2);
118
+ tl.fromTo("#p3",{x:-200,rotation:-6,opacity:0},{x:0,rotation:0,opacity:1,duration:1.2,ease:X},S[2]+.05);
119
+ tl.to("#p3",{y:-20,rotation:2,duration:2.2,ease:"sine.inOut"},S[2]+1.25);
120
+ ["#k1","#k2","#k3"].forEach((k,i)=>tl.fromTo(k,{x:160,opacity:0,rotationY:-25},{x:0,opacity:1,rotationY:0,duration:.9,ease:X},S[2]+.35+i*.25));
121
+ tl.fromTo(["#k1n","#k2n"],{scale:.6,opacity:0},{scale:1,opacity:1,duration:.7,ease:"back.out(1.8)",stagger:.25},S[2]+.65);
122
+ tl.fromTo(["#sw1","#sw2","#sw3"],{scale:0},{scale:1,duration:.5,ease:"back.out(2.5)",stagger:.1},S[2]+1.2);
123
+ tl.to("#sw2",{scale:1.25,duration:.4,yoyo:true,repeat:1,ease:"sine.inOut"},S[2]+2.2);
124
+ blurOut("#c3",2);
125
+ // s4
126
+ orbs("#ob4",3);blurIn("#c4",3);
127
+ tl.fromTo("#c4",{scale:1.06},{scale:1,duration:3.6,ease:"power2.out"},S[3]);
128
+ tl.fromTo("#g4",{scale:.85,opacity:0},{scale:1,opacity:1,duration:1,ease:X},S[3]+.1);
129
+ tl.fromTo("#p4",{y:200,opacity:0},{y:0,opacity:1,duration:1.1,ease:X},S[3]+.35);
130
+ tl.fromTo("#b4",{clipPath:"inset(0 0 0 100%)"},{clipPath:"inset(0 0 0 0%)",duration:1,ease:"power4.out"},S[3]+.5);
131
+ tl.fromTo("#t4",{y:24,opacity:0},{y:0,opacity:1,duration:.7,ease:P},S[3]+.9);
132
+ tl.fromTo("#pr4",{scale:.5,opacity:0},{scale:1,opacity:1,duration:.7,ease:"back.out(2)"},S[3]+1.15);
133
+ tl.fromTo("#bm4",{x:0},{x:2900,duration:1.5,ease:"power2.inOut"},S[3]+1.7);
134
+ tl.set({},{},D);
135
+ window.__timelines=window.__timelines||{};window.__timelines["glass-product"]=tl;
136
+ </script>
137
+ </body>
138
+ </html>
package/lib/catalog/hyperframes/glossy-cosmetics.html ADDED
@@ -0,0 +1,202 @@
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:#f6e2df;--fg:#3a1426;--rose:#d6466d;--gold:#e2b26f;--cream:#fffaf6}
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:radial-gradient(ellipse at 50% 42%,var(--cream),var(--bg) 62%)}
24
+ .blob{position:absolute;border-radius:50%;filter:blur(60px);background:color-mix(in srgb,var(--rose) 28%,transparent)}
25
+ .blob.g{background:color-mix(in srgb,var(--gold) 34%,transparent)}
26
+ .t{position:absolute;white-space:nowrap;line-height:1.15;color:var(--fg)}
27
+ .c{left:0;right:0;text-align:center}
28
+ .eb{font-size:36px;font-weight:700;letter-spacing:.25em;color:var(--rose)}
29
+ .hd{font-size:140px;font-weight:700;letter-spacing:-.01em}
30
+ .sub{font-size:46px;color:color-mix(in srgb,var(--fg) 72%,var(--bg))}
31
+ .btlw,.lipw{position:absolute;transform-origin:0 0}
32
+ .btlw{width:340px;height:850px}
33
+ .bulb{position:absolute;left:110px;top:0;width:120px;height:200px;border-radius:60px 60px 22px 22px;background:linear-gradient(90deg,var(--fg),color-mix(in srgb,var(--fg) 65%,var(--rose)) 42%,var(--fg))}
34
+ .neck{position:absolute;left:90px;top:180px;width:160px;height:80px;border-radius:10px;overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 65%,var(--fg)),var(--gold) 30%,var(--cream) 46%,var(--gold) 62%,color-mix(in srgb,var(--gold) 65%,var(--fg)))}
35
+ .btl{position:absolute;left:0;top:250px;width:340px;height:600px;border-radius:70px 70px 90px 90px;overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--cream) 60%,transparent),color-mix(in srgb,var(--cream) 18%,transparent) 38%,color-mix(in srgb,var(--cream) 44%,transparent));border:3px solid color-mix(in srgb,var(--cream) 90%,transparent);box-shadow:0 50px 90px color-mix(in srgb,var(--fg) 22%,transparent)}
36
+ .liq{position:absolute;left:-280px;top:200px;width:900px;height:900px;border-radius:43%;background:linear-gradient(180deg,var(--gold),var(--rose) 26%,color-mix(in srgb,var(--rose) 70%,var(--fg)))}
37
+ .liq.b{opacity:.45;border-radius:40%;top:184px}
38
+ .bub{position:absolute;border-radius:50%;border:2px solid color-mix(in srgb,var(--cream) 80%,transparent)}
39
+ .gl{position:absolute;left:34px;top:34px;width:30px;height:520px;border-radius:20px;background:linear-gradient(180deg,color-mix(in srgb,var(--cream) 85%,transparent),transparent)}
40
+ .shine{position:absolute;left:-160px;top:-200px;width:90px;height:1100px;transform:rotate(22deg);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cream) 80%,transparent),transparent)}
41
+ .nshine{position:absolute;left:-60px;top:-20px;width:40px;height:140px;transform:rotate(20deg);background:color-mix(in srgb,var(--cream) 70%,transparent)}
42
+ .lab{position:absolute;left:46px;right:46px;top:250px;height:170px;border-radius:14px;background:color-mix(in srgb,var(--cream) 90%,transparent);text-align:center}
43
+ .lb1{position:absolute;left:0;right:0;top:22px;font-size:64px;font-weight:700;letter-spacing:.18em;line-height:1.15;color:var(--fg)}
44
+ .lb2{position:absolute;left:0;right:0;top:106px;font-size:30px;line-height:1.15;color:var(--rose)}
45
+ .lipw{width:260px;height:760px}
46
+ .lmask{position:absolute;left:40px;top:0;width:180px;height:300px;overflow:hidden}
47
+ .bullet{position:absolute;left:10px;bottom:0;width:160px;height:280px;overflow:hidden;clip-path:polygon(0 36%,100% 0,100% 100%,0 100%);background:linear-gradient(90deg,color-mix(in srgb,var(--rose) 70%,var(--fg)),var(--rose) 34%,color-mix(in srgb,var(--rose) 55%,var(--cream)) 50%,var(--rose) 66%,color-mix(in srgb,var(--rose) 70%,var(--fg)))}
48
+ .bshine{position:absolute;left:-80px;top:-40px;width:40px;height:400px;transform:rotate(18deg);background:color-mix(in srgb,var(--cream) 65%,transparent)}
49
+ .sleeve{position:absolute;left:30px;top:300px;width:200px;height:140px;border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 60%,var(--fg)),var(--gold) 30%,var(--cream) 46%,var(--gold) 62%,color-mix(in srgb,var(--gold) 60%,var(--fg)))}
50
+ .case{position:absolute;left:0;top:440px;width:260px;height:320px;overflow:hidden;border-radius:10px 10px 26px 26px;background:linear-gradient(90deg,var(--fg),color-mix(in srgb,var(--fg) 72%,var(--rose)) 40%,color-mix(in srgb,var(--fg) 55%,var(--cream)) 50%,var(--fg));box-shadow:0 40px 80px color-mix(in srgb,var(--fg) 25%,transparent)}
51
+ .ped{position:absolute;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--rose) 30%,var(--bg)),transparent 70%)}
52
+ .pt{position:absolute;width:44px;height:28px;border-radius:0 100% 0 100%;background:linear-gradient(135deg,var(--rose),color-mix(in srgb,var(--rose) 50%,var(--cream)))}
53
+ .pt.g{background:linear-gradient(135deg,var(--gold),var(--cream))}
54
+ .seal{position:absolute;width:190px;height:190px;border-radius:50%;background:var(--fg);display:flex;align-items:center;justify-content:center}
55
+ .seal p{font-size:46px;font-weight:700;color:var(--cream);line-height:1.15}
56
+ .sw{position:absolute;top:1450px;width:96px;height:96px;border-radius:50%;box-shadow:inset -12px -16px 0 color-mix(in srgb,var(--fg) 22%,transparent),inset 10px 10px 0 color-mix(in srgb,var(--cream) 35%,transparent)}
57
+ .drop{position:absolute;width:280px;height:280px;border-radius:50% 50% 50% 50%;background:radial-gradient(circle at 35% 30%,var(--cream) 0 8%,color-mix(in srgb,var(--rose) 45%,var(--gold)) 40%,var(--rose) 75%,color-mix(in srgb,var(--rose) 70%,var(--fg)));box-shadow:0 30px 60px color-mix(in srgb,var(--rose) 35%,transparent)}
58
+ .drop .hl{position:absolute;left:60px;top:44px;width:70px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--cream) 80%,transparent);transform:rotate(-30deg)}
59
+ .rip{position:absolute;width:280px;height:280px;border-radius:50%;border:4px solid var(--rose)}
60
+ .dd{position:absolute;width:28px;height:40px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--gold)}
61
+ .nm{font-size:56px;font-weight:700}
62
+ .ds{font-size:38px;color:color-mix(in srgb,var(--fg) 70%,var(--bg))}
63
+ .cta{position:absolute;left:250px;right:250px;top:1560px;height:110px;border-radius:60px;background:var(--rose);display:flex;align-items:center;justify-content:center}
64
+ .cta p{font-size:50px;font-weight:700;color:var(--cream);white-space:nowrap}
65
+ </style>
66
+ </head>
67
+ <body>
68
+ <div id="root" data-composition-id="glossy-cosmetics" data-start="0" data-width="1080" data-height="1920" data-duration="14.8">
69
+ <section id="s1" class="clip scene" data-start="0" data-duration="3.8">
70
+ <div class="cam" id="c1">
71
+ <i class="blob" id="bA" style="left:-160px;top:420px;width:620px;height:620px"></i><i class="blob g" id="bB" style="left:600px;top:1100px;width:560px;height:560px"></i>
72
+ <p class="t c eb" id="e1" style="top:170px">קולקציית הזוהר · חדש</p>
73
+ <h1 class="t c hd" id="t1" style="top:222px">סרום זוהר</h1>
74
+ <p class="t c sub" id="t1s" style="top:420px">לחות עמוקה, ברק של משי</p>
75
+ <i class="ped" style="left:240px;top:1340px;width:600px;height:140px"></i>
76
+ <div class="btlw" id="bw1" style="left:370px;top:560px;transform:scale(1)">
77
+ <div class="bulb"></div><div class="neck"><i class="nshine" id="ns1"></i></div>
78
+ <div class="btl"><div class="liq b" id="lqb1"></div><div class="liq" id="lq1"></div><i class="bub" style="left:40px;top:470px;width:10px;height:10px"></i><i class="bub" style="left:87px;top:499px;width:16px;height:16px"></i><i class="bub" style="left:134px;top:528px;width:22px;height:22px"></i><i class="bub" style="left:181px;top:557px;width:10px;height:10px"></i><i class="bub" style="left:228px;top:476px;width:16px;height:16px"></i><i class="bub" style="left:275px;top:505px;width:22px;height:22px"></i><i class="bub" style="left:72px;top:534px;width:10px;height:10px"></i>
79
+ <div class="lab" id="lab1"><p class="lb1" id="lb11">לומה</p><p class="lb2" id="lb21">סרום זוהר</p></div>
80
+ <i class="gl"></i><i class="shine" id="sh1"></i></div></div>
81
+ <div class="seal" id="se1" style="left:770px;top:900px"><p id="se1t">חדש</p></div>
82
+ <p class="t c sub" id="f1" style="top:1560px">30 מ״ל · לכל סוגי העור</p>
83
+ <div class="layer" id="pl1"><i class="pt g" style="left:20px;top:-60px;transform:rotate(0deg)"></i><i class="pt" style="left:193px;top:-211px;transform:rotate(47deg)"></i><i class="pt" style="left:366px;top:-362px;transform:rotate(94deg)"></i><i class="pt g" style="left:539px;top:-513px;transform:rotate(141deg)"></i><i class="pt" style="left:712px;top:-664px;transform:rotate(8deg)"></i><i class="pt" style="left:885px;top:-115px;transform:rotate(55deg)"></i><i class="pt g" style="left:58px;top:-266px;transform:rotate(102deg)"></i><i class="pt" style="left:231px;top:-417px;transform:rotate(149deg)"></i><i class="pt" style="left:404px;top:-568px;transform:rotate(16deg)"></i><i class="pt g" style="left:577px;top:-719px;transform:rotate(63deg)"></i></div>
84
+ </div>
85
+ </section>
86
+ <section id="s2" class="clip scene" data-start="3.8" data-duration="3.6">
87
+ <div class="cam" id="c2">
88
+ <i class="blob" id="bC" style="left:520px;top:300px;width:640px;height:640px"></i><i class="blob g" style="left:-120px;top:1200px;width:520px;height:520px"></i>
89
+ <p class="t c eb" id="e2" style="top:170px">קולקציית קטיפה</p>
90
+ <h2 class="t c hd" id="t2" style="top:222px;font-size:120px">ברק שנשאר</h2>
91
+ <h2 class="t c hd" id="t2b" style="top:362px;font-size:120px;color:var(--rose)">כל היום</h2>
92
+ <i class="ped" style="left:240px;top:1300px;width:600px;height:140px"></i>
93
+ <div class="lipw" id="lw2" style="left:410px;top:560px;transform:scale(1)">
94
+ <div class="lmask"><div class="bullet" id="bl2"><i class="bshine" id="bs2"></i></div></div>
95
+ <div class="sleeve"></div><div class="case"><i class="shine" id="cs2"></i></div></div>
96
+ <i class="sw" id="sw0" style="left:246px;background:var(--rose)"></i><i class="sw" id="sw1" style="left:370px;background:color-mix(in srgb,var(--rose) 60%,var(--fg))"></i><i class="sw" id="sw2" style="left:494px;background:color-mix(in srgb,var(--rose) 55%,var(--gold))"></i><i class="sw" id="sw3" style="left:618px;background:color-mix(in srgb,var(--rose) 55%,var(--cream))"></i><i class="sw" id="sw4" style="left:742px;background:var(--fg)"></i>
97
+ <p class="t c sub" id="s2l" style="top:1600px">12 גוונים חדשים · גימור מבריק</p>
98
+ </div>
99
+ </section>
100
+ <section id="s3" class="clip scene" data-start="7.4" data-duration="3.6">
101
+ <div class="cam" id="c3">
102
+ <p class="t c eb" id="e3" style="top:170px">מה בפנים</p>
103
+ <h2 class="t c hd" id="t3" style="top:222px;font-size:92px">שלושה רכיבים טהורים</h2>
104
+ <div class="drop" id="dp1" style="left:110px;top:520px"><i class="hl"></i></div>
105
+ <i class="rip" id="rp1" style="left:110px;top:520px"></i><i class="dd" id="dd1" style="left:236px;top:320px"></i>
106
+ <p class="t nm" id="nm1" style="right:110px;top:590px">חומצה היאלורונית</p><p class="t ds" id="ds1" style="right:110px;top:670px">לחות שנשמרת לאורך היום</p>
107
+ <div class="drop" id="dp2" style="left:110px;top:900px"><i class="hl"></i></div>
108
+ <i class="rip" id="rp2" style="left:110px;top:900px"></i><i class="dd" id="dd2" style="left:236px;top:700px"></i>
109
+ <p class="t nm" id="nm2" style="right:110px;top:970px">תמצית רימון</p><p class="t ds" id="ds2" style="right:110px;top:1050px">נוגדי חמצון טבעיים</p>
110
+ <div class="drop" id="dp3" style="left:110px;top:1280px"><i class="hl"></i></div>
111
+ <i class="rip" id="rp3" style="left:110px;top:1280px"></i><i class="dd" id="dd3" style="left:236px;top:1080px"></i>
112
+ <p class="t nm" id="nm3" style="right:110px;top:1350px">שמן ורדים</p><p class="t ds" id="ds3" style="right:110px;top:1430px">עור רך, חלק וזוהר</p>
113
+ <p class="t c sub" id="f3" style="top:1690px">נבדק דרמטולוגית · טבעוני</p>
114
+ </div>
115
+ </section>
116
+ <section id="s4" class="clip scene" data-start="11" data-duration="3.8">
117
+ <div class="cam" id="c4">
118
+ <i class="blob" style="left:-100px;top:500px;width:600px;height:600px"></i><i class="blob g" style="left:560px;top:620px;width:560px;height:560px"></i>
119
+ <h2 class="t c hd" id="t4" style="top:190px;font-size:130px">הזוהר שלך</h2>
120
+ <h2 class="t c hd" id="t4b" style="top:335px;font-size:130px;color:var(--rose)">מתחיל כאן</h2>
121
+ <i class="ped" style="left:140px;top:1380px;width:800px;height:160px"></i>
122
+ <div class="btlw" id="bw4" style="left:220px;top:700px;transform:scale(0.82)">
123
+ <div class="bulb"></div><div class="neck"><i class="nshine" id="ns4"></i></div>
124
+ <div class="btl"><div class="liq b" id="lqb4"></div><div class="liq" id="lq4"></div><i class="bub" style="left:40px;top:470px;width:10px;height:10px"></i><i class="bub" style="left:87px;top:499px;width:16px;height:16px"></i><i class="bub" style="left:134px;top:528px;width:22px;height:22px"></i><i class="bub" style="left:181px;top:557px;width:10px;height:10px"></i><i class="bub" style="left:228px;top:476px;width:16px;height:16px"></i><i class="bub" style="left:275px;top:505px;width:22px;height:22px"></i><i class="bub" style="left:72px;top:534px;width:10px;height:10px"></i>
125
+ <div class="lab" id="lab4"><p class="lb1" id="lb14">לומה</p><p class="lb2" id="lb24">סרום זוהר</p></div>
126
+ <i class="gl"></i><i class="shine" id="sh4"></i></div></div>
127
+ <div class="lipw" id="lw4" style="left:620px;top:830px;transform:scale(0.82)">
128
+ <div class="lmask"><div class="bullet" id="bl4"><i class="bshine" id="bs4"></i></div></div>
129
+ <div class="sleeve"></div><div class="case"><i class="shine" id="cs4"></i></div></div>
130
+ <div class="cta" id="cta"><p id="ctat">20% הנחה בהשקה</p></div>
131
+ <p class="t c eb" id="br4" style="top:1730px;color:var(--fg)">לומה קוסמטיקס</p>
132
+ <div class="layer" id="pl4"><i class="pt g" style="left:20px;top:-60px;transform:rotate(0deg)"></i><i class="pt" style="left:193px;top:-211px;transform:rotate(47deg)"></i><i class="pt" style="left:366px;top:-362px;transform:rotate(94deg)"></i><i class="pt g" style="left:539px;top:-513px;transform:rotate(141deg)"></i><i class="pt" style="left:712px;top:-664px;transform:rotate(8deg)"></i><i class="pt" style="left:885px;top:-115px;transform:rotate(55deg)"></i><i class="pt g" style="left:58px;top:-266px;transform:rotate(102deg)"></i><i class="pt" style="left:231px;top:-417px;transform:rotate(149deg)"></i><i class="pt" style="left:404px;top:-568px;transform:rotate(16deg)"></i><i class="pt g" style="left:577px;top:-719px;transform:rotate(63deg)"></i><i class="pt" style="left:750px;top:-170px;transform:rotate(110deg)"></i><i class="pt" style="left:923px;top:-321px;transform:rotate(157deg)"></i><i class="pt g" style="left:96px;top:-472px;transform:rotate(24deg)"></i><i class="pt" style="left:269px;top:-623px;transform:rotate(71deg)"></i></div>
133
+ </div>
134
+ </section>
135
+ </div>
136
+ <script>
137
+ const tl=gsap.timeline({paused:true});
138
+ const S=[0,3.8,7.4,11,14.8],D=14.8;
139
+ const X="expo.out",P="power3.out",IO="power2.inOut";
140
+ function fadeOut(i){tl.to("#c"+(i+1),{opacity:0,scale:1.04,duration:.4,ease:"power1.in"},S[i+1]-.4);}
141
+ function liquid(k,t,d,from){tl.fromTo(["#lq"+k,"#lqb"+k],{y:from},{y:0,duration:1.6,ease:"power2.out"},t);
142
+ tl.fromTo("#lq"+k,{rotation:0},{rotation:300,duration:d,ease:"none"},t);tl.fromTo("#lqb"+k,{rotation:20},{rotation:-240,duration:d,ease:"none"},t);
143
+ tl.fromTo("#bw"+k+" .bub",{y:0,opacity:0},{y:-420,opacity:1,duration:1.6,ease:"power1.in",stagger:.12},t+.6);}
144
+ function sweep(sel,t){tl.fromTo(sel,{x:0},{x:640,duration:1,ease:"power2.inOut"},t);}
145
+ function fall(sel,t,d){tl.fromTo(sel,{y:0,x:0,rotation:0},{y:(k)=>1500+(k%5)*160,x:(k)=>k%2?140:-120,rotation:(k)=>k%2?320:-280,duration:d,ease:"none",stagger:.06},t);}
146
+ // s1 serum
147
+ tl.fromTo("#c1",{opacity:0,scale:1.06},{opacity:1,scale:1,duration:.7,ease:P},S[0]);
148
+ tl.fromTo("#bA",{x:0,y:0},{x:120,y:-80,duration:3.8,ease:"sine.inOut"},S[0]);tl.fromTo("#bB",{x:0},{x:-140,duration:3.8,ease:"sine.inOut"},S[0]);
149
+ tl.fromTo("#bw1",{y:160,opacity:0},{y:0,opacity:1,duration:1,ease:X},S[0]+.1);
150
+ liquid(1,S[0]+.3,3.4,420);
151
+ sweep("#sh1",S[0]+1.6);tl.fromTo("#ns1",{x:0},{x:260,duration:.7,ease:"power2.inOut"},S[0]+1.5);
152
+ tl.fromTo("#e1",{opacity:0,letterSpacing:"0.6em"},{opacity:1,letterSpacing:"0.25em",duration:1,ease:X},S[0]+.3);
153
+ tl.fromTo("#t1",{opacity:0,y:50,filter:"blur(14px)"},{opacity:1,y:0,filter:"blur(0px)",duration:1,ease:X},S[0]+.5);
154
+ tl.fromTo("#t1s",{opacity:0,y:24},{opacity:1,y:0,duration:.7,ease:P},S[0]+.9);
155
+ tl.fromTo("#se1",{scale:0,rotation:-90},{scale:1,rotation:-12,duration:.7,ease:"back.out(2.2)"},S[0]+1.5);
156
+ tl.fromTo("#f1",{opacity:0},{opacity:1,duration:.6},S[0]+1.8);
157
+ fall("#pl1 .pt",S[0]+.2,2.9);
158
+ fadeOut(0);
159
+ // s2 lipstick
160
+ tl.fromTo("#c2",{opacity:0,y:60},{opacity:1,y:0,duration:.6,ease:P},S[1]);
161
+ tl.fromTo("#bC",{scale:.8},{scale:1.15,duration:3.6,ease:"sine.inOut"},S[1]);
162
+ tl.fromTo("#lw2",{y:200,opacity:0},{y:0,opacity:1,duration:.9,ease:X},S[1]+.1);
163
+ tl.fromTo("#bl2",{yPercent:100},{yPercent:0,duration:1.3,ease:"power3.inOut"},S[1]+.7);
164
+ tl.fromTo("#lw2",{rotation:-4},{rotation:3,duration:2.4,ease:"sine.inOut"},S[1]+.9);
165
+ tl.fromTo("#bs2",{x:0},{x:260,duration:.8,ease:IO},S[1]+1.9);sweep("#cs2",S[1]+1.2);
166
+ tl.fromTo("#e2",{opacity:0,letterSpacing:"0.6em"},{opacity:1,letterSpacing:"0.25em",duration:1,ease:X},S[1]+.2);
167
+ tl.fromTo("#t2",{clipPath:"inset(0% 0% 0% 100%)"},{clipPath:"inset(0% 0% 0% 0%)",duration:.9,ease:"power4.out"},S[1]+.35);
168
+ tl.fromTo("#t2b",{clipPath:"inset(0% 0% 0% 100%)"},{clipPath:"inset(0% 0% 0% 0%)",duration:.9,ease:"power4.out"},S[1]+.6);
169
+ tl.fromTo(".sw",{scale:0,y:30},{scale:1,y:0,duration:.5,ease:"back.out(2.4)",stagger:.08},S[1]+1.5);
170
+ tl.fromTo("#s2l",{opacity:0,y:20},{opacity:1,y:0,duration:.6,ease:P},S[1]+2);
171
+ fadeOut(1);
172
+ // s3 ingredients
173
+ tl.fromTo("#c3",{opacity:0},{opacity:1,duration:.5},S[2]);
174
+ tl.fromTo("#e3",{opacity:0,letterSpacing:"0.6em"},{opacity:1,letterSpacing:"0.25em",duration:1,ease:X},S[2]+.1);
175
+ tl.fromTo("#t3",{opacity:0,y:30},{opacity:1,y:0,duration:.7,ease:P},S[2]+.2);
176
+ [1,2,3].forEach((k,i)=>{const a=S[2]+.35+i*.35;
177
+ tl.fromTo("#dp"+k,{scale:0},{scale:1,duration:.8,ease:"elastic.out(1,.6)"},a);
178
+ tl.fromTo("#dd"+k,{y:0,opacity:1},{y:330,opacity:0,duration:.5,ease:"power2.in"},a+.5);
179
+ tl.fromTo("#rp"+k,{scale:.9,opacity:.9},{scale:1.5,opacity:0,duration:.8,ease:"power2.out"},a+.95);
180
+ tl.to("#dp"+k,{scaleY:.9,scaleX:1.08,duration:.15,yoyo:true,repeat:1,ease:"sine.inOut"},a+.95);
181
+ tl.fromTo("#nm"+k,{opacity:0,x:-50},{opacity:1,x:0,duration:.6,ease:P},a+.3);
182
+ tl.fromTo("#ds"+k,{opacity:0,x:-50},{opacity:1,x:0,duration:.6,ease:P},a+.45);});
183
+ tl.fromTo("#f3",{opacity:0},{opacity:1,duration:.6},S[2]+1.9);
184
+ fadeOut(2);
185
+ // s4 pack shot
186
+ tl.fromTo("#c4",{opacity:0,scale:.96},{opacity:1,scale:1,duration:.6,ease:P},S[3]);
187
+ tl.set(["#lq4","#lqb4"],{y:0},S[3]);tl.set("#bl4",{yPercent:0},S[3]);
188
+ tl.fromTo("#bw4",{x:-120,opacity:0},{x:0,opacity:1,duration:.9,ease:X},S[3]+.15);
189
+ tl.fromTo("#lw4",{x:120,opacity:0},{x:0,opacity:1,duration:.9,ease:X},S[3]+.3);
190
+ tl.fromTo("#lq4",{rotation:0},{rotation:240,duration:3.6,ease:"none"},S[3]);tl.fromTo("#lqb4",{rotation:0},{rotation:-200,duration:3.6,ease:"none"},S[3]);
191
+ sweep("#sh4",S[3]+1.3);sweep("#cs4",S[3]+1.5);
192
+ tl.fromTo("#t4",{opacity:0,y:40,filter:"blur(12px)"},{opacity:1,y:0,filter:"blur(0px)",duration:.9,ease:X},S[3]+.3);
193
+ tl.fromTo("#t4b",{opacity:0,y:40,filter:"blur(12px)"},{opacity:1,y:0,filter:"blur(0px)",duration:.9,ease:X},S[3]+.55);
194
+ tl.fromTo("#cta",{scale:.4,opacity:0},{scale:1,opacity:1,duration:.7,ease:"back.out(2)"},S[3]+1.4);
195
+ tl.to("#cta",{scale:1.05,duration:.35,yoyo:true,repeat:1,ease:"sine.inOut"},S[3]+2.4);
196
+ tl.fromTo("#br4",{opacity:0,letterSpacing:"0.6em"},{opacity:1,letterSpacing:"0.25em",duration:1,ease:X},S[3]+1.7);
197
+ fall("#pl4 .pt",S[3]+.1,2.8);
198
+ tl.set({},{},D);
199
+ window.__timelines=window.__timelines||{};window.__timelines["glossy-cosmetics"]=tl;
200
+ </script>
201
+ </body>
202
+ </html>