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/demo_draggable.html ADDED
@@ -0,0 +1,250 @@
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="Draggable Component Demo — Make any element draggable with mouse and touch support." />
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>Draggable Demo — 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
+ <div class="nav-wrapper">
31
+ <nav class="nav">
32
+ <div class="nav__inner">
33
+ <a href="index.html" class="nav__logo">
34
+ <span class="nav__logo-text">move.gl</span>
35
+ <span class="nav__version">v0.0.1</span>
36
+ </a>
37
+ <div class="nav__right">
38
+
39
+ <button type="button" class="theme-toggle" data-toggle="theme" title="Toggle dark mode" aria-label="Toggle dark mode">
40
+ <svg class="theme-icon theme-icon--light" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
41
+ <path
42
+ 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" />
43
+ </svg>
44
+ <svg class="theme-icon theme-icon--dark" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
45
+ <path d="M6.2 1A6.98 6.98 0 008 7a6.98 6.98 0 00-1.8 6A7 7 0 116.2 1z" />
46
+ </svg>
47
+ </button>
48
+
49
+ <div class="nav__dropdown" id="nav-dropdown">
50
+ <button type="button" class="nav__dropdown-toggle" aria-expanded="false" aria-haspopup="true">
51
+ <span>Docs</span>
52
+ <svg width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor"
53
+ stroke-width="1.5">
54
+ <path d="M1 1l4 4 4-4" />
55
+ </svg>
56
+ </button>
57
+ <div class="nav__dropdown-menu" role="menu">
58
+ <div class="nav__dropdown-section">
59
+ <span class="nav__dropdown-label">Learn</span>
60
+ <a href="getting-started.html" role="menuitem">Getting Started</a>
61
+ <a href="core-concepts.html" role="menuitem">Core Concepts</a>
62
+ </div>
63
+ <div class="nav__dropdown-section">
64
+ <span class="nav__dropdown-label">Overview</span>
65
+ <a href="test_overview.html" role="menuitem">All Animations</a>
66
+ </div>
67
+ <div class="nav__dropdown-section">
68
+ <span class="nav__dropdown-label">Animations</span>
69
+ <a href="test_fade.html" role="menuitem">Fade</a>
70
+ <a href="test_slide.html" role="menuitem">Slide</a>
71
+ <a href="test_bounce.html" role="menuitem">Bounce</a>
72
+ <a href="test_zoom.html" role="menuitem">Zoom</a>
73
+ <a href="test_flip.html" role="menuitem">Flip</a>
74
+ <a href="test_scale.html" role="menuitem">Scale</a>
75
+ <a href="test_spin.html" role="menuitem">Spin & Rotate</a>
76
+ <a href="test_pulse.html" role="menuitem">Pulse</a>
77
+ <a href="test_shake.html" role="menuitem">Shake & Wobble</a>
78
+ <a href="test_attention.html" role="menuitem">Attention</a>
79
+ <a href="test_special.html" role="menuitem">Special Effects</a>
80
+ </div>
81
+ <div class="nav__dropdown-section">
82
+ <span class="nav__dropdown-label">Effects</span>
83
+ <a href="test_loaders.html" role="menuitem">Loaders</a>
84
+ <a href="test_transitions.html" role="menuitem">Transitions</a>
85
+ <a href="test_transforms.html" role="menuitem">Transforms</a>
86
+ <a href="test_effects.html" role="menuitem">Filter Effects</a>
87
+ <a href="test_keyframes.html" role="menuitem">Keyframes</a>
88
+ <a href="test_mouse.html" role="menuitem">Mouse Interactions</a>
89
+ </div>
90
+ <div class="nav__dropdown-section">
91
+ <span class="nav__dropdown-label">TypeScript Demos</span>
92
+ <a href="demo_draggable.html" role="menuitem">Draggable</a>
93
+ <a href="demo_gesture.html" role="menuitem">Gesture Handler</a>
94
+ <a href="demo_keyboard.html" role="menuitem">Virtual Keyboard</a>
95
+ <a href="demo_screensaver.html" role="menuitem">Screensaver</a>
96
+ <a href="demo_video_overlay.html" role="menuitem">Video Overlay</a>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <a href="https://github.com/stylescape/move.gl" class="nav__github" target="_blank"
102
+ title="View on GitHub">
103
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
104
+ <path
105
+ 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" />
106
+ </svg>
107
+ </a>
108
+ </div>
109
+ </div>
110
+ </nav>
111
+ </div>
112
+
113
+ <main class="main">
114
+ <div class="container"><header class="page-header">
115
+ <div class="page-header__badge">TypeScript Component</div>
116
+ <h1 class="page-header__title">Draggable</h1>
117
+ <p class="page-header__description">
118
+ Make any HTML element draggable with full mouse and touch support.
119
+ Perfect for creating interactive interfaces, drag-and-drop features, and movable widgets.
120
+ </p>
121
+ </header><section class="section">
122
+ <h2 class="section__title">Interactive Demo</h2>
123
+ <p class="section__description">Try dragging the boxes around the container. Works with both mouse and touch!</p>
124
+
125
+ <div class="drag-container" id="dragContainer">
126
+ <div class="draggable-box" id="box1" style="top: 50px; left: 50px;">Drag Me!</div>
127
+ <div class="draggable-box draggable-box--pink" id="box2" style="top: 50px; right: 50px;">Me Too!</div>
128
+ <div class="draggable-box draggable-box--cyan" id="box3"
129
+ style="bottom: 50px; left: 50%; transform: translateX(-50%); width: 150px; height: 80px;">And Me!</div>
130
+ </div>
131
+
132
+ <div class="controls">
133
+ <button class="btn btn-primary" onclick="resetPositions()">Reset Positions</button>
134
+ <button class="btn btn-secondary" onclick="clearLog()">Clear Log</button>
135
+ </div>
136
+
137
+ <div class="log-output" id="logOutput">
138
+ <div class="log-entry"><span class="timestamp">[--:--:--]</span> Drag events will appear here...</div>
139
+ </div>
140
+ </section>
141
+
142
+ <section class="section">
143
+ <h2 class="section__title">Features</h2>
144
+ <div class="feature-grid">
145
+ <div class="feature-card">
146
+ <h4>🖱️ Mouse Support</h4>
147
+ <p>Full mouse drag support with mousedown, mousemove, and mouseup events.</p>
148
+ </div>
149
+ <div class="feature-card">
150
+ <h4>📱 Touch Support</h4>
151
+ <p>Native touch event handling for mobile devices and tablets.</p>
152
+ </div>
153
+ <div class="feature-card">
154
+ <h4>📦 Boundary Constraints</h4>
155
+ <p>Elements are constrained within their parent container bounds.</p>
156
+ </div>
157
+ <div class="feature-card">
158
+ <h4>🎯 Event Callbacks</h4>
159
+ <p>Hook into drag events with onDragStart, onDrag, and onDragEnd callbacks.</p>
160
+ </div>
161
+ </div>
162
+ </section>
163
+
164
+ <section class="section">
165
+ <h2 class="section__title">Usage</h2>
166
+
167
+ <h3>Basic Usage</h3>
168
+ <div class="code-block">
169
+ <code><span class="keyword">import</span> { Draggable } <span class="keyword">from</span> <span class="string">'move.gl'</span>;
170
+
171
+ <span class="comment">// Make an element draggable</span>
172
+ <span class="keyword">const</span> draggable = <span class="keyword">new</span> <span class="function">Draggable</span>(<span class="string">'myElement'</span>);
173
+
174
+ <span class="comment">// Clean up when done</span>
175
+ draggable.<span class="function">destroy</span>();</code>
176
+ </div>
177
+
178
+ <h3>HTML Structure</h3>
179
+ <div class="code-block">
180
+ <code><span class="comment">&lt;!-- Parent container defines boundaries --&gt;</span>
181
+ &lt;<span class="keyword">div</span> <span class="string">class</span>=<span class="string">"container"</span>&gt;
182
+ &lt;<span class="keyword">div</span> <span class="string">id</span>=<span class="string">"myElement"</span> <span class="string">class</span>=<span class="string">"draggable"</span>&gt;
183
+ Drag me!
184
+ &lt;/<span class="keyword">div</span>&gt;
185
+ &lt;/<span class="keyword">div</span>&gt;</code>
186
+ </div>
187
+ </section>
188
+
189
+ <section class="section">
190
+ <h2 class="section__title">API Reference</h2>
191
+
192
+ <h3>Constructor</h3>
193
+ <div class="code-block">
194
+ <code><span class="keyword">new</span> <span class="function">Draggable</span>(elementId: <span class="keyword">string</span>)</code>
195
+ </div>
196
+
197
+ <h3>Methods</h3>
198
+ <table class="api-table">
199
+ <tr>
200
+ <th>Method</th>
201
+ <th>Description</th>
202
+ </tr>
203
+ <tr>
204
+ <td><code>destroy()</code></td>
205
+ <td>Removes all event listeners and cleans up the instance</td>
206
+ </tr>
207
+ </table>
208
+ </section>
209
+
210
+ <section class="section">
211
+ <h2 class="section__title">More TypeScript Demos</h2>
212
+ <div class="feature-grid"> <a href="demo_gesture.html" class="feature-card" style="text-decoration: none;">
213
+ <h4>👆 Gesture Handler</h4>
214
+ <p>Touch gestures: tap, swipe, pinch, and rotate detection.</p>
215
+ </a> <a href="demo_keyboard.html" class="feature-card" style="text-decoration: none;">
216
+ <h4>⌨️ Virtual Keyboard</h4>
217
+ <p>Customizable on-screen keyboard with multiple layouts.</p>
218
+ </a> <a href="demo_screensaver.html" class="feature-card" style="text-decoration: none;">
219
+ <h4>🌙 Screensaver</h4>
220
+ <p>Inactivity-based screensaver with video and audio support.</p>
221
+ </a> <a href="demo_video_overlay.html" class="feature-card" style="text-decoration: none;">
222
+ <h4>🎬 Video Overlay</h4>
223
+ <p>Transparent video overlay with fade effects.</p>
224
+ </a> </div>
225
+ </section>
226
+ </div>
227
+ </main>
228
+
229
+ <footer class="footer">
230
+ <div class="footer__content">
231
+ <div class="footer__left">
232
+ <span class="footer__brand">move.gl</span>
233
+ <span class="footer__tagline">Motion & Animation Library</span>
234
+ </div>
235
+ <div class="footer__right">
236
+ <div class="footer__links">
237
+ <a href="https://github.com/stylescape/move.gl" class="footer__link" target="_blank">GitHub</a>
238
+ <a href="https://www.npmjs.com/package/move.gl" class="footer__link" target="_blank">npm</a>
239
+ <a href="https://www.scape.agency" class="footer__link" target="_blank">Scape Agency</a>
240
+ </div>
241
+ <span class="footer__copyright">© 2024 Scape Agency. MIT License.</span>
242
+ </div>
243
+ </div>
244
+ </footer>
245
+
246
+ <!-- Core Scripts -->
247
+ <script type="module" src="/js/move.gl.js"></script>
248
+ <script type="module" src="/js/demo.js"></script></body>
249
+
250
+ </html>
package/src/html/demo_gesture.html ADDED
@@ -0,0 +1,264 @@
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="Touch Gesture Demo — Detect taps, swipes, pinches, and rotations." />
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>Gesture Demo — 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
+ <div class="nav-wrapper">
31
+ <nav class="nav">
32
+ <div class="nav__inner">
33
+ <a href="index.html" class="nav__logo">
34
+ <span class="nav__logo-text">move.gl</span>
35
+ <span class="nav__version">v0.0.1</span>
36
+ </a>
37
+ <div class="nav__right">
38
+
39
+ <button type="button" class="theme-toggle" data-toggle="theme" title="Toggle dark mode" aria-label="Toggle dark mode">
40
+ <svg class="theme-icon theme-icon--light" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
41
+ <path
42
+ 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" />
43
+ </svg>
44
+ <svg class="theme-icon theme-icon--dark" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
45
+ <path d="M6.2 1A6.98 6.98 0 008 7a6.98 6.98 0 00-1.8 6A7 7 0 116.2 1z" />
46
+ </svg>
47
+ </button>
48
+
49
+ <div class="nav__dropdown" id="nav-dropdown">
50
+ <button type="button" class="nav__dropdown-toggle" aria-expanded="false" aria-haspopup="true">
51
+ <span>Docs</span>
52
+ <svg width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor"
53
+ stroke-width="1.5">
54
+ <path d="M1 1l4 4 4-4" />
55
+ </svg>
56
+ </button>
57
+ <div class="nav__dropdown-menu" role="menu">
58
+ <div class="nav__dropdown-section">
59
+ <span class="nav__dropdown-label">Learn</span>
60
+ <a href="getting-started.html" role="menuitem">Getting Started</a>
61
+ <a href="core-concepts.html" role="menuitem">Core Concepts</a>
62
+ </div>
63
+ <div class="nav__dropdown-section">
64
+ <span class="nav__dropdown-label">Overview</span>
65
+ <a href="test_overview.html" role="menuitem">All Animations</a>
66
+ </div>
67
+ <div class="nav__dropdown-section">
68
+ <span class="nav__dropdown-label">Animations</span>
69
+ <a href="test_fade.html" role="menuitem">Fade</a>
70
+ <a href="test_slide.html" role="menuitem">Slide</a>
71
+ <a href="test_bounce.html" role="menuitem">Bounce</a>
72
+ <a href="test_zoom.html" role="menuitem">Zoom</a>
73
+ <a href="test_flip.html" role="menuitem">Flip</a>
74
+ <a href="test_scale.html" role="menuitem">Scale</a>
75
+ <a href="test_spin.html" role="menuitem">Spin & Rotate</a>
76
+ <a href="test_pulse.html" role="menuitem">Pulse</a>
77
+ <a href="test_shake.html" role="menuitem">Shake & Wobble</a>
78
+ <a href="test_attention.html" role="menuitem">Attention</a>
79
+ <a href="test_special.html" role="menuitem">Special Effects</a>
80
+ </div>
81
+ <div class="nav__dropdown-section">
82
+ <span class="nav__dropdown-label">Effects</span>
83
+ <a href="test_loaders.html" role="menuitem">Loaders</a>
84
+ <a href="test_transitions.html" role="menuitem">Transitions</a>
85
+ <a href="test_transforms.html" role="menuitem">Transforms</a>
86
+ <a href="test_effects.html" role="menuitem">Filter Effects</a>
87
+ <a href="test_keyframes.html" role="menuitem">Keyframes</a>
88
+ <a href="test_mouse.html" role="menuitem">Mouse Interactions</a>
89
+ </div>
90
+ <div class="nav__dropdown-section">
91
+ <span class="nav__dropdown-label">TypeScript Demos</span>
92
+ <a href="demo_draggable.html" role="menuitem">Draggable</a>
93
+ <a href="demo_gesture.html" role="menuitem">Gesture Handler</a>
94
+ <a href="demo_keyboard.html" role="menuitem">Virtual Keyboard</a>
95
+ <a href="demo_screensaver.html" role="menuitem">Screensaver</a>
96
+ <a href="demo_video_overlay.html" role="menuitem">Video Overlay</a>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <a href="https://github.com/stylescape/move.gl" class="nav__github" target="_blank"
102
+ title="View on GitHub">
103
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
104
+ <path
105
+ 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" />
106
+ </svg>
107
+ </a>
108
+ </div>
109
+ </div>
110
+ </nav>
111
+ </div>
112
+
113
+ <main class="main">
114
+ <div class="container"><header class="page-header">
115
+ <div class="page-header__badge">TypeScript Component</div>
116
+ <h1 class="page-header__title">Gesture Handler</h1>
117
+ <p class="page-header__description">
118
+ Detect and respond to touch gestures including taps, swipes, pinches, and rotations.
119
+ Works with both touch devices and mouse input.
120
+ </p>
121
+ </header><section class="section">
122
+ <h2 class="section__title">Interactive Demo</h2>
123
+ <p class="section__description">
124
+ <strong>Touch/Mobile:</strong> Use one finger to tap or swipe, two fingers to pinch.<br>
125
+ <strong>Desktop:</strong> Click to tap, click and drag to swipe.
126
+ </p>
127
+
128
+ <div class="gesture-area" id="gestureArea">
129
+ <div class="direction-indicator left" id="dirLeft">←</div>
130
+ <div class="direction-indicator right" id="dirRight">→</div>
131
+ <div class="direction-indicator up" id="dirUp">↑</div>
132
+ <div class="direction-indicator down" id="dirDown">↓</div>
133
+
134
+ <div class="gesture-icon" id="gestureIcon">👆</div>
135
+ <div class="gesture-label" id="gestureLabel">Touch or Click Here</div>
136
+ <div class="gesture-hint" id="gestureHint">Try tapping, swiping, or pinching</div>
137
+ <div class="gesture-feedback" id="gestureFeedback">Tap detected!</div>
138
+ </div>
139
+
140
+ <div class="stats-grid">
141
+ <div class="stat-card">
142
+ <div class="stat-card__value" id="tapCount">0</div>
143
+ <div class="stat-card__label">Taps</div>
144
+ </div>
145
+ <div class="stat-card">
146
+ <div class="stat-card__value" id="swipeCount">0</div>
147
+ <div class="stat-card__label">Swipes</div>
148
+ </div>
149
+ <div class="stat-card">
150
+ <div class="stat-card__value" id="pinchCount">0</div>
151
+ <div class="stat-card__label">Pinches</div>
152
+ </div>
153
+ <div class="stat-card">
154
+ <div class="stat-card__value" id="lastDirection">—</div>
155
+ <div class="stat-card__label">Last Direction</div>
156
+ </div>
157
+ </div>
158
+
159
+ <div class="controls">
160
+ <button class="btn btn-secondary" onclick="resetStats()">Reset Stats</button>
161
+ <button class="btn btn-secondary" onclick="clearLog()">Clear Log</button>
162
+ </div>
163
+
164
+ <div class="gesture-log" id="gestureLog">
165
+ <div class="entry">
166
+ <span class="timestamp">--:--:--</span>
167
+ <span class="type">INIT</span>
168
+ <span class="details">Gesture handler ready</span>
169
+ </div>
170
+ </div>
171
+ </section>
172
+
173
+ <section class="section">
174
+ <h2 class="section__title">Supported Gestures</h2>
175
+ <div class="feature-grid">
176
+ <div class="feature-card">
177
+ <h4>👆 Tap</h4>
178
+ <p>Single touch/click without movement. Fires onTap callback.</p>
179
+ </div>
180
+ <div class="feature-card">
181
+ <h4>👋 Swipe</h4>
182
+ <p>Touch and drag in any direction. Detects left, right, up, down.</p>
183
+ </div>
184
+ <div class="feature-card">
185
+ <h4>🤏 Pinch</h4>
186
+ <p>Two-finger pinch gesture. Returns scale factor for zoom effects.</p>
187
+ </div>
188
+ <div class="feature-card">
189
+ <h4>🔄 Rotate</h4>
190
+ <p>Two-finger rotation gesture. Returns angle for rotation effects.</p>
191
+ </div>
192
+ </div>
193
+ </section>
194
+
195
+ <section class="section">
196
+ <h2 class="section__title">Usage</h2>
197
+
198
+ <h3>TouchGestureHandler</h3>
199
+ <div class="code-block">
200
+ <code><span class="keyword">import</span> { TouchGestureHandler } <span class="keyword">from</span> <span class="string">'move.gl'</span>;
201
+
202
+ <span class="keyword">const</span> gesture = <span class="keyword">new</span> <span class="function">TouchGestureHandler</span>(<span class="string">'myElement'</span>, {
203
+ <span class="function">onTap</span>: () => console.<span class="function">log</span>(<span class="string">'Tapped!'</span>),
204
+ <span class="function">onSwipe</span>: (direction, deltaX, deltaY) => {
205
+ console.<span class="function">log</span>(<span class="string">`Swiped ${direction}`</span>);
206
+ },
207
+ <span class="function">onPinch</span>: (scale) => console.<span class="function">log</span>(<span class="string">`Scale: ${scale}`</span>)
208
+ });</code>
209
+ </div>
210
+
211
+ <h3>GestureCallbacks Interface</h3>
212
+ <div class="code-block">
213
+ <code><span class="keyword">interface</span> GestureCallbacks {
214
+ onTap?: () => <span class="keyword">void</span>;
215
+ onSwipe?: (direction: SwipeDirection, deltaX: <span class="keyword">number</span>, deltaY: <span class="keyword">number</span>) => <span class="keyword">void</span>;
216
+ onPinch?: (scale: <span class="keyword">number</span>) => <span class="keyword">void</span>;
217
+ onRotate?: (angle: <span class="keyword">number</span>) => <span class="keyword">void</span>;
218
+ }
219
+
220
+ <span class="keyword">type</span> SwipeDirection = <span class="string">'left'</span> | <span class="string">'right'</span> | <span class="string">'up'</span> | <span class="string">'down'</span>;</code>
221
+ </div>
222
+ </section>
223
+
224
+ <section class="section">
225
+ <h2 class="section__title">More TypeScript Demos</h2>
226
+ <div class="feature-grid"> <a href="demo_draggable.html" class="feature-card" style="text-decoration: none;">
227
+ <h4>🖱️ Draggable</h4>
228
+ <p>Make any element draggable with mouse and touch support.</p>
229
+ </a> <a href="demo_keyboard.html" class="feature-card" style="text-decoration: none;">
230
+ <h4>⌨️ Virtual Keyboard</h4>
231
+ <p>Customizable on-screen keyboard with multiple layouts.</p>
232
+ </a> <a href="demo_screensaver.html" class="feature-card" style="text-decoration: none;">
233
+ <h4>🌙 Screensaver</h4>
234
+ <p>Inactivity-based screensaver with video and audio support.</p>
235
+ </a> <a href="demo_video_overlay.html" class="feature-card" style="text-decoration: none;">
236
+ <h4>🎬 Video Overlay</h4>
237
+ <p>Transparent video overlay with fade effects.</p>
238
+ </a> </div>
239
+ </section>
240
+ </div>
241
+ </main>
242
+
243
+ <footer class="footer">
244
+ <div class="footer__content">
245
+ <div class="footer__left">
246
+ <span class="footer__brand">move.gl</span>
247
+ <span class="footer__tagline">Motion & Animation Library</span>
248
+ </div>
249
+ <div class="footer__right">
250
+ <div class="footer__links">
251
+ <a href="https://github.com/stylescape/move.gl" class="footer__link" target="_blank">GitHub</a>
252
+ <a href="https://www.npmjs.com/package/move.gl" class="footer__link" target="_blank">npm</a>
253
+ <a href="https://www.scape.agency" class="footer__link" target="_blank">Scape Agency</a>
254
+ </div>
255
+ <span class="footer__copyright">© 2024 Scape Agency. MIT License.</span>
256
+ </div>
257
+ </div>
258
+ </footer>
259
+
260
+ <!-- Core Scripts -->
261
+ <script type="module" src="/js/move.gl.js"></script>
262
+ <script type="module" src="/js/demo.js"></script></body>
263
+
264
+ </html>