move.gl 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (463) hide show
  1. package/README.md +185 -11
  2. package/dist/LICENSE +21 -0
  3. package/dist/README.md +212 -0
  4. package/dist/css/move.gl.css +43859 -0
  5. package/dist/css/move.gl.min.css +19 -0
  6. package/dist/js/index.cjs +1171 -0
  7. package/dist/js/index.cjs.map +1 -0
  8. package/dist/js/index.d.cts +184 -0
  9. package/dist/js/index.d.ts +184 -0
  10. package/dist/js/index.mjs +1135 -0
  11. package/dist/js/index.mjs.map +1 -0
  12. package/dist/package.json +68 -0
  13. package/{scss → dist/scss}/classes/_animations.scss +33 -14
  14. package/dist/scss/classes/_controls.scss +314 -0
  15. package/dist/scss/classes/_effects.scss +283 -0
  16. package/dist/scss/classes/_index.scss +28 -0
  17. package/dist/scss/classes/_loaders.scss +779 -0
  18. package/dist/scss/classes/_transforms.scss +138 -0
  19. package/dist/scss/classes/_transitions.scss +264 -0
  20. package/{scss → dist/scss}/dev/_deprecation.scss +6 -3
  21. package/{scss → dist/scss}/dev/_modules.scss +5 -6
  22. package/dist/scss/docs.scss +2344 -0
  23. package/dist/scss/docs.scss.bak +3133 -0
  24. package/dist/scss/functions/_index.scss +22 -0
  25. package/dist/scss/functions/scenes/_bubble.scss +32 -0
  26. package/dist/scss/functions/scenes/_index.scss +21 -0
  27. package/dist/scss/index.scss +17 -0
  28. package/dist/scss/maps/_controls.scss +85 -0
  29. package/dist/scss/maps/_index.scss +22 -0
  30. package/{scss → dist/scss}/mixins/_accessibility.scss +24 -3
  31. package/{scss → dist/scss}/mixins/_boot.scss +4 -4
  32. package/dist/scss/mixins/_index.scss +41 -0
  33. package/dist/scss/mixins/_screensaver.scss +228 -0
  34. package/dist/scss/mixins/_shape.scss +315 -0
  35. package/dist/scss/mixins/animations/_base.scss +403 -0
  36. package/dist/scss/mixins/animations/_beat.scss +137 -0
  37. package/{scss → dist/scss}/mixins/animations/_blink.scss +60 -52
  38. package/dist/scss/mixins/animations/_bounce.scss +306 -0
  39. package/{scss → dist/scss}/mixins/animations/_elastic.scss +26 -22
  40. package/dist/scss/mixins/animations/_fade.scss +393 -0
  41. package/{scss → dist/scss}/mixins/animations/_flash.scss +53 -61
  42. package/dist/scss/mixins/animations/_flip.scss +251 -0
  43. package/{scss → dist/scss}/mixins/animations/_float.scss +47 -32
  44. package/{scss → dist/scss}/mixins/animations/_glow.scss +69 -58
  45. package/dist/scss/mixins/animations/_heartbeat.scss +195 -0
  46. package/dist/scss/mixins/animations/_hinge.scss +118 -0
  47. package/dist/scss/mixins/animations/_index.scss +97 -0
  48. package/dist/scss/mixins/animations/_jello.scss +123 -0
  49. package/dist/scss/mixins/animations/_jiggle.scss +162 -0
  50. package/dist/scss/mixins/animations/_lightspeed.scss +135 -0
  51. package/{scss → dist/scss}/mixins/animations/_nod.scss +57 -65
  52. package/dist/scss/mixins/animations/_pop.scss +153 -0
  53. package/dist/scss/mixins/animations/_pulse.scss +275 -0
  54. package/{scss → dist/scss}/mixins/animations/_ripple.scss +47 -55
  55. package/dist/scss/mixins/animations/_roll.scss +217 -0
  56. package/dist/scss/mixins/animations/_rotate.scss +728 -0
  57. package/dist/scss/mixins/animations/_rubber.scss +115 -0
  58. package/dist/scss/mixins/animations/_scale.scss +382 -0
  59. package/dist/scss/mixins/animations/_shake.scss +233 -0
  60. package/dist/scss/mixins/animations/_slide.scss +501 -0
  61. package/dist/scss/mixins/animations/_spin.scss +322 -0
  62. package/{scss → dist/scss}/mixins/animations/_sway.scss +32 -49
  63. package/{scss → dist/scss}/mixins/animations/_swing.scss +47 -49
  64. package/{scss → dist/scss}/mixins/animations/_tada.scss +44 -42
  65. package/{scss → dist/scss}/mixins/animations/_twist.scss +40 -55
  66. package/{scss → dist/scss}/mixins/animations/_wave.scss +36 -53
  67. package/dist/scss/mixins/animations/_wobble.scss +283 -0
  68. package/dist/scss/mixins/animations/_zoom.scss +394 -0
  69. package/{scss/mixins/mouse → dist/scss/mixins/controls}/_cursor.scss +60 -39
  70. package/dist/scss/mixins/controls/_hover.scss +625 -0
  71. package/dist/scss/mixins/controls/_index.scss +30 -0
  72. package/dist/scss/mixins/controls/_keyboard.scss +300 -0
  73. package/{scss/mixins/mouse → dist/scss/mixins/controls}/_pointer.scss +81 -72
  74. package/dist/scss/mixins/controls/_scroll.scss +460 -0
  75. package/{scss/mixins/scroll → dist/scss/mixins/controls}/_scrollbar.scss +50 -16
  76. package/dist/scss/mixins/controls/_selection.scss +208 -0
  77. package/dist/scss/mixins/controls/_touch.scss +401 -0
  78. package/dist/scss/mixins/effects/_blend.scss +128 -0
  79. package/dist/scss/mixins/effects/_filter.scss +470 -0
  80. package/dist/scss/mixins/effects/_focus.scss +83 -0
  81. package/dist/scss/mixins/effects/_gradient.scss +130 -0
  82. package/dist/scss/mixins/effects/_index.scss +28 -0
  83. package/dist/scss/mixins/effects/_mask.scss +76 -0
  84. package/dist/scss/mixins/effects/_opacity.scss +376 -0
  85. package/dist/scss/mixins/effects/_shadow.scss +429 -0
  86. package/dist/scss/mixins/keyframes/_base.scss +199 -0
  87. package/dist/scss/mixins/keyframes/_index.scss +24 -0
  88. package/dist/scss/mixins/keyframes/animations/_beat.scss +280 -0
  89. package/dist/scss/mixins/keyframes/animations/_blink.scss +82 -0
  90. package/dist/scss/mixins/keyframes/animations/_bounce.scss +292 -0
  91. package/dist/scss/mixins/keyframes/animations/_fade.scss +311 -0
  92. package/dist/scss/mixins/keyframes/animations/_flash.scss +165 -0
  93. package/dist/scss/mixins/keyframes/animations/_flip.scss +266 -0
  94. package/{scss/mixins → dist/scss/mixins/keyframes}/animations/_index.scss +19 -10
  95. package/dist/scss/mixins/keyframes/animations/_jiggle.scss +85 -0
  96. package/dist/scss/mixins/keyframes/animations/_lightspeed.scss +73 -0
  97. package/dist/scss/mixins/keyframes/animations/_nod.scss +79 -0
  98. package/dist/scss/mixins/keyframes/animations/_pop.scss +78 -0
  99. package/dist/scss/mixins/keyframes/animations/_pulse.scss +225 -0
  100. package/dist/scss/mixins/keyframes/animations/_ripple.scss +94 -0
  101. package/dist/scss/mixins/keyframes/animations/_roll.scss +124 -0
  102. package/dist/scss/mixins/keyframes/animations/_rotate.scss +360 -0
  103. package/dist/scss/mixins/keyframes/animations/_rubber.scss +81 -0
  104. package/dist/scss/mixins/keyframes/animations/_scale.scss +308 -0
  105. package/dist/scss/mixins/keyframes/animations/_shake.scss +270 -0
  106. package/dist/scss/mixins/keyframes/animations/_slide.scss +345 -0
  107. package/dist/scss/mixins/keyframes/animations/_spin.scss +270 -0
  108. package/dist/scss/mixins/keyframes/animations/_sway.scss +83 -0
  109. package/dist/scss/mixins/keyframes/animations/_twist.scss +89 -0
  110. package/dist/scss/mixins/keyframes/animations/_wave.scss +90 -0
  111. package/dist/scss/mixins/keyframes/animations/_wobble.scss +293 -0
  112. package/dist/scss/mixins/keyframes/animations/_zoom.scss +345 -0
  113. package/dist/scss/mixins/loaders/_bars.scss +128 -0
  114. package/dist/scss/mixins/loaders/_base.scss +39 -0
  115. package/dist/scss/mixins/loaders/_bubble.scss +395 -0
  116. package/dist/scss/mixins/loaders/_circle.scss +456 -0
  117. package/dist/scss/mixins/loaders/_dots.scss +248 -0
  118. package/dist/scss/mixins/loaders/_graph.scss +542 -0
  119. package/dist/scss/mixins/loaders/_index.scss +77 -0
  120. package/dist/scss/mixins/loaders/_line.scss +471 -0
  121. package/dist/scss/mixins/loaders/_objects.scss +563 -0
  122. package/dist/scss/mixins/loaders/_progress.scss +477 -0
  123. package/dist/scss/mixins/loaders/_rect.scss +480 -0
  124. package/dist/scss/mixins/loaders/_rings.scss +377 -0
  125. package/dist/scss/mixins/loaders/_skeleton.scss +461 -0
  126. package/dist/scss/mixins/loaders/_special.scss +611 -0
  127. package/dist/scss/mixins/loaders/_spinner.scss +175 -0
  128. package/dist/scss/mixins/loaders/_text.scss +446 -0
  129. package/{scss → dist/scss}/mixins/transforms/_flip.scss +16 -18
  130. package/dist/scss/mixins/transforms/_index.scss +28 -0
  131. package/dist/scss/mixins/transforms/_matrix.scss +18 -0
  132. package/{scss → dist/scss}/mixins/transforms/_perspective.scss +18 -1
  133. package/{scss → dist/scss}/mixins/transforms/_rotate.scss +9 -14
  134. package/{scss → dist/scss}/mixins/transforms/_scale.scss +16 -1
  135. package/{scss → dist/scss}/mixins/transforms/_skew.scss +16 -2
  136. package/{scss → dist/scss}/mixins/transforms/_translate.scss +16 -2
  137. package/dist/scss/mixins/transitions/_index.scss +22 -0
  138. package/dist/scss/mixins/transitions/_transition.scss +43 -0
  139. package/dist/scss/variables/_animations.scss +300 -0
  140. package/dist/scss/variables/_controls.scss +178 -0
  141. package/dist/scss/variables/_effects.scss +87 -0
  142. package/dist/scss/variables/_index.scss +27 -0
  143. package/dist/scss/variables/_keyframes.scss +28 -0
  144. package/dist/scss/variables/_loaders.scss +75 -0
  145. package/dist/scss/variables/_transforms.scss +85 -0
  146. package/dist/scss/variables/_transitions.scss +80 -0
  147. package/dist/ts/Draggable.ts +143 -0
  148. package/dist/ts/Gesture.ts +226 -0
  149. package/dist/ts/Keyboard.ts +195 -0
  150. package/dist/ts/LoaderManager.ts +662 -0
  151. package/dist/ts/Screensaver.ts +192 -0
  152. package/dist/ts/VideoOverlay.ts +205 -0
  153. package/dist/ts/demo.ts +1108 -0
  154. package/dist/ts/index.ts +58 -0
  155. package/package.json +90 -53
  156. package/src/html/_base.html +138 -0
  157. package/src/html/base.html +147 -0
  158. package/src/html/core-concepts.html +282 -0
  159. package/src/html/demo_base.html +171 -0
  160. package/src/html/demo_draggable.html +250 -0
  161. package/src/html/demo_gesture.html +264 -0
  162. package/src/html/demo_keyboard.html +224 -0
  163. package/src/html/demo_screensaver.html +258 -0
  164. package/src/html/demo_video_overlay.html +291 -0
  165. package/src/html/getting-started.html +242 -0
  166. package/src/html/index.html +400 -0
  167. package/src/html/keyboard.html +14 -0
  168. package/src/html/partials/_demo_links.html +21 -0
  169. package/src/html/partials/_footer.html +18 -0
  170. package/src/html/partials/_head.html +21 -0
  171. package/src/html/partials/_nav.html +84 -0
  172. package/src/html/partials/_theme_toggle.html +11 -0
  173. package/src/html/screensaver.html +20 -0
  174. package/src/html/test_animations.html +813 -0
  175. package/src/html/test_attention.html +281 -0
  176. package/src/html/test_bounce.html +201 -0
  177. package/src/html/test_effects.html +1348 -0
  178. package/src/html/test_fade.html +213 -0
  179. package/src/html/test_flip.html +208 -0
  180. package/src/html/test_keyframes.html +415 -0
  181. package/src/html/test_loaders.html +1489 -0
  182. package/src/html/test_mouse.html +516 -0
  183. package/src/html/test_overview.html +1444 -0
  184. package/src/html/test_pulse.html +212 -0
  185. package/src/html/test_scale.html +204 -0
  186. package/src/html/test_shake.html +232 -0
  187. package/src/html/test_slide.html +212 -0
  188. package/src/html/test_special.html +257 -0
  189. package/src/html/test_spin.html +216 -0
  190. package/src/html/test_transforms.html +332 -0
  191. package/src/html/test_transitions.html +245 -0
  192. package/src/html/test_zoom.html +188 -0
  193. package/src/html/video_overlay.html +27 -0
  194. package/src/jinja/_base.html.jinja +50 -0
  195. package/src/jinja/base.html.jinja +48 -0
  196. package/src/jinja/core-concepts.html.jinja +148 -0
  197. package/src/jinja/demo_draggable.html.jinja +114 -0
  198. package/src/jinja/demo_gesture.html.jinja +128 -0
  199. package/src/jinja/demo_keyboard.html.jinja +88 -0
  200. package/src/jinja/demo_screensaver.html.jinja +122 -0
  201. package/src/jinja/demo_video_overlay.html.jinja +155 -0
  202. package/src/jinja/getting-started.html.jinja +108 -0
  203. package/src/jinja/index.html.jinja +268 -0
  204. package/src/jinja/index.json +5 -0
  205. package/src/jinja/move.gl.css +7741 -0
  206. package/src/jinja/partials/_code_block.html.jinja +17 -0
  207. package/src/jinja/partials/_demo_links.html.jinja +41 -0
  208. package/src/jinja/partials/_feature_card.html.jinja +20 -0
  209. package/src/jinja/partials/_footer.html.jinja +22 -0
  210. package/src/jinja/partials/_head.html.jinja +27 -0
  211. package/src/jinja/partials/_nav.html.jinja +79 -0
  212. package/src/jinja/partials/_theme_toggle.html.jinja +15 -0
  213. package/src/jinja/test_animations.html.jinja +679 -0
  214. package/src/jinja/test_attention.html.jinja +147 -0
  215. package/src/jinja/test_bounce.html.jinja +67 -0
  216. package/src/jinja/test_effects.html.jinja +1218 -0
  217. package/src/jinja/test_fade.html.jinja +79 -0
  218. package/src/jinja/test_flip.html.jinja +74 -0
  219. package/src/jinja/test_keyframes.html.jinja +281 -0
  220. package/src/jinja/test_loaders.html.jinja +1358 -0
  221. package/src/jinja/test_mouse.html.jinja +382 -0
  222. package/src/jinja/test_overview.html.jinja +1313 -0
  223. package/src/jinja/test_pulse.html.jinja +78 -0
  224. package/src/jinja/test_scale.html.jinja +70 -0
  225. package/src/jinja/test_shake.html.jinja +98 -0
  226. package/src/jinja/test_slide.html.jinja +78 -0
  227. package/src/jinja/test_special.html.jinja +123 -0
  228. package/src/jinja/test_spin.html.jinja +82 -0
  229. package/src/jinja/test_transforms.html.jinja +198 -0
  230. package/src/jinja/test_transitions.html.jinja +111 -0
  231. package/src/jinja/test_zoom.html.jinja +54 -0
  232. package/src/scss/classes/_animations.scss +595 -0
  233. package/src/scss/classes/_controls.scss +314 -0
  234. package/src/scss/classes/_effects.scss +283 -0
  235. package/src/scss/classes/_index.scss +28 -0
  236. package/src/scss/classes/_loaders.scss +779 -0
  237. package/src/scss/classes/_transforms.scss +138 -0
  238. package/src/scss/classes/_transitions.scss +264 -0
  239. package/src/scss/dev/_banner.scss +36 -0
  240. package/src/scss/dev/_debug.scss +18 -0
  241. package/src/scss/dev/_deprecation.scss +13 -0
  242. package/src/scss/dev/_index.scss +8 -0
  243. package/src/scss/dev/_modules.scss +23 -0
  244. package/src/scss/docs.scss +2344 -0
  245. package/src/scss/docs.scss.bak +3133 -0
  246. package/src/scss/functions/_index.scss +22 -0
  247. package/src/scss/functions/scenes/_bubble.scss +32 -0
  248. package/src/scss/functions/scenes/_index.scss +21 -0
  249. package/src/scss/index.scss +17 -0
  250. package/src/scss/maps/_controls.scss +85 -0
  251. package/src/scss/maps/_index.scss +22 -0
  252. package/src/scss/mixins/_accessibility.scss +91 -0
  253. package/src/scss/mixins/_boot.scss +51 -0
  254. package/src/scss/mixins/_index.scss +41 -0
  255. package/src/scss/mixins/_screensaver.scss +228 -0
  256. package/src/scss/mixins/_shape.scss +315 -0
  257. package/src/scss/mixins/animations/_base.scss +403 -0
  258. package/src/scss/mixins/animations/_beat.scss +137 -0
  259. package/src/scss/mixins/animations/_blink.scss +159 -0
  260. package/src/scss/mixins/animations/_bounce.scss +306 -0
  261. package/src/scss/mixins/animations/_elastic.scss +69 -0
  262. package/src/scss/mixins/animations/_fade.scss +393 -0
  263. package/src/scss/mixins/animations/_flash.scss +169 -0
  264. package/src/scss/mixins/animations/_flip.scss +251 -0
  265. package/src/scss/mixins/animations/_float.scss +141 -0
  266. package/src/scss/mixins/animations/_glow.scss +190 -0
  267. package/src/scss/mixins/animations/_heartbeat.scss +195 -0
  268. package/src/scss/mixins/animations/_hinge.scss +118 -0
  269. package/src/scss/mixins/animations/_index.scss +97 -0
  270. package/src/scss/mixins/animations/_jello.scss +123 -0
  271. package/src/scss/mixins/animations/_jiggle.scss +162 -0
  272. package/src/scss/mixins/animations/_lightspeed.scss +135 -0
  273. package/src/scss/mixins/animations/_nod.scss +153 -0
  274. package/src/scss/mixins/animations/_pop.scss +153 -0
  275. package/src/scss/mixins/animations/_pulse.scss +275 -0
  276. package/src/scss/mixins/animations/_ripple.scss +161 -0
  277. package/src/scss/mixins/animations/_roll.scss +217 -0
  278. package/src/scss/mixins/animations/_rotate.scss +728 -0
  279. package/src/scss/mixins/animations/_rubber.scss +115 -0
  280. package/src/scss/mixins/animations/_scale.scss +382 -0
  281. package/src/scss/mixins/animations/_shake.scss +233 -0
  282. package/src/scss/mixins/animations/_slide.scss +501 -0
  283. package/src/scss/mixins/animations/_spin.scss +322 -0
  284. package/src/scss/mixins/animations/_sway.scss +150 -0
  285. package/src/scss/mixins/animations/_swing.scss +245 -0
  286. package/src/scss/mixins/animations/_tada.scss +235 -0
  287. package/src/scss/mixins/animations/_twist.scss +162 -0
  288. package/src/scss/mixins/animations/_wave.scss +149 -0
  289. package/src/scss/mixins/animations/_wobble.scss +283 -0
  290. package/src/scss/mixins/animations/_zoom.scss +394 -0
  291. package/src/scss/mixins/controls/_cursor.scss +203 -0
  292. package/src/scss/mixins/controls/_hover.scss +625 -0
  293. package/src/scss/mixins/controls/_index.scss +30 -0
  294. package/src/scss/mixins/controls/_keyboard.scss +300 -0
  295. package/src/scss/mixins/controls/_pointer.scss +267 -0
  296. package/src/scss/mixins/controls/_scroll.scss +460 -0
  297. package/src/scss/mixins/controls/_scrollbar.scss +283 -0
  298. package/src/scss/mixins/controls/_selection.scss +208 -0
  299. package/src/scss/mixins/controls/_touch.scss +401 -0
  300. package/src/scss/mixins/effects/_blend.scss +128 -0
  301. package/src/scss/mixins/effects/_filter.scss +470 -0
  302. package/src/scss/mixins/effects/_focus.scss +83 -0
  303. package/src/scss/mixins/effects/_gradient.scss +130 -0
  304. package/src/scss/mixins/effects/_index.scss +28 -0
  305. package/src/scss/mixins/effects/_mask.scss +76 -0
  306. package/src/scss/mixins/effects/_opacity.scss +376 -0
  307. package/src/scss/mixins/effects/_shadow.scss +429 -0
  308. package/src/scss/mixins/keyframes/_base.scss +199 -0
  309. package/src/scss/mixins/keyframes/_index.scss +24 -0
  310. package/src/scss/mixins/keyframes/animations/_beat.scss +280 -0
  311. package/src/scss/mixins/keyframes/animations/_blink.scss +82 -0
  312. package/src/scss/mixins/keyframes/animations/_bounce.scss +292 -0
  313. package/src/scss/mixins/keyframes/animations/_fade.scss +311 -0
  314. package/src/scss/mixins/keyframes/animations/_flash.scss +165 -0
  315. package/src/scss/mixins/keyframes/animations/_flip.scss +266 -0
  316. package/src/scss/mixins/keyframes/animations/_index.scss +46 -0
  317. package/src/scss/mixins/keyframes/animations/_jiggle.scss +85 -0
  318. package/src/scss/mixins/keyframes/animations/_lightspeed.scss +73 -0
  319. package/src/scss/mixins/keyframes/animations/_nod.scss +79 -0
  320. package/src/scss/mixins/keyframes/animations/_pop.scss +78 -0
  321. package/src/scss/mixins/keyframes/animations/_pulse.scss +225 -0
  322. package/src/scss/mixins/keyframes/animations/_ripple.scss +94 -0
  323. package/src/scss/mixins/keyframes/animations/_roll.scss +124 -0
  324. package/src/scss/mixins/keyframes/animations/_rotate.scss +360 -0
  325. package/src/scss/mixins/keyframes/animations/_rubber.scss +81 -0
  326. package/src/scss/mixins/keyframes/animations/_scale.scss +308 -0
  327. package/src/scss/mixins/keyframes/animations/_shake.scss +270 -0
  328. package/src/scss/mixins/keyframes/animations/_slide.scss +345 -0
  329. package/src/scss/mixins/keyframes/animations/_spin.scss +270 -0
  330. package/src/scss/mixins/keyframes/animations/_sway.scss +83 -0
  331. package/src/scss/mixins/keyframes/animations/_twist.scss +89 -0
  332. package/src/scss/mixins/keyframes/animations/_wave.scss +90 -0
  333. package/src/scss/mixins/keyframes/animations/_wobble.scss +293 -0
  334. package/src/scss/mixins/keyframes/animations/_zoom.scss +345 -0
  335. package/src/scss/mixins/loaders/_bars.scss +128 -0
  336. package/src/scss/mixins/loaders/_base.scss +39 -0
  337. package/src/scss/mixins/loaders/_bubble.scss +395 -0
  338. package/src/scss/mixins/loaders/_circle.scss +456 -0
  339. package/src/scss/mixins/loaders/_dots.scss +248 -0
  340. package/src/scss/mixins/loaders/_graph.scss +542 -0
  341. package/src/scss/mixins/loaders/_index.scss +77 -0
  342. package/src/scss/mixins/loaders/_line.scss +471 -0
  343. package/src/scss/mixins/loaders/_objects.scss +563 -0
  344. package/src/scss/mixins/loaders/_progress.scss +477 -0
  345. package/src/scss/mixins/loaders/_rect.scss +480 -0
  346. package/src/scss/mixins/loaders/_rings.scss +377 -0
  347. package/src/scss/mixins/loaders/_skeleton.scss +461 -0
  348. package/src/scss/mixins/loaders/_special.scss +611 -0
  349. package/src/scss/mixins/loaders/_spinner.scss +175 -0
  350. package/src/scss/mixins/loaders/_text.scss +446 -0
  351. package/src/scss/mixins/transforms/_flip.scss +74 -0
  352. package/src/scss/mixins/transforms/_index.scss +28 -0
  353. package/src/scss/mixins/transforms/_matrix.scss +18 -0
  354. package/src/scss/mixins/transforms/_perspective.scss +28 -0
  355. package/src/scss/mixins/transforms/_rotate.scss +96 -0
  356. package/src/scss/mixins/transforms/_scale.scss +26 -0
  357. package/src/scss/mixins/transforms/_skew.scss +27 -0
  358. package/src/scss/mixins/transforms/_translate.scss +27 -0
  359. package/src/scss/mixins/transitions/_index.scss +22 -0
  360. package/src/scss/mixins/transitions/_transition.scss +43 -0
  361. package/src/scss/variables/_animations.scss +300 -0
  362. package/src/scss/variables/_controls.scss +178 -0
  363. package/src/scss/variables/_effects.scss +87 -0
  364. package/src/scss/variables/_index.scss +27 -0
  365. package/src/scss/variables/_keyframes.scss +28 -0
  366. package/src/scss/variables/_loaders.scss +75 -0
  367. package/src/scss/variables/_transforms.scss +85 -0
  368. package/src/scss/variables/_transitions.scss +80 -0
  369. package/src/ts/Draggable.ts +143 -0
  370. package/src/ts/Gesture.ts +226 -0
  371. package/src/ts/Keyboard.ts +195 -0
  372. package/src/ts/LoaderManager.ts +662 -0
  373. package/src/ts/Screensaver.ts +192 -0
  374. package/src/ts/VideoOverlay.ts +205 -0
  375. package/src/ts/demo.ts +1108 -0
  376. package/src/ts/index.ts +58 -0
  377. package/css/move.gl.css +0 -2
  378. package/css/move.gl.min.css +0 -2
  379. package/scss/classes/_transforms.scss +0 -124
  380. package/scss/classes/keyboard.scss +0 -18
  381. package/scss/classes/screensaver.scss +0 -15
  382. package/scss/effects/_filter.scss +0 -176
  383. package/scss/effects/_index.scss +0 -23
  384. package/scss/effects/_opacity.scss +0 -62
  385. package/scss/effects/_shadow.scss +0 -175
  386. package/scss/functions/scenes/_bubble.scss +0 -19
  387. package/scss/functions/scenes/_index.scss +0 -20
  388. package/scss/index.scss +0 -0
  389. package/scss/keyframes/_beat.scss +0 -26
  390. package/scss/keyframes/_index.scss +0 -0
  391. package/scss/maps/_index.scss +0 -0
  392. package/scss/maps/_mouse.scss +0 -96
  393. package/scss/mixins/_hover.scss +0 -51
  394. package/scss/mixins/_index.scss +0 -0
  395. package/scss/mixins/_selection.scss +0 -321
  396. package/scss/mixins/_shape.scss +0 -44
  397. package/scss/mixins/_touch.scss +0 -95
  398. package/scss/mixins/animations/--hover.scss +0 -107
  399. package/scss/mixins/animations/_base.scss +0 -337
  400. package/scss/mixins/animations/_beat.scss +0 -119
  401. package/scss/mixins/animations/_bounce.scss +0 -192
  402. package/scss/mixins/animations/_fade.scss +0 -154
  403. package/scss/mixins/animations/_flip.scss +0 -72
  404. package/scss/mixins/animations/_heartbeat.scss +0 -175
  405. package/scss/mixins/animations/_hinge.scss +0 -119
  406. package/scss/mixins/animations/_jello.scss +0 -129
  407. package/scss/mixins/animations/_jiggle.scss +0 -163
  408. package/scss/mixins/animations/_lightspeed.scss +0 -130
  409. package/scss/mixins/animations/_pop.scss +0 -150
  410. package/scss/mixins/animations/_pulse.scss +0 -213
  411. package/scss/mixins/animations/_roll.scss +0 -261
  412. package/scss/mixins/animations/_rotate.scss +0 -428
  413. package/scss/mixins/animations/_rubber.scss +0 -116
  414. package/scss/mixins/animations/_scale.scss +0 -113
  415. package/scss/mixins/animations/_shake.scss +0 -182
  416. package/scss/mixins/animations/_slide.scss +0 -294
  417. package/scss/mixins/animations/_spin.scss +0 -219
  418. package/scss/mixins/animations/_wobble.scss +0 -254
  419. package/scss/mixins/animations/_zoom.scss +0 -166
  420. package/scss/mixins/effects/_filter.scss +0 -148
  421. package/scss/mixins/effects/_index.scss +0 -0
  422. package/scss/mixins/effects/_shadow.scss +0 -21
  423. package/scss/mixins/loaders/_index.scss +0 -0
  424. package/scss/mixins/loaders/_progress.scss +0 -174
  425. package/scss/mixins/loaders/_spinner.scss +0 -101
  426. package/scss/mixins/loaders/circle_01.scss +0 -22
  427. package/scss/mixins/loaders/circle_02.scss +0 -19
  428. package/scss/mixins/loaders/circle_03.scss +0 -29
  429. package/scss/mixins/loaders/circle_inner_01.scss +0 -33
  430. package/scss/mixins/loaders/circle_inner_02.scss +0 -33
  431. package/scss/mixins/loaders/circle_inner_03.scss +0 -34
  432. package/scss/mixins/mouse/_index.scss +0 -0
  433. package/scss/mixins/scroll/_index.scss +0 -0
  434. package/scss/mixins/scroll/_scroll.scss +0 -104
  435. package/scss/mixins/transforms/_index.scss +0 -23
  436. package/scss/mixins/transforms/_matrix.scss +0 -1
  437. package/scss/mixins/transitions/_index.scss +0 -0
  438. package/scss/mixins/transitions/_transition.scss +0 -13
  439. package/scss/variables/_animation.scss +0 -91
  440. package/scss/variables/_index.scss +0 -0
  441. package/ts/ARContent.ts +0 -27
  442. package/ts/ARInteraction.ts +0 -34
  443. package/ts/AdaptiveUI.ts +0 -25
  444. package/ts/ContentStreaming.ts +0 -20
  445. package/ts/Draggable.ts +0 -71
  446. package/ts/DynamicEnvironment.ts +0 -60
  447. package/ts/Gesture.ts +0 -168
  448. package/ts/ImmersiveAudio.ts +0 -40
  449. package/ts/InteractiveCanvas.ts +0 -177
  450. package/ts/InteractiveVideo.ts +0 -29
  451. package/ts/Keyboard.ts +0 -162
  452. package/ts/RealTimeCollaboration.ts +0 -25
  453. package/ts/Screensaver.ts +0 -140
  454. package/ts/SpatialNavigation.ts +0 -38
  455. package/ts/UserProfile.ts +0 -27
  456. package/ts/VRExperience.ts +0 -58
  457. package/ts/VideoOverlay.ts +0 -116
  458. package/ts/index.ts +0 -0
  459. /package/{scss → dist/scss}/dev/_banner.scss +0 -0
  460. /package/{scss → dist/scss}/dev/_debug.scss +0 -0
  461. /package/{scss → dist/scss}/dev/_index.scss +0 -0
  462. /package/{scss/classes/_index.scss → src/html/partials/_code_block.html} +0 -0
  463. /package/{scss/functions/_index.scss → src/html/partials/_feature_card.html} +0 -0
package/src/html/test_effects.html ADDED
@@ -0,0 +1,1348 @@
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
+ <style>
27
+ .effect-grid {
28
+ display: grid;
29
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
30
+ gap: 1.5rem;
31
+ margin: 2rem 0;
32
+ }
33
+
34
+ .effect-card {
35
+ background: var(--color-surface, #fff);
36
+ border-radius: 12px;
37
+ overflow: hidden;
38
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
39
+ }
40
+
41
+ .effect-card__preview {
42
+ height: 120px;
43
+ display: flex;
44
+ align-items: center;
45
+ justify-content: center;
46
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
47
+ position: relative;
48
+ overflow: hidden;
49
+ }
50
+
51
+ .effect-card__preview img {
52
+ width: 100%;
53
+ height: 100%;
54
+ object-fit: cover;
55
+ }
56
+
57
+ .effect-card__info {
58
+ padding: 0.75rem 1rem;
59
+ text-align: center;
60
+ }
61
+
62
+ .effect-card__title {
63
+ font-size: 0.85rem;
64
+ font-weight: 600;
65
+ margin: 0 0 0.25rem;
66
+ color: var(--color-text, #333);
67
+ }
68
+
69
+ .effect-card__code {
70
+ padding: 0.5rem 0.75rem;
71
+ background: var(--color-code-bg, #f5f5f5);
72
+ border-top: 1px solid var(--color-border, #e0e0e0);
73
+ }
74
+
75
+ .effect-card__code code {
76
+ font-size: 0.7rem;
77
+ word-break: break-all;
78
+ color: var(--color-code, #e91e63);
79
+ }
80
+
81
+ .demo-box-effect {
82
+ width: 80px;
83
+ height: 80px;
84
+ background: #fff;
85
+ border-radius: 8px;
86
+ display: flex;
87
+ align-items: center;
88
+ justify-content: center;
89
+ font-size: 0.75rem;
90
+ font-weight: 600;
91
+ color: #333;
92
+ }
93
+
94
+ .demo-box-shadow {
95
+ width: 80px;
96
+ height: 80px;
97
+ background: #fff;
98
+ border-radius: 8px;
99
+ display: flex;
100
+ align-items: center;
101
+ justify-content: center;
102
+ font-size: 0.7rem;
103
+ font-weight: 500;
104
+ color: #666;
105
+ }
106
+
107
+ .section-divider {
108
+ margin: 3rem 0 2rem;
109
+ padding-top: 2rem;
110
+ border-top: 1px solid var(--color-border, #e0e0e0);
111
+ }
112
+
113
+ h2 {
114
+ font-size: 1.5rem;
115
+ margin-bottom: 0.5rem;
116
+ }
117
+
118
+ h2+p {
119
+ color: var(--color-text-muted, #666);
120
+ margin-bottom: 1.5rem;
121
+ }
122
+ </style></head>
123
+
124
+ <body class="">
125
+
126
+
127
+
128
+ <div class="nav-wrapper">
129
+ <nav class="nav">
130
+ <div class="nav__inner">
131
+ <a href="index.html" class="nav__logo">
132
+ <span class="nav__logo-text">move.gl</span>
133
+ <span class="nav__version">v0.0.1</span>
134
+ </a>
135
+ <div class="nav__right">
136
+
137
+ <button type="button" class="theme-toggle" data-toggle="theme" title="Toggle dark mode" aria-label="Toggle dark mode">
138
+ <svg class="theme-icon theme-icon--light" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
139
+ <path
140
+ 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" />
141
+ </svg>
142
+ <svg class="theme-icon theme-icon--dark" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
143
+ <path d="M6.2 1A6.98 6.98 0 008 7a6.98 6.98 0 00-1.8 6A7 7 0 116.2 1z" />
144
+ </svg>
145
+ </button>
146
+
147
+ <div class="nav__dropdown" id="nav-dropdown">
148
+ <button type="button" class="nav__dropdown-toggle" aria-expanded="false" aria-haspopup="true">
149
+ <span>Docs</span>
150
+ <svg width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor"
151
+ stroke-width="1.5">
152
+ <path d="M1 1l4 4 4-4" />
153
+ </svg>
154
+ </button>
155
+ <div class="nav__dropdown-menu" role="menu">
156
+ <div class="nav__dropdown-section">
157
+ <span class="nav__dropdown-label">Learn</span>
158
+ <a href="getting-started.html" role="menuitem">Getting Started</a>
159
+ <a href="core-concepts.html" role="menuitem">Core Concepts</a>
160
+ </div>
161
+ <div class="nav__dropdown-section">
162
+ <span class="nav__dropdown-label">Overview</span>
163
+ <a href="test_overview.html" role="menuitem">All Animations</a>
164
+ </div>
165
+ <div class="nav__dropdown-section">
166
+ <span class="nav__dropdown-label">Animations</span>
167
+ <a href="test_fade.html" role="menuitem">Fade</a>
168
+ <a href="test_slide.html" role="menuitem">Slide</a>
169
+ <a href="test_bounce.html" role="menuitem">Bounce</a>
170
+ <a href="test_zoom.html" role="menuitem">Zoom</a>
171
+ <a href="test_flip.html" role="menuitem">Flip</a>
172
+ <a href="test_scale.html" role="menuitem">Scale</a>
173
+ <a href="test_spin.html" role="menuitem">Spin & Rotate</a>
174
+ <a href="test_pulse.html" role="menuitem">Pulse</a>
175
+ <a href="test_shake.html" role="menuitem">Shake & Wobble</a>
176
+ <a href="test_attention.html" role="menuitem">Attention</a>
177
+ <a href="test_special.html" role="menuitem">Special Effects</a>
178
+ </div>
179
+ <div class="nav__dropdown-section">
180
+ <span class="nav__dropdown-label">Effects</span>
181
+ <a href="test_loaders.html" role="menuitem">Loaders</a>
182
+ <a href="test_transitions.html" role="menuitem">Transitions</a>
183
+ <a href="test_transforms.html" role="menuitem">Transforms</a>
184
+ <a href="test_effects.html" role="menuitem">Filter Effects</a>
185
+ <a href="test_keyframes.html" role="menuitem">Keyframes</a>
186
+ <a href="test_mouse.html" role="menuitem">Mouse Interactions</a>
187
+ </div>
188
+ <div class="nav__dropdown-section">
189
+ <span class="nav__dropdown-label">TypeScript Demos</span>
190
+ <a href="demo_draggable.html" role="menuitem">Draggable</a>
191
+ <a href="demo_gesture.html" role="menuitem">Gesture Handler</a>
192
+ <a href="demo_keyboard.html" role="menuitem">Virtual Keyboard</a>
193
+ <a href="demo_screensaver.html" role="menuitem">Screensaver</a>
194
+ <a href="demo_video_overlay.html" role="menuitem">Video Overlay</a>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <a href="https://github.com/stylescape/move.gl" class="nav__github" target="_blank"
200
+ title="View on GitHub">
201
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
202
+ <path
203
+ 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" />
204
+ </svg>
205
+ </a>
206
+ </div>
207
+ </div>
208
+ </nav>
209
+ </div>
210
+
211
+ <div class="container">
212
+ <header class="header"><p class="eyebrow">Classes</p>
213
+ <h1>CSS Effects & Filters</h1> </header>
214
+
215
+ <main>
216
+
217
+
218
+
219
+ <section>
220
+ <h2>🌫️ Blur Filters</h2>
221
+ <p>CSS blur filter effects at various intensities</p>
222
+
223
+ <div class="effect-grid">
224
+ <div class="effect-card">
225
+ <div class="effect-card__preview">
226
+ <img src="https://picsum.photos/200/150?random=1" alt="Original">
227
+ </div>
228
+ <div class="effect-card__info">
229
+ <h4 class="effect-card__title">Original</h4>
230
+ </div>
231
+ <div class="effect-card__code">
232
+ <code>No filter applied</code>
233
+ </div>
234
+ </div>
235
+ <div class="effect-card">
236
+ <div class="effect-card__preview filter--blur-sm">
237
+ <img src="https://picsum.photos/200/150?random=1" alt="blur-sm">
238
+ </div>
239
+ <div class="effect-card__info">
240
+ <h4 class="effect-card__title">blur-sm (2px)</h4>
241
+ </div>
242
+ <div class="effect-card__code">
243
+ <code>.filter--blur-sm</code>
244
+ </div>
245
+ </div>
246
+ <div class="effect-card">
247
+ <div class="effect-card__preview filter--blur">
248
+ <img src="https://picsum.photos/200/150?random=1" alt="blur">
249
+ </div>
250
+ <div class="effect-card__info">
251
+ <h4 class="effect-card__title">blur (4px)</h4>
252
+ </div>
253
+ <div class="effect-card__code">
254
+ <code>.filter--blur</code>
255
+ </div>
256
+ </div>
257
+ <div class="effect-card">
258
+ <div class="effect-card__preview filter--blur-md">
259
+ <img src="https://picsum.photos/200/150?random=1" alt="blur-md">
260
+ </div>
261
+ <div class="effect-card__info">
262
+ <h4 class="effect-card__title">blur-md (8px)</h4>
263
+ </div>
264
+ <div class="effect-card__code">
265
+ <code>.filter--blur-md</code>
266
+ </div>
267
+ </div>
268
+ <div class="effect-card">
269
+ <div class="effect-card__preview filter--blur-lg">
270
+ <img src="https://picsum.photos/200/150?random=1" alt="blur-lg">
271
+ </div>
272
+ <div class="effect-card__info">
273
+ <h4 class="effect-card__title">blur-lg (16px)</h4>
274
+ </div>
275
+ <div class="effect-card__code">
276
+ <code>.filter--blur-lg</code>
277
+ </div>
278
+ </div>
279
+ <div class="effect-card">
280
+ <div class="effect-card__preview filter--blur-xl">
281
+ <img src="https://picsum.photos/200/150?random=1" alt="blur-xl">
282
+ </div>
283
+ <div class="effect-card__info">
284
+ <h4 class="effect-card__title">blur-xl (24px)</h4>
285
+ </div>
286
+ <div class="effect-card__code">
287
+ <code>.filter--blur-xl</code>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </section>
292
+
293
+
294
+
295
+
296
+ <section class="section-divider">
297
+ <h2>⬛ Grayscale Filters</h2>
298
+ <p>Convert images to grayscale at different intensities</p>
299
+
300
+ <div class="effect-grid">
301
+ <div class="effect-card">
302
+ <div class="effect-card__preview">
303
+ <img src="https://picsum.photos/200/150?random=2" alt="Original">
304
+ </div>
305
+ <div class="effect-card__info">
306
+ <h4 class="effect-card__title">Original</h4>
307
+ </div>
308
+ <div class="effect-card__code">
309
+ <code>No filter applied</code>
310
+ </div>
311
+ </div>
312
+ <div class="effect-card">
313
+ <div class="effect-card__preview filter--grayscale-0">
314
+ <img src="https://picsum.photos/200/150?random=2" alt="grayscale-0">
315
+ </div>
316
+ <div class="effect-card__info">
317
+ <h4 class="effect-card__title">grayscale-0</h4>
318
+ </div>
319
+ <div class="effect-card__code">
320
+ <code>.filter--grayscale-0</code>
321
+ </div>
322
+ </div>
323
+ <div class="effect-card">
324
+ <div class="effect-card__preview filter--grayscale-50">
325
+ <img src="https://picsum.photos/200/150?random=2" alt="grayscale-50">
326
+ </div>
327
+ <div class="effect-card__info">
328
+ <h4 class="effect-card__title">grayscale-50</h4>
329
+ </div>
330
+ <div class="effect-card__code">
331
+ <code>.filter--grayscale-50</code>
332
+ </div>
333
+ </div>
334
+ <div class="effect-card">
335
+ <div class="effect-card__preview filter--grayscale">
336
+ <img src="https://picsum.photos/200/150?random=2" alt="grayscale">
337
+ </div>
338
+ <div class="effect-card__info">
339
+ <h4 class="effect-card__title">grayscale (100%)</h4>
340
+ </div>
341
+ <div class="effect-card__code">
342
+ <code>.filter--grayscale</code>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </section>
347
+
348
+
349
+
350
+
351
+ <section class="section-divider">
352
+ <h2>🟫 Sepia Filters</h2>
353
+ <p>Vintage sepia tone effects</p>
354
+
355
+ <div class="effect-grid">
356
+ <div class="effect-card">
357
+ <div class="effect-card__preview">
358
+ <img src="https://picsum.photos/200/150?random=3" alt="Original">
359
+ </div>
360
+ <div class="effect-card__info">
361
+ <h4 class="effect-card__title">Original</h4>
362
+ </div>
363
+ <div class="effect-card__code">
364
+ <code>No filter applied</code>
365
+ </div>
366
+ </div>
367
+ <div class="effect-card">
368
+ <div class="effect-card__preview filter--sepia-50">
369
+ <img src="https://picsum.photos/200/150?random=3" alt="sepia-50">
370
+ </div>
371
+ <div class="effect-card__info">
372
+ <h4 class="effect-card__title">sepia-50</h4>
373
+ </div>
374
+ <div class="effect-card__code">
375
+ <code>.filter--sepia-50</code>
376
+ </div>
377
+ </div>
378
+ <div class="effect-card">
379
+ <div class="effect-card__preview filter--sepia">
380
+ <img src="https://picsum.photos/200/150?random=3" alt="sepia">
381
+ </div>
382
+ <div class="effect-card__info">
383
+ <h4 class="effect-card__title">sepia (100%)</h4>
384
+ </div>
385
+ <div class="effect-card__code">
386
+ <code>.filter--sepia</code>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </section>
391
+
392
+
393
+
394
+
395
+ <section class="section-divider">
396
+ <h2>☀️ Brightness Filters</h2>
397
+ <p>Adjust image brightness levels</p>
398
+
399
+ <div class="effect-grid">
400
+ <div class="effect-card">
401
+ <div class="effect-card__preview">
402
+ <img src="https://picsum.photos/200/150?random=4" alt="Original">
403
+ </div>
404
+ <div class="effect-card__info">
405
+ <h4 class="effect-card__title">Original</h4>
406
+ </div>
407
+ <div class="effect-card__code">
408
+ <code>No filter applied</code>
409
+ </div>
410
+ </div>
411
+ <div class="effect-card">
412
+ <div class="effect-card__preview filter--brightness-50">
413
+ <img src="https://picsum.photos/200/150?random=4" alt="brightness-50">
414
+ </div>
415
+ <div class="effect-card__info">
416
+ <h4 class="effect-card__title">brightness-50</h4>
417
+ </div>
418
+ <div class="effect-card__code">
419
+ <code>.filter--brightness-50</code>
420
+ </div>
421
+ </div>
422
+ <div class="effect-card">
423
+ <div class="effect-card__preview filter--brightness-75">
424
+ <img src="https://picsum.photos/200/150?random=4" alt="brightness-75">
425
+ </div>
426
+ <div class="effect-card__info">
427
+ <h4 class="effect-card__title">brightness-75</h4>
428
+ </div>
429
+ <div class="effect-card__code">
430
+ <code>.filter--brightness-75</code>
431
+ </div>
432
+ </div>
433
+ <div class="effect-card">
434
+ <div class="effect-card__preview filter--brightness-100">
435
+ <img src="https://picsum.photos/200/150?random=4" alt="brightness-100">
436
+ </div>
437
+ <div class="effect-card__info">
438
+ <h4 class="effect-card__title">brightness-100</h4>
439
+ </div>
440
+ <div class="effect-card__code">
441
+ <code>.filter--brightness-100</code>
442
+ </div>
443
+ </div>
444
+ <div class="effect-card">
445
+ <div class="effect-card__preview filter--brightness-125">
446
+ <img src="https://picsum.photos/200/150?random=4" alt="brightness-125">
447
+ </div>
448
+ <div class="effect-card__info">
449
+ <h4 class="effect-card__title">brightness-125</h4>
450
+ </div>
451
+ <div class="effect-card__code">
452
+ <code>.filter--brightness-125</code>
453
+ </div>
454
+ </div>
455
+ <div class="effect-card">
456
+ <div class="effect-card__preview filter--brightness-150">
457
+ <img src="https://picsum.photos/200/150?random=4" alt="brightness-150">
458
+ </div>
459
+ <div class="effect-card__info">
460
+ <h4 class="effect-card__title">brightness-150</h4>
461
+ </div>
462
+ <div class="effect-card__code">
463
+ <code>.filter--brightness-150</code>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </section>
468
+
469
+
470
+
471
+
472
+ <section class="section-divider">
473
+ <h2>🔲 Contrast Filters</h2>
474
+ <p>Adjust image contrast levels</p>
475
+
476
+ <div class="effect-grid">
477
+ <div class="effect-card">
478
+ <div class="effect-card__preview">
479
+ <img src="https://picsum.photos/200/150?random=5" alt="Original">
480
+ </div>
481
+ <div class="effect-card__info">
482
+ <h4 class="effect-card__title">Original</h4>
483
+ </div>
484
+ <div class="effect-card__code">
485
+ <code>No filter applied</code>
486
+ </div>
487
+ </div>
488
+ <div class="effect-card">
489
+ <div class="effect-card__preview filter--contrast-50">
490
+ <img src="https://picsum.photos/200/150?random=5" alt="contrast-50">
491
+ </div>
492
+ <div class="effect-card__info">
493
+ <h4 class="effect-card__title">contrast-50</h4>
494
+ </div>
495
+ <div class="effect-card__code">
496
+ <code>.filter--contrast-50</code>
497
+ </div>
498
+ </div>
499
+ <div class="effect-card">
500
+ <div class="effect-card__preview filter--contrast-100">
501
+ <img src="https://picsum.photos/200/150?random=5" alt="contrast-100">
502
+ </div>
503
+ <div class="effect-card__info">
504
+ <h4 class="effect-card__title">contrast-100</h4>
505
+ </div>
506
+ <div class="effect-card__code">
507
+ <code>.filter--contrast-100</code>
508
+ </div>
509
+ </div>
510
+ <div class="effect-card">
511
+ <div class="effect-card__preview filter--contrast-150">
512
+ <img src="https://picsum.photos/200/150?random=5" alt="contrast-150">
513
+ </div>
514
+ <div class="effect-card__info">
515
+ <h4 class="effect-card__title">contrast-150</h4>
516
+ </div>
517
+ <div class="effect-card__code">
518
+ <code>.filter--contrast-150</code>
519
+ </div>
520
+ </div>
521
+ <div class="effect-card">
522
+ <div class="effect-card__preview filter--contrast-200">
523
+ <img src="https://picsum.photos/200/150?random=5" alt="contrast-200">
524
+ </div>
525
+ <div class="effect-card__info">
526
+ <h4 class="effect-card__title">contrast-200</h4>
527
+ </div>
528
+ <div class="effect-card__code">
529
+ <code>.filter--contrast-200</code>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </section>
534
+
535
+
536
+
537
+
538
+ <section class="section-divider">
539
+ <h2>🎨 Saturate Filters</h2>
540
+ <p>Adjust color saturation levels</p>
541
+
542
+ <div class="effect-grid">
543
+ <div class="effect-card">
544
+ <div class="effect-card__preview">
545
+ <img src="https://picsum.photos/200/150?random=6" alt="Original">
546
+ </div>
547
+ <div class="effect-card__info">
548
+ <h4 class="effect-card__title">Original</h4>
549
+ </div>
550
+ <div class="effect-card__code">
551
+ <code>No filter applied</code>
552
+ </div>
553
+ </div>
554
+ <div class="effect-card">
555
+ <div class="effect-card__preview filter--saturate-0">
556
+ <img src="https://picsum.photos/200/150?random=6" alt="saturate-0">
557
+ </div>
558
+ <div class="effect-card__info">
559
+ <h4 class="effect-card__title">saturate-0</h4>
560
+ </div>
561
+ <div class="effect-card__code">
562
+ <code>.filter--saturate-0</code>
563
+ </div>
564
+ </div>
565
+ <div class="effect-card">
566
+ <div class="effect-card__preview filter--saturate-50">
567
+ <img src="https://picsum.photos/200/150?random=6" alt="saturate-50">
568
+ </div>
569
+ <div class="effect-card__info">
570
+ <h4 class="effect-card__title">saturate-50</h4>
571
+ </div>
572
+ <div class="effect-card__code">
573
+ <code>.filter--saturate-50</code>
574
+ </div>
575
+ </div>
576
+ <div class="effect-card">
577
+ <div class="effect-card__preview filter--saturate-150">
578
+ <img src="https://picsum.photos/200/150?random=6" alt="saturate-150">
579
+ </div>
580
+ <div class="effect-card__info">
581
+ <h4 class="effect-card__title">saturate-150</h4>
582
+ </div>
583
+ <div class="effect-card__code">
584
+ <code>.filter--saturate-150</code>
585
+ </div>
586
+ </div>
587
+ <div class="effect-card">
588
+ <div class="effect-card__preview filter--saturate-200">
589
+ <img src="https://picsum.photos/200/150?random=6" alt="saturate-200">
590
+ </div>
591
+ <div class="effect-card__info">
592
+ <h4 class="effect-card__title">saturate-200</h4>
593
+ </div>
594
+ <div class="effect-card__code">
595
+ <code>.filter--saturate-200</code>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ </section>
600
+
601
+
602
+
603
+
604
+ <section class="section-divider">
605
+ <h2>🌈 Hue Rotate Filters</h2>
606
+ <p>Rotate the hue of colors</p>
607
+
608
+ <div class="effect-grid">
609
+ <div class="effect-card">
610
+ <div class="effect-card__preview">
611
+ <img src="https://picsum.photos/200/150?random=7" alt="Original">
612
+ </div>
613
+ <div class="effect-card__info">
614
+ <h4 class="effect-card__title">Original</h4>
615
+ </div>
616
+ <div class="effect-card__code">
617
+ <code>No filter applied</code>
618
+ </div>
619
+ </div>
620
+ <div class="effect-card">
621
+ <div class="effect-card__preview filter--hue-rotate-30">
622
+ <img src="https://picsum.photos/200/150?random=7" alt="hue-rotate-30">
623
+ </div>
624
+ <div class="effect-card__info">
625
+ <h4 class="effect-card__title">hue-rotate-30°</h4>
626
+ </div>
627
+ <div class="effect-card__code">
628
+ <code>.filter--hue-rotate-30</code>
629
+ </div>
630
+ </div>
631
+ <div class="effect-card">
632
+ <div class="effect-card__preview filter--hue-rotate-60">
633
+ <img src="https://picsum.photos/200/150?random=7" alt="hue-rotate-60">
634
+ </div>
635
+ <div class="effect-card__info">
636
+ <h4 class="effect-card__title">hue-rotate-60°</h4>
637
+ </div>
638
+ <div class="effect-card__code">
639
+ <code>.filter--hue-rotate-60</code>
640
+ </div>
641
+ </div>
642
+ <div class="effect-card">
643
+ <div class="effect-card__preview filter--hue-rotate-90">
644
+ <img src="https://picsum.photos/200/150?random=7" alt="hue-rotate-90">
645
+ </div>
646
+ <div class="effect-card__info">
647
+ <h4 class="effect-card__title">hue-rotate-90°</h4>
648
+ </div>
649
+ <div class="effect-card__code">
650
+ <code>.filter--hue-rotate-90</code>
651
+ </div>
652
+ </div>
653
+ <div class="effect-card">
654
+ <div class="effect-card__preview filter--hue-rotate-180">
655
+ <img src="https://picsum.photos/200/150?random=7" alt="hue-rotate-180">
656
+ </div>
657
+ <div class="effect-card__info">
658
+ <h4 class="effect-card__title">hue-rotate-180°</h4>
659
+ </div>
660
+ <div class="effect-card__code">
661
+ <code>.filter--hue-rotate-180</code>
662
+ </div>
663
+ </div>
664
+ <div class="effect-card">
665
+ <div class="effect-card__preview filter--hue-rotate-270">
666
+ <img src="https://picsum.photos/200/150?random=7" alt="hue-rotate-270">
667
+ </div>
668
+ <div class="effect-card__info">
669
+ <h4 class="effect-card__title">hue-rotate-270°</h4>
670
+ </div>
671
+ <div class="effect-card__code">
672
+ <code>.filter--hue-rotate-270</code>
673
+ </div>
674
+ </div>
675
+ </div>
676
+ </section>
677
+
678
+
679
+
680
+
681
+ <section class="section-divider">
682
+ <h2>🔄 Invert Filters</h2>
683
+ <p>Invert image colors</p>
684
+
685
+ <div class="effect-grid">
686
+ <div class="effect-card">
687
+ <div class="effect-card__preview">
688
+ <img src="https://picsum.photos/200/150?random=8" alt="Original">
689
+ </div>
690
+ <div class="effect-card__info">
691
+ <h4 class="effect-card__title">Original</h4>
692
+ </div>
693
+ <div class="effect-card__code">
694
+ <code>No filter applied</code>
695
+ </div>
696
+ </div>
697
+ <div class="effect-card">
698
+ <div class="effect-card__preview filter--invert-0">
699
+ <img src="https://picsum.photos/200/150?random=8" alt="invert-0">
700
+ </div>
701
+ <div class="effect-card__info">
702
+ <h4 class="effect-card__title">invert-0</h4>
703
+ </div>
704
+ <div class="effect-card__code">
705
+ <code>.filter--invert-0</code>
706
+ </div>
707
+ </div>
708
+ <div class="effect-card">
709
+ <div class="effect-card__preview filter--invert-50">
710
+ <img src="https://picsum.photos/200/150?random=8" alt="invert-50">
711
+ </div>
712
+ <div class="effect-card__info">
713
+ <h4 class="effect-card__title">invert-50</h4>
714
+ </div>
715
+ <div class="effect-card__code">
716
+ <code>.filter--invert-50</code>
717
+ </div>
718
+ </div>
719
+ <div class="effect-card">
720
+ <div class="effect-card__preview filter--invert">
721
+ <img src="https://picsum.photos/200/150?random=8" alt="invert">
722
+ </div>
723
+ <div class="effect-card__info">
724
+ <h4 class="effect-card__title">invert (100%)</h4>
725
+ </div>
726
+ <div class="effect-card__code">
727
+ <code>.filter--invert</code>
728
+ </div>
729
+ </div>
730
+ </div>
731
+ </section>
732
+
733
+
734
+
735
+
736
+ <section class="section-divider">
737
+ <h2>🌑 Drop Shadow Filters</h2>
738
+ <p>CSS filter drop-shadow effects</p>
739
+
740
+ <div class="effect-grid">
741
+ <div class="effect-card">
742
+ <div class="effect-card__preview" style="background: #f0f0f0;">
743
+ <img src="https://picsum.photos/100/100?random=9" alt="Original"
744
+ style="width: 80px; height: 80px; border-radius: 8px;">
745
+ </div>
746
+ <div class="effect-card__info">
747
+ <h4 class="effect-card__title">Original</h4>
748
+ </div>
749
+ <div class="effect-card__code">
750
+ <code>No filter applied</code>
751
+ </div>
752
+ </div>
753
+ <div class="effect-card">
754
+ <div class="effect-card__preview filter--drop-shadow-sm" style="background: #f0f0f0;">
755
+ <img src="https://picsum.photos/100/100?random=9" alt="drop-shadow-sm"
756
+ style="width: 80px; height: 80px; border-radius: 8px;">
757
+ </div>
758
+ <div class="effect-card__info">
759
+ <h4 class="effect-card__title">drop-shadow-sm</h4>
760
+ </div>
761
+ <div class="effect-card__code">
762
+ <code>.filter--drop-shadow-sm</code>
763
+ </div>
764
+ </div>
765
+ <div class="effect-card">
766
+ <div class="effect-card__preview filter--drop-shadow" style="background: #f0f0f0;">
767
+ <img src="https://picsum.photos/100/100?random=9" alt="drop-shadow"
768
+ style="width: 80px; height: 80px; border-radius: 8px;">
769
+ </div>
770
+ <div class="effect-card__info">
771
+ <h4 class="effect-card__title">drop-shadow</h4>
772
+ </div>
773
+ <div class="effect-card__code">
774
+ <code>.filter--drop-shadow</code>
775
+ </div>
776
+ </div>
777
+ <div class="effect-card">
778
+ <div class="effect-card__preview filter--drop-shadow-md" style="background: #f0f0f0;">
779
+ <img src="https://picsum.photos/100/100?random=9" alt="drop-shadow-md"
780
+ style="width: 80px; height: 80px; border-radius: 8px;">
781
+ </div>
782
+ <div class="effect-card__info">
783
+ <h4 class="effect-card__title">drop-shadow-md</h4>
784
+ </div>
785
+ <div class="effect-card__code">
786
+ <code>.filter--drop-shadow-md</code>
787
+ </div>
788
+ </div>
789
+ <div class="effect-card">
790
+ <div class="effect-card__preview filter--drop-shadow-lg" style="background: #f0f0f0;">
791
+ <img src="https://picsum.photos/100/100?random=9" alt="drop-shadow-lg"
792
+ style="width: 80px; height: 80px; border-radius: 8px;">
793
+ </div>
794
+ <div class="effect-card__info">
795
+ <h4 class="effect-card__title">drop-shadow-lg</h4>
796
+ </div>
797
+ <div class="effect-card__code">
798
+ <code>.filter--drop-shadow-lg</code>
799
+ </div>
800
+ </div>
801
+ <div class="effect-card">
802
+ <div class="effect-card__preview filter--drop-shadow-xl" style="background: #f0f0f0;">
803
+ <img src="https://picsum.photos/100/100?random=9" alt="drop-shadow-xl"
804
+ style="width: 80px; height: 80px; border-radius: 8px;">
805
+ </div>
806
+ <div class="effect-card__info">
807
+ <h4 class="effect-card__title">drop-shadow-xl</h4>
808
+ </div>
809
+ <div class="effect-card__code">
810
+ <code>.filter--drop-shadow-xl</code>
811
+ </div>
812
+ </div>
813
+ </div>
814
+ </section>
815
+
816
+
817
+
818
+
819
+ <section class="section-divider">
820
+ <h2>🎭 Filter Presets</h2>
821
+ <p>Pre-configured filter combinations for creative effects</p>
822
+
823
+ <div class="effect-grid">
824
+ <div class="effect-card">
825
+ <div class="effect-card__preview">
826
+ <img src="https://picsum.photos/200/150?random=10" alt="Original">
827
+ </div>
828
+ <div class="effect-card__info">
829
+ <h4 class="effect-card__title">Original</h4>
830
+ </div>
831
+ <div class="effect-card__code">
832
+ <code>No filter applied</code>
833
+ </div>
834
+ </div>
835
+ <div class="effect-card">
836
+ <div class="effect-card__preview filter--noir">
837
+ <img src="https://picsum.photos/200/150?random=10" alt="noir">
838
+ </div>
839
+ <div class="effect-card__info">
840
+ <h4 class="effect-card__title">Noir</h4>
841
+ </div>
842
+ <div class="effect-card__code">
843
+ <code>.filter--noir</code>
844
+ </div>
845
+ </div>
846
+ <div class="effect-card">
847
+ <div class="effect-card__preview filter--vintage">
848
+ <img src="https://picsum.photos/200/150?random=10" alt="vintage">
849
+ </div>
850
+ <div class="effect-card__info">
851
+ <h4 class="effect-card__title">Vintage</h4>
852
+ </div>
853
+ <div class="effect-card__code">
854
+ <code>.filter--vintage</code>
855
+ </div>
856
+ </div>
857
+ <div class="effect-card">
858
+ <div class="effect-card__preview filter--cold">
859
+ <img src="https://picsum.photos/200/150?random=10" alt="cold">
860
+ </div>
861
+ <div class="effect-card__info">
862
+ <h4 class="effect-card__title">Cold</h4>
863
+ </div>
864
+ <div class="effect-card__code">
865
+ <code>.filter--cold</code>
866
+ </div>
867
+ </div>
868
+ <div class="effect-card">
869
+ <div class="effect-card__preview filter--warm">
870
+ <img src="https://picsum.photos/200/150?random=10" alt="warm">
871
+ </div>
872
+ <div class="effect-card__info">
873
+ <h4 class="effect-card__title">Warm</h4>
874
+ </div>
875
+ <div class="effect-card__code">
876
+ <code>.filter--warm</code>
877
+ </div>
878
+ </div>
879
+ </div>
880
+ </section>
881
+
882
+
883
+
884
+
885
+ <section class="section-divider">
886
+ <h2>🌫️ Backdrop Filters</h2>
887
+ <p>CSS backdrop-filter effects for glass morphism</p>
888
+
889
+ <div class="effect-grid">
890
+ <div class="effect-card">
891
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
892
+ <div class="demo-box-effect backdrop--blur" style="background: rgba(255,255,255,0.2);">Blur</div>
893
+ </div>
894
+ <div class="effect-card__info">
895
+ <h4 class="effect-card__title">backdrop--blur</h4>
896
+ </div>
897
+ <div class="effect-card__code">
898
+ <code>.backdrop--blur</code>
899
+ </div>
900
+ </div>
901
+ <div class="effect-card">
902
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
903
+ <div class="demo-box-effect backdrop--blur-sm" style="background: rgba(255,255,255,0.2);">Blur SM</div>
904
+ </div>
905
+ <div class="effect-card__info">
906
+ <h4 class="effect-card__title">backdrop--blur-sm</h4>
907
+ </div>
908
+ <div class="effect-card__code">
909
+ <code>.backdrop--blur-sm</code>
910
+ </div>
911
+ </div>
912
+ <div class="effect-card">
913
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
914
+ <div class="demo-box-effect backdrop--blur-lg" style="background: rgba(255,255,255,0.2);">Blur LG</div>
915
+ </div>
916
+ <div class="effect-card__info">
917
+ <h4 class="effect-card__title">backdrop--blur-lg</h4>
918
+ </div>
919
+ <div class="effect-card__code">
920
+ <code>.backdrop--blur-lg</code>
921
+ </div>
922
+ </div>
923
+ <div class="effect-card">
924
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
925
+ <div class="demo-box-effect backdrop--glass" style="background: rgba(255,255,255,0.2);">Glass</div>
926
+ </div>
927
+ <div class="effect-card__info">
928
+ <h4 class="effect-card__title">backdrop--glass</h4>
929
+ </div>
930
+ <div class="effect-card__code">
931
+ <code>.backdrop--glass</code>
932
+ </div>
933
+ </div>
934
+ <div class="effect-card">
935
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
936
+ <div class="demo-box-effect backdrop--glass-dark" style="background: rgba(0,0,0,0.2); color: #fff;">
937
+ Glass Dark</div>
938
+ </div>
939
+ <div class="effect-card__info">
940
+ <h4 class="effect-card__title">backdrop--glass-dark</h4>
941
+ </div>
942
+ <div class="effect-card__code">
943
+ <code>.backdrop--glass-dark</code>
944
+ </div>
945
+ </div>
946
+ <div class="effect-card">
947
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
948
+ <div class="demo-box-effect backdrop--grayscale" style="background: rgba(255,255,255,0.2);">Grayscale
949
+ </div>
950
+ </div>
951
+ <div class="effect-card__info">
952
+ <h4 class="effect-card__title">backdrop--grayscale</h4>
953
+ </div>
954
+ <div class="effect-card__code">
955
+ <code>.backdrop--grayscale</code>
956
+ </div>
957
+ </div>
958
+ <div class="effect-card">
959
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
960
+ <div class="demo-box-effect backdrop--sepia" style="background: rgba(255,255,255,0.2);">Sepia</div>
961
+ </div>
962
+ <div class="effect-card__info">
963
+ <h4 class="effect-card__title">backdrop--sepia</h4>
964
+ </div>
965
+ <div class="effect-card__code">
966
+ <code>.backdrop--sepia</code>
967
+ </div>
968
+ </div>
969
+ <div class="effect-card">
970
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
971
+ <div class="demo-box-effect backdrop--invert" style="background: rgba(255,255,255,0.2);">Invert</div>
972
+ </div>
973
+ <div class="effect-card__info">
974
+ <h4 class="effect-card__title">backdrop--invert</h4>
975
+ </div>
976
+ <div class="effect-card__code">
977
+ <code>.backdrop--invert</code>
978
+ </div>
979
+ </div>
980
+ </div>
981
+ </section>
982
+
983
+
984
+
985
+
986
+ <section class="section-divider">
987
+ <h2>🌑 Box Shadows</h2>
988
+ <p>Box shadow utilities for depth and elevation</p>
989
+
990
+ <div class="effect-grid">
991
+ <div class="effect-card">
992
+ <div class="effect-card__preview" style="background: #f5f5f5;">
993
+ <div class="demo-box-shadow shadow">Default</div>
994
+ </div>
995
+ <div class="effect-card__info">
996
+ <h4 class="effect-card__title">shadow</h4>
997
+ </div>
998
+ <div class="effect-card__code">
999
+ <code>.shadow</code>
1000
+ </div>
1001
+ </div>
1002
+ <div class="effect-card">
1003
+ <div class="effect-card__preview" style="background: #f5f5f5;">
1004
+ <div class="demo-box-shadow shadow--sm">Small</div>
1005
+ </div>
1006
+ <div class="effect-card__info">
1007
+ <h4 class="effect-card__title">shadow--sm</h4>
1008
+ </div>
1009
+ <div class="effect-card__code">
1010
+ <code>.shadow--sm</code>
1011
+ </div>
1012
+ </div>
1013
+ <div class="effect-card">
1014
+ <div class="effect-card__preview" style="background: #f5f5f5;">
1015
+ <div class="demo-box-shadow shadow--md">Medium</div>
1016
+ </div>
1017
+ <div class="effect-card__info">
1018
+ <h4 class="effect-card__title">shadow--md</h4>
1019
+ </div>
1020
+ <div class="effect-card__code">
1021
+ <code>.shadow--md</code>
1022
+ </div>
1023
+ </div>
1024
+ <div class="effect-card">
1025
+ <div class="effect-card__preview" style="background: #f5f5f5;">
1026
+ <div class="demo-box-shadow shadow--lg">Large</div>
1027
+ </div>
1028
+ <div class="effect-card__info">
1029
+ <h4 class="effect-card__title">shadow--lg</h4>
1030
+ </div>
1031
+ <div class="effect-card__code">
1032
+ <code>.shadow--lg</code>
1033
+ </div>
1034
+ </div>
1035
+ <div class="effect-card">
1036
+ <div class="effect-card__preview" style="background: #f5f5f5;">
1037
+ <div class="demo-box-shadow shadow--xl">X-Large</div>
1038
+ </div>
1039
+ <div class="effect-card__info">
1040
+ <h4 class="effect-card__title">shadow--xl</h4>
1041
+ </div>
1042
+ <div class="effect-card__code">
1043
+ <code>.shadow--xl</code>
1044
+ </div>
1045
+ </div>
1046
+ <div class="effect-card">
1047
+ <div class="effect-card__preview" style="background: #f5f5f5;">
1048
+ <div class="demo-box-shadow shadow--inner">Inner</div>
1049
+ </div>
1050
+ <div class="effect-card__info">
1051
+ <h4 class="effect-card__title">shadow--inner</h4>
1052
+ </div>
1053
+ <div class="effect-card__code">
1054
+ <code>.shadow--inner</code>
1055
+ </div>
1056
+ </div>
1057
+ <div class="effect-card">
1058
+ <div class="effect-card__preview" style="background: #f5f5f5;">
1059
+ <div class="demo-box-shadow shadow--glow">Glow</div>
1060
+ </div>
1061
+ <div class="effect-card__info">
1062
+ <h4 class="effect-card__title">shadow--glow</h4>
1063
+ </div>
1064
+ <div class="effect-card__code">
1065
+ <code>.shadow--glow</code>
1066
+ </div>
1067
+ </div>
1068
+ <div class="effect-card">
1069
+ <div class="effect-card__preview" style="background: #f5f5f5;">
1070
+ <div class="demo-box-shadow shadow--glow-lg">Glow LG</div>
1071
+ </div>
1072
+ <div class="effect-card__info">
1073
+ <h4 class="effect-card__title">shadow--glow-lg</h4>
1074
+ </div>
1075
+ <div class="effect-card__code">
1076
+ <code>.shadow--glow-lg</code>
1077
+ </div>
1078
+ </div>
1079
+ <div class="effect-card">
1080
+ <div class="effect-card__preview" style="background: #f5f5f5;">
1081
+ <div class="demo-box-shadow shadow--primary">Primary</div>
1082
+ </div>
1083
+ <div class="effect-card__info">
1084
+ <h4 class="effect-card__title">shadow--primary</h4>
1085
+ </div>
1086
+ <div class="effect-card__code">
1087
+ <code>.shadow--primary</code>
1088
+ </div>
1089
+ </div>
1090
+ <div class="effect-card">
1091
+ <div class="effect-card__preview" style="background: #f5f5f5;">
1092
+ <div class="demo-box-shadow shadow--success">Success</div>
1093
+ </div>
1094
+ <div class="effect-card__info">
1095
+ <h4 class="effect-card__title">shadow--success</h4>
1096
+ </div>
1097
+ <div class="effect-card__code">
1098
+ <code>.shadow--success</code>
1099
+ </div>
1100
+ </div>
1101
+ <div class="effect-card">
1102
+ <div class="effect-card__preview" style="background: #f5f5f5;">
1103
+ <div class="demo-box-shadow shadow--warning">Warning</div>
1104
+ </div>
1105
+ <div class="effect-card__info">
1106
+ <h4 class="effect-card__title">shadow--warning</h4>
1107
+ </div>
1108
+ <div class="effect-card__code">
1109
+ <code>.shadow--warning</code>
1110
+ </div>
1111
+ </div>
1112
+ <div class="effect-card">
1113
+ <div class="effect-card__preview" style="background: #f5f5f5;">
1114
+ <div class="demo-box-shadow shadow--danger">Danger</div>
1115
+ </div>
1116
+ <div class="effect-card__info">
1117
+ <h4 class="effect-card__title">shadow--danger</h4>
1118
+ </div>
1119
+ <div class="effect-card__code">
1120
+ <code>.shadow--danger</code>
1121
+ </div>
1122
+ </div>
1123
+ </div>
1124
+ </section>
1125
+
1126
+
1127
+
1128
+
1129
+ <section class="section-divider">
1130
+ <h2>🎭 Blend Modes</h2>
1131
+ <p>CSS mix-blend-mode effects for creative layering</p>
1132
+
1133
+ <div class="effect-grid">
1134
+ <div class="effect-card">
1135
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
1136
+ <div class="demo-box-effect blend--multiply" style="background: #fff;">Multiply</div>
1137
+ </div>
1138
+ <div class="effect-card__info">
1139
+ <h4 class="effect-card__title">blend--multiply</h4>
1140
+ </div>
1141
+ <div class="effect-card__code">
1142
+ <code>.blend--multiply</code>
1143
+ </div>
1144
+ </div>
1145
+ <div class="effect-card">
1146
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
1147
+ <div class="demo-box-effect blend--screen" style="background: #333;">Screen</div>
1148
+ </div>
1149
+ <div class="effect-card__info">
1150
+ <h4 class="effect-card__title">blend--screen</h4>
1151
+ </div>
1152
+ <div class="effect-card__code">
1153
+ <code>.blend--screen</code>
1154
+ </div>
1155
+ </div>
1156
+ <div class="effect-card">
1157
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
1158
+ <div class="demo-box-effect blend--overlay" style="background: #888;">Overlay</div>
1159
+ </div>
1160
+ <div class="effect-card__info">
1161
+ <h4 class="effect-card__title">blend--overlay</h4>
1162
+ </div>
1163
+ <div class="effect-card__code">
1164
+ <code>.blend--overlay</code>
1165
+ </div>
1166
+ </div>
1167
+ <div class="effect-card">
1168
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
1169
+ <div class="demo-box-effect blend--darken" style="background: #aaa;">Darken</div>
1170
+ </div>
1171
+ <div class="effect-card__info">
1172
+ <h4 class="effect-card__title">blend--darken</h4>
1173
+ </div>
1174
+ <div class="effect-card__code">
1175
+ <code>.blend--darken</code>
1176
+ </div>
1177
+ </div>
1178
+ <div class="effect-card">
1179
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
1180
+ <div class="demo-box-effect blend--lighten" style="background: #555;">Lighten</div>
1181
+ </div>
1182
+ <div class="effect-card__info">
1183
+ <h4 class="effect-card__title">blend--lighten</h4>
1184
+ </div>
1185
+ <div class="effect-card__code">
1186
+ <code>.blend--lighten</code>
1187
+ </div>
1188
+ </div>
1189
+ <div class="effect-card">
1190
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
1191
+ <div class="demo-box-effect blend--difference" style="background: #fff;">Difference</div>
1192
+ </div>
1193
+ <div class="effect-card__info">
1194
+ <h4 class="effect-card__title">blend--difference</h4>
1195
+ </div>
1196
+ <div class="effect-card__code">
1197
+ <code>.blend--difference</code>
1198
+ </div>
1199
+ </div>
1200
+ <div class="effect-card">
1201
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
1202
+ <div class="demo-box-effect blend--exclusion" style="background: #888;">Exclusion</div>
1203
+ </div>
1204
+ <div class="effect-card__info">
1205
+ <h4 class="effect-card__title">blend--exclusion</h4>
1206
+ </div>
1207
+ <div class="effect-card__code">
1208
+ <code>.blend--exclusion</code>
1209
+ </div>
1210
+ </div>
1211
+ <div class="effect-card">
1212
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
1213
+ <div class="demo-box-effect blend--hue" style="background: #667eea;">Hue</div>
1214
+ </div>
1215
+ <div class="effect-card__info">
1216
+ <h4 class="effect-card__title">blend--hue</h4>
1217
+ </div>
1218
+ <div class="effect-card__code">
1219
+ <code>.blend--hue</code>
1220
+ </div>
1221
+ </div>
1222
+ </div>
1223
+ </section>
1224
+
1225
+
1226
+
1227
+
1228
+ <section class="section-divider">
1229
+ <h2>🎭 Masks</h2>
1230
+ <p>CSS mask effects for fade gradients</p>
1231
+
1232
+ <div class="effect-grid">
1233
+ <div class="effect-card">
1234
+ <div class="effect-card__preview mask--fade-t">
1235
+ <img src="https://picsum.photos/200/150?random=20" alt="fade-t">
1236
+ </div>
1237
+ <div class="effect-card__info">
1238
+ <h4 class="effect-card__title">mask--fade-t</h4>
1239
+ </div>
1240
+ <div class="effect-card__code">
1241
+ <code>.mask--fade-t</code>
1242
+ </div>
1243
+ </div>
1244
+ <div class="effect-card">
1245
+ <div class="effect-card__preview mask--fade-b">
1246
+ <img src="https://picsum.photos/200/150?random=20" alt="fade-b">
1247
+ </div>
1248
+ <div class="effect-card__info">
1249
+ <h4 class="effect-card__title">mask--fade-b</h4>
1250
+ </div>
1251
+ <div class="effect-card__code">
1252
+ <code>.mask--fade-b</code>
1253
+ </div>
1254
+ </div>
1255
+ <div class="effect-card">
1256
+ <div class="effect-card__preview mask--fade-l">
1257
+ <img src="https://picsum.photos/200/150?random=20" alt="fade-l">
1258
+ </div>
1259
+ <div class="effect-card__info">
1260
+ <h4 class="effect-card__title">mask--fade-l</h4>
1261
+ </div>
1262
+ <div class="effect-card__code">
1263
+ <code>.mask--fade-l</code>
1264
+ </div>
1265
+ </div>
1266
+ <div class="effect-card">
1267
+ <div class="effect-card__preview mask--fade-r">
1268
+ <img src="https://picsum.photos/200/150?random=20" alt="fade-r">
1269
+ </div>
1270
+ <div class="effect-card__info">
1271
+ <h4 class="effect-card__title">mask--fade-r</h4>
1272
+ </div>
1273
+ <div class="effect-card__code">
1274
+ <code>.mask--fade-r</code>
1275
+ </div>
1276
+ </div>
1277
+ <div class="effect-card">
1278
+ <div class="effect-card__preview mask--radial">
1279
+ <img src="https://picsum.photos/200/150?random=20" alt="radial">
1280
+ </div>
1281
+ <div class="effect-card__info">
1282
+ <h4 class="effect-card__title">mask--radial</h4>
1283
+ </div>
1284
+ <div class="effect-card__code">
1285
+ <code>.mask--radial</code>
1286
+ </div>
1287
+ </div>
1288
+ </div>
1289
+ </section>
1290
+
1291
+
1292
+
1293
+
1294
+ <section class="section-divider">
1295
+ <h2>📖 Usage</h2>
1296
+ <p>How to use filter classes and mixins</p>
1297
+
1298
+ <div class="code-block">
1299
+ <span class="comment">// Using filter classes directly in HTML</span>
1300
+ &lt;img class="filter--blur" src="photo.jpg"&gt;
1301
+ &lt;img class="filter--grayscale" src="photo.jpg"&gt;
1302
+ &lt;img class="filter--sepia filter--brightness-110" src="photo.jpg"&gt;
1303
+
1304
+ <span class="comment">// Using mixins in SCSS</span>
1305
+ .my-image {
1306
+ @include filter_blur(8px);
1307
+ }
1308
+
1309
+ .vintage-photo {
1310
+ @include filter_sepia(80%);
1311
+ @include filter_brightness(1.1);
1312
+ }
1313
+
1314
+ <span class="comment">// Backdrop filters for glass effects</span>
1315
+ .glass-card {
1316
+ @include backdrop_blur(12px);
1317
+ background: rgba(255, 255, 255, 0.2);
1318
+ }
1319
+ </div>
1320
+ </section> </main>
1321
+
1322
+
1323
+
1324
+ <footer class="footer">
1325
+ <div class="footer__content">
1326
+ <div class="footer__left">
1327
+ <span class="footer__brand">move.gl</span>
1328
+ <span class="footer__tagline">Motion & Animation Library</span>
1329
+ </div>
1330
+ <div class="footer__right">
1331
+ <div class="footer__links">
1332
+ <a href="https://github.com/stylescape/move.gl" class="footer__link" target="_blank">GitHub</a>
1333
+ <a href="https://www.npmjs.com/package/move.gl" class="footer__link" target="_blank">npm</a>
1334
+ <a href="https://www.scape.agency" class="footer__link" target="_blank">Scape Agency</a>
1335
+ </div>
1336
+ <span class="footer__copyright">© 2024 Scape Agency. MIT License.</span>
1337
+ </div>
1338
+ </div>
1339
+ </footer>
1340
+ </div>
1341
+
1342
+ <!-- Library JS -->
1343
+ <script type="module" src="/js/move.gl.js"></script>
1344
+ <!-- Demo Scripts -->
1345
+ <script type="module" src="/js/demo.js"></script>
1346
+ </body>
1347
+
1348
+ </html>