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/gold-couture.html ADDED
@@ -0,0 +1,189 @@
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:#08080a;--fg:#f3ead8;--gold:#d6b46c;--deep:#6e5025;--ink:#17140f}
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
+ .vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--ink) 90%,var(--gold)) 0%,var(--bg) 62%)}
24
+ .ray{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;opacity:.28}
25
+ .dl{fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1}
26
+ .dl.thin{stroke-width:1.5;opacity:.6}
27
+ .mote{position:absolute;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold);opacity:.55}
28
+ .gt{background:linear-gradient(100deg,var(--deep) 0%,var(--gold) 28%,var(--fg) 46%,var(--gold) 62%,var(--deep) 100%);background-size:260% 100%;background-position:100% 50%;-webkit-background-clip:text;background-clip:text;color:transparent}
29
+ .ctr{position:absolute;left:0;right:0;text-align:center;white-space:nowrap}
30
+ .eb{font-size:30px;font-weight:400;letter-spacing:.5em;color:var(--gold)}
31
+ .mono{font-size:330px;font-weight:400;line-height:1}
32
+ .hl{position:absolute;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent)}
33
+ .hl.solid{background:var(--gold)}
34
+ .split{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 15%,var(--fg) 50%,var(--gold) 85%,transparent);transform:scaleX(0)}
35
+ .silk{position:absolute;border-radius:50%;filter:blur(90px);background:var(--gold);opacity:.1}
36
+ .dress{position:absolute;inset:0;clip-path:polygon(40% 0,43% 0,50% 13%,57% 0,60% 0,62% 15%,60% 31%,64% 39%,79% 70%,92% 95%,96% 100%,73% 98.5%,50% 98%,27% 98.5%,4% 100%,8% 95%,21% 70%,36% 39%,40% 31%,38% 15%);background:linear-gradient(160deg,var(--deep) 0%,var(--gold) 30%,var(--fg) 44%,var(--gold) 56%,var(--deep) 80%,var(--gold) 100%);background-size:100% 260%;background-position:50% 100%}
37
+ .dshadow{position:absolute;inset:0;clip-path:polygon(40% 0,43% 0,50% 13%,57% 0,60% 0,62% 15%,60% 31%,64% 39%,79% 70%,92% 95%,96% 100%,73% 98.5%,50% 98%,27% 98.5%,4% 100%,8% 95%,21% 70%,36% 39%,40% 31%,38% 15%);background:var(--deep);opacity:.45}
38
+ .tx{position:absolute;white-space:nowrap;line-height:1.1}
39
+ .slot{position:absolute;left:0;right:0;top:330px;height:330px}
40
+ .word{position:absolute;left:0;right:0;top:0;text-align:center;font-size:210px;font-weight:400;line-height:1.3;white-space:nowrap;color:var(--fg)}
41
+ .gd{fill:none;stroke:var(--gold);stroke-width:1.5;opacity:.22}
42
+ .prog{position:absolute;left:810px;width:300px;top:710px;height:2px;background:color-mix(in srgb,var(--gold) 25%,transparent)}
43
+ .progf{position:absolute;inset:0;background:var(--gold);transform-origin:100% 50%;transform:scaleX(0)}
44
+ .gem{position:absolute;width:18px;height:18px;border:2px solid var(--gold);transform:rotate(45deg)}
45
+ .cta{position:absolute;left:50%;top:800px;transform:translateX(-50%);border:2px solid var(--gold);padding:18px 64px;overflow:hidden}
46
+ .cta .sh{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--gold) 45%,transparent) 50%,transparent 70%)}
47
+ .ctat{position:relative;font-size:34px;font-weight:400;letter-spacing:.3em;color:var(--fg);white-space:nowrap}
48
+ </style>
49
+ </head>
50
+ <body>
51
+ <div id="root" data-composition-id="gold-couture" data-start="0" data-width="1920" data-height="1080" data-duration="14.6">
52
+ <section id="s1" class="clip scene" data-start="0" data-duration="3.2">
53
+ <div class="cam" id="c1">
54
+ <div class="vig"></div>
55
+ <svg class="abs" style="left:0;top:0" width="1920" height="1080" viewBox="0 0 1920 1080"><g id="rays1"><path class="ray" pathLength="1" d="M1260 540 L2110 540"/><path class="ray" pathLength="1" d="M1255 592 L2093 740"/><path class="ray" pathLength="1" d="M1242 643 L2041 933"/><path class="ray" pathLength="1" d="M1220 690 L1956 1115"/><path class="ray" pathLength="1" d="M1190 733 L1841 1279"/><path class="ray" pathLength="1" d="M1153 770 L1699 1421"/><path class="ray" pathLength="1" d="M1110 800 L1535 1536"/><path class="ray" pathLength="1" d="M1063 822 L1353 1621"/><path class="ray" pathLength="1" d="M1012 835 L1160 1673"/><path class="ray" pathLength="1" d="M960 840 L960 1690"/><path class="ray" pathLength="1" d="M908 835 L760 1673"/><path class="ray" pathLength="1" d="M857 822 L567 1621"/><path class="ray" pathLength="1" d="M810 800 L385 1536"/><path class="ray" pathLength="1" d="M767 770 L221 1421"/><path class="ray" pathLength="1" d="M730 733 L79 1279"/><path class="ray" pathLength="1" d="M700 690 L-36 1115"/><path class="ray" pathLength="1" d="M678 643 L-121 933"/><path class="ray" pathLength="1" d="M665 592 L-173 740"/><path class="ray" pathLength="1" d="M660 540 L-190 540"/><path class="ray" pathLength="1" d="M665 488 L-173 340"/><path class="ray" pathLength="1" d="M678 437 L-121 147"/><path class="ray" pathLength="1" d="M700 390 L-36 -35"/><path class="ray" pathLength="1" d="M730 347 L79 -199"/><path class="ray" pathLength="1" d="M767 310 L221 -341"/><path class="ray" pathLength="1" d="M810 280 L385 -456"/><path class="ray" pathLength="1" d="M857 258 L567 -541"/><path class="ray" pathLength="1" d="M908 245 L760 -593"/><path class="ray" pathLength="1" d="M960 240 L960 -610"/><path class="ray" pathLength="1" d="M1012 245 L1160 -593"/><path class="ray" pathLength="1" d="M1063 258 L1353 -541"/><path class="ray" pathLength="1" d="M1110 280 L1535 -456"/><path class="ray" pathLength="1" d="M1153 310 L1699 -341"/><path class="ray" pathLength="1" d="M1190 347 L1841 -199"/><path class="ray" pathLength="1" d="M1220 390 L1956 -35"/><path class="ray" pathLength="1" d="M1242 437 L2041 147"/><path class="ray" pathLength="1" d="M1255 488 L2093 340"/></g>
56
+ <path id="dia1" class="dl" pathLength="1" d="M960 230 L1270 540 L960 850 L650 540 Z"/>
57
+ <path id="dia2" class="dl thin" pathLength="1" d="M960 270 L1230 540 L960 810 L690 540 Z"/>
58
+ </svg>
59
+ <div class="layer" id="dz1"><i class="mote d1" style="left:487px;top:313px;width:4px;height:4px"></i><i class="mote d2" style="left:954px;top:606px;width:5px;height:5px"></i><i class="mote d1" style="left:1421px;top:899px;width:6px;height:6px"></i><i class="mote d2" style="left:1888px;top:152px;width:7px;height:7px"></i><i class="mote d1" style="left:475px;top:445px;width:8px;height:8px"></i><i class="mote d2" style="left:942px;top:738px;width:3px;height:3px"></i><i class="mote d1" style="left:1409px;top:1031px;width:4px;height:4px"></i><i class="mote d2" style="left:1876px;top:284px;width:5px;height:5px"></i><i class="mote d1" style="left:463px;top:577px;width:6px;height:6px"></i><i class="mote d2" style="left:930px;top:870px;width:7px;height:7px"></i><i class="mote d1" style="left:1397px;top:123px;width:8px;height:8px"></i><i class="mote d2" style="left:1864px;top:416px;width:3px;height:3px"></i><i class="mote d1" style="left:451px;top:709px;width:4px;height:4px"></i><i class="mote d2" style="left:918px;top:1002px;width:5px;height:5px"></i><i class="mote d1" style="left:1385px;top:255px;width:6px;height:6px"></i><i class="mote d2" style="left:1852px;top:548px;width:7px;height:7px"></i></div>
60
+ <p class="ctr eb" id="e1" style="top:110px">בית אופנה · מאז 1987</p>
61
+ <p class="ctr mono gt" id="m1" style="top:365px">ל</p>
62
+ <p class="ctr eb" id="e1b" style="top:930px;color:var(--fg);letter-spacing:.4em">פרק חדש מתחיל</p>
63
+ </div>
64
+ <div class="split" id="sp1" style="top:539px"></div>
65
+ </section>
66
+ <section id="s2" class="clip scene" data-start="3.2" data-duration="3.8">
67
+ <div class="cam" id="c2">
68
+ <div class="silk" id="sk1" style="left:-200px;top:-300px;width:900px;height:700px"></div>
69
+ <div class="silk" id="sk2" style="left:1200px;top:600px;width:900px;height:600px"></div>
70
+ <div class="layer" id="dz2"><i class="mote d2" style="left:1780px;top:300px;width:7px;height:7px"></i><i class="mote d1" style="left:367px;top:593px;width:8px;height:8px"></i><i class="mote d2" style="left:834px;top:886px;width:3px;height:3px"></i><i class="mote d1" style="left:1301px;top:139px;width:4px;height:4px"></i><i class="mote d2" style="left:1768px;top:432px;width:5px;height:5px"></i><i class="mote d1" style="left:355px;top:725px;width:6px;height:6px"></i><i class="mote d2" style="left:822px;top:1018px;width:7px;height:7px"></i><i class="mote d1" style="left:1289px;top:271px;width:8px;height:8px"></i><i class="mote d2" style="left:1756px;top:564px;width:3px;height:3px"></i><i class="mote d1" style="left:343px;top:857px;width:4px;height:4px"></i><i class="mote d2" style="left:810px;top:110px;width:5px;height:5px"></i><i class="mote d1" style="left:1277px;top:403px;width:6px;height:6px"></i></div>
71
+ <div class="layer" id="arch">
72
+ <svg class="abs" style="left:0;top:0" width="1920" height="1080" viewBox="0 0 1920 1080">
73
+ <path id="ar1" class="dl" pathLength="1" d="M250 960 L250 410 A260 260 0 0 1 770 410 L770 960"/>
74
+ <path id="ar2" class="dl thin" pathLength="1" d="M276 960 L276 410 A234 234 0 0 1 744 410 L744 960"/>
75
+ </svg>
76
+ <div class="hl" id="fl2" style="left:150px;width:720px;top:960px"></div>
77
+ </div>
78
+ <div class="abs" id="dw" style="left:342px;top:262px;width:336px;height:698px;overflow:hidden">
79
+ <div class="dshadow" style="transform:translate(14px,6px)"></div>
80
+ <div class="dress" id="dr"></div>
81
+ </div>
82
+ <div class="layer" id="txt2">
83
+ <p class="tx" id="t2a" style="right:200px;top:250px;font-size:54px;font-weight:400;letter-spacing:.35em;color:var(--fg)">קולקציית</p>
84
+ <p class="tx gt" id="t2b" style="right:190px;top:310px;font-size:300px;font-weight:700;line-height:1.2">ערב</p>
85
+ <div class="hl solid" id="hl2" style="right:200px;width:560px;top:705px;transform-origin:100% 50%"></div>
86
+ <p class="tx" id="t2c" style="right:200px;top:740px;font-size:40px;font-weight:400;letter-spacing:.3em;color:var(--fg)">סתיו · חורף 2026</p>
87
+ <p class="tx" id="t2d" style="right:200px;top:810px;font-size:32px;font-weight:400;letter-spacing:.12em;color:var(--gold)">שתים עשרה הופעות · בעבודת יד</p>
88
+ </div>
89
+ </div>
90
+ </section>
91
+ <section id="s3" class="clip scene" data-start="7" data-duration="3.6">
92
+ <div class="cam" id="c3">
93
+ <div class="vig"></div>
94
+ <svg class="abs" id="gh3" style="left:510px;top:90px" width="900" height="900" viewBox="0 0 900 900"><path class="gd" d="M450 10 L890 450 L450 890 L10 450 Z"/><path class="gd" d="M450 70 L830 450 L450 830 L70 450 Z"/><path class="gd" d="M450 130 L770 450 L450 770 L130 450 Z"/></svg>
95
+ <div class="layer" id="dz3"><i class="mote d2" style="left:1660px;top:580px;width:5px;height:5px"></i><i class="mote d1" style="left:247px;top:873px;width:6px;height:6px"></i><i class="mote d2" style="left:714px;top:126px;width:7px;height:7px"></i><i class="mote d1" style="left:1181px;top:419px;width:8px;height:8px"></i><i class="mote d2" style="left:1648px;top:712px;width:3px;height:3px"></i><i class="mote d1" style="left:235px;top:1005px;width:4px;height:4px"></i><i class="mote d2" style="left:702px;top:258px;width:5px;height:5px"></i><i class="mote d1" style="left:1169px;top:551px;width:6px;height:6px"></i><i class="mote d2" style="left:1636px;top:844px;width:7px;height:7px"></i><i class="mote d1" style="left:223px;top:97px;width:8px;height:8px"></i><i class="mote d2" style="left:690px;top:390px;width:3px;height:3px"></i><i class="mote d1" style="left:1157px;top:683px;width:4px;height:4px"></i><i class="mote d2" style="left:1624px;top:976px;width:5px;height:5px"></i><i class="mote d1" style="left:211px;top:229px;width:6px;height:6px"></i><i class="mote d2" style="left:678px;top:522px;width:7px;height:7px"></i><i class="mote d1" style="left:1145px;top:815px;width:8px;height:8px"></i><i class="mote d2" style="left:1612px;top:68px;width:3px;height:3px"></i><i class="mote d1" style="left:199px;top:361px;width:4px;height:4px"></i></div>
96
+ <p class="ctr eb" id="e3" style="top:200px">שלושה ערכים · מראה אחד</p>
97
+ <div class="slot">
98
+ <p class="word" id="w1">אלגנטיות</p>
99
+ <p class="word" id="w2">עוצמה</p>
100
+ <p class="word gt" id="w3">נצחיות</p>
101
+ </div>
102
+ <div class="prog"><div class="progf" id="pf3"></div></div>
103
+ </div>
104
+ </section>
105
+ <section id="s4" class="clip scene" data-start="10.6" data-duration="4">
106
+ <div class="cam" id="c4">
107
+ <div class="vig"></div>
108
+ <svg class="abs" id="rays4" style="left:0;top:0;opacity:.6" width="1920" height="1080" viewBox="0 0 1920 1080"><path class="ray" pathLength="1" d="M1260 540 L2110 540"/><path class="ray" pathLength="1" d="M1255 592 L2093 740"/><path class="ray" pathLength="1" d="M1242 643 L2041 933"/><path class="ray" pathLength="1" d="M1220 690 L1956 1115"/><path class="ray" pathLength="1" d="M1190 733 L1841 1279"/><path class="ray" pathLength="1" d="M1153 770 L1699 1421"/><path class="ray" pathLength="1" d="M1110 800 L1535 1536"/><path class="ray" pathLength="1" d="M1063 822 L1353 1621"/><path class="ray" pathLength="1" d="M1012 835 L1160 1673"/><path class="ray" pathLength="1" d="M960 840 L960 1690"/><path class="ray" pathLength="1" d="M908 835 L760 1673"/><path class="ray" pathLength="1" d="M857 822 L567 1621"/><path class="ray" pathLength="1" d="M810 800 L385 1536"/><path class="ray" pathLength="1" d="M767 770 L221 1421"/><path class="ray" pathLength="1" d="M730 733 L79 1279"/><path class="ray" pathLength="1" d="M700 690 L-36 1115"/><path class="ray" pathLength="1" d="M678 643 L-121 933"/><path class="ray" pathLength="1" d="M665 592 L-173 740"/><path class="ray" pathLength="1" d="M660 540 L-190 540"/><path class="ray" pathLength="1" d="M665 488 L-173 340"/><path class="ray" pathLength="1" d="M678 437 L-121 147"/><path class="ray" pathLength="1" d="M700 390 L-36 -35"/><path class="ray" pathLength="1" d="M730 347 L79 -199"/><path class="ray" pathLength="1" d="M767 310 L221 -341"/><path class="ray" pathLength="1" d="M810 280 L385 -456"/><path class="ray" pathLength="1" d="M857 258 L567 -541"/><path class="ray" pathLength="1" d="M908 245 L760 -593"/><path class="ray" pathLength="1" d="M960 240 L960 -610"/><path class="ray" pathLength="1" d="M1012 245 L1160 -593"/><path class="ray" pathLength="1" d="M1063 258 L1353 -541"/><path class="ray" pathLength="1" d="M1110 280 L1535 -456"/><path class="ray" pathLength="1" d="M1153 310 L1699 -341"/><path class="ray" pathLength="1" d="M1190 347 L1841 -199"/><path class="ray" pathLength="1" d="M1220 390 L1956 -35"/><path class="ray" pathLength="1" d="M1242 437 L2041 147"/><path class="ray" pathLength="1" d="M1255 488 L2093 340"/></svg>
109
+ <div class="layer" id="dz4"><i class="mote d2" style="left:1540px;top:860px;width:3px;height:3px"></i><i class="mote d1" style="left:127px;top:113px;width:4px;height:4px"></i><i class="mote d2" style="left:594px;top:406px;width:5px;height:5px"></i><i class="mote d1" style="left:1061px;top:699px;width:6px;height:6px"></i><i class="mote d2" style="left:1528px;top:992px;width:7px;height:7px"></i><i class="mote d1" style="left:115px;top:245px;width:8px;height:8px"></i><i class="mote d2" style="left:582px;top:538px;width:3px;height:3px"></i><i class="mote d1" style="left:1049px;top:831px;width:4px;height:4px"></i><i class="mote d2" style="left:1516px;top:84px;width:5px;height:5px"></i><i class="mote d1" style="left:103px;top:377px;width:6px;height:6px"></i><i class="mote d2" style="left:570px;top:670px;width:7px;height:7px"></i><i class="mote d1" style="left:1037px;top:963px;width:8px;height:8px"></i><i class="mote d2" style="left:1504px;top:216px;width:3px;height:3px"></i><i class="mote d1" style="left:91px;top:509px;width:4px;height:4px"></i><i class="mote d2" style="left:558px;top:802px;width:5px;height:5px"></i><i class="mote d1" style="left:1025px;top:55px;width:6px;height:6px"></i><i class="mote d2" style="left:1492px;top:348px;width:7px;height:7px"></i><i class="mote d1" style="left:79px;top:641px;width:8px;height:8px"></i><i class="mote d2" style="left:546px;top:934px;width:3px;height:3px"></i><i class="mote d1" style="left:1013px;top:187px;width:4px;height:4px"></i></div>
110
+ <p class="ctr eb" id="e4" style="top:230px">בית אופנה</p>
111
+ <p class="ctr gt" id="wm" style="top:300px;font-size:280px;font-weight:400;line-height:1.2;letter-spacing:.12em">לבנה</p>
112
+ <div class="hl solid" id="hl4a" style="left:170px;width:420px;top:500px;transform-origin:100% 50%"></div>
113
+ <div class="hl solid" id="hl4b" style="right:170px;width:420px;top:500px;transform-origin:0 50%"></div>
114
+ <div class="gem" id="gm1" style="left:152px;top:492px"></div>
115
+ <div class="gem" id="gm2" style="right:152px;top:492px"></div>
116
+ <p class="ctr" id="tg4" style="top:680px;font-size:40px;font-weight:400;letter-spacing:.5em;color:var(--fg)">קוטור · תל אביב</p>
117
+ <div class="cta" id="cta"><div class="sh" id="sh4"></div><p class="ctat" id="ctat">גלו את הקולקציה</p></div>
118
+ </div>
119
+ </section>
120
+ </div>
121
+ <script>
122
+ const tl=gsap.timeline({paused:true});
123
+ const S=[0,3.2,7,10.6,14.6],D=14.6;
124
+ const X="expo.out",P="power3.out",IO="power2.inOut";
125
+ function motes(i,dy){tl.fromTo("#dz"+i+" .d1",{y:0},{y:-dy,duration:S[i]-S[i-1],ease:"none"},S[i-1]);tl.fromTo("#dz"+i+" .d2",{y:0,opacity:.25},{y:-dy*.45,opacity:.7,duration:S[i]-S[i-1],ease:"none"},S[i-1]);}
126
+ // s1 overture
127
+ motes(1,160);
128
+ tl.fromTo("#c1",{scale:1},{scale:1.07,duration:3.2,ease:"none"},S[0]);
129
+ tl.fromTo("#rays1 .ray",{strokeDashoffset:1},{strokeDashoffset:0,duration:1.4,ease:IO,stagger:{each:.025,from:"center"}},S[0]+.05);
130
+ tl.fromTo("#rays1",{rotation:-8,svgOrigin:"960 540"},{rotation:6,duration:3.2,ease:"none"},S[0]);
131
+ tl.fromTo("#dia1",{strokeDashoffset:1},{strokeDashoffset:0,duration:1.2,ease:IO},S[0]);
132
+ tl.fromTo("#dia2",{strokeDashoffset:-1},{strokeDashoffset:0,duration:1.2,ease:IO},S[0]+.12);
133
+ tl.fromTo("#e1",{opacity:0,letterSpacing:"1.2em"},{opacity:1,letterSpacing:"0.5em",duration:1.4,ease:X},S[0]+.3);
134
+ tl.fromTo("#m1",{opacity:0,scale:1.35,filter:"blur(24px)"},{opacity:1,scale:1,filter:"blur(0px)",duration:1.2,ease:X},S[0]+.6);
135
+ tl.fromTo("#m1",{backgroundPosition:"100% 50%"},{backgroundPosition:"0% 50%",duration:1.2,ease:IO},S[0]+1.5);
136
+ tl.fromTo("#e1b",{opacity:0,y:16},{opacity:1,y:0,duration:.8,ease:P},S[0]+1.4);
137
+ tl.to("#c1",{opacity:0,duration:.35,ease:"power2.in"},S[1]-.4);
138
+ tl.fromTo("#sp1",{scaleX:0,opacity:1},{scaleX:1,duration:.5,ease:"power3.inOut"},S[1]-.55);
139
+ // s2 collection
140
+ motes(2,120);
141
+ tl.fromTo("#c2",{clipPath:"inset(50% 0% 50% 0%)"},{clipPath:"inset(0% 0% 0% 0%)",duration:.8,ease:"power3.inOut"},S[1]);
142
+ tl.fromTo("#ar1",{strokeDashoffset:1},{strokeDashoffset:0,duration:1.5,ease:IO},S[1]+.2);
143
+ tl.fromTo("#ar2",{strokeDashoffset:-1},{strokeDashoffset:0,duration:1.5,ease:IO},S[1]+.35);
144
+ tl.fromTo("#fl2",{scaleX:0},{scaleX:1,duration:1,ease:P},S[1]+.3);
145
+ tl.fromTo("#dw",{clipPath:"inset(100% 0% 0% 0%)"},{clipPath:"inset(0% 0% 0% 0%)",duration:1.3,ease:"power4.inOut"},S[1]+.6);
146
+ tl.fromTo("#dr",{backgroundPosition:"50% 100%"},{backgroundPosition:"50% 0%",duration:3,ease:"sine.inOut"},S[1]+.7);
147
+ tl.fromTo("#dw",{y:30},{y:-14,duration:3.8,ease:"none"},S[1]);
148
+ tl.fromTo("#arch",{y:-10},{y:12,duration:3.8,ease:"none"},S[1]);
149
+ tl.fromTo("#txt2",{x:-30},{x:20,duration:3.8,ease:"none"},S[1]);
150
+ tl.fromTo(["#sk1","#sk2"],{x:0},{x:(k)=>k?-260:260,duration:3.8,ease:"sine.inOut"},S[1]);
151
+ tl.fromTo("#t2a",{opacity:0,letterSpacing:"0.9em"},{opacity:1,letterSpacing:"0.35em",duration:1.2,ease:X},S[1]+.5);
152
+ tl.fromTo("#t2b",{clipPath:"inset(0% 0% 0% 100%)",x:-50},{clipPath:"inset(0% 0% 0% 0%)",x:0,duration:1.2,ease:"power4.out"},S[1]+.7);
153
+ tl.fromTo("#t2b",{backgroundPosition:"100% 50%"},{backgroundPosition:"0% 50%",duration:1.4,ease:IO},S[1]+1.6);
154
+ tl.fromTo("#hl2",{scaleX:0},{scaleX:1,duration:.9,ease:"power3.inOut"},S[1]+1.1);
155
+ tl.fromTo("#t2c",{opacity:0,y:20},{opacity:1,y:0,duration:.8,ease:P},S[1]+1.4);
156
+ tl.fromTo("#t2d",{opacity:0,y:20},{opacity:1,y:0,duration:.8,ease:P},S[1]+1.65);
157
+ tl.to("#c2",{opacity:0,filter:"blur(10px)",duration:.4,ease:"power2.in"},S[2]-.4);
158
+ // s3 values
159
+ motes(3,140);
160
+ tl.fromTo("#c3",{opacity:0},{opacity:1,duration:.4},S[2]);
161
+ tl.fromTo("#gh3",{scale:1.3,rotation:-20,opacity:0},{scale:1,rotation:8,opacity:1,duration:3.6,ease:"power2.out"},S[2]);
162
+ tl.fromTo("#e3",{opacity:0,letterSpacing:"1em"},{opacity:1,letterSpacing:"0.5em",duration:1,ease:X},S[2]+.15);
163
+ [["#w1",.2,1.25],["#w2",1.25,2.3],["#w3",2.3,9]].forEach(([w,a,b],i)=>{
164
+ tl.fromTo(w,{opacity:0,letterSpacing:"0.7em",filter:"blur(14px)"},{opacity:1,letterSpacing:"0.04em",filter:"blur(0px)",duration:.75,ease:X},S[2]+a);
165
+ if(i<2)tl.to(w,{opacity:0,y:-40,filter:"blur(10px)",duration:.28,ease:"power2.in"},S[2]+b-.28);
166
+ tl.to("#pf3",{scaleX:(i+1)/3,duration:.6,ease:P},S[2]+a+.1);
167
+ });
168
+ tl.fromTo("#w3",{backgroundPosition:"100% 50%"},{backgroundPosition:"0% 50%",duration:1,ease:IO},S[2]+2.55);
169
+ tl.to("#c3",{opacity:0,scale:.96,duration:.35,ease:"power2.in"},S[3]-.35);
170
+ // s4 lockup
171
+ motes(4,150);
172
+ tl.fromTo("#c4",{opacity:0},{opacity:1,duration:.5},S[3]);
173
+ tl.fromTo("#rays4 .ray",{strokeDashoffset:1},{strokeDashoffset:0,duration:1.6,ease:IO,stagger:{each:.02,from:"edges"}},S[3]+.1);
174
+ tl.fromTo("#rays4",{rotation:0,transformOrigin:"960px 540px"},{rotation:10,duration:4,ease:"none"},S[3]);
175
+ tl.fromTo("#e4",{opacity:0,y:12},{opacity:1,y:0,duration:.8,ease:P},S[3]+.3);
176
+ tl.fromTo("#wm",{opacity:0,letterSpacing:"0.75em",filter:"blur(18px)"},{opacity:1,letterSpacing:"0.12em",filter:"blur(0px)",duration:1.6,ease:X},S[3]+.2);
177
+ tl.fromTo("#wm",{backgroundPosition:"100% 50%"},{backgroundPosition:"0% 50%",duration:1.4,ease:IO},S[3]+1.7);
178
+ tl.fromTo("#hl4a",{scaleX:0},{scaleX:1,duration:1,ease:"power3.inOut"},S[3]+.9);
179
+ tl.fromTo("#hl4b",{scaleX:0},{scaleX:1,duration:1,ease:"power3.inOut"},S[3]+.9);
180
+ tl.fromTo(["#gm1","#gm2"],{scale:0,rotation:-135},{scale:1,rotation:45,duration:.7,ease:"back.out(2)"},S[3]+1.6);
181
+ tl.fromTo("#tg4",{opacity:0,letterSpacing:"1em"},{opacity:1,letterSpacing:"0.5em",duration:1.2,ease:X},S[3]+1.3);
182
+ tl.fromTo("#cta",{opacity:0,y:30},{opacity:1,y:0,duration:.8,ease:P},S[3]+1.8);
183
+ tl.fromTo("#sh4",{xPercent:-120},{xPercent:120,duration:1,ease:IO},S[3]+2.6);
184
+ tl.fromTo("#c4",{scale:1.04},{scale:1,duration:4,ease:"power1.out"},S[3]);
185
+ tl.set({},{},D);
186
+ window.__timelines=window.__timelines||{};window.__timelines["gold-couture"]=tl;
187
+ </script>
188
+ </body>
189
+ </html>
package/lib/catalog/hyperframes/gradient-blobs.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=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:#fff3ea;--fg:#1d1640;--accent:#ff7a59;--accent2:#7b61ff;--sun:#ffc94d;--mint:#45cfa0}
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
+ .blob{position:absolute;filter:blur(2px)}
24
+ .g1{background:radial-gradient(circle at 30% 30%,var(--sun),var(--accent) 70%)}
25
+ .g2{background:radial-gradient(circle at 30% 30%,var(--accent),var(--accent2) 75%)}
26
+ .g3{background:radial-gradient(circle at 30% 30%,var(--mint),var(--accent2) 80%)}
27
+ .soft{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,transparent 40%,color-mix(in srgb,var(--fg) 8%,transparent))}
28
+ .huge{position:absolute;right:90px;font-weight:700;line-height:1;letter-spacing:-.03em;white-space:nowrap}
29
+ .pill{position:absolute;padding:16px 38px;border-radius:60px;font-size:40px;font-weight:700;white-space:nowrap}
30
+ .cover{position:absolute;left:540px;top:960px;width:10px;height:10px;margin:-5px;border-radius:50%;transform:scale(0)}
31
+ .wave{position:absolute;left:90px;right:90px;height:220px;display:flex;align-items:center;gap:12px}
32
+ .wave i{flex:1;border-radius:12px;background:linear-gradient(var(--sun),var(--accent))}
33
+ .chip{position:absolute;right:90px;display:flex;align-items:center;gap:30px;padding:30px 50px 30px 40px;border-radius:120px;background:var(--bg);color:var(--fg);font-size:66px;font-weight:700;white-space:nowrap;box-shadow:0 24px 50px color-mix(in srgb,var(--fg) 35%,transparent)}
34
+ .dot{width:70px;height:70px;border-radius:50%;flex:none}
35
+ .play{position:absolute;left:360px;top:420px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--sun),var(--accent) 70%);box-shadow:0 40px 80px color-mix(in srgb,var(--accent) 45%,transparent)}
36
+ .tri{position:absolute;left:140px;top:105px;width:120px;height:150px;background:var(--bg);clip-path:polygon(0 0,100% 50%,0 100%)}
37
+ .ripple{position:absolute;left:360px;top:420px;width:360px;height:360px;border-radius:50%;border:5px solid var(--accent)}
38
+ </style>
39
+ </head>
40
+ <body>
41
+ <div id="root" data-composition-id="gradient-blobs" data-start="0" data-width="1080" data-height="1920" data-duration="12.4">
42
+ <section id="s1" class="clip scene" data-start="0" data-duration="3">
43
+ <div class="cam" id="c1">
44
+ <div class="blob g1" id="a1" style="left:-220px;top:120px;width:640px;height:640px"></div>
45
+ <div class="blob g2" id="a2" style="left:-260px;top:1180px;width:760px;height:760px"></div>
46
+ <div class="blob g3" id="a3" style="left:640px;top:1500px;width:520px;height:520px"></div>
47
+ <div class="soft"></div>
48
+ <div class="pill" id="p1" style="right:90px;top:380px;background:var(--fg);color:var(--bg)">פודקאסט · עונה 2</div>
49
+ <div class="huge" style="top:520px"><span class="m"><span class="w" id="h1a" style="font-size:300px;color:var(--fg)">פרק</span></span></div>
50
+ <div class="huge" style="top:830px"><span class="m"><span class="w" id="h1b" style="font-size:300px;color:var(--accent2)">חדש</span></span></div>
51
+ <div class="huge" style="top:1140px"><span class="m"><span class="w" id="h1c" style="font-size:230px;color:var(--fg)">באוויר</span></span></div>
52
+ </div>
53
+ <div class="cover" id="cv1" style="background:var(--fg)"></div>
54
+ </section>
55
+ <section id="s2" class="clip scene" data-start="3" data-duration="3.2">
56
+ <div class="cam" id="c2" style="background:var(--fg)">
57
+ <div class="blob g2" id="b1" style="left:540px;top:-200px;width:700px;height:700px;opacity:.5"></div>
58
+ <div class="abs" id="art" style="left:240px;top:260px;width:600px;height:600px;border-radius:60px;overflow:hidden;background:var(--accent2);box-shadow:0 40px 90px color-mix(in srgb,var(--bg) 18%,transparent)">
59
+ <div class="blob g1" id="ab1" style="left:-120px;top:-80px;width:520px;height:520px"></div>
60
+ <div class="blob g3" id="ab2" style="left:260px;top:280px;width:460px;height:460px"></div>
61
+ <p class="abs" id="art1" style="right:50px;bottom:40px;font-size:150px;font-weight:700;color:var(--bg);line-height:1">12</p>
62
+ <p class="abs" id="art2" style="right:56px;top:46px;font-size:40px;font-weight:700;color:var(--bg)">שיחות בוקר</p>
63
+ </div>
64
+ <div class="wave" id="wv" style="top:930px"><i style="height:40px"></i><i style="height:90px"></i><i style="height:140px"></i><i style="height:70px"></i><i style="height:180px"></i><i style="height:120px"></i><i style="height:60px"></i><i style="height:160px"></i><i style="height:200px"></i><i style="height:110px"></i><i style="height:70px"></i><i style="height:150px"></i><i style="height:190px"></i><i style="height:90px"></i><i style="height:130px"></i><i style="height:60px"></i><i style="height:170px"></i><i style="height:110px"></i><i style="height:80px"></i><i style="height:140px"></i><i style="height:60px"></i><i style="height:100px"></i></div>
65
+ <p class="huge" id="t2a" style="top:1220px;font-size:92px;color:var(--bg)">איך לבנות הרגלים</p>
66
+ <p class="huge" id="t2b" style="top:1330px;font-size:92px;color:var(--sun)">שנשארים</p>
67
+ <p class="huge" id="t2c" style="top:1480px;font-size:46px;font-weight:400;color:color-mix(in srgb,var(--bg) 80%,transparent)">שיחה פתוחה על שינוי קטן כל יום</p>
68
+ </div>
69
+ <div class="cover" id="cv2" style="background:var(--accent2)"></div>
70
+ </section>
71
+ <section id="s3" class="clip scene" data-start="6.2" data-duration="3">
72
+ <div class="cam" id="c3" style="background:var(--accent2)">
73
+ <div class="blob g1" id="d1" style="left:-300px;top:1300px;width:800px;height:800px;opacity:.7"></div>
74
+ <div class="blob g3" id="d2" style="left:700px;top:-200px;width:600px;height:600px;opacity:.6"></div>
75
+ <p class="huge" id="t3" style="top:330px;font-size:120px;color:var(--bg)">בפרק הזה:</p>
76
+ <div class="chip" id="k1" style="top:620px"><span class="dot" style="background:var(--accent)"></span><span id="k1t">5 דקות ביום</span></div>
77
+ <div class="chip" id="k2" style="top:880px"><span class="dot" style="background:var(--mint)"></span><span id="k2t">בלי לחץ ובלי אשמה</span></div>
78
+ <div class="chip" id="k3" style="top:1140px"><span class="dot" style="background:var(--sun)"></span><span id="k3t">תוצאות אמיתיות</span></div>
79
+ </div>
80
+ <div class="cover" id="cv3" style="background:var(--bg)"></div>
81
+ </section>
82
+ <section id="s4" class="clip scene" data-start="9.2" data-duration="3.2">
83
+ <div class="cam" id="c4">
84
+ <div class="blob g2" id="e1" style="left:-240px;top:-160px;width:620px;height:620px"></div>
85
+ <div class="blob g3" id="e2" style="left:620px;top:1460px;width:640px;height:640px"></div>
86
+ <div class="blob g1" id="e3" style="left:-200px;top:1650px;width:420px;height:420px"></div>
87
+ <div class="ripple" id="rp1"></div><div class="ripple" id="rp2"></div>
88
+ <div class="play" id="pl"><div class="tri"></div></div>
89
+ <p class="huge" id="t4a" style="right:0;left:0;text-align:center;top:900px;font-size:140px;color:var(--fg)">האזינו עכשיו</p>
90
+ <p class="huge" id="t4b" style="right:0;left:0;text-align:center;top:1090px;font-size:50px;font-weight:400;color:var(--fg)">בכל אפליקציות הפודקאסטים</p>
91
+ <div class="pill" id="p4" style="right:50%;top:1250px;transform:translateX(50%);background:var(--accent2);color:var(--bg)">שיחות בוקר</div>
92
+ </div>
93
+ </section>
94
+ </div>
95
+ <script>
96
+ const tl=gsap.timeline({paused:true});
97
+ const S=[0,3,6.2,9.2,12.4],D=12.4;
98
+ const X="expo.out",P="power3.out";
99
+ const R1="58% 42% 63% 37% / 41% 56% 44% 59%",R2="38% 62% 35% 65% / 62% 38% 62% 38%",R3="50% 50% 50% 50% / 50% 50% 50% 50%";
100
+ function morph(sels,i){sels.forEach((s,k)=>{tl.fromTo(s,{borderRadius:k%2?R2:R1,rotation:0,x:0,y:0},{borderRadius:k%2?R1:R2,rotation:k%2?-40:40,x:k%2?-50:60,y:k%2?40:-50,duration:S[i+1]-S[i],ease:"sine.inOut"},S[i]);});}
101
+ function cover(cv,i){tl.fromTo(cv,{scale:0},{scale:460,duration:.55,ease:"power3.in"},S[i+1]-.55);}
102
+ // s1
103
+ morph(["#a1","#a2","#a3"],0);
104
+ tl.fromTo("#c1",{scale:1.1},{scale:1,duration:3,ease:"power2.out"},S[0]);
105
+ tl.fromTo(["#a1","#a2","#a3"],{scale:0},{scale:1,duration:1,ease:"back.out(1.3)",stagger:.12},S[0]);
106
+ tl.fromTo("#p1",{scale:0,rotation:-8},{scale:1,rotation:0,duration:.6,ease:"back.out(2)"},S[0]+.3);
107
+ tl.fromTo(["#h1a","#h1b","#h1c"],{yPercent:110,rotation:6},{yPercent:0,rotation:0,duration:.8,ease:X,stagger:.14},S[0]+.4);
108
+ tl.to("#h1b",{scale:1.06,transformOrigin:"100% 50%",duration:.5,yoyo:true,repeat:1,ease:"sine.inOut"},S[0]+1.4);
109
+ cover("#cv1",0);
110
+ // s2
111
+ morph(["#b1","#ab1","#ab2"],1);
112
+ tl.fromTo("#art",{y:120,rotation:-6,scale:.8,opacity:0},{y:0,rotation:0,scale:1,opacity:1,duration:1,ease:X},S[1]+.05);
113
+ tl.to("#art",{rotation:2,y:-16,duration:2.1,ease:"sine.inOut"},S[1]+1.05);
114
+ tl.fromTo(["#art2","#art1"],{opacity:0,y:30},{opacity:1,y:0,duration:.6,ease:P,stagger:.15},S[1]+.5);
115
+ tl.fromTo("#wv i",{scaleY:.1},{scaleY:1,duration:.5,ease:"back.out(2)",stagger:{each:.025,from:"center"}},S[1]+.4);
116
+ tl.to("#wv i",{scaleY:(k)=>[.4,1.2,.6,1,.3,.9,1.1,.5][k%8],duration:.35,ease:"sine.inOut",stagger:{each:.02,from:"center",repeat:4,yoyo:true}},S[1]+.95);
117
+ tl.fromTo(["#t2a","#t2b"],{opacity:0,x:-80},{opacity:1,x:0,duration:.8,ease:X,stagger:.15},S[1]+.7);
118
+ tl.fromTo("#t2c",{opacity:0},{opacity:1,duration:.6},S[1]+1.2);
119
+ cover("#cv2",1);
120
+ // s3
121
+ morph(["#d1","#d2"],2);
122
+ tl.fromTo("#t3",{opacity:0,y:50},{opacity:1,y:0,duration:.7,ease:X},S[2]+.1);
123
+ [["#k1",-1],["#k2",1],["#k3",-1]].forEach(([k,d],i)=>{tl.fromTo(k,{x:d*900,rotation:d*8},{x:0,rotation:d*-2,duration:.8,ease:X},S[2]+.35+i*.2);tl.to(k,{y:d*14,rotation:0,duration:1.4,ease:"sine.inOut"},S[2]+1.3+i*.1);});
124
+ cover("#cv3",2);
125
+ // s4
126
+ morph(["#e1","#e2","#e3"],3);
127
+ tl.fromTo("#c4",{scale:1.08},{scale:1,duration:3.2,ease:"power2.out"},S[3]);
128
+ tl.fromTo("#pl",{scale:0,rotation:-120},{scale:1,rotation:0,duration:.9,ease:"back.out(1.6)"},S[3]+.15);
129
+ tl.fromTo(["#rp1","#rp2"],{scale:1,opacity:.9},{scale:1.9,opacity:0,duration:1.1,ease:"power1.out",stagger:{each:.45,repeat:1}},S[3]+.5);
130
+ tl.fromTo("#t4a",{opacity:0,y:60},{opacity:1,y:0,duration:.8,ease:X},S[3]+.45);
131
+ tl.fromTo("#t4b",{opacity:0},{opacity:1,duration:.6},S[3]+.8);
132
+ tl.fromTo("#p4",{scale:0,xPercent:50,x:0},{scale:1,xPercent:50,x:0,duration:.6,ease:"back.out(2)"},S[3]+1.05);
133
+ tl.to("#pl",{scale:1.06,duration:.4,yoyo:true,repeat:3,ease:"sine.inOut"},S[3]+1.4);
134
+ tl.set({},{},D);
135
+ window.__timelines=window.__timelines||{};window.__timelines["gradient-blobs"]=tl;
136
+ </script>
137
+ </body>
138
+ </html>
package/lib/catalog/hyperframes/graduation-day.html ADDED
@@ -0,0 +1,133 @@
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:#13204a;--fg:#f8f4e8;--gold:#f2c14e;--cap:#0a1130;--rose:#d8505a}
14
+ *{box-sizing:border-box;margin:0;padding:0}
15
+ html,body{width:1920px;height:1080px;overflow:hidden;background:var(--bg)}
16
+ body{font-family:"Heebo",Arial,sans-serif;-webkit-font-smoothing:antialiased}
17
+ #root{position:relative;width:1920px;height:1080px;overflow:hidden;background:var(--bg);color:var(--fg);direction:rtl;font-family:"Heebo",Arial,sans-serif}
18
+ .scene{position:absolute;inset:0;overflow:hidden}
19
+ .cam,.layer{position:absolute;inset:0}
20
+ .abs{position:absolute}
21
+ .m{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .08em}
22
+ .w{display:inline-block;white-space:nowrap}
23
+ #root{background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--bg) 75%,var(--fg)),var(--bg) 70%)}
24
+ .t{position:absolute;white-space:nowrap;line-height:1.15;color:var(--fg)}
25
+ .c{left:0;right:0;text-align:center}
26
+ .cf{position:absolute;width:16px;height:28px;border-radius:3px;opacity:.85}
27
+ .cw{position:absolute;width:200px;height:150px}
28
+ .cap{width:200px;height:150px;overflow:visible}
29
+ .cb{fill:var(--cap)}.ct{fill:var(--cap);stroke:var(--gold);stroke-width:2}
30
+ .tz{fill:none;stroke:var(--gold);stroke-width:4}.tq{fill:var(--gold)}
31
+ .dip{position:absolute;left:360px;top:190px;width:1200px;height:700px;background:var(--fg);box-shadow:0 30px 80px color-mix(in srgb,var(--cap) 60%,transparent)}
32
+ .dip::before{content:"";position:absolute;inset:26px;border:6px double var(--gold)}
33
+ .dip .t{color:var(--cap)}
34
+ .roll{position:absolute;top:170px;width:70px;height:740px;border-radius:35px;background:linear-gradient(90deg,color-mix(in srgb,var(--fg) 70%,var(--cap)),var(--fg),color-mix(in srgb,var(--fg) 70%,var(--cap)))}
35
+ .seal{position:absolute;left:110px;top:470px;width:150px;height:150px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 12px color-mix(in srgb,var(--gold) 70%,var(--rose))}
36
+ .rb{position:absolute;top:580px;width:40px;height:110px;background:var(--rose);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
37
+ .sig{position:absolute;right:120px;top:590px;width:360px;height:4px;background:var(--cap)}
38
+ .m{position:absolute;overflow:hidden}
39
+ .sm{top:280px;width:400px;height:190px}
40
+ .sn{text-align:center;font-size:150px;font-weight:700;line-height:190px;color:var(--gold);white-space:nowrap}
41
+ .sl{top:490px;width:400px;text-align:center;font-size:48px}
42
+ .bt{position:absolute;top:620px;width:400px;height:24px;border-radius:12px;background:color-mix(in srgb,var(--fg) 15%,transparent)}
43
+ .bf{position:absolute;top:620px;height:24px;border-radius:12px;background:var(--gold)}
44
+ .cta{position:absolute;left:660px;width:600px;top:640px;height:140px;border-radius:70px;background:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 20px 60px color-mix(in srgb,var(--gold) 40%,transparent)}
45
+ .cta p{font-size:60px;font-weight:700;color:var(--cap);white-space:nowrap}
46
+ </style>
47
+ </head>
48
+ <body>
49
+ <div id="root" data-composition-id="graduation-day" data-start="0" data-width="1920" data-height="1080" data-duration="15">
50
+ <section id="s1" class="clip scene" data-start="0" data-duration="3.8">
51
+ <div class="cam" id="c1">
52
+ <div class="layer" id="cfl"><i class="cf" style="left:20px;top:40px;background:var(--gold);transform:rotate(0deg)"></i><i class="cf" style="left:253px;top:177px;background:var(--rose);transform:rotate(47deg)"></i><i class="cf" style="left:486px;top:314px;background:var(--fg);transform:rotate(4deg)"></i><i class="cf" style="left:719px;top:451px;background:var(--gold);transform:rotate(51deg)"></i><i class="cf" style="left:952px;top:588px;background:var(--rose);transform:rotate(8deg)"></i><i class="cf" style="left:1185px;top:725px;background:var(--fg);transform:rotate(55deg)"></i><i class="cf" style="left:1418px;top:862px;background:var(--gold);transform:rotate(12deg)"></i><i class="cf" style="left:1651px;top:99px;background:var(--rose);transform:rotate(59deg)"></i><i class="cf" style="left:1884px;top:236px;background:var(--fg);transform:rotate(16deg)"></i><i class="cf" style="left:237px;top:373px;background:var(--gold);transform:rotate(63deg)"></i><i class="cf" style="left:470px;top:510px;background:var(--rose);transform:rotate(20deg)"></i><i class="cf" style="left:703px;top:647px;background:var(--fg);transform:rotate(67deg)"></i><i class="cf" style="left:936px;top:784px;background:var(--gold);transform:rotate(24deg)"></i><i class="cf" style="left:1169px;top:921px;background:var(--rose);transform:rotate(71deg)"></i><i class="cf" style="left:1402px;top:158px;background:var(--fg);transform:rotate(28deg)"></i><i class="cf" style="left:1635px;top:295px;background:var(--gold);transform:rotate(75deg)"></i><i class="cf" style="left:1868px;top:432px;background:var(--rose);transform:rotate(32deg)"></i><i class="cf" style="left:221px;top:569px;background:var(--fg);transform:rotate(79deg)"></i><i class="cf" style="left:454px;top:706px;background:var(--gold);transform:rotate(36deg)"></i><i class="cf" style="left:687px;top:843px;background:var(--rose);transform:rotate(83deg)"></i><i class="cf" style="left:920px;top:80px;background:var(--fg);transform:rotate(40deg)"></i><i class="cf" style="left:1153px;top:217px;background:var(--gold);transform:rotate(87deg)"></i><i class="cf" style="left:1386px;top:354px;background:var(--rose);transform:rotate(44deg)"></i><i class="cf" style="left:1619px;top:491px;background:var(--fg);transform:rotate(1deg)"></i><i class="cf" style="left:1852px;top:628px;background:var(--gold);transform:rotate(48deg)"></i><i class="cf" style="left:205px;top:765px;background:var(--rose);transform:rotate(5deg)"></i><i class="cf" style="left:438px;top:902px;background:var(--fg);transform:rotate(52deg)"></i><i class="cf" style="left:671px;top:139px;background:var(--gold);transform:rotate(9deg)"></i><i class="cf" style="left:904px;top:276px;background:var(--rose);transform:rotate(56deg)"></i><i class="cf" style="left:1137px;top:413px;background:var(--fg);transform:rotate(13deg)"></i><i class="cf" style="left:1370px;top:550px;background:var(--gold);transform:rotate(60deg)"></i><i class="cf" style="left:1603px;top:687px;background:var(--rose);transform:rotate(17deg)"></i><i class="cf" style="left:1836px;top:824px;background:var(--fg);transform:rotate(64deg)"></i><i class="cf" style="left:189px;top:61px;background:var(--gold);transform:rotate(21deg)"></i></div>
53
+ <p class="t c" id="sb1" style="top:380px;font-size:64px;font-weight:700;color:var(--gold)">מחזור 2027</p>
54
+ <h1 class="t c" id="t1" style="top:470px;font-size:210px;font-weight:700">סיימנו!</h1>
55
+ <p class="t c" id="sb1b" style="top:760px;font-size:52px">כל הכבוד לבוגרות ולבוגרים</p>
56
+ <div class="cw" id="cp0" style="left:150px;top:820px"><svg class="cap" viewBox="0 0 160 120"><path class="cb" d="M32 50v36q48 24 96 0V50z"/><path class="ct" d="M0 40L80 4l80 36-80 36z"/><path class="tz" d="M80 40l50 18v38"/><rect class="tq" x="124" y="92" width="12" height="22" rx="4"/></svg></div><div class="cw" id="cp1" style="left:420px;top:820px"><svg class="cap" viewBox="0 0 160 120"><path class="cb" d="M32 50v36q48 24 96 0V50z"/><path class="ct" d="M0 40L80 4l80 36-80 36z"/><path class="tz" d="M80 40l50 18v38"/><rect class="tq" x="124" y="92" width="12" height="22" rx="4"/></svg></div><div class="cw" id="cp2" style="left:690px;top:820px"><svg class="cap" viewBox="0 0 160 120"><path class="cb" d="M32 50v36q48 24 96 0V50z"/><path class="ct" d="M0 40L80 4l80 36-80 36z"/><path class="tz" d="M80 40l50 18v38"/><rect class="tq" x="124" y="92" width="12" height="22" rx="4"/></svg></div><div class="cw" id="cp3" style="left:1000px;top:820px"><svg class="cap" viewBox="0 0 160 120"><path class="cb" d="M32 50v36q48 24 96 0V50z"/><path class="ct" d="M0 40L80 4l80 36-80 36z"/><path class="tz" d="M80 40l50 18v38"/><rect class="tq" x="124" y="92" width="12" height="22" rx="4"/></svg></div><div class="cw" id="cp4" style="left:1260px;top:820px"><svg class="cap" viewBox="0 0 160 120"><path class="cb" d="M32 50v36q48 24 96 0V50z"/><path class="ct" d="M0 40L80 4l80 36-80 36z"/><path class="tz" d="M80 40l50 18v38"/><rect class="tq" x="124" y="92" width="12" height="22" rx="4"/></svg></div><div class="cw" id="cp5" style="left:1520px;top:820px"><svg class="cap" viewBox="0 0 160 120"><path class="cb" d="M32 50v36q48 24 96 0V50z"/><path class="ct" d="M0 40L80 4l80 36-80 36z"/><path class="tz" d="M80 40l50 18v38"/><rect class="tq" x="124" y="92" width="12" height="22" rx="4"/></svg></div><div class="cw" id="cp6" style="left:1740px;top:820px"><svg class="cap" viewBox="0 0 160 120"><path class="cb" d="M32 50v36q48 24 96 0V50z"/><path class="ct" d="M0 40L80 4l80 36-80 36z"/><path class="tz" d="M80 40l50 18v38"/><rect class="tq" x="124" y="92" width="12" height="22" rx="4"/></svg></div>
57
+ </div>
58
+ </section>
59
+ <section id="s2" class="clip scene" data-start="3.8" data-duration="3.8">
60
+ <div class="cam" id="c2">
61
+ <div class="dip" id="dip">
62
+ <p class="t c" id="dp1" style="top:80px;font-size:88px;font-weight:700">תעודת סיום</p>
63
+ <p class="t c" id="dp2" style="top:210px;font-size:42px">מוענקת בזאת ל</p>
64
+ <p class="t c" id="dp3" style="top:270px;font-size:120px;font-weight:700;color:var(--rose)">יעל כהן</p>
65
+ <p class="t c" id="dp4" style="top:430px;font-size:50px">תואר ראשון במדעי המחשב</p>
66
+ <i class="rb" style="left:140px"></i><i class="rb" style="left:190px"></i><i class="seal" id="seal"></i>
67
+ <i class="sig"></i><p class="t" id="dp5" style="right:200px;top:610px;font-size:34px">נשיאת המכללה</p>
68
+ </div>
69
+ <i class="roll" id="rl" style="left:325px"></i><i class="roll" id="rr" style="left:1525px"></i>
70
+ </div>
71
+ </section>
72
+ <section id="s3" class="clip scene" data-start="7.6" data-duration="3.8">
73
+ <div class="cam" id="c3">
74
+ <h2 class="t c" id="t3" style="top:110px;font-size:84px;font-weight:700">המספרים של המחזור</h2>
75
+ <div class="m sm" style="left:1240px"><p class="sn" id="sn0">1,240</p></div><p class="t sl" id="sl0" style="left:1240px">בוגרים ובוגרות</p><i class="bt" style="left:1240px"></i><i class="bf" id="bf0" style="left:1320px;width:320px"></i><div class="m sm" style="left:760px"><p class="sn" id="sn1">94%</p></div><p class="t sl" id="sl1" style="left:760px">השתלבו בעבודה</p><i class="bt" style="left:760px"></i><i class="bf" id="bf1" style="left:784px;width:376px"></i><div class="m sm" style="left:280px"><p class="sn" id="sn2">38</p></div><p class="t sl" id="sl2" style="left:280px">תוכניות לימוד</p><i class="bt" style="left:280px"></i><i class="bf" id="bf2" style="left:460px;width:220.00000000000003px"></i>
76
+ <p class="t c" id="sb3" style="top:760px;font-size:46px;color:color-mix(in srgb,var(--fg) 70%,var(--bg))">נתוני המכללה לשנת הלימודים האחרונה</p>
77
+ </div>
78
+ </section>
79
+ <section id="s4" class="clip scene" data-start="11.4" data-duration="3.6">
80
+ <div class="cam" id="c4">
81
+ <div class="cw" id="cpx" style="left:860px;top:60px"><svg class="cap" viewBox="0 0 160 120"><path class="cb" d="M32 50v36q48 24 96 0V50z"/><path class="ct" d="M0 40L80 4l80 36-80 36z"/><path class="tz" d="M80 40l50 18v38"/><rect class="tq" x="124" y="92" width="12" height="22" rx="4"/></svg></div>
82
+ <p class="t c" id="e4" style="top:250px;font-size:56px;font-weight:700;color:var(--gold)">מכללת אופקים</p>
83
+ <h2 class="t c" id="t4" style="top:330px;font-size:104px;font-weight:700">ההרשמה לשנה הבאה נפתחה</h2>
84
+ <p class="t c" id="sb4" style="top:490px;font-size:52px">מלגות ומסלולי לימוד גמישים</p>
85
+ <div class="cta" id="cta"><p id="ctat">להרשמה עכשיו</p></div>
86
+ </div>
87
+ </section>
88
+ </div>
89
+ <script>
90
+ const tl=gsap.timeline({paused:true});
91
+ const S=[0,3.8,7.6,11.4,15],D=15;
92
+ const X="expo.out",P="power3.out",B="back.out(1.8)";
93
+ const CAPS=[[-740,-30],[-800,20],[-700,-12],[-790,28],[-720,-24],[-800,14],[-700,-18]];
94
+ function fadeOut(i){tl.to("#c"+(i+1),{opacity:0,duration:.4,ease:"power1.in"},S[i+1]-.4);}
95
+ // s1 caps toss
96
+ tl.fromTo("#c1",{opacity:0},{opacity:1,duration:.3},S[0]);
97
+ tl.fromTo("#cfl",{y:-80,opacity:0},{y:60,opacity:1,duration:3.3,ease:"none"},S[0]);
98
+ tl.fromTo("#sb1",{opacity:0,y:20},{opacity:1,y:0,duration:.5,ease:P},S[0]+.2);
99
+ tl.fromTo("#t1",{opacity:0,scale:.6},{opacity:1,scale:1,duration:.7,ease:B},S[0]+.3);
100
+ tl.fromTo("#sb1b",{opacity:0,y:20},{opacity:1,y:0,duration:.5,ease:P},S[0]+1);
101
+ CAPS.forEach(([y,r],k)=>{const a=S[0]+.5+k*.08;
102
+ tl.fromTo("#cp"+k,{y:420,rotation:0},{y:y,rotation:r*6,duration:1.3,ease:"power2.out"},a);
103
+ tl.to("#cp"+k,{y:y+110,rotation:r*7,duration:1.4,ease:"sine.inOut"},a+1.3);});
104
+ fadeOut(0);
105
+ // s2 diploma unrolls
106
+ tl.fromTo("#c2",{opacity:0},{opacity:1,duration:.3},S[1]);
107
+ tl.fromTo("#dip",{clipPath:"inset(0% 50% 0% 50%)"},{clipPath:"inset(0% 0% 0% 0%)",duration:1.3,ease:"power2.inOut"},S[1]+.3);
108
+ tl.fromTo("#rl",{x:600},{x:0,duration:1.3,ease:"power2.inOut"},S[1]+.3);
109
+ tl.fromTo("#rr",{x:-600},{x:0,duration:1.3,ease:"power2.inOut"},S[1]+.3);
110
+ tl.fromTo(["#dp1","#dp2","#dp3","#dp4"],{opacity:0,y:20},{opacity:1,y:0,duration:.5,ease:P,stagger:.12},S[1]+1.3);
111
+ tl.fromTo("#seal",{scale:0,rotation:-120},{scale:1,rotation:0,duration:.6,ease:B},S[1]+1.9);
112
+ tl.fromTo("#dip .rb",{scaleY:0,transformOrigin:"50% 0%"},{scaleY:1,duration:.4,ease:P,stagger:.1},S[1]+2.1);
113
+ tl.fromTo("#dp5",{opacity:0},{opacity:1,duration:.4},S[1]+2.3);
114
+ fadeOut(1);
115
+ // s3 stats
116
+ tl.fromTo("#c3",{opacity:0},{opacity:1,duration:.3},S[2]);
117
+ tl.fromTo("#t3",{opacity:0,y:-30},{opacity:1,y:0,duration:.6,ease:P},S[2]+.1);
118
+ tl.fromTo(".sn",{yPercent:100},{yPercent:0,duration:.7,ease:X,stagger:.18},S[2]+.4);
119
+ tl.fromTo(".sl",{opacity:0},{opacity:1,duration:.5,stagger:.18},S[2]+.7);
120
+ tl.fromTo(".bf",{scaleX:0,transformOrigin:"100% 50%"},{scaleX:1,duration:1.1,ease:"power2.out",stagger:.18},S[2]+.9);
121
+ tl.fromTo("#sb3",{opacity:0},{opacity:1,duration:.5},S[2]+1.8);
122
+ fadeOut(2);
123
+ // s4 enroll CTA
124
+ tl.fromTo("#c4",{opacity:0},{opacity:1,duration:.3},S[3]);
125
+ tl.fromTo("#cpx",{y:-200,rotation:-40},{y:0,rotation:-8,duration:.9,ease:"bounce.out"},S[3]+.1);
126
+ tl.fromTo(["#e4","#t4","#sb4"],{opacity:0,y:30},{opacity:1,y:0,duration:.6,ease:P,stagger:.15},S[3]+.3);
127
+ tl.fromTo("#cta",{scale:.5,opacity:0},{scale:1,opacity:1,duration:.6,ease:B},S[3]+1.1);
128
+ tl.to("#cta",{scale:1.06,duration:.35,yoyo:true,repeat:1,ease:"sine.inOut"},S[3]+2);
129
+ tl.set({},{},D);
130
+ window.__timelines=window.__timelines||{};window.__timelines["graduation-day"]=tl;
131
+ </script>
132
+ </body>
133
+ </html>