move.gl 0.0.1 → 0.0.2

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 (463) hide show
  1. package/README.md +185 -11
  2. package/dist/LICENSE +21 -0
  3. package/dist/README.md +212 -0
  4. package/dist/css/move.gl.css +43859 -0
  5. package/dist/css/move.gl.min.css +19 -0
  6. package/dist/js/index.cjs +1171 -0
  7. package/dist/js/index.cjs.map +1 -0
  8. package/dist/js/index.d.cts +184 -0
  9. package/dist/js/index.d.ts +184 -0
  10. package/dist/js/index.mjs +1135 -0
  11. package/dist/js/index.mjs.map +1 -0
  12. package/dist/package.json +68 -0
  13. package/{scss → dist/scss}/classes/_animations.scss +33 -14
  14. package/dist/scss/classes/_controls.scss +314 -0
  15. package/dist/scss/classes/_effects.scss +283 -0
  16. package/dist/scss/classes/_index.scss +28 -0
  17. package/dist/scss/classes/_loaders.scss +779 -0
  18. package/dist/scss/classes/_transforms.scss +138 -0
  19. package/dist/scss/classes/_transitions.scss +264 -0
  20. package/{scss → dist/scss}/dev/_deprecation.scss +6 -3
  21. package/{scss → dist/scss}/dev/_modules.scss +5 -6
  22. package/dist/scss/docs.scss +2344 -0
  23. package/dist/scss/docs.scss.bak +3133 -0
  24. package/dist/scss/functions/_index.scss +22 -0
  25. package/dist/scss/functions/scenes/_bubble.scss +32 -0
  26. package/dist/scss/functions/scenes/_index.scss +21 -0
  27. package/dist/scss/index.scss +17 -0
  28. package/dist/scss/maps/_controls.scss +85 -0
  29. package/dist/scss/maps/_index.scss +22 -0
  30. package/{scss → dist/scss}/mixins/_accessibility.scss +24 -3
  31. package/{scss → dist/scss}/mixins/_boot.scss +4 -4
  32. package/dist/scss/mixins/_index.scss +41 -0
  33. package/dist/scss/mixins/_screensaver.scss +228 -0
  34. package/dist/scss/mixins/_shape.scss +315 -0
  35. package/dist/scss/mixins/animations/_base.scss +403 -0
  36. package/dist/scss/mixins/animations/_beat.scss +137 -0
  37. package/{scss → dist/scss}/mixins/animations/_blink.scss +60 -52
  38. package/dist/scss/mixins/animations/_bounce.scss +306 -0
  39. package/{scss → dist/scss}/mixins/animations/_elastic.scss +26 -22
  40. package/dist/scss/mixins/animations/_fade.scss +393 -0
  41. package/{scss → dist/scss}/mixins/animations/_flash.scss +53 -61
  42. package/dist/scss/mixins/animations/_flip.scss +251 -0
  43. package/{scss → dist/scss}/mixins/animations/_float.scss +47 -32
  44. package/{scss → dist/scss}/mixins/animations/_glow.scss +69 -58
  45. package/dist/scss/mixins/animations/_heartbeat.scss +195 -0
  46. package/dist/scss/mixins/animations/_hinge.scss +118 -0
  47. package/dist/scss/mixins/animations/_index.scss +97 -0
  48. package/dist/scss/mixins/animations/_jello.scss +123 -0
  49. package/dist/scss/mixins/animations/_jiggle.scss +162 -0
  50. package/dist/scss/mixins/animations/_lightspeed.scss +135 -0
  51. package/{scss → dist/scss}/mixins/animations/_nod.scss +57 -65
  52. package/dist/scss/mixins/animations/_pop.scss +153 -0
  53. package/dist/scss/mixins/animations/_pulse.scss +275 -0
  54. package/{scss → dist/scss}/mixins/animations/_ripple.scss +47 -55
  55. package/dist/scss/mixins/animations/_roll.scss +217 -0
  56. package/dist/scss/mixins/animations/_rotate.scss +728 -0
  57. package/dist/scss/mixins/animations/_rubber.scss +115 -0
  58. package/dist/scss/mixins/animations/_scale.scss +382 -0
  59. package/dist/scss/mixins/animations/_shake.scss +233 -0
  60. package/dist/scss/mixins/animations/_slide.scss +501 -0
  61. package/dist/scss/mixins/animations/_spin.scss +322 -0
  62. package/{scss → dist/scss}/mixins/animations/_sway.scss +32 -49
  63. package/{scss → dist/scss}/mixins/animations/_swing.scss +47 -49
  64. package/{scss → dist/scss}/mixins/animations/_tada.scss +44 -42
  65. package/{scss → dist/scss}/mixins/animations/_twist.scss +40 -55
  66. package/{scss → dist/scss}/mixins/animations/_wave.scss +36 -53
  67. package/dist/scss/mixins/animations/_wobble.scss +283 -0
  68. package/dist/scss/mixins/animations/_zoom.scss +394 -0
  69. package/{scss/mixins/mouse → dist/scss/mixins/controls}/_cursor.scss +60 -39
  70. package/dist/scss/mixins/controls/_hover.scss +625 -0
  71. package/dist/scss/mixins/controls/_index.scss +30 -0
  72. package/dist/scss/mixins/controls/_keyboard.scss +300 -0
  73. package/{scss/mixins/mouse → dist/scss/mixins/controls}/_pointer.scss +81 -72
  74. package/dist/scss/mixins/controls/_scroll.scss +460 -0
  75. package/{scss/mixins/scroll → dist/scss/mixins/controls}/_scrollbar.scss +50 -16
  76. package/dist/scss/mixins/controls/_selection.scss +208 -0
  77. package/dist/scss/mixins/controls/_touch.scss +401 -0
  78. package/dist/scss/mixins/effects/_blend.scss +128 -0
  79. package/dist/scss/mixins/effects/_filter.scss +470 -0
  80. package/dist/scss/mixins/effects/_focus.scss +83 -0
  81. package/dist/scss/mixins/effects/_gradient.scss +130 -0
  82. package/dist/scss/mixins/effects/_index.scss +28 -0
  83. package/dist/scss/mixins/effects/_mask.scss +76 -0
  84. package/dist/scss/mixins/effects/_opacity.scss +376 -0
  85. package/dist/scss/mixins/effects/_shadow.scss +429 -0
  86. package/dist/scss/mixins/keyframes/_base.scss +199 -0
  87. package/dist/scss/mixins/keyframes/_index.scss +24 -0
  88. package/dist/scss/mixins/keyframes/animations/_beat.scss +280 -0
  89. package/dist/scss/mixins/keyframes/animations/_blink.scss +82 -0
  90. package/dist/scss/mixins/keyframes/animations/_bounce.scss +292 -0
  91. package/dist/scss/mixins/keyframes/animations/_fade.scss +311 -0
  92. package/dist/scss/mixins/keyframes/animations/_flash.scss +165 -0
  93. package/dist/scss/mixins/keyframes/animations/_flip.scss +266 -0
  94. package/{scss/mixins → dist/scss/mixins/keyframes}/animations/_index.scss +19 -10
  95. package/dist/scss/mixins/keyframes/animations/_jiggle.scss +85 -0
  96. package/dist/scss/mixins/keyframes/animations/_lightspeed.scss +73 -0
  97. package/dist/scss/mixins/keyframes/animations/_nod.scss +79 -0
  98. package/dist/scss/mixins/keyframes/animations/_pop.scss +78 -0
  99. package/dist/scss/mixins/keyframes/animations/_pulse.scss +225 -0
  100. package/dist/scss/mixins/keyframes/animations/_ripple.scss +94 -0
  101. package/dist/scss/mixins/keyframes/animations/_roll.scss +124 -0
  102. package/dist/scss/mixins/keyframes/animations/_rotate.scss +360 -0
  103. package/dist/scss/mixins/keyframes/animations/_rubber.scss +81 -0
  104. package/dist/scss/mixins/keyframes/animations/_scale.scss +308 -0
  105. package/dist/scss/mixins/keyframes/animations/_shake.scss +270 -0
  106. package/dist/scss/mixins/keyframes/animations/_slide.scss +345 -0
  107. package/dist/scss/mixins/keyframes/animations/_spin.scss +270 -0
  108. package/dist/scss/mixins/keyframes/animations/_sway.scss +83 -0
  109. package/dist/scss/mixins/keyframes/animations/_twist.scss +89 -0
  110. package/dist/scss/mixins/keyframes/animations/_wave.scss +90 -0
  111. package/dist/scss/mixins/keyframes/animations/_wobble.scss +293 -0
  112. package/dist/scss/mixins/keyframes/animations/_zoom.scss +345 -0
  113. package/dist/scss/mixins/loaders/_bars.scss +128 -0
  114. package/dist/scss/mixins/loaders/_base.scss +39 -0
  115. package/dist/scss/mixins/loaders/_bubble.scss +395 -0
  116. package/dist/scss/mixins/loaders/_circle.scss +456 -0
  117. package/dist/scss/mixins/loaders/_dots.scss +248 -0
  118. package/dist/scss/mixins/loaders/_graph.scss +542 -0
  119. package/dist/scss/mixins/loaders/_index.scss +77 -0
  120. package/dist/scss/mixins/loaders/_line.scss +471 -0
  121. package/dist/scss/mixins/loaders/_objects.scss +563 -0
  122. package/dist/scss/mixins/loaders/_progress.scss +477 -0
  123. package/dist/scss/mixins/loaders/_rect.scss +480 -0
  124. package/dist/scss/mixins/loaders/_rings.scss +377 -0
  125. package/dist/scss/mixins/loaders/_skeleton.scss +461 -0
  126. package/dist/scss/mixins/loaders/_special.scss +611 -0
  127. package/dist/scss/mixins/loaders/_spinner.scss +175 -0
  128. package/dist/scss/mixins/loaders/_text.scss +446 -0
  129. package/{scss → dist/scss}/mixins/transforms/_flip.scss +16 -18
  130. package/dist/scss/mixins/transforms/_index.scss +28 -0
  131. package/dist/scss/mixins/transforms/_matrix.scss +18 -0
  132. package/{scss → dist/scss}/mixins/transforms/_perspective.scss +18 -1
  133. package/{scss → dist/scss}/mixins/transforms/_rotate.scss +9 -14
  134. package/{scss → dist/scss}/mixins/transforms/_scale.scss +16 -1
  135. package/{scss → dist/scss}/mixins/transforms/_skew.scss +16 -2
  136. package/{scss → dist/scss}/mixins/transforms/_translate.scss +16 -2
  137. package/dist/scss/mixins/transitions/_index.scss +22 -0
  138. package/dist/scss/mixins/transitions/_transition.scss +43 -0
  139. package/dist/scss/variables/_animations.scss +300 -0
  140. package/dist/scss/variables/_controls.scss +178 -0
  141. package/dist/scss/variables/_effects.scss +87 -0
  142. package/dist/scss/variables/_index.scss +27 -0
  143. package/dist/scss/variables/_keyframes.scss +28 -0
  144. package/dist/scss/variables/_loaders.scss +75 -0
  145. package/dist/scss/variables/_transforms.scss +85 -0
  146. package/dist/scss/variables/_transitions.scss +80 -0
  147. package/dist/ts/Draggable.ts +143 -0
  148. package/dist/ts/Gesture.ts +226 -0
  149. package/dist/ts/Keyboard.ts +195 -0
  150. package/dist/ts/LoaderManager.ts +662 -0
  151. package/dist/ts/Screensaver.ts +192 -0
  152. package/dist/ts/VideoOverlay.ts +205 -0
  153. package/dist/ts/demo.ts +1108 -0
  154. package/dist/ts/index.ts +58 -0
  155. package/package.json +90 -53
  156. package/src/html/_base.html +138 -0
  157. package/src/html/base.html +147 -0
  158. package/src/html/core-concepts.html +282 -0
  159. package/src/html/demo_base.html +171 -0
  160. package/src/html/demo_draggable.html +250 -0
  161. package/src/html/demo_gesture.html +264 -0
  162. package/src/html/demo_keyboard.html +224 -0
  163. package/src/html/demo_screensaver.html +258 -0
  164. package/src/html/demo_video_overlay.html +291 -0
  165. package/src/html/getting-started.html +242 -0
  166. package/src/html/index.html +400 -0
  167. package/src/html/keyboard.html +14 -0
  168. package/src/html/partials/_demo_links.html +21 -0
  169. package/src/html/partials/_footer.html +18 -0
  170. package/src/html/partials/_head.html +21 -0
  171. package/src/html/partials/_nav.html +84 -0
  172. package/src/html/partials/_theme_toggle.html +11 -0
  173. package/src/html/screensaver.html +20 -0
  174. package/src/html/test_animations.html +813 -0
  175. package/src/html/test_attention.html +281 -0
  176. package/src/html/test_bounce.html +201 -0
  177. package/src/html/test_effects.html +1348 -0
  178. package/src/html/test_fade.html +213 -0
  179. package/src/html/test_flip.html +208 -0
  180. package/src/html/test_keyframes.html +415 -0
  181. package/src/html/test_loaders.html +1489 -0
  182. package/src/html/test_mouse.html +516 -0
  183. package/src/html/test_overview.html +1444 -0
  184. package/src/html/test_pulse.html +212 -0
  185. package/src/html/test_scale.html +204 -0
  186. package/src/html/test_shake.html +232 -0
  187. package/src/html/test_slide.html +212 -0
  188. package/src/html/test_special.html +257 -0
  189. package/src/html/test_spin.html +216 -0
  190. package/src/html/test_transforms.html +332 -0
  191. package/src/html/test_transitions.html +245 -0
  192. package/src/html/test_zoom.html +188 -0
  193. package/src/html/video_overlay.html +27 -0
  194. package/src/jinja/_base.html.jinja +50 -0
  195. package/src/jinja/base.html.jinja +48 -0
  196. package/src/jinja/core-concepts.html.jinja +148 -0
  197. package/src/jinja/demo_draggable.html.jinja +114 -0
  198. package/src/jinja/demo_gesture.html.jinja +128 -0
  199. package/src/jinja/demo_keyboard.html.jinja +88 -0
  200. package/src/jinja/demo_screensaver.html.jinja +122 -0
  201. package/src/jinja/demo_video_overlay.html.jinja +155 -0
  202. package/src/jinja/getting-started.html.jinja +108 -0
  203. package/src/jinja/index.html.jinja +268 -0
  204. package/src/jinja/index.json +5 -0
  205. package/src/jinja/move.gl.css +7741 -0
  206. package/src/jinja/partials/_code_block.html.jinja +17 -0
  207. package/src/jinja/partials/_demo_links.html.jinja +41 -0
  208. package/src/jinja/partials/_feature_card.html.jinja +20 -0
  209. package/src/jinja/partials/_footer.html.jinja +22 -0
  210. package/src/jinja/partials/_head.html.jinja +27 -0
  211. package/src/jinja/partials/_nav.html.jinja +79 -0
  212. package/src/jinja/partials/_theme_toggle.html.jinja +15 -0
  213. package/src/jinja/test_animations.html.jinja +679 -0
  214. package/src/jinja/test_attention.html.jinja +147 -0
  215. package/src/jinja/test_bounce.html.jinja +67 -0
  216. package/src/jinja/test_effects.html.jinja +1218 -0
  217. package/src/jinja/test_fade.html.jinja +79 -0
  218. package/src/jinja/test_flip.html.jinja +74 -0
  219. package/src/jinja/test_keyframes.html.jinja +281 -0
  220. package/src/jinja/test_loaders.html.jinja +1358 -0
  221. package/src/jinja/test_mouse.html.jinja +382 -0
  222. package/src/jinja/test_overview.html.jinja +1313 -0
  223. package/src/jinja/test_pulse.html.jinja +78 -0
  224. package/src/jinja/test_scale.html.jinja +70 -0
  225. package/src/jinja/test_shake.html.jinja +98 -0
  226. package/src/jinja/test_slide.html.jinja +78 -0
  227. package/src/jinja/test_special.html.jinja +123 -0
  228. package/src/jinja/test_spin.html.jinja +82 -0
  229. package/src/jinja/test_transforms.html.jinja +198 -0
  230. package/src/jinja/test_transitions.html.jinja +111 -0
  231. package/src/jinja/test_zoom.html.jinja +54 -0
  232. package/src/scss/classes/_animations.scss +595 -0
  233. package/src/scss/classes/_controls.scss +314 -0
  234. package/src/scss/classes/_effects.scss +283 -0
  235. package/src/scss/classes/_index.scss +28 -0
  236. package/src/scss/classes/_loaders.scss +779 -0
  237. package/src/scss/classes/_transforms.scss +138 -0
  238. package/src/scss/classes/_transitions.scss +264 -0
  239. package/src/scss/dev/_banner.scss +36 -0
  240. package/src/scss/dev/_debug.scss +18 -0
  241. package/src/scss/dev/_deprecation.scss +13 -0
  242. package/src/scss/dev/_index.scss +8 -0
  243. package/src/scss/dev/_modules.scss +23 -0
  244. package/src/scss/docs.scss +2344 -0
  245. package/src/scss/docs.scss.bak +3133 -0
  246. package/src/scss/functions/_index.scss +22 -0
  247. package/src/scss/functions/scenes/_bubble.scss +32 -0
  248. package/src/scss/functions/scenes/_index.scss +21 -0
  249. package/src/scss/index.scss +17 -0
  250. package/src/scss/maps/_controls.scss +85 -0
  251. package/src/scss/maps/_index.scss +22 -0
  252. package/src/scss/mixins/_accessibility.scss +91 -0
  253. package/src/scss/mixins/_boot.scss +51 -0
  254. package/src/scss/mixins/_index.scss +41 -0
  255. package/src/scss/mixins/_screensaver.scss +228 -0
  256. package/src/scss/mixins/_shape.scss +315 -0
  257. package/src/scss/mixins/animations/_base.scss +403 -0
  258. package/src/scss/mixins/animations/_beat.scss +137 -0
  259. package/src/scss/mixins/animations/_blink.scss +159 -0
  260. package/src/scss/mixins/animations/_bounce.scss +306 -0
  261. package/src/scss/mixins/animations/_elastic.scss +69 -0
  262. package/src/scss/mixins/animations/_fade.scss +393 -0
  263. package/src/scss/mixins/animations/_flash.scss +169 -0
  264. package/src/scss/mixins/animations/_flip.scss +251 -0
  265. package/src/scss/mixins/animations/_float.scss +141 -0
  266. package/src/scss/mixins/animations/_glow.scss +190 -0
  267. package/src/scss/mixins/animations/_heartbeat.scss +195 -0
  268. package/src/scss/mixins/animations/_hinge.scss +118 -0
  269. package/src/scss/mixins/animations/_index.scss +97 -0
  270. package/src/scss/mixins/animations/_jello.scss +123 -0
  271. package/src/scss/mixins/animations/_jiggle.scss +162 -0
  272. package/src/scss/mixins/animations/_lightspeed.scss +135 -0
  273. package/src/scss/mixins/animations/_nod.scss +153 -0
  274. package/src/scss/mixins/animations/_pop.scss +153 -0
  275. package/src/scss/mixins/animations/_pulse.scss +275 -0
  276. package/src/scss/mixins/animations/_ripple.scss +161 -0
  277. package/src/scss/mixins/animations/_roll.scss +217 -0
  278. package/src/scss/mixins/animations/_rotate.scss +728 -0
  279. package/src/scss/mixins/animations/_rubber.scss +115 -0
  280. package/src/scss/mixins/animations/_scale.scss +382 -0
  281. package/src/scss/mixins/animations/_shake.scss +233 -0
  282. package/src/scss/mixins/animations/_slide.scss +501 -0
  283. package/src/scss/mixins/animations/_spin.scss +322 -0
  284. package/src/scss/mixins/animations/_sway.scss +150 -0
  285. package/src/scss/mixins/animations/_swing.scss +245 -0
  286. package/src/scss/mixins/animations/_tada.scss +235 -0
  287. package/src/scss/mixins/animations/_twist.scss +162 -0
  288. package/src/scss/mixins/animations/_wave.scss +149 -0
  289. package/src/scss/mixins/animations/_wobble.scss +283 -0
  290. package/src/scss/mixins/animations/_zoom.scss +394 -0
  291. package/src/scss/mixins/controls/_cursor.scss +203 -0
  292. package/src/scss/mixins/controls/_hover.scss +625 -0
  293. package/src/scss/mixins/controls/_index.scss +30 -0
  294. package/src/scss/mixins/controls/_keyboard.scss +300 -0
  295. package/src/scss/mixins/controls/_pointer.scss +267 -0
  296. package/src/scss/mixins/controls/_scroll.scss +460 -0
  297. package/src/scss/mixins/controls/_scrollbar.scss +283 -0
  298. package/src/scss/mixins/controls/_selection.scss +208 -0
  299. package/src/scss/mixins/controls/_touch.scss +401 -0
  300. package/src/scss/mixins/effects/_blend.scss +128 -0
  301. package/src/scss/mixins/effects/_filter.scss +470 -0
  302. package/src/scss/mixins/effects/_focus.scss +83 -0
  303. package/src/scss/mixins/effects/_gradient.scss +130 -0
  304. package/src/scss/mixins/effects/_index.scss +28 -0
  305. package/src/scss/mixins/effects/_mask.scss +76 -0
  306. package/src/scss/mixins/effects/_opacity.scss +376 -0
  307. package/src/scss/mixins/effects/_shadow.scss +429 -0
  308. package/src/scss/mixins/keyframes/_base.scss +199 -0
  309. package/src/scss/mixins/keyframes/_index.scss +24 -0
  310. package/src/scss/mixins/keyframes/animations/_beat.scss +280 -0
  311. package/src/scss/mixins/keyframes/animations/_blink.scss +82 -0
  312. package/src/scss/mixins/keyframes/animations/_bounce.scss +292 -0
  313. package/src/scss/mixins/keyframes/animations/_fade.scss +311 -0
  314. package/src/scss/mixins/keyframes/animations/_flash.scss +165 -0
  315. package/src/scss/mixins/keyframes/animations/_flip.scss +266 -0
  316. package/src/scss/mixins/keyframes/animations/_index.scss +46 -0
  317. package/src/scss/mixins/keyframes/animations/_jiggle.scss +85 -0
  318. package/src/scss/mixins/keyframes/animations/_lightspeed.scss +73 -0
  319. package/src/scss/mixins/keyframes/animations/_nod.scss +79 -0
  320. package/src/scss/mixins/keyframes/animations/_pop.scss +78 -0
  321. package/src/scss/mixins/keyframes/animations/_pulse.scss +225 -0
  322. package/src/scss/mixins/keyframes/animations/_ripple.scss +94 -0
  323. package/src/scss/mixins/keyframes/animations/_roll.scss +124 -0
  324. package/src/scss/mixins/keyframes/animations/_rotate.scss +360 -0
  325. package/src/scss/mixins/keyframes/animations/_rubber.scss +81 -0
  326. package/src/scss/mixins/keyframes/animations/_scale.scss +308 -0
  327. package/src/scss/mixins/keyframes/animations/_shake.scss +270 -0
  328. package/src/scss/mixins/keyframes/animations/_slide.scss +345 -0
  329. package/src/scss/mixins/keyframes/animations/_spin.scss +270 -0
  330. package/src/scss/mixins/keyframes/animations/_sway.scss +83 -0
  331. package/src/scss/mixins/keyframes/animations/_twist.scss +89 -0
  332. package/src/scss/mixins/keyframes/animations/_wave.scss +90 -0
  333. package/src/scss/mixins/keyframes/animations/_wobble.scss +293 -0
  334. package/src/scss/mixins/keyframes/animations/_zoom.scss +345 -0
  335. package/src/scss/mixins/loaders/_bars.scss +128 -0
  336. package/src/scss/mixins/loaders/_base.scss +39 -0
  337. package/src/scss/mixins/loaders/_bubble.scss +395 -0
  338. package/src/scss/mixins/loaders/_circle.scss +456 -0
  339. package/src/scss/mixins/loaders/_dots.scss +248 -0
  340. package/src/scss/mixins/loaders/_graph.scss +542 -0
  341. package/src/scss/mixins/loaders/_index.scss +77 -0
  342. package/src/scss/mixins/loaders/_line.scss +471 -0
  343. package/src/scss/mixins/loaders/_objects.scss +563 -0
  344. package/src/scss/mixins/loaders/_progress.scss +477 -0
  345. package/src/scss/mixins/loaders/_rect.scss +480 -0
  346. package/src/scss/mixins/loaders/_rings.scss +377 -0
  347. package/src/scss/mixins/loaders/_skeleton.scss +461 -0
  348. package/src/scss/mixins/loaders/_special.scss +611 -0
  349. package/src/scss/mixins/loaders/_spinner.scss +175 -0
  350. package/src/scss/mixins/loaders/_text.scss +446 -0
  351. package/src/scss/mixins/transforms/_flip.scss +74 -0
  352. package/src/scss/mixins/transforms/_index.scss +28 -0
  353. package/src/scss/mixins/transforms/_matrix.scss +18 -0
  354. package/src/scss/mixins/transforms/_perspective.scss +28 -0
  355. package/src/scss/mixins/transforms/_rotate.scss +96 -0
  356. package/src/scss/mixins/transforms/_scale.scss +26 -0
  357. package/src/scss/mixins/transforms/_skew.scss +27 -0
  358. package/src/scss/mixins/transforms/_translate.scss +27 -0
  359. package/src/scss/mixins/transitions/_index.scss +22 -0
  360. package/src/scss/mixins/transitions/_transition.scss +43 -0
  361. package/src/scss/variables/_animations.scss +300 -0
  362. package/src/scss/variables/_controls.scss +178 -0
  363. package/src/scss/variables/_effects.scss +87 -0
  364. package/src/scss/variables/_index.scss +27 -0
  365. package/src/scss/variables/_keyframes.scss +28 -0
  366. package/src/scss/variables/_loaders.scss +75 -0
  367. package/src/scss/variables/_transforms.scss +85 -0
  368. package/src/scss/variables/_transitions.scss +80 -0
  369. package/src/ts/Draggable.ts +143 -0
  370. package/src/ts/Gesture.ts +226 -0
  371. package/src/ts/Keyboard.ts +195 -0
  372. package/src/ts/LoaderManager.ts +662 -0
  373. package/src/ts/Screensaver.ts +192 -0
  374. package/src/ts/VideoOverlay.ts +205 -0
  375. package/src/ts/demo.ts +1108 -0
  376. package/src/ts/index.ts +58 -0
  377. package/css/move.gl.css +0 -2
  378. package/css/move.gl.min.css +0 -2
  379. package/scss/classes/_transforms.scss +0 -124
  380. package/scss/classes/keyboard.scss +0 -18
  381. package/scss/classes/screensaver.scss +0 -15
  382. package/scss/effects/_filter.scss +0 -176
  383. package/scss/effects/_index.scss +0 -23
  384. package/scss/effects/_opacity.scss +0 -62
  385. package/scss/effects/_shadow.scss +0 -175
  386. package/scss/functions/scenes/_bubble.scss +0 -19
  387. package/scss/functions/scenes/_index.scss +0 -20
  388. package/scss/index.scss +0 -0
  389. package/scss/keyframes/_beat.scss +0 -26
  390. package/scss/keyframes/_index.scss +0 -0
  391. package/scss/maps/_index.scss +0 -0
  392. package/scss/maps/_mouse.scss +0 -96
  393. package/scss/mixins/_hover.scss +0 -51
  394. package/scss/mixins/_index.scss +0 -0
  395. package/scss/mixins/_selection.scss +0 -321
  396. package/scss/mixins/_shape.scss +0 -44
  397. package/scss/mixins/_touch.scss +0 -95
  398. package/scss/mixins/animations/--hover.scss +0 -107
  399. package/scss/mixins/animations/_base.scss +0 -337
  400. package/scss/mixins/animations/_beat.scss +0 -119
  401. package/scss/mixins/animations/_bounce.scss +0 -192
  402. package/scss/mixins/animations/_fade.scss +0 -154
  403. package/scss/mixins/animations/_flip.scss +0 -72
  404. package/scss/mixins/animations/_heartbeat.scss +0 -175
  405. package/scss/mixins/animations/_hinge.scss +0 -119
  406. package/scss/mixins/animations/_jello.scss +0 -129
  407. package/scss/mixins/animations/_jiggle.scss +0 -163
  408. package/scss/mixins/animations/_lightspeed.scss +0 -130
  409. package/scss/mixins/animations/_pop.scss +0 -150
  410. package/scss/mixins/animations/_pulse.scss +0 -213
  411. package/scss/mixins/animations/_roll.scss +0 -261
  412. package/scss/mixins/animations/_rotate.scss +0 -428
  413. package/scss/mixins/animations/_rubber.scss +0 -116
  414. package/scss/mixins/animations/_scale.scss +0 -113
  415. package/scss/mixins/animations/_shake.scss +0 -182
  416. package/scss/mixins/animations/_slide.scss +0 -294
  417. package/scss/mixins/animations/_spin.scss +0 -219
  418. package/scss/mixins/animations/_wobble.scss +0 -254
  419. package/scss/mixins/animations/_zoom.scss +0 -166
  420. package/scss/mixins/effects/_filter.scss +0 -148
  421. package/scss/mixins/effects/_index.scss +0 -0
  422. package/scss/mixins/effects/_shadow.scss +0 -21
  423. package/scss/mixins/loaders/_index.scss +0 -0
  424. package/scss/mixins/loaders/_progress.scss +0 -174
  425. package/scss/mixins/loaders/_spinner.scss +0 -101
  426. package/scss/mixins/loaders/circle_01.scss +0 -22
  427. package/scss/mixins/loaders/circle_02.scss +0 -19
  428. package/scss/mixins/loaders/circle_03.scss +0 -29
  429. package/scss/mixins/loaders/circle_inner_01.scss +0 -33
  430. package/scss/mixins/loaders/circle_inner_02.scss +0 -33
  431. package/scss/mixins/loaders/circle_inner_03.scss +0 -34
  432. package/scss/mixins/mouse/_index.scss +0 -0
  433. package/scss/mixins/scroll/_index.scss +0 -0
  434. package/scss/mixins/scroll/_scroll.scss +0 -104
  435. package/scss/mixins/transforms/_index.scss +0 -23
  436. package/scss/mixins/transforms/_matrix.scss +0 -1
  437. package/scss/mixins/transitions/_index.scss +0 -0
  438. package/scss/mixins/transitions/_transition.scss +0 -13
  439. package/scss/variables/_animation.scss +0 -91
  440. package/scss/variables/_index.scss +0 -0
  441. package/ts/ARContent.ts +0 -27
  442. package/ts/ARInteraction.ts +0 -34
  443. package/ts/AdaptiveUI.ts +0 -25
  444. package/ts/ContentStreaming.ts +0 -20
  445. package/ts/Draggable.ts +0 -71
  446. package/ts/DynamicEnvironment.ts +0 -60
  447. package/ts/Gesture.ts +0 -168
  448. package/ts/ImmersiveAudio.ts +0 -40
  449. package/ts/InteractiveCanvas.ts +0 -177
  450. package/ts/InteractiveVideo.ts +0 -29
  451. package/ts/Keyboard.ts +0 -162
  452. package/ts/RealTimeCollaboration.ts +0 -25
  453. package/ts/Screensaver.ts +0 -140
  454. package/ts/SpatialNavigation.ts +0 -38
  455. package/ts/UserProfile.ts +0 -27
  456. package/ts/VRExperience.ts +0 -58
  457. package/ts/VideoOverlay.ts +0 -116
  458. package/ts/index.ts +0 -0
  459. /package/{scss → dist/scss}/dev/_banner.scss +0 -0
  460. /package/{scss → dist/scss}/dev/_debug.scss +0 -0
  461. /package/{scss → dist/scss}/dev/_index.scss +0 -0
  462. /package/{scss/classes/_index.scss → src/html/partials/_code_block.html} +0 -0
  463. /package/{scss/functions/_index.scss → src/html/partials/_feature_card.html} +0 -0
package/src/html/test_spin.html ADDED
@@ -0,0 +1,216 @@
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en" data-theme="light">
4
+
5
+ <head>
6
+
7
+ <meta charset="UTF-8" />
8
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
9
+ <meta name="description"
10
+ content="Motion and Animation Library — CSS animations, transitions, keyframes, and interactive motion effects." />
11
+ <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
12
+ <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
13
+ <title>move.gl</title>
14
+
15
+ <!-- Library CSS -->
16
+ <link rel="stylesheet" href="/css/move.gl.css" />
17
+ <!-- Documentation CSS -->
18
+ <link rel="stylesheet" href="/css/move.gl.docs.css" />
19
+
20
+ <!-- Fonts -->
21
+ <link rel="preconnect" href="https://fonts.googleapis.com">
22
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
23
+ <link
24
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
25
+ rel="stylesheet">
26
+ </head>
27
+
28
+ <body class="">
29
+
30
+
31
+
32
+ <div class="nav-wrapper">
33
+ <nav class="nav">
34
+ <div class="nav__inner">
35
+ <a href="index.html" class="nav__logo">
36
+ <span class="nav__logo-text">move.gl</span>
37
+ <span class="nav__version">v0.0.1</span>
38
+ </a>
39
+ <div class="nav__right">
40
+
41
+ <button type="button" class="theme-toggle" data-toggle="theme" title="Toggle dark mode" aria-label="Toggle dark mode">
42
+ <svg class="theme-icon theme-icon--light" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
43
+ <path
44
+ d="M8 12a4 4 0 100-8 4 4 0 000 8zM8 0a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0V.75A.75.75 0 018 0zm0 13a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 018 13zm7-5a.75.75 0 00-.75-.75h-1.5a.75.75 0 000 1.5h1.5A.75.75 0 0015 8zM3 8a.75.75 0 00-.75-.75H.75a.75.75 0 000 1.5h1.5A.75.75 0 003 8zm9.536-4.536a.75.75 0 00-1.06 0l-1.061 1.06a.75.75 0 001.06 1.061l1.061-1.06a.75.75 0 000-1.061zm-9.072 9.072a.75.75 0 00-1.06 0l-1.061 1.06a.75.75 0 101.06 1.061l1.061-1.06a.75.75 0 000-1.061zm9.072 0a.75.75 0 00-1.06 1.06l1.06 1.061a.75.75 0 101.061-1.06l-1.06-1.061zm-9.072-9.072a.75.75 0 00-1.06 1.06l1.06 1.061a.75.75 0 001.061-1.06l-1.06-1.061z" />
45
+ </svg>
46
+ <svg class="theme-icon theme-icon--dark" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
47
+ <path d="M6.2 1A6.98 6.98 0 008 7a6.98 6.98 0 00-1.8 6A7 7 0 116.2 1z" />
48
+ </svg>
49
+ </button>
50
+
51
+ <div class="nav__dropdown" id="nav-dropdown">
52
+ <button type="button" class="nav__dropdown-toggle" aria-expanded="false" aria-haspopup="true">
53
+ <span>Docs</span>
54
+ <svg width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor"
55
+ stroke-width="1.5">
56
+ <path d="M1 1l4 4 4-4" />
57
+ </svg>
58
+ </button>
59
+ <div class="nav__dropdown-menu" role="menu">
60
+ <div class="nav__dropdown-section">
61
+ <span class="nav__dropdown-label">Learn</span>
62
+ <a href="getting-started.html" role="menuitem">Getting Started</a>
63
+ <a href="core-concepts.html" role="menuitem">Core Concepts</a>
64
+ </div>
65
+ <div class="nav__dropdown-section">
66
+ <span class="nav__dropdown-label">Overview</span>
67
+ <a href="test_overview.html" role="menuitem">All Animations</a>
68
+ </div>
69
+ <div class="nav__dropdown-section">
70
+ <span class="nav__dropdown-label">Animations</span>
71
+ <a href="test_fade.html" role="menuitem">Fade</a>
72
+ <a href="test_slide.html" role="menuitem">Slide</a>
73
+ <a href="test_bounce.html" role="menuitem">Bounce</a>
74
+ <a href="test_zoom.html" role="menuitem">Zoom</a>
75
+ <a href="test_flip.html" role="menuitem">Flip</a>
76
+ <a href="test_scale.html" role="menuitem">Scale</a>
77
+ <a href="test_spin.html" role="menuitem">Spin & Rotate</a>
78
+ <a href="test_pulse.html" role="menuitem">Pulse</a>
79
+ <a href="test_shake.html" role="menuitem">Shake & Wobble</a>
80
+ <a href="test_attention.html" role="menuitem">Attention</a>
81
+ <a href="test_special.html" role="menuitem">Special Effects</a>
82
+ </div>
83
+ <div class="nav__dropdown-section">
84
+ <span class="nav__dropdown-label">Effects</span>
85
+ <a href="test_loaders.html" role="menuitem">Loaders</a>
86
+ <a href="test_transitions.html" role="menuitem">Transitions</a>
87
+ <a href="test_transforms.html" role="menuitem">Transforms</a>
88
+ <a href="test_effects.html" role="menuitem">Filter Effects</a>
89
+ <a href="test_keyframes.html" role="menuitem">Keyframes</a>
90
+ <a href="test_mouse.html" role="menuitem">Mouse Interactions</a>
91
+ </div>
92
+ <div class="nav__dropdown-section">
93
+ <span class="nav__dropdown-label">TypeScript Demos</span>
94
+ <a href="demo_draggable.html" role="menuitem">Draggable</a>
95
+ <a href="demo_gesture.html" role="menuitem">Gesture Handler</a>
96
+ <a href="demo_keyboard.html" role="menuitem">Virtual Keyboard</a>
97
+ <a href="demo_screensaver.html" role="menuitem">Screensaver</a>
98
+ <a href="demo_video_overlay.html" role="menuitem">Video Overlay</a>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <a href="https://github.com/stylescape/move.gl" class="nav__github" target="_blank"
104
+ title="View on GitHub">
105
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
106
+ <path
107
+ d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
108
+ </svg>
109
+ </a>
110
+ </div>
111
+ </div>
112
+ </nav>
113
+ </div>
114
+
115
+ <div class="container">
116
+ <header class="header"><p class="eyebrow">Animations</p>
117
+ <h1>Spin & Rotate Animations</h1> </header>
118
+
119
+ <main>
120
+ <section>
121
+ <h2>Spin</h2>
122
+ <p>Continuous rotation animations.</p>
123
+
124
+ <div class="demo-row">
125
+ <div class="demo-item">
126
+ <div class="demo-box animate_spin"></div>
127
+ <p>spin</p>
128
+ </div>
129
+ <div class="demo-item">
130
+ <div class="demo-box animate_spin_reverse"></div>
131
+ <p>spin-reverse</p>
132
+ </div>
133
+ <div class="demo-item">
134
+ <div class="demo-box animate_spin_pulse"></div>
135
+ <p>spin-pulse</p>
136
+ </div>
137
+ <div class="demo-item">
138
+ <div class="demo-box animate_spin_grow"></div>
139
+ <p>spin-grow</p>
140
+ </div>
141
+ <div class="demo-item">
142
+ <div class="demo-box animate_spin_flip"></div>
143
+ <p>spin-flip</p>
144
+ </div>
145
+ </div>
146
+ </section>
147
+
148
+ <section>
149
+ <h2>Roll</h2>
150
+ <p>Rolling entrance and exit effects.</p>
151
+
152
+ <div class="demo-row">
153
+ <div class="demo-item">
154
+ <div class="demo-box animate_roll"></div>
155
+ <p>roll</p>
156
+ </div>
157
+ <div class="demo-item">
158
+ <div class="demo-box animate_roll_slow"></div>
159
+ <p>roll-slow</p>
160
+ </div>
161
+ <div class="demo-item">
162
+ <div class="demo-box animate_roll_reverse"></div>
163
+ <p>roll-reverse</p>
164
+ </div>
165
+ <div class="demo-item">
166
+ <div class="demo-box animate_roll_vertical"></div>
167
+ <p>roll-vertical</p>
168
+ </div>
169
+ </div>
170
+ </section>
171
+
172
+ <section>
173
+ <h2>Usage</h2>
174
+
175
+ <div class="code-block"><span class="comment">// SCSS Mixin</span>
176
+ .element {
177
+ @include animate_spin;
178
+ }
179
+
180
+ .element-roll {
181
+ @include animate_roll;
182
+ }
183
+
184
+ <span class="comment">// Utility classes</span>
185
+ &lt;div class="animate_spin"&gt;...&lt;/div&gt;
186
+ &lt;div class="animate_roll"&gt;...&lt;/div&gt;
187
+ </div>
188
+ </section> </main>
189
+
190
+
191
+
192
+ <footer class="footer">
193
+ <div class="footer__content">
194
+ <div class="footer__left">
195
+ <span class="footer__brand">move.gl</span>
196
+ <span class="footer__tagline">Motion & Animation Library</span>
197
+ </div>
198
+ <div class="footer__right">
199
+ <div class="footer__links">
200
+ <a href="https://github.com/stylescape/move.gl" class="footer__link" target="_blank">GitHub</a>
201
+ <a href="https://www.npmjs.com/package/move.gl" class="footer__link" target="_blank">npm</a>
202
+ <a href="https://www.scape.agency" class="footer__link" target="_blank">Scape Agency</a>
203
+ </div>
204
+ <span class="footer__copyright">© 2024 Scape Agency. MIT License.</span>
205
+ </div>
206
+ </div>
207
+ </footer>
208
+ </div>
209
+
210
+ <!-- Library JS -->
211
+ <script type="module" src="/js/move.gl.js"></script>
212
+ <!-- Demo Scripts -->
213
+ <script type="module" src="/js/demo.js"></script>
214
+ </body>
215
+
216
+ </html>
package/src/html/test_transforms.html ADDED
@@ -0,0 +1,332 @@
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en" data-theme="light">
4
+
5
+ <head>
6
+
7
+ <meta charset="UTF-8" />
8
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
9
+ <meta name="description"
10
+ content="Motion and Animation Library — CSS animations, transitions, keyframes, and interactive motion effects." />
11
+ <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
12
+ <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
13
+ <title>move.gl</title>
14
+
15
+ <!-- Library CSS -->
16
+ <link rel="stylesheet" href="/css/move.gl.css" />
17
+ <!-- Documentation CSS -->
18
+ <link rel="stylesheet" href="/css/move.gl.docs.css" />
19
+
20
+ <!-- Fonts -->
21
+ <link rel="preconnect" href="https://fonts.googleapis.com">
22
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
23
+ <link
24
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
25
+ rel="stylesheet">
26
+ </head>
27
+
28
+ <body class="">
29
+
30
+
31
+
32
+ <div class="nav-wrapper">
33
+ <nav class="nav">
34
+ <div class="nav__inner">
35
+ <a href="index.html" class="nav__logo">
36
+ <span class="nav__logo-text">move.gl</span>
37
+ <span class="nav__version">v0.0.1</span>
38
+ </a>
39
+ <div class="nav__right">
40
+
41
+ <button type="button" class="theme-toggle" data-toggle="theme" title="Toggle dark mode" aria-label="Toggle dark mode">
42
+ <svg class="theme-icon theme-icon--light" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
43
+ <path
44
+ d="M8 12a4 4 0 100-8 4 4 0 000 8zM8 0a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0V.75A.75.75 0 018 0zm0 13a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 018 13zm7-5a.75.75 0 00-.75-.75h-1.5a.75.75 0 000 1.5h1.5A.75.75 0 0015 8zM3 8a.75.75 0 00-.75-.75H.75a.75.75 0 000 1.5h1.5A.75.75 0 003 8zm9.536-4.536a.75.75 0 00-1.06 0l-1.061 1.06a.75.75 0 001.06 1.061l1.061-1.06a.75.75 0 000-1.061zm-9.072 9.072a.75.75 0 00-1.06 0l-1.061 1.06a.75.75 0 101.06 1.061l1.061-1.06a.75.75 0 000-1.061zm9.072 0a.75.75 0 00-1.06 1.06l1.06 1.061a.75.75 0 101.061-1.06l-1.06-1.061zm-9.072-9.072a.75.75 0 00-1.06 1.06l1.06 1.061a.75.75 0 001.061-1.06l-1.06-1.061z" />
45
+ </svg>
46
+ <svg class="theme-icon theme-icon--dark" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
47
+ <path d="M6.2 1A6.98 6.98 0 008 7a6.98 6.98 0 00-1.8 6A7 7 0 116.2 1z" />
48
+ </svg>
49
+ </button>
50
+
51
+ <div class="nav__dropdown" id="nav-dropdown">
52
+ <button type="button" class="nav__dropdown-toggle" aria-expanded="false" aria-haspopup="true">
53
+ <span>Docs</span>
54
+ <svg width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor"
55
+ stroke-width="1.5">
56
+ <path d="M1 1l4 4 4-4" />
57
+ </svg>
58
+ </button>
59
+ <div class="nav__dropdown-menu" role="menu">
60
+ <div class="nav__dropdown-section">
61
+ <span class="nav__dropdown-label">Learn</span>
62
+ <a href="getting-started.html" role="menuitem">Getting Started</a>
63
+ <a href="core-concepts.html" role="menuitem">Core Concepts</a>
64
+ </div>
65
+ <div class="nav__dropdown-section">
66
+ <span class="nav__dropdown-label">Overview</span>
67
+ <a href="test_overview.html" role="menuitem">All Animations</a>
68
+ </div>
69
+ <div class="nav__dropdown-section">
70
+ <span class="nav__dropdown-label">Animations</span>
71
+ <a href="test_fade.html" role="menuitem">Fade</a>
72
+ <a href="test_slide.html" role="menuitem">Slide</a>
73
+ <a href="test_bounce.html" role="menuitem">Bounce</a>
74
+ <a href="test_zoom.html" role="menuitem">Zoom</a>
75
+ <a href="test_flip.html" role="menuitem">Flip</a>
76
+ <a href="test_scale.html" role="menuitem">Scale</a>
77
+ <a href="test_spin.html" role="menuitem">Spin & Rotate</a>
78
+ <a href="test_pulse.html" role="menuitem">Pulse</a>
79
+ <a href="test_shake.html" role="menuitem">Shake & Wobble</a>
80
+ <a href="test_attention.html" role="menuitem">Attention</a>
81
+ <a href="test_special.html" role="menuitem">Special Effects</a>
82
+ </div>
83
+ <div class="nav__dropdown-section">
84
+ <span class="nav__dropdown-label">Effects</span>
85
+ <a href="test_loaders.html" role="menuitem">Loaders</a>
86
+ <a href="test_transitions.html" role="menuitem">Transitions</a>
87
+ <a href="test_transforms.html" role="menuitem">Transforms</a>
88
+ <a href="test_effects.html" role="menuitem">Filter Effects</a>
89
+ <a href="test_keyframes.html" role="menuitem">Keyframes</a>
90
+ <a href="test_mouse.html" role="menuitem">Mouse Interactions</a>
91
+ </div>
92
+ <div class="nav__dropdown-section">
93
+ <span class="nav__dropdown-label">TypeScript Demos</span>
94
+ <a href="demo_draggable.html" role="menuitem">Draggable</a>
95
+ <a href="demo_gesture.html" role="menuitem">Gesture Handler</a>
96
+ <a href="demo_keyboard.html" role="menuitem">Virtual Keyboard</a>
97
+ <a href="demo_screensaver.html" role="menuitem">Screensaver</a>
98
+ <a href="demo_video_overlay.html" role="menuitem">Video Overlay</a>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <a href="https://github.com/stylescape/move.gl" class="nav__github" target="_blank"
104
+ title="View on GitHub">
105
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
106
+ <path
107
+ d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
108
+ </svg>
109
+ </a>
110
+ </div>
111
+ </div>
112
+ </nav>
113
+ </div>
114
+
115
+ <div class="container">
116
+ <header class="header"><p class="eyebrow">Effects</p>
117
+ <h1>Transforms</h1> </header>
118
+
119
+ <main>
120
+ <section>
121
+ <h2>Flip Transforms</h2>
122
+ <p>Flip elements horizontally, vertically, or both.</p>
123
+
124
+ <div class="demo-row">
125
+ <div class="demo-item">
126
+ <div class="demo-box">Normal</div>
127
+ <p>normal</p>
128
+ </div>
129
+ <div class="demo-item">
130
+ <div class="demo-box transform_flip_horizontal">Flip H</div>
131
+ <p>transform_flip_horizontal</p>
132
+ </div>
133
+ <div class="demo-item">
134
+ <div class="demo-box transform_flip_vertical">Flip V</div>
135
+ <p>transform_flip_vertical</p>
136
+ </div>
137
+ <div class="demo-item">
138
+ <div class="demo-box transform_flip_both">Both</div>
139
+ <p>transform_flip_both</p>
140
+ </div>
141
+ </div>
142
+ </section>
143
+
144
+ <section>
145
+ <h2>Rotation Transforms</h2>
146
+ <p>Rotate elements by fixed angles.</p>
147
+
148
+ <div class="demo-row">
149
+ <div class="demo-item">
150
+ <div class="demo-box transform_rotate_90">90°</div>
151
+ <p>transform_rotate_90</p>
152
+ </div>
153
+ <div class="demo-item">
154
+ <div class="demo-box transform_rotate_180">180°</div>
155
+ <p>transform_rotate_180</p>
156
+ </div>
157
+ <div class="demo-item">
158
+ <div class="demo-box transform_rotate_270">270°</div>
159
+ <p>transform_rotate_270</p>
160
+ </div>
161
+ <div class="demo-item">
162
+ <div class="demo-box transform_rotate_dynamic" style="--rotate-angle: 45deg;">45°</div>
163
+ <p>transform_rotate_dynamic</p>
164
+ </div>
165
+ </div>
166
+ </section>
167
+
168
+ <section>
169
+ <h2>Scale Transforms</h2>
170
+ <p>Scale elements up or down.</p>
171
+
172
+ <div class="demo-row">
173
+ <div class="demo-item">
174
+ <div class="demo-box scale_up"></div>
175
+ <p>scale_up (1.2x)</p>
176
+ </div>
177
+ <div class="demo-item">
178
+ <div class="demo-box scale_down"></div>
179
+ <p>scale_down (0.8x)</p>
180
+ </div>
181
+ </div>
182
+ </section>
183
+
184
+ <section>
185
+ <h2>Translate & Skew Transforms</h2>
186
+ <p>Move and skew elements.</p>
187
+
188
+ <div class="demo-row">
189
+ <div class="demo-item">
190
+ <div class="demo-box translate_xy"></div>
191
+ <p>translate_xy</p>
192
+ </div>
193
+ <div class="demo-item">
194
+ <div class="demo-box skew_xy"></div>
195
+ <p>skew_xy</p>
196
+ </div>
197
+ </div>
198
+ </section>
199
+
200
+ <section>
201
+ <h2>Interactive Transforms (Hover)</h2>
202
+ <p>Hover over the elements to see transform effects.</p>
203
+
204
+ <div class="demo-row">
205
+ <div class="demo-item">
206
+ <div class="demo-box transform-translate-x"></div>
207
+ <p>translateX</p>
208
+ </div>
209
+ <div class="demo-item">
210
+ <div class="demo-box transform-translate-y"></div>
211
+ <p>translateY</p>
212
+ </div>
213
+ <div class="demo-item">
214
+ <div class="demo-box transform-scale"></div>
215
+ <p>scale</p>
216
+ </div>
217
+ <div class="demo-item">
218
+ <div class="demo-box transform-rotate"></div>
219
+ <p>rotate</p>
220
+ </div>
221
+ <div class="demo-item">
222
+ <div class="demo-box transform-skew-x"></div>
223
+ <p>skewX</p>
224
+ </div>
225
+ <div class="demo-item">
226
+ <div class="demo-box transform-skew-y"></div>
227
+ <p>skewY</p>
228
+ </div>
229
+ </div>
230
+ </section>
231
+
232
+ <section>
233
+ <h2>3D Transforms (Hover)</h2>
234
+ <p>Perspective-based 3D transforms.</p>
235
+
236
+ <div class="demo-row">
237
+ <div class="demo-item perspective-container">
238
+ <div class="demo-box transform-rotate-x"></div>
239
+ <p>rotateX</p>
240
+ </div>
241
+ <div class="demo-item perspective-container">
242
+ <div class="demo-box transform-rotate-y"></div>
243
+ <p>rotateY</p>
244
+ </div>
245
+ <div class="demo-item perspective-container">
246
+ <div class="demo-box transform-rotate-z"></div>
247
+ <p>rotateZ</p>
248
+ </div>
249
+ </div>
250
+ </section>
251
+
252
+ <section>
253
+ <h2>Combined Transforms (Hover)</h2>
254
+ <p>Multiple transforms combined.</p>
255
+
256
+ <div class="demo-row">
257
+ <div class="demo-item">
258
+ <div class="demo-box transform-combined-1"></div>
259
+ <p>scale + rotate</p>
260
+ </div>
261
+ <div class="demo-item">
262
+ <div class="demo-box transform-combined-2"></div>
263
+ <p>translate + scale</p>
264
+ </div>
265
+ <div class="demo-item perspective-container">
266
+ <div class="demo-box transform-combined-3"></div>
267
+ <p>3D rotate + scale</p>
268
+ </div>
269
+ </div>
270
+ </section>
271
+
272
+ <section>
273
+ <h2>Usage</h2>
274
+
275
+ <div class="code-block"><span class="comment">// Utility Classes (immediate transform)</span>
276
+ &lt;div class="transform_flip_horizontal"&gt;...&lt;/div&gt;
277
+ &lt;div class="transform_rotate_90"&gt;...&lt;/div&gt;
278
+ &lt;div class="scale_up"&gt;...&lt;/div&gt;
279
+ &lt;div class="translate_xy"&gt;...&lt;/div&gt;
280
+
281
+ <span class="comment">// Dynamic rotation with CSS variable</span>
282
+ &lt;div class="transform_rotate_dynamic" style="--rotate-angle: 45deg;"&gt;...&lt;/div&gt;
283
+
284
+ <span class="comment">// SCSS Mixins</span>
285
+ .element {
286
+ @include transform_flip_horizontal;
287
+ }
288
+
289
+ .rotated {
290
+ @include transform_rotate(45deg);
291
+ }
292
+
293
+ .scaled {
294
+ @include scale(1.5);
295
+ }
296
+
297
+ <span class="comment">// Combined transforms</span>
298
+ .card {
299
+ @include transform(
300
+ translateY(-10px) scale(1.05) rotate(2deg)
301
+ );
302
+ }
303
+ </div>
304
+ </section> </main>
305
+
306
+
307
+
308
+ <footer class="footer">
309
+ <div class="footer__content">
310
+ <div class="footer__left">
311
+ <span class="footer__brand">move.gl</span>
312
+ <span class="footer__tagline">Motion & Animation Library</span>
313
+ </div>
314
+ <div class="footer__right">
315
+ <div class="footer__links">
316
+ <a href="https://github.com/stylescape/move.gl" class="footer__link" target="_blank">GitHub</a>
317
+ <a href="https://www.npmjs.com/package/move.gl" class="footer__link" target="_blank">npm</a>
318
+ <a href="https://www.scape.agency" class="footer__link" target="_blank">Scape Agency</a>
319
+ </div>
320
+ <span class="footer__copyright">© 2024 Scape Agency. MIT License.</span>
321
+ </div>
322
+ </div>
323
+ </footer>
324
+ </div>
325
+
326
+ <!-- Library JS -->
327
+ <script type="module" src="/js/move.gl.js"></script>
328
+ <!-- Demo Scripts -->
329
+ <script type="module" src="/js/demo.js"></script>
330
+ </body>
331
+
332
+ </html>