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/index.html ADDED
@@ -0,0 +1,400 @@
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="headerheader--hero"><p class="eyebrow">Motion & Animation Library</p>
117
+ <h1>move.gl</h1>
118
+ <p class="lead">A comprehensive CSS animation and motion library for creating fluid, performant, and accessible motion
119
+ experiences.</p>
120
+ <div class="hero-actions">
121
+ <a href="/getting-started.html" class="btn btn--primary">
122
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
123
+ <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
124
+ </svg>
125
+ Get Started
126
+ </a>
127
+ <a href="https://github.com/stylescape/move.gl" class="btn btn--secondary">
128
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
129
+ <path
130
+ d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
131
+ </svg>
132
+ View on GitHub
133
+ </a>
134
+ </div> </header>
135
+
136
+ <main>
137
+ <!-- Key Features -->
138
+ <section>
139
+ <h2>Features</h2>
140
+ <div class="feature-grid">
141
+ <div class="feature-card">
142
+ <div class="feature-card__icon">⟳</div>
143
+ <h3 class="feature-card__title">Keyframe Animations</h3>
144
+ <p class="feature-card__desc">Pre-built keyframe animations for fade, slide, bounce, zoom, flip, and more.
145
+ Ready to use out of the box.</p>
146
+ </div>
147
+ <div class="feature-card">
148
+ <div class="feature-card__icon">↔</div>
149
+ <h3 class="feature-card__title">Transitions</h3>
150
+ <p class="feature-card__desc">Smooth state transitions with customizable timing functions and durations.</p>
151
+ </div>
152
+ <div class="feature-card">
153
+ <div class="feature-card__icon">◇</div>
154
+ <h3 class="feature-card__title">Transforms</h3>
155
+ <p class="feature-card__desc">2D and 3D transform utilities for rotation, scaling, skewing, and translation.
156
+ </p>
157
+ </div>
158
+ <div class="feature-card">
159
+ <div class="feature-card__icon">⊚</div>
160
+ <h3 class="feature-card__title">Loaders</h3>
161
+ <p class="feature-card__desc">Animated loading indicators: spinners, dots, bars, and custom patterns.</p>
162
+ </div>
163
+ <div class="feature-card">
164
+ <div class="feature-card__icon">♿</div>
165
+ <h3 class="feature-card__title">Accessibility</h3>
166
+ <p class="feature-card__desc">Respects prefers-reduced-motion for users who prefer minimal animations.</p>
167
+ </div>
168
+ <div class="feature-card">
169
+ <div class="feature-card__icon">⚡</div>
170
+ <h3 class="feature-card__title">Performance</h3>
171
+ <p class="feature-card__desc">GPU-accelerated animations using transform and opacity for 60fps smoothness.
172
+ </p>
173
+ </div>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- Quick Start -->
178
+ <section>
179
+ <h2>Quick Start</h2>
180
+ <div class="code-block"><span class="comment">// Install via npm</span>
181
+ npm install move.gl
182
+
183
+ <span class="comment">// Import in your SCSS</span>
184
+ @use "move.gl" as *;
185
+
186
+ <span class="comment">// Use animation mixins</span>
187
+ .element {
188
+ @include <span class="class">fade-in</span>;
189
+ }
190
+
191
+ .card {
192
+ @include <span class="class">slide-up</span>($duration: 0.5s);
193
+ }
194
+
195
+ <span class="comment">// Or use utility classes directly</span>
196
+ &lt;div class="<span class="class">animate-fade-in</span>"&gt;...&lt;/div&gt;
197
+ &lt;div class="<span class="class">animate-bounce</span>"&gt;...&lt;/div&gt;
198
+ </div>
199
+ <a href="/getting-started.html" class="btn btn--secondary" style="margin-top: 16px;">Full Installation Guide →</a>
200
+ </section>
201
+
202
+ <!-- Animation Demos -->
203
+ <section>
204
+ <h2>Animation Showcase</h2>
205
+ <p style="margin-bottom: 24px;"><a href="/test_overview.html" class="btn btn--primary">View All Animations →</a></p>
206
+ <div class="demo-grid">
207
+ <div class="demo-card">
208
+ <div class="demo-card__preview">
209
+ <div class="demo-box animate-fade-in-loop"></div>
210
+ </div>
211
+ <h3 class="demo-card__title">Fade</h3>
212
+ <p class="demo-card__desc">Smooth opacity transitions</p>
213
+ <a href="/test_fade.html" class="demo-card__link">View Demo →</a>
214
+ </div>
215
+ <div class="demo-card">
216
+ <div class="demo-card__preview">
217
+ <div class="demo-box animate-slide-loop"></div>
218
+ </div>
219
+ <h3 class="demo-card__title">Slide</h3>
220
+ <p class="demo-card__desc">Directional sliding animations</p>
221
+ <a href="/test_slide.html" class="demo-card__link">View Demo →</a>
222
+ </div>
223
+ <div class="demo-card">
224
+ <div class="demo-card__preview">
225
+ <div class="demo-box animate-bounce-loop"></div>
226
+ </div>
227
+ <h3 class="demo-card__title">Bounce</h3>
228
+ <p class="demo-card__desc">Playful bouncing effects</p>
229
+ <a href="/test_bounce.html" class="demo-card__link">View Demo →</a>
230
+ </div>
231
+ <div class="demo-card">
232
+ <div class="demo-card__preview">
233
+ <div class="demo-box animate-zoom-loop"></div>
234
+ </div>
235
+ <h3 class="demo-card__title">Zoom</h3>
236
+ <p class="demo-card__desc">Scale-based animations</p>
237
+ <a href="/test_zoom.html" class="demo-card__link">View Demo →</a>
238
+ </div>
239
+ <div class="demo-card">
240
+ <div class="demo-card__preview">
241
+ <div class="demo-box animate-flip-loop"></div>
242
+ </div>
243
+ <h3 class="demo-card__title">Flip</h3>
244
+ <p class="demo-card__desc">3D rotation effects</p>
245
+ <a href="/test_flip.html" class="demo-card__link">View Demo →</a>
246
+ </div>
247
+ <div class="demo-card">
248
+ <div class="demo-card__preview">
249
+ <div class="demo-box animate-spin-loop"></div>
250
+ </div>
251
+ <h3 class="demo-card__title">Spin & Rotate</h3>
252
+ <p class="demo-card__desc">Continuous rotation</p>
253
+ <a href="/test_spin.html" class="demo-card__link">View Demo →</a>
254
+ </div>
255
+ <div class="demo-card">
256
+ <div class="demo-card__preview">
257
+ <div class="demo-box animate-pulse-demo"></div>
258
+ </div>
259
+ <h3 class="demo-card__title">Pulse</h3>
260
+ <p class="demo-card__desc">Scale pulsing effects</p>
261
+ <a href="/test_pulse.html" class="demo-card__link">View Demo →</a>
262
+ </div>
263
+ <div class="demo-card">
264
+ <div class="demo-card__preview">
265
+ <div class="demo-box animate-shake-demo"></div>
266
+ </div>
267
+ <h3 class="demo-card__title">Shake & Wobble</h3>
268
+ <p class="demo-card__desc">Attention-grabbing shakes</p>
269
+ <a href="/test_shake.html" class="demo-card__link">View Demo →</a>
270
+ </div>
271
+ <div class="demo-card">
272
+ <div class="demo-card__preview">
273
+ <div class="demo-box animate-tada-demo"></div>
274
+ </div>
275
+ <h3 class="demo-card__title">Attention</h3>
276
+ <p class="demo-card__desc">Tada, pop, flash & more</p>
277
+ <a href="/test_attention.html" class="demo-card__link">View Demo →</a>
278
+ </div>
279
+ <div class="demo-card">
280
+ <div class="demo-card__preview">
281
+ <div class="demo-box animate-float-demo"></div>
282
+ </div>
283
+ <h3 class="demo-card__title">Special Effects</h3>
284
+ <p class="demo-card__desc">Elastic, lightspeed, hinge</p>
285
+ <a href="/test_special.html" class="demo-card__link">View Demo →</a>
286
+ </div>
287
+ <div class="demo-card">
288
+ <div class="demo-card__preview">
289
+ <div class="demo-box animate-scale-in-demo"></div>
290
+ </div>
291
+ <h3 class="demo-card__title">Scale</h3>
292
+ <p class="demo-card__desc">Scale entrance & exit</p>
293
+ <a href="/test_scale.html" class="demo-card__link">View Demo →</a>
294
+ </div>
295
+ <div class="demo-card">
296
+ <div class="demo-card__preview">
297
+ <div class="loader loader--spinner"></div>
298
+ </div>
299
+ <h3 class="demo-card__title">Loaders</h3>
300
+ <p class="demo-card__desc">Loading indicators</p>
301
+ <a href="/test_loaders.html" class="demo-card__link">View Demo →</a>
302
+ </div>
303
+ </div>
304
+ </section>
305
+
306
+ <!-- Documentation Sections -->
307
+ <section>
308
+ <h2>Documentation</h2>
309
+
310
+ <div class="doc-sections">
311
+ <div class="doc-section">
312
+ <h3>Learn</h3>
313
+ <ul>
314
+ <li><a href="/getting-started.html">Getting Started</a></li>
315
+ <li><a href="/core-concepts.html">Core Concepts</a></li>
316
+ </ul>
317
+ </div>
318
+ <div class="doc-section">
319
+ <h3>Overview</h3>
320
+ <ul>
321
+ <li><a href="/test_overview.html">All Animations (Looping)</a></li>
322
+ </ul>
323
+ </div>
324
+ <div class="doc-section">
325
+ <h3>Animations</h3>
326
+ <ul>
327
+ <li><a href="/test_fade.html">Fade Animations</a></li>
328
+ <li><a href="/test_slide.html">Slide Animations</a></li>
329
+ <li><a href="/test_bounce.html">Bounce Animations</a></li>
330
+ <li><a href="/test_zoom.html">Zoom Animations</a></li>
331
+ <li><a href="/test_flip.html">Flip Animations</a></li>
332
+ <li><a href="/test_scale.html">Scale Animations</a></li>
333
+ <li><a href="/test_spin.html">Spin & Rotate</a></li>
334
+ <li><a href="/test_pulse.html">Pulse & Heartbeat</a></li>
335
+ <li><a href="/test_shake.html">Shake & Wobble</a></li>
336
+ <li><a href="/test_attention.html">Attention Seekers</a></li>
337
+ <li><a href="/test_special.html">Special Effects</a></li>
338
+ </ul>
339
+ </div>
340
+ <div class="doc-section">
341
+ <h3>Effects</h3>
342
+ <ul>
343
+ <li><a href="/test_loaders.html">Loading Animations</a></li>
344
+ <li><a href="/test_transitions.html">Transitions</a></li>
345
+ <li><a href="/test_transforms.html">Transforms</a></li>
346
+ </ul>
347
+ </div>
348
+ </div>
349
+ </section>
350
+
351
+ <!-- Accessibility -->
352
+ <section>
353
+ <h2>Accessibility First</h2>
354
+ <p>move.gl automatically respects the <code>prefers-reduced-motion</code> media query. Users who prefer reduced
355
+ motion will see static or minimal animations instead.</p>
356
+
357
+ <div class="code-block"><span class="comment">// Built-in reduced motion support</span>
358
+ @media (prefers-reduced-motion: reduce) {
359
+ .animate-* {
360
+ animation: none;
361
+ transition: none;
362
+ }
363
+ }
364
+
365
+ <span class="comment">// Or use the accessibility mixin</span>
366
+ .element {
367
+ @include <span class="class">motion-safe</span> {
368
+ @include fade-in;
369
+ }
370
+ }
371
+ </div>
372
+ </section> </main>
373
+
374
+
375
+
376
+ <footer class="footer">
377
+ <div class="footer__content">
378
+ <div class="footer__left">
379
+ <span class="footer__brand">move.gl</span>
380
+ <span class="footer__tagline">Motion & Animation Library</span>
381
+ </div>
382
+ <div class="footer__right">
383
+ <div class="footer__links">
384
+ <a href="https://github.com/stylescape/move.gl" class="footer__link" target="_blank">GitHub</a>
385
+ <a href="https://www.npmjs.com/package/move.gl" class="footer__link" target="_blank">npm</a>
386
+ <a href="https://www.scape.agency" class="footer__link" target="_blank">Scape Agency</a>
387
+ </div>
388
+ <span class="footer__copyright">© 2024 Scape Agency. MIT License.</span>
389
+ </div>
390
+ </div>
391
+ </footer>
392
+ </div>
393
+
394
+ <!-- Library JS -->
395
+ <script type="module" src="/js/move.gl.js"></script>
396
+ <!-- Demo Scripts -->
397
+ <script type="module" src="/js/demo.js"></script>
398
+ </body>
399
+
400
+ </html>
package/src/html/keyboard.html ADDED
@@ -0,0 +1,14 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Virtual Keyboard</title>
7
+ <!-- <link rel="stylesheet" href="styles.css"> -->
8
+ </head>
9
+ <body>
10
+ <input type="text" id="textInput" autofocus>
11
+ <div id="keyboard"></div>
12
+ <!-- <script src="main.js"></script> -->
13
+ </body>
14
+ </html>
package/src/html/partials/_demo_links.html ADDED
@@ -0,0 +1,21 @@
1
+
2
+
3
+ <section class="section">
4
+ <h2 class="section__title">More TypeScript Demos</h2>
5
+ <div class="feature-grid"> <a href="demo_draggable.html" class="feature-card" style="text-decoration: none;">
6
+ <h4>🖱️ Draggable</h4>
7
+ <p>Make any element draggable with mouse and touch support.</p>
8
+ </a> <a href="demo_gesture.html" class="feature-card" style="text-decoration: none;">
9
+ <h4>👆 Gesture Handler</h4>
10
+ <p>Touch gestures: tap, swipe, pinch, and rotate detection.</p>
11
+ </a> <a href="demo_keyboard.html" class="feature-card" style="text-decoration: none;">
12
+ <h4>⌨️ Virtual Keyboard</h4>
13
+ <p>Customizable on-screen keyboard with multiple layouts.</p>
14
+ </a> <a href="demo_screensaver.html" class="feature-card" style="text-decoration: none;">
15
+ <h4>🌙 Screensaver</h4>
16
+ <p>Inactivity-based screensaver with video and audio support.</p>
17
+ </a> <a href="demo_video_overlay.html" class="feature-card" style="text-decoration: none;">
18
+ <h4>🎬 Video Overlay</h4>
19
+ <p>Transparent video overlay with fade effects.</p>
20
+ </a> </div>
21
+ </section>
package/src/html/partials/_footer.html ADDED
@@ -0,0 +1,18 @@
1
+
2
+
3
+ <footer class="footer">
4
+ <div class="footer__content">
5
+ <div class="footer__left">
6
+ <span class="footer__brand">move.gl</span>
7
+ <span class="footer__tagline">Motion & Animation Library</span>
8
+ </div>
9
+ <div class="footer__right">
10
+ <div class="footer__links">
11
+ <a href="https://github.com/stylescape/move.gl" class="footer__link" target="_blank">GitHub</a>
12
+ <a href="https://www.npmjs.com/package/move.gl" class="footer__link" target="_blank">npm</a>
13
+ <a href="https://www.scape.agency" class="footer__link" target="_blank">Scape Agency</a>
14
+ </div>
15
+ <span class="footer__copyright">© 2024 Scape Agency. MIT License.</span>
16
+ </div>
17
+ </div>
18
+ </footer>
package/src/html/partials/_head.html ADDED
@@ -0,0 +1,21 @@
1
+
2
+
3
+ <meta charset="UTF-8" />
4
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
5
+ <meta name="description"
6
+ content="Motion and Animation Library — CSS animations, transitions, keyframes, and interactive motion effects." />
7
+ <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
8
+ <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
9
+ <title>move.gl</title>
10
+
11
+ <!-- Library CSS -->
12
+ <link rel="stylesheet" href="/css/move.gl.css" />
13
+ <!-- Documentation CSS -->
14
+ <link rel="stylesheet" href="/css/move.gl.docs.css" />
15
+
16
+ <!-- Fonts -->
17
+ <link rel="preconnect" href="https://fonts.googleapis.com">
18
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
19
+ <link
20
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
21
+ rel="stylesheet">
package/src/html/partials/_nav.html ADDED
@@ -0,0 +1,84 @@
1
+
2
+
3
+ <div class="nav-wrapper">
4
+ <nav class="nav">
5
+ <div class="nav__inner">
6
+ <a href="index.html" class="nav__logo">
7
+ <span class="nav__logo-text">move.gl</span>
8
+ <span class="nav__version">v0.0.1</span>
9
+ </a>
10
+ <div class="nav__right">
11
+
12
+ <button type="button" class="theme-toggle" data-toggle="theme" title="Toggle dark mode" aria-label="Toggle dark mode">
13
+ <svg class="theme-icon theme-icon--light" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
14
+ <path
15
+ 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" />
16
+ </svg>
17
+ <svg class="theme-icon theme-icon--dark" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
18
+ <path d="M6.2 1A6.98 6.98 0 008 7a6.98 6.98 0 00-1.8 6A7 7 0 116.2 1z" />
19
+ </svg>
20
+ </button>
21
+
22
+ <div class="nav__dropdown" id="nav-dropdown">
23
+ <button type="button" class="nav__dropdown-toggle" aria-expanded="false" aria-haspopup="true">
24
+ <span>Docs</span>
25
+ <svg width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor"
26
+ stroke-width="1.5">
27
+ <path d="M1 1l4 4 4-4" />
28
+ </svg>
29
+ </button>
30
+ <div class="nav__dropdown-menu" role="menu">
31
+ <div class="nav__dropdown-section">
32
+ <span class="nav__dropdown-label">Learn</span>
33
+ <a href="getting-started.html" role="menuitem">Getting Started</a>
34
+ <a href="core-concepts.html" role="menuitem">Core Concepts</a>
35
+ </div>
36
+ <div class="nav__dropdown-section">
37
+ <span class="nav__dropdown-label">Overview</span>
38
+ <a href="test_overview.html" role="menuitem">All Animations</a>
39
+ </div>
40
+ <div class="nav__dropdown-section">
41
+ <span class="nav__dropdown-label">Animations</span>
42
+ <a href="test_fade.html" role="menuitem">Fade</a>
43
+ <a href="test_slide.html" role="menuitem">Slide</a>
44
+ <a href="test_bounce.html" role="menuitem">Bounce</a>
45
+ <a href="test_zoom.html" role="menuitem">Zoom</a>
46
+ <a href="test_flip.html" role="menuitem">Flip</a>
47
+ <a href="test_scale.html" role="menuitem">Scale</a>
48
+ <a href="test_spin.html" role="menuitem">Spin & Rotate</a>
49
+ <a href="test_pulse.html" role="menuitem">Pulse</a>
50
+ <a href="test_shake.html" role="menuitem">Shake & Wobble</a>
51
+ <a href="test_attention.html" role="menuitem">Attention</a>
52
+ <a href="test_special.html" role="menuitem">Special Effects</a>
53
+ </div>
54
+ <div class="nav__dropdown-section">
55
+ <span class="nav__dropdown-label">Effects</span>
56
+ <a href="test_loaders.html" role="menuitem">Loaders</a>
57
+ <a href="test_transitions.html" role="menuitem">Transitions</a>
58
+ <a href="test_transforms.html" role="menuitem">Transforms</a>
59
+ <a href="test_effects.html" role="menuitem">Filter Effects</a>
60
+ <a href="test_keyframes.html" role="menuitem">Keyframes</a>
61
+ <a href="test_mouse.html" role="menuitem">Mouse Interactions</a>
62
+ </div>
63
+ <div class="nav__dropdown-section">
64
+ <span class="nav__dropdown-label">TypeScript Demos</span>
65
+ <a href="demo_draggable.html" role="menuitem">Draggable</a>
66
+ <a href="demo_gesture.html" role="menuitem">Gesture Handler</a>
67
+ <a href="demo_keyboard.html" role="menuitem">Virtual Keyboard</a>
68
+ <a href="demo_screensaver.html" role="menuitem">Screensaver</a>
69
+ <a href="demo_video_overlay.html" role="menuitem">Video Overlay</a>
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <a href="https://github.com/stylescape/move.gl" class="nav__github" target="_blank"
75
+ title="View on GitHub">
76
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
77
+ <path
78
+ 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" />
79
+ </svg>
80
+ </a>
81
+ </div>
82
+ </div>
83
+ </nav>
84
+ </div>
package/src/html/partials/_theme_toggle.html ADDED
@@ -0,0 +1,11 @@
1
+
2
+
3
+ <button type="button" class="theme-toggle" data-toggle="theme" title="Toggle dark mode" aria-label="Toggle dark mode">
4
+ <svg class="theme-icon theme-icon--light" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
5
+ <path
6
+ 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" />
7
+ </svg>
8
+ <svg class="theme-icon theme-icon--dark" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
9
+ <path d="M6.2 1A6.98 6.98 0 008 7a6.98 6.98 0 00-1.8 6A7 7 0 116.2 1z" />
10
+ </svg>
11
+ </button>
package/src/html/screensaver.html ADDED
@@ -0,0 +1,20 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Screensaver</title>
7
+ <link rel="stylesheet" href="styles.css">
8
+ </head>
9
+ <body>
10
+ <div id="screensaver" style="display:none;">
11
+ <video id="screensaverVideo" loop>
12
+ <source src="path/to/your/video.mp4" type="video/mp4">
13
+ Your browser does not support the video tag.
14
+ </video>
15
+ <img id="screensaverImage" src="path/to/your/image.jpg" style="display:none;">
16
+ <audio id="screensaverAudio" src="path/to/your/audio.mp3"></audio>
17
+ </div>
18
+ <script src="main.js"></script>
19
+ </body>
20
+ </html>