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/jinja/test_effects.html.jinja ADDED
@@ -0,0 +1,1218 @@
1
+ {% extends "base.html.jinja" %}
2
+
3
+ {%- block title %}Effects & Filters — move.gl{%- endblock %}
4
+
5
+ {%- block header %}
6
+ <p class="eyebrow">Classes</p>
7
+ <h1>CSS Effects & Filters</h1>
8
+ {%- endblock %}
9
+
10
+ {%- block styles %}
11
+ <style>
12
+ .effect-grid {
13
+ display: grid;
14
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
15
+ gap: 1.5rem;
16
+ margin: 2rem 0;
17
+ }
18
+
19
+ .effect-card {
20
+ background: var(--color-surface, #fff);
21
+ border-radius: 12px;
22
+ overflow: hidden;
23
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
24
+ }
25
+
26
+ .effect-card__preview {
27
+ height: 120px;
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
32
+ position: relative;
33
+ overflow: hidden;
34
+ }
35
+
36
+ .effect-card__preview img {
37
+ width: 100%;
38
+ height: 100%;
39
+ object-fit: cover;
40
+ }
41
+
42
+ .effect-card__info {
43
+ padding: 0.75rem 1rem;
44
+ text-align: center;
45
+ }
46
+
47
+ .effect-card__title {
48
+ font-size: 0.85rem;
49
+ font-weight: 600;
50
+ margin: 0 0 0.25rem;
51
+ color: var(--color-text, #333);
52
+ }
53
+
54
+ .effect-card__code {
55
+ padding: 0.5rem 0.75rem;
56
+ background: var(--color-code-bg, #f5f5f5);
57
+ border-top: 1px solid var(--color-border, #e0e0e0);
58
+ }
59
+
60
+ .effect-card__code code {
61
+ font-size: 0.7rem;
62
+ word-break: break-all;
63
+ color: var(--color-code, #e91e63);
64
+ }
65
+
66
+ .demo-box-effect {
67
+ width: 80px;
68
+ height: 80px;
69
+ background: #fff;
70
+ border-radius: 8px;
71
+ display: flex;
72
+ align-items: center;
73
+ justify-content: center;
74
+ font-size: 0.75rem;
75
+ font-weight: 600;
76
+ color: #333;
77
+ }
78
+
79
+ .demo-box-shadow {
80
+ width: 80px;
81
+ height: 80px;
82
+ background: #fff;
83
+ border-radius: 8px;
84
+ display: flex;
85
+ align-items: center;
86
+ justify-content: center;
87
+ font-size: 0.7rem;
88
+ font-weight: 500;
89
+ color: #666;
90
+ }
91
+
92
+ .section-divider {
93
+ margin: 3rem 0 2rem;
94
+ padding-top: 2rem;
95
+ border-top: 1px solid var(--color-border, #e0e0e0);
96
+ }
97
+
98
+ h2 {
99
+ font-size: 1.5rem;
100
+ margin-bottom: 0.5rem;
101
+ }
102
+
103
+ h2+p {
104
+ color: var(--color-text-muted, #666);
105
+ margin-bottom: 1.5rem;
106
+ }
107
+ </style>
108
+ {%- endblock %}
109
+
110
+ {%- block content %}
111
+
112
+ {# ============================================================= #}
113
+ {# BLUR FILTERS #}
114
+ {# ============================================================= #}
115
+ <section>
116
+ <h2>🌫️ Blur Filters</h2>
117
+ <p>CSS blur filter effects at various intensities</p>
118
+
119
+ <div class="effect-grid">
120
+ <div class="effect-card">
121
+ <div class="effect-card__preview">
122
+ <img src="https://picsum.photos/200/150?random=1" alt="Original">
123
+ </div>
124
+ <div class="effect-card__info">
125
+ <h4 class="effect-card__title">Original</h4>
126
+ </div>
127
+ <div class="effect-card__code">
128
+ <code>No filter applied</code>
129
+ </div>
130
+ </div>
131
+ <div class="effect-card">
132
+ <div class="effect-card__preview filter--blur-sm">
133
+ <img src="https://picsum.photos/200/150?random=1" alt="blur-sm">
134
+ </div>
135
+ <div class="effect-card__info">
136
+ <h4 class="effect-card__title">blur-sm (2px)</h4>
137
+ </div>
138
+ <div class="effect-card__code">
139
+ <code>.filter--blur-sm</code>
140
+ </div>
141
+ </div>
142
+ <div class="effect-card">
143
+ <div class="effect-card__preview filter--blur">
144
+ <img src="https://picsum.photos/200/150?random=1" alt="blur">
145
+ </div>
146
+ <div class="effect-card__info">
147
+ <h4 class="effect-card__title">blur (4px)</h4>
148
+ </div>
149
+ <div class="effect-card__code">
150
+ <code>.filter--blur</code>
151
+ </div>
152
+ </div>
153
+ <div class="effect-card">
154
+ <div class="effect-card__preview filter--blur-md">
155
+ <img src="https://picsum.photos/200/150?random=1" alt="blur-md">
156
+ </div>
157
+ <div class="effect-card__info">
158
+ <h4 class="effect-card__title">blur-md (8px)</h4>
159
+ </div>
160
+ <div class="effect-card__code">
161
+ <code>.filter--blur-md</code>
162
+ </div>
163
+ </div>
164
+ <div class="effect-card">
165
+ <div class="effect-card__preview filter--blur-lg">
166
+ <img src="https://picsum.photos/200/150?random=1" alt="blur-lg">
167
+ </div>
168
+ <div class="effect-card__info">
169
+ <h4 class="effect-card__title">blur-lg (16px)</h4>
170
+ </div>
171
+ <div class="effect-card__code">
172
+ <code>.filter--blur-lg</code>
173
+ </div>
174
+ </div>
175
+ <div class="effect-card">
176
+ <div class="effect-card__preview filter--blur-xl">
177
+ <img src="https://picsum.photos/200/150?random=1" alt="blur-xl">
178
+ </div>
179
+ <div class="effect-card__info">
180
+ <h4 class="effect-card__title">blur-xl (24px)</h4>
181
+ </div>
182
+ <div class="effect-card__code">
183
+ <code>.filter--blur-xl</code>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </section>
188
+
189
+ {# ============================================================= #}
190
+ {# GRAYSCALE FILTERS #}
191
+ {# ============================================================= #}
192
+ <section class="section-divider">
193
+ <h2>⬛ Grayscale Filters</h2>
194
+ <p>Convert images to grayscale at different intensities</p>
195
+
196
+ <div class="effect-grid">
197
+ <div class="effect-card">
198
+ <div class="effect-card__preview">
199
+ <img src="https://picsum.photos/200/150?random=2" alt="Original">
200
+ </div>
201
+ <div class="effect-card__info">
202
+ <h4 class="effect-card__title">Original</h4>
203
+ </div>
204
+ <div class="effect-card__code">
205
+ <code>No filter applied</code>
206
+ </div>
207
+ </div>
208
+ <div class="effect-card">
209
+ <div class="effect-card__preview filter--grayscale-0">
210
+ <img src="https://picsum.photos/200/150?random=2" alt="grayscale-0">
211
+ </div>
212
+ <div class="effect-card__info">
213
+ <h4 class="effect-card__title">grayscale-0</h4>
214
+ </div>
215
+ <div class="effect-card__code">
216
+ <code>.filter--grayscale-0</code>
217
+ </div>
218
+ </div>
219
+ <div class="effect-card">
220
+ <div class="effect-card__preview filter--grayscale-50">
221
+ <img src="https://picsum.photos/200/150?random=2" alt="grayscale-50">
222
+ </div>
223
+ <div class="effect-card__info">
224
+ <h4 class="effect-card__title">grayscale-50</h4>
225
+ </div>
226
+ <div class="effect-card__code">
227
+ <code>.filter--grayscale-50</code>
228
+ </div>
229
+ </div>
230
+ <div class="effect-card">
231
+ <div class="effect-card__preview filter--grayscale">
232
+ <img src="https://picsum.photos/200/150?random=2" alt="grayscale">
233
+ </div>
234
+ <div class="effect-card__info">
235
+ <h4 class="effect-card__title">grayscale (100%)</h4>
236
+ </div>
237
+ <div class="effect-card__code">
238
+ <code>.filter--grayscale</code>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </section>
243
+
244
+ {# ============================================================= #}
245
+ {# SEPIA FILTERS #}
246
+ {# ============================================================= #}
247
+ <section class="section-divider">
248
+ <h2>🟫 Sepia Filters</h2>
249
+ <p>Vintage sepia tone effects</p>
250
+
251
+ <div class="effect-grid">
252
+ <div class="effect-card">
253
+ <div class="effect-card__preview">
254
+ <img src="https://picsum.photos/200/150?random=3" alt="Original">
255
+ </div>
256
+ <div class="effect-card__info">
257
+ <h4 class="effect-card__title">Original</h4>
258
+ </div>
259
+ <div class="effect-card__code">
260
+ <code>No filter applied</code>
261
+ </div>
262
+ </div>
263
+ <div class="effect-card">
264
+ <div class="effect-card__preview filter--sepia-50">
265
+ <img src="https://picsum.photos/200/150?random=3" alt="sepia-50">
266
+ </div>
267
+ <div class="effect-card__info">
268
+ <h4 class="effect-card__title">sepia-50</h4>
269
+ </div>
270
+ <div class="effect-card__code">
271
+ <code>.filter--sepia-50</code>
272
+ </div>
273
+ </div>
274
+ <div class="effect-card">
275
+ <div class="effect-card__preview filter--sepia">
276
+ <img src="https://picsum.photos/200/150?random=3" alt="sepia">
277
+ </div>
278
+ <div class="effect-card__info">
279
+ <h4 class="effect-card__title">sepia (100%)</h4>
280
+ </div>
281
+ <div class="effect-card__code">
282
+ <code>.filter--sepia</code>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </section>
287
+
288
+ {# ============================================================= #}
289
+ {# BRIGHTNESS FILTERS #}
290
+ {# ============================================================= #}
291
+ <section class="section-divider">
292
+ <h2>☀️ Brightness Filters</h2>
293
+ <p>Adjust image brightness levels</p>
294
+
295
+ <div class="effect-grid">
296
+ <div class="effect-card">
297
+ <div class="effect-card__preview">
298
+ <img src="https://picsum.photos/200/150?random=4" alt="Original">
299
+ </div>
300
+ <div class="effect-card__info">
301
+ <h4 class="effect-card__title">Original</h4>
302
+ </div>
303
+ <div class="effect-card__code">
304
+ <code>No filter applied</code>
305
+ </div>
306
+ </div>
307
+ <div class="effect-card">
308
+ <div class="effect-card__preview filter--brightness-50">
309
+ <img src="https://picsum.photos/200/150?random=4" alt="brightness-50">
310
+ </div>
311
+ <div class="effect-card__info">
312
+ <h4 class="effect-card__title">brightness-50</h4>
313
+ </div>
314
+ <div class="effect-card__code">
315
+ <code>.filter--brightness-50</code>
316
+ </div>
317
+ </div>
318
+ <div class="effect-card">
319
+ <div class="effect-card__preview filter--brightness-75">
320
+ <img src="https://picsum.photos/200/150?random=4" alt="brightness-75">
321
+ </div>
322
+ <div class="effect-card__info">
323
+ <h4 class="effect-card__title">brightness-75</h4>
324
+ </div>
325
+ <div class="effect-card__code">
326
+ <code>.filter--brightness-75</code>
327
+ </div>
328
+ </div>
329
+ <div class="effect-card">
330
+ <div class="effect-card__preview filter--brightness-100">
331
+ <img src="https://picsum.photos/200/150?random=4" alt="brightness-100">
332
+ </div>
333
+ <div class="effect-card__info">
334
+ <h4 class="effect-card__title">brightness-100</h4>
335
+ </div>
336
+ <div class="effect-card__code">
337
+ <code>.filter--brightness-100</code>
338
+ </div>
339
+ </div>
340
+ <div class="effect-card">
341
+ <div class="effect-card__preview filter--brightness-125">
342
+ <img src="https://picsum.photos/200/150?random=4" alt="brightness-125">
343
+ </div>
344
+ <div class="effect-card__info">
345
+ <h4 class="effect-card__title">brightness-125</h4>
346
+ </div>
347
+ <div class="effect-card__code">
348
+ <code>.filter--brightness-125</code>
349
+ </div>
350
+ </div>
351
+ <div class="effect-card">
352
+ <div class="effect-card__preview filter--brightness-150">
353
+ <img src="https://picsum.photos/200/150?random=4" alt="brightness-150">
354
+ </div>
355
+ <div class="effect-card__info">
356
+ <h4 class="effect-card__title">brightness-150</h4>
357
+ </div>
358
+ <div class="effect-card__code">
359
+ <code>.filter--brightness-150</code>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </section>
364
+
365
+ {# ============================================================= #}
366
+ {# CONTRAST FILTERS #}
367
+ {# ============================================================= #}
368
+ <section class="section-divider">
369
+ <h2>🔲 Contrast Filters</h2>
370
+ <p>Adjust image contrast levels</p>
371
+
372
+ <div class="effect-grid">
373
+ <div class="effect-card">
374
+ <div class="effect-card__preview">
375
+ <img src="https://picsum.photos/200/150?random=5" alt="Original">
376
+ </div>
377
+ <div class="effect-card__info">
378
+ <h4 class="effect-card__title">Original</h4>
379
+ </div>
380
+ <div class="effect-card__code">
381
+ <code>No filter applied</code>
382
+ </div>
383
+ </div>
384
+ <div class="effect-card">
385
+ <div class="effect-card__preview filter--contrast-50">
386
+ <img src="https://picsum.photos/200/150?random=5" alt="contrast-50">
387
+ </div>
388
+ <div class="effect-card__info">
389
+ <h4 class="effect-card__title">contrast-50</h4>
390
+ </div>
391
+ <div class="effect-card__code">
392
+ <code>.filter--contrast-50</code>
393
+ </div>
394
+ </div>
395
+ <div class="effect-card">
396
+ <div class="effect-card__preview filter--contrast-100">
397
+ <img src="https://picsum.photos/200/150?random=5" alt="contrast-100">
398
+ </div>
399
+ <div class="effect-card__info">
400
+ <h4 class="effect-card__title">contrast-100</h4>
401
+ </div>
402
+ <div class="effect-card__code">
403
+ <code>.filter--contrast-100</code>
404
+ </div>
405
+ </div>
406
+ <div class="effect-card">
407
+ <div class="effect-card__preview filter--contrast-150">
408
+ <img src="https://picsum.photos/200/150?random=5" alt="contrast-150">
409
+ </div>
410
+ <div class="effect-card__info">
411
+ <h4 class="effect-card__title">contrast-150</h4>
412
+ </div>
413
+ <div class="effect-card__code">
414
+ <code>.filter--contrast-150</code>
415
+ </div>
416
+ </div>
417
+ <div class="effect-card">
418
+ <div class="effect-card__preview filter--contrast-200">
419
+ <img src="https://picsum.photos/200/150?random=5" alt="contrast-200">
420
+ </div>
421
+ <div class="effect-card__info">
422
+ <h4 class="effect-card__title">contrast-200</h4>
423
+ </div>
424
+ <div class="effect-card__code">
425
+ <code>.filter--contrast-200</code>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </section>
430
+
431
+ {# ============================================================= #}
432
+ {# SATURATE FILTERS #}
433
+ {# ============================================================= #}
434
+ <section class="section-divider">
435
+ <h2>🎨 Saturate Filters</h2>
436
+ <p>Adjust color saturation levels</p>
437
+
438
+ <div class="effect-grid">
439
+ <div class="effect-card">
440
+ <div class="effect-card__preview">
441
+ <img src="https://picsum.photos/200/150?random=6" alt="Original">
442
+ </div>
443
+ <div class="effect-card__info">
444
+ <h4 class="effect-card__title">Original</h4>
445
+ </div>
446
+ <div class="effect-card__code">
447
+ <code>No filter applied</code>
448
+ </div>
449
+ </div>
450
+ <div class="effect-card">
451
+ <div class="effect-card__preview filter--saturate-0">
452
+ <img src="https://picsum.photos/200/150?random=6" alt="saturate-0">
453
+ </div>
454
+ <div class="effect-card__info">
455
+ <h4 class="effect-card__title">saturate-0</h4>
456
+ </div>
457
+ <div class="effect-card__code">
458
+ <code>.filter--saturate-0</code>
459
+ </div>
460
+ </div>
461
+ <div class="effect-card">
462
+ <div class="effect-card__preview filter--saturate-50">
463
+ <img src="https://picsum.photos/200/150?random=6" alt="saturate-50">
464
+ </div>
465
+ <div class="effect-card__info">
466
+ <h4 class="effect-card__title">saturate-50</h4>
467
+ </div>
468
+ <div class="effect-card__code">
469
+ <code>.filter--saturate-50</code>
470
+ </div>
471
+ </div>
472
+ <div class="effect-card">
473
+ <div class="effect-card__preview filter--saturate-150">
474
+ <img src="https://picsum.photos/200/150?random=6" alt="saturate-150">
475
+ </div>
476
+ <div class="effect-card__info">
477
+ <h4 class="effect-card__title">saturate-150</h4>
478
+ </div>
479
+ <div class="effect-card__code">
480
+ <code>.filter--saturate-150</code>
481
+ </div>
482
+ </div>
483
+ <div class="effect-card">
484
+ <div class="effect-card__preview filter--saturate-200">
485
+ <img src="https://picsum.photos/200/150?random=6" alt="saturate-200">
486
+ </div>
487
+ <div class="effect-card__info">
488
+ <h4 class="effect-card__title">saturate-200</h4>
489
+ </div>
490
+ <div class="effect-card__code">
491
+ <code>.filter--saturate-200</code>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </section>
496
+
497
+ {# ============================================================= #}
498
+ {# HUE ROTATE FILTERS #}
499
+ {# ============================================================= #}
500
+ <section class="section-divider">
501
+ <h2>🌈 Hue Rotate Filters</h2>
502
+ <p>Rotate the hue of colors</p>
503
+
504
+ <div class="effect-grid">
505
+ <div class="effect-card">
506
+ <div class="effect-card__preview">
507
+ <img src="https://picsum.photos/200/150?random=7" alt="Original">
508
+ </div>
509
+ <div class="effect-card__info">
510
+ <h4 class="effect-card__title">Original</h4>
511
+ </div>
512
+ <div class="effect-card__code">
513
+ <code>No filter applied</code>
514
+ </div>
515
+ </div>
516
+ <div class="effect-card">
517
+ <div class="effect-card__preview filter--hue-rotate-30">
518
+ <img src="https://picsum.photos/200/150?random=7" alt="hue-rotate-30">
519
+ </div>
520
+ <div class="effect-card__info">
521
+ <h4 class="effect-card__title">hue-rotate-30°</h4>
522
+ </div>
523
+ <div class="effect-card__code">
524
+ <code>.filter--hue-rotate-30</code>
525
+ </div>
526
+ </div>
527
+ <div class="effect-card">
528
+ <div class="effect-card__preview filter--hue-rotate-60">
529
+ <img src="https://picsum.photos/200/150?random=7" alt="hue-rotate-60">
530
+ </div>
531
+ <div class="effect-card__info">
532
+ <h4 class="effect-card__title">hue-rotate-60°</h4>
533
+ </div>
534
+ <div class="effect-card__code">
535
+ <code>.filter--hue-rotate-60</code>
536
+ </div>
537
+ </div>
538
+ <div class="effect-card">
539
+ <div class="effect-card__preview filter--hue-rotate-90">
540
+ <img src="https://picsum.photos/200/150?random=7" alt="hue-rotate-90">
541
+ </div>
542
+ <div class="effect-card__info">
543
+ <h4 class="effect-card__title">hue-rotate-90°</h4>
544
+ </div>
545
+ <div class="effect-card__code">
546
+ <code>.filter--hue-rotate-90</code>
547
+ </div>
548
+ </div>
549
+ <div class="effect-card">
550
+ <div class="effect-card__preview filter--hue-rotate-180">
551
+ <img src="https://picsum.photos/200/150?random=7" alt="hue-rotate-180">
552
+ </div>
553
+ <div class="effect-card__info">
554
+ <h4 class="effect-card__title">hue-rotate-180°</h4>
555
+ </div>
556
+ <div class="effect-card__code">
557
+ <code>.filter--hue-rotate-180</code>
558
+ </div>
559
+ </div>
560
+ <div class="effect-card">
561
+ <div class="effect-card__preview filter--hue-rotate-270">
562
+ <img src="https://picsum.photos/200/150?random=7" alt="hue-rotate-270">
563
+ </div>
564
+ <div class="effect-card__info">
565
+ <h4 class="effect-card__title">hue-rotate-270°</h4>
566
+ </div>
567
+ <div class="effect-card__code">
568
+ <code>.filter--hue-rotate-270</code>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ </section>
573
+
574
+ {# ============================================================= #}
575
+ {# INVERT FILTERS #}
576
+ {# ============================================================= #}
577
+ <section class="section-divider">
578
+ <h2>🔄 Invert Filters</h2>
579
+ <p>Invert image colors</p>
580
+
581
+ <div class="effect-grid">
582
+ <div class="effect-card">
583
+ <div class="effect-card__preview">
584
+ <img src="https://picsum.photos/200/150?random=8" alt="Original">
585
+ </div>
586
+ <div class="effect-card__info">
587
+ <h4 class="effect-card__title">Original</h4>
588
+ </div>
589
+ <div class="effect-card__code">
590
+ <code>No filter applied</code>
591
+ </div>
592
+ </div>
593
+ <div class="effect-card">
594
+ <div class="effect-card__preview filter--invert-0">
595
+ <img src="https://picsum.photos/200/150?random=8" alt="invert-0">
596
+ </div>
597
+ <div class="effect-card__info">
598
+ <h4 class="effect-card__title">invert-0</h4>
599
+ </div>
600
+ <div class="effect-card__code">
601
+ <code>.filter--invert-0</code>
602
+ </div>
603
+ </div>
604
+ <div class="effect-card">
605
+ <div class="effect-card__preview filter--invert-50">
606
+ <img src="https://picsum.photos/200/150?random=8" alt="invert-50">
607
+ </div>
608
+ <div class="effect-card__info">
609
+ <h4 class="effect-card__title">invert-50</h4>
610
+ </div>
611
+ <div class="effect-card__code">
612
+ <code>.filter--invert-50</code>
613
+ </div>
614
+ </div>
615
+ <div class="effect-card">
616
+ <div class="effect-card__preview filter--invert">
617
+ <img src="https://picsum.photos/200/150?random=8" alt="invert">
618
+ </div>
619
+ <div class="effect-card__info">
620
+ <h4 class="effect-card__title">invert (100%)</h4>
621
+ </div>
622
+ <div class="effect-card__code">
623
+ <code>.filter--invert</code>
624
+ </div>
625
+ </div>
626
+ </div>
627
+ </section>
628
+
629
+ {# ============================================================= #}
630
+ {# DROP SHADOW FILTERS #}
631
+ {# ============================================================= #}
632
+ <section class="section-divider">
633
+ <h2>🌑 Drop Shadow Filters</h2>
634
+ <p>CSS filter drop-shadow effects</p>
635
+
636
+ <div class="effect-grid">
637
+ <div class="effect-card">
638
+ <div class="effect-card__preview" style="background: #f0f0f0;">
639
+ <img src="https://picsum.photos/100/100?random=9" alt="Original"
640
+ style="width: 80px; height: 80px; border-radius: 8px;">
641
+ </div>
642
+ <div class="effect-card__info">
643
+ <h4 class="effect-card__title">Original</h4>
644
+ </div>
645
+ <div class="effect-card__code">
646
+ <code>No filter applied</code>
647
+ </div>
648
+ </div>
649
+ <div class="effect-card">
650
+ <div class="effect-card__preview filter--drop-shadow-sm" style="background: #f0f0f0;">
651
+ <img src="https://picsum.photos/100/100?random=9" alt="drop-shadow-sm"
652
+ style="width: 80px; height: 80px; border-radius: 8px;">
653
+ </div>
654
+ <div class="effect-card__info">
655
+ <h4 class="effect-card__title">drop-shadow-sm</h4>
656
+ </div>
657
+ <div class="effect-card__code">
658
+ <code>.filter--drop-shadow-sm</code>
659
+ </div>
660
+ </div>
661
+ <div class="effect-card">
662
+ <div class="effect-card__preview filter--drop-shadow" style="background: #f0f0f0;">
663
+ <img src="https://picsum.photos/100/100?random=9" alt="drop-shadow"
664
+ style="width: 80px; height: 80px; border-radius: 8px;">
665
+ </div>
666
+ <div class="effect-card__info">
667
+ <h4 class="effect-card__title">drop-shadow</h4>
668
+ </div>
669
+ <div class="effect-card__code">
670
+ <code>.filter--drop-shadow</code>
671
+ </div>
672
+ </div>
673
+ <div class="effect-card">
674
+ <div class="effect-card__preview filter--drop-shadow-md" style="background: #f0f0f0;">
675
+ <img src="https://picsum.photos/100/100?random=9" alt="drop-shadow-md"
676
+ style="width: 80px; height: 80px; border-radius: 8px;">
677
+ </div>
678
+ <div class="effect-card__info">
679
+ <h4 class="effect-card__title">drop-shadow-md</h4>
680
+ </div>
681
+ <div class="effect-card__code">
682
+ <code>.filter--drop-shadow-md</code>
683
+ </div>
684
+ </div>
685
+ <div class="effect-card">
686
+ <div class="effect-card__preview filter--drop-shadow-lg" style="background: #f0f0f0;">
687
+ <img src="https://picsum.photos/100/100?random=9" alt="drop-shadow-lg"
688
+ style="width: 80px; height: 80px; border-radius: 8px;">
689
+ </div>
690
+ <div class="effect-card__info">
691
+ <h4 class="effect-card__title">drop-shadow-lg</h4>
692
+ </div>
693
+ <div class="effect-card__code">
694
+ <code>.filter--drop-shadow-lg</code>
695
+ </div>
696
+ </div>
697
+ <div class="effect-card">
698
+ <div class="effect-card__preview filter--drop-shadow-xl" style="background: #f0f0f0;">
699
+ <img src="https://picsum.photos/100/100?random=9" alt="drop-shadow-xl"
700
+ style="width: 80px; height: 80px; border-radius: 8px;">
701
+ </div>
702
+ <div class="effect-card__info">
703
+ <h4 class="effect-card__title">drop-shadow-xl</h4>
704
+ </div>
705
+ <div class="effect-card__code">
706
+ <code>.filter--drop-shadow-xl</code>
707
+ </div>
708
+ </div>
709
+ </div>
710
+ </section>
711
+
712
+ {# ============================================================= #}
713
+ {# FILTER PRESETS #}
714
+ {# ============================================================= #}
715
+ <section class="section-divider">
716
+ <h2>🎭 Filter Presets</h2>
717
+ <p>Pre-configured filter combinations for creative effects</p>
718
+
719
+ <div class="effect-grid">
720
+ <div class="effect-card">
721
+ <div class="effect-card__preview">
722
+ <img src="https://picsum.photos/200/150?random=10" alt="Original">
723
+ </div>
724
+ <div class="effect-card__info">
725
+ <h4 class="effect-card__title">Original</h4>
726
+ </div>
727
+ <div class="effect-card__code">
728
+ <code>No filter applied</code>
729
+ </div>
730
+ </div>
731
+ <div class="effect-card">
732
+ <div class="effect-card__preview filter--noir">
733
+ <img src="https://picsum.photos/200/150?random=10" alt="noir">
734
+ </div>
735
+ <div class="effect-card__info">
736
+ <h4 class="effect-card__title">Noir</h4>
737
+ </div>
738
+ <div class="effect-card__code">
739
+ <code>.filter--noir</code>
740
+ </div>
741
+ </div>
742
+ <div class="effect-card">
743
+ <div class="effect-card__preview filter--vintage">
744
+ <img src="https://picsum.photos/200/150?random=10" alt="vintage">
745
+ </div>
746
+ <div class="effect-card__info">
747
+ <h4 class="effect-card__title">Vintage</h4>
748
+ </div>
749
+ <div class="effect-card__code">
750
+ <code>.filter--vintage</code>
751
+ </div>
752
+ </div>
753
+ <div class="effect-card">
754
+ <div class="effect-card__preview filter--cold">
755
+ <img src="https://picsum.photos/200/150?random=10" alt="cold">
756
+ </div>
757
+ <div class="effect-card__info">
758
+ <h4 class="effect-card__title">Cold</h4>
759
+ </div>
760
+ <div class="effect-card__code">
761
+ <code>.filter--cold</code>
762
+ </div>
763
+ </div>
764
+ <div class="effect-card">
765
+ <div class="effect-card__preview filter--warm">
766
+ <img src="https://picsum.photos/200/150?random=10" alt="warm">
767
+ </div>
768
+ <div class="effect-card__info">
769
+ <h4 class="effect-card__title">Warm</h4>
770
+ </div>
771
+ <div class="effect-card__code">
772
+ <code>.filter--warm</code>
773
+ </div>
774
+ </div>
775
+ </div>
776
+ </section>
777
+
778
+ {# ============================================================= #}
779
+ {# BACKDROP FILTERS #}
780
+ {# ============================================================= #}
781
+ <section class="section-divider">
782
+ <h2>🌫️ Backdrop Filters</h2>
783
+ <p>CSS backdrop-filter effects for glass morphism</p>
784
+
785
+ <div class="effect-grid">
786
+ <div class="effect-card">
787
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
788
+ <div class="demo-box-effect backdrop--blur" style="background: rgba(255,255,255,0.2);">Blur</div>
789
+ </div>
790
+ <div class="effect-card__info">
791
+ <h4 class="effect-card__title">backdrop--blur</h4>
792
+ </div>
793
+ <div class="effect-card__code">
794
+ <code>.backdrop--blur</code>
795
+ </div>
796
+ </div>
797
+ <div class="effect-card">
798
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
799
+ <div class="demo-box-effect backdrop--blur-sm" style="background: rgba(255,255,255,0.2);">Blur SM</div>
800
+ </div>
801
+ <div class="effect-card__info">
802
+ <h4 class="effect-card__title">backdrop--blur-sm</h4>
803
+ </div>
804
+ <div class="effect-card__code">
805
+ <code>.backdrop--blur-sm</code>
806
+ </div>
807
+ </div>
808
+ <div class="effect-card">
809
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
810
+ <div class="demo-box-effect backdrop--blur-lg" style="background: rgba(255,255,255,0.2);">Blur LG</div>
811
+ </div>
812
+ <div class="effect-card__info">
813
+ <h4 class="effect-card__title">backdrop--blur-lg</h4>
814
+ </div>
815
+ <div class="effect-card__code">
816
+ <code>.backdrop--blur-lg</code>
817
+ </div>
818
+ </div>
819
+ <div class="effect-card">
820
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
821
+ <div class="demo-box-effect backdrop--glass" style="background: rgba(255,255,255,0.2);">Glass</div>
822
+ </div>
823
+ <div class="effect-card__info">
824
+ <h4 class="effect-card__title">backdrop--glass</h4>
825
+ </div>
826
+ <div class="effect-card__code">
827
+ <code>.backdrop--glass</code>
828
+ </div>
829
+ </div>
830
+ <div class="effect-card">
831
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
832
+ <div class="demo-box-effect backdrop--glass-dark" style="background: rgba(0,0,0,0.2); color: #fff;">
833
+ Glass Dark</div>
834
+ </div>
835
+ <div class="effect-card__info">
836
+ <h4 class="effect-card__title">backdrop--glass-dark</h4>
837
+ </div>
838
+ <div class="effect-card__code">
839
+ <code>.backdrop--glass-dark</code>
840
+ </div>
841
+ </div>
842
+ <div class="effect-card">
843
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
844
+ <div class="demo-box-effect backdrop--grayscale" style="background: rgba(255,255,255,0.2);">Grayscale
845
+ </div>
846
+ </div>
847
+ <div class="effect-card__info">
848
+ <h4 class="effect-card__title">backdrop--grayscale</h4>
849
+ </div>
850
+ <div class="effect-card__code">
851
+ <code>.backdrop--grayscale</code>
852
+ </div>
853
+ </div>
854
+ <div class="effect-card">
855
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
856
+ <div class="demo-box-effect backdrop--sepia" style="background: rgba(255,255,255,0.2);">Sepia</div>
857
+ </div>
858
+ <div class="effect-card__info">
859
+ <h4 class="effect-card__title">backdrop--sepia</h4>
860
+ </div>
861
+ <div class="effect-card__code">
862
+ <code>.backdrop--sepia</code>
863
+ </div>
864
+ </div>
865
+ <div class="effect-card">
866
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
867
+ <div class="demo-box-effect backdrop--invert" style="background: rgba(255,255,255,0.2);">Invert</div>
868
+ </div>
869
+ <div class="effect-card__info">
870
+ <h4 class="effect-card__title">backdrop--invert</h4>
871
+ </div>
872
+ <div class="effect-card__code">
873
+ <code>.backdrop--invert</code>
874
+ </div>
875
+ </div>
876
+ </div>
877
+ </section>
878
+
879
+ {# ============================================================= #}
880
+ {# BOX SHADOWS #}
881
+ {# ============================================================= #}
882
+ <section class="section-divider">
883
+ <h2>🌑 Box Shadows</h2>
884
+ <p>Box shadow utilities for depth and elevation</p>
885
+
886
+ <div class="effect-grid">
887
+ <div class="effect-card">
888
+ <div class="effect-card__preview" style="background: #f5f5f5;">
889
+ <div class="demo-box-shadow shadow">Default</div>
890
+ </div>
891
+ <div class="effect-card__info">
892
+ <h4 class="effect-card__title">shadow</h4>
893
+ </div>
894
+ <div class="effect-card__code">
895
+ <code>.shadow</code>
896
+ </div>
897
+ </div>
898
+ <div class="effect-card">
899
+ <div class="effect-card__preview" style="background: #f5f5f5;">
900
+ <div class="demo-box-shadow shadow--sm">Small</div>
901
+ </div>
902
+ <div class="effect-card__info">
903
+ <h4 class="effect-card__title">shadow--sm</h4>
904
+ </div>
905
+ <div class="effect-card__code">
906
+ <code>.shadow--sm</code>
907
+ </div>
908
+ </div>
909
+ <div class="effect-card">
910
+ <div class="effect-card__preview" style="background: #f5f5f5;">
911
+ <div class="demo-box-shadow shadow--md">Medium</div>
912
+ </div>
913
+ <div class="effect-card__info">
914
+ <h4 class="effect-card__title">shadow--md</h4>
915
+ </div>
916
+ <div class="effect-card__code">
917
+ <code>.shadow--md</code>
918
+ </div>
919
+ </div>
920
+ <div class="effect-card">
921
+ <div class="effect-card__preview" style="background: #f5f5f5;">
922
+ <div class="demo-box-shadow shadow--lg">Large</div>
923
+ </div>
924
+ <div class="effect-card__info">
925
+ <h4 class="effect-card__title">shadow--lg</h4>
926
+ </div>
927
+ <div class="effect-card__code">
928
+ <code>.shadow--lg</code>
929
+ </div>
930
+ </div>
931
+ <div class="effect-card">
932
+ <div class="effect-card__preview" style="background: #f5f5f5;">
933
+ <div class="demo-box-shadow shadow--xl">X-Large</div>
934
+ </div>
935
+ <div class="effect-card__info">
936
+ <h4 class="effect-card__title">shadow--xl</h4>
937
+ </div>
938
+ <div class="effect-card__code">
939
+ <code>.shadow--xl</code>
940
+ </div>
941
+ </div>
942
+ <div class="effect-card">
943
+ <div class="effect-card__preview" style="background: #f5f5f5;">
944
+ <div class="demo-box-shadow shadow--inner">Inner</div>
945
+ </div>
946
+ <div class="effect-card__info">
947
+ <h4 class="effect-card__title">shadow--inner</h4>
948
+ </div>
949
+ <div class="effect-card__code">
950
+ <code>.shadow--inner</code>
951
+ </div>
952
+ </div>
953
+ <div class="effect-card">
954
+ <div class="effect-card__preview" style="background: #f5f5f5;">
955
+ <div class="demo-box-shadow shadow--glow">Glow</div>
956
+ </div>
957
+ <div class="effect-card__info">
958
+ <h4 class="effect-card__title">shadow--glow</h4>
959
+ </div>
960
+ <div class="effect-card__code">
961
+ <code>.shadow--glow</code>
962
+ </div>
963
+ </div>
964
+ <div class="effect-card">
965
+ <div class="effect-card__preview" style="background: #f5f5f5;">
966
+ <div class="demo-box-shadow shadow--glow-lg">Glow LG</div>
967
+ </div>
968
+ <div class="effect-card__info">
969
+ <h4 class="effect-card__title">shadow--glow-lg</h4>
970
+ </div>
971
+ <div class="effect-card__code">
972
+ <code>.shadow--glow-lg</code>
973
+ </div>
974
+ </div>
975
+ <div class="effect-card">
976
+ <div class="effect-card__preview" style="background: #f5f5f5;">
977
+ <div class="demo-box-shadow shadow--primary">Primary</div>
978
+ </div>
979
+ <div class="effect-card__info">
980
+ <h4 class="effect-card__title">shadow--primary</h4>
981
+ </div>
982
+ <div class="effect-card__code">
983
+ <code>.shadow--primary</code>
984
+ </div>
985
+ </div>
986
+ <div class="effect-card">
987
+ <div class="effect-card__preview" style="background: #f5f5f5;">
988
+ <div class="demo-box-shadow shadow--success">Success</div>
989
+ </div>
990
+ <div class="effect-card__info">
991
+ <h4 class="effect-card__title">shadow--success</h4>
992
+ </div>
993
+ <div class="effect-card__code">
994
+ <code>.shadow--success</code>
995
+ </div>
996
+ </div>
997
+ <div class="effect-card">
998
+ <div class="effect-card__preview" style="background: #f5f5f5;">
999
+ <div class="demo-box-shadow shadow--warning">Warning</div>
1000
+ </div>
1001
+ <div class="effect-card__info">
1002
+ <h4 class="effect-card__title">shadow--warning</h4>
1003
+ </div>
1004
+ <div class="effect-card__code">
1005
+ <code>.shadow--warning</code>
1006
+ </div>
1007
+ </div>
1008
+ <div class="effect-card">
1009
+ <div class="effect-card__preview" style="background: #f5f5f5;">
1010
+ <div class="demo-box-shadow shadow--danger">Danger</div>
1011
+ </div>
1012
+ <div class="effect-card__info">
1013
+ <h4 class="effect-card__title">shadow--danger</h4>
1014
+ </div>
1015
+ <div class="effect-card__code">
1016
+ <code>.shadow--danger</code>
1017
+ </div>
1018
+ </div>
1019
+ </div>
1020
+ </section>
1021
+
1022
+ {# ============================================================= #}
1023
+ {# BLEND MODES #}
1024
+ {# ============================================================= #}
1025
+ <section class="section-divider">
1026
+ <h2>🎭 Blend Modes</h2>
1027
+ <p>CSS mix-blend-mode effects for creative layering</p>
1028
+
1029
+ <div class="effect-grid">
1030
+ <div class="effect-card">
1031
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
1032
+ <div class="demo-box-effect blend--multiply" style="background: #fff;">Multiply</div>
1033
+ </div>
1034
+ <div class="effect-card__info">
1035
+ <h4 class="effect-card__title">blend--multiply</h4>
1036
+ </div>
1037
+ <div class="effect-card__code">
1038
+ <code>.blend--multiply</code>
1039
+ </div>
1040
+ </div>
1041
+ <div class="effect-card">
1042
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
1043
+ <div class="demo-box-effect blend--screen" style="background: #333;">Screen</div>
1044
+ </div>
1045
+ <div class="effect-card__info">
1046
+ <h4 class="effect-card__title">blend--screen</h4>
1047
+ </div>
1048
+ <div class="effect-card__code">
1049
+ <code>.blend--screen</code>
1050
+ </div>
1051
+ </div>
1052
+ <div class="effect-card">
1053
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
1054
+ <div class="demo-box-effect blend--overlay" style="background: #888;">Overlay</div>
1055
+ </div>
1056
+ <div class="effect-card__info">
1057
+ <h4 class="effect-card__title">blend--overlay</h4>
1058
+ </div>
1059
+ <div class="effect-card__code">
1060
+ <code>.blend--overlay</code>
1061
+ </div>
1062
+ </div>
1063
+ <div class="effect-card">
1064
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
1065
+ <div class="demo-box-effect blend--darken" style="background: #aaa;">Darken</div>
1066
+ </div>
1067
+ <div class="effect-card__info">
1068
+ <h4 class="effect-card__title">blend--darken</h4>
1069
+ </div>
1070
+ <div class="effect-card__code">
1071
+ <code>.blend--darken</code>
1072
+ </div>
1073
+ </div>
1074
+ <div class="effect-card">
1075
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
1076
+ <div class="demo-box-effect blend--lighten" style="background: #555;">Lighten</div>
1077
+ </div>
1078
+ <div class="effect-card__info">
1079
+ <h4 class="effect-card__title">blend--lighten</h4>
1080
+ </div>
1081
+ <div class="effect-card__code">
1082
+ <code>.blend--lighten</code>
1083
+ </div>
1084
+ </div>
1085
+ <div class="effect-card">
1086
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
1087
+ <div class="demo-box-effect blend--difference" style="background: #fff;">Difference</div>
1088
+ </div>
1089
+ <div class="effect-card__info">
1090
+ <h4 class="effect-card__title">blend--difference</h4>
1091
+ </div>
1092
+ <div class="effect-card__code">
1093
+ <code>.blend--difference</code>
1094
+ </div>
1095
+ </div>
1096
+ <div class="effect-card">
1097
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
1098
+ <div class="demo-box-effect blend--exclusion" style="background: #888;">Exclusion</div>
1099
+ </div>
1100
+ <div class="effect-card__info">
1101
+ <h4 class="effect-card__title">blend--exclusion</h4>
1102
+ </div>
1103
+ <div class="effect-card__code">
1104
+ <code>.blend--exclusion</code>
1105
+ </div>
1106
+ </div>
1107
+ <div class="effect-card">
1108
+ <div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
1109
+ <div class="demo-box-effect blend--hue" style="background: #667eea;">Hue</div>
1110
+ </div>
1111
+ <div class="effect-card__info">
1112
+ <h4 class="effect-card__title">blend--hue</h4>
1113
+ </div>
1114
+ <div class="effect-card__code">
1115
+ <code>.blend--hue</code>
1116
+ </div>
1117
+ </div>
1118
+ </div>
1119
+ </section>
1120
+
1121
+ {# ============================================================= #}
1122
+ {# MASKS #}
1123
+ {# ============================================================= #}
1124
+ <section class="section-divider">
1125
+ <h2>🎭 Masks</h2>
1126
+ <p>CSS mask effects for fade gradients</p>
1127
+
1128
+ <div class="effect-grid">
1129
+ <div class="effect-card">
1130
+ <div class="effect-card__preview mask--fade-t">
1131
+ <img src="https://picsum.photos/200/150?random=20" alt="fade-t">
1132
+ </div>
1133
+ <div class="effect-card__info">
1134
+ <h4 class="effect-card__title">mask--fade-t</h4>
1135
+ </div>
1136
+ <div class="effect-card__code">
1137
+ <code>.mask--fade-t</code>
1138
+ </div>
1139
+ </div>
1140
+ <div class="effect-card">
1141
+ <div class="effect-card__preview mask--fade-b">
1142
+ <img src="https://picsum.photos/200/150?random=20" alt="fade-b">
1143
+ </div>
1144
+ <div class="effect-card__info">
1145
+ <h4 class="effect-card__title">mask--fade-b</h4>
1146
+ </div>
1147
+ <div class="effect-card__code">
1148
+ <code>.mask--fade-b</code>
1149
+ </div>
1150
+ </div>
1151
+ <div class="effect-card">
1152
+ <div class="effect-card__preview mask--fade-l">
1153
+ <img src="https://picsum.photos/200/150?random=20" alt="fade-l">
1154
+ </div>
1155
+ <div class="effect-card__info">
1156
+ <h4 class="effect-card__title">mask--fade-l</h4>
1157
+ </div>
1158
+ <div class="effect-card__code">
1159
+ <code>.mask--fade-l</code>
1160
+ </div>
1161
+ </div>
1162
+ <div class="effect-card">
1163
+ <div class="effect-card__preview mask--fade-r">
1164
+ <img src="https://picsum.photos/200/150?random=20" alt="fade-r">
1165
+ </div>
1166
+ <div class="effect-card__info">
1167
+ <h4 class="effect-card__title">mask--fade-r</h4>
1168
+ </div>
1169
+ <div class="effect-card__code">
1170
+ <code>.mask--fade-r</code>
1171
+ </div>
1172
+ </div>
1173
+ <div class="effect-card">
1174
+ <div class="effect-card__preview mask--radial">
1175
+ <img src="https://picsum.photos/200/150?random=20" alt="radial">
1176
+ </div>
1177
+ <div class="effect-card__info">
1178
+ <h4 class="effect-card__title">mask--radial</h4>
1179
+ </div>
1180
+ <div class="effect-card__code">
1181
+ <code>.mask--radial</code>
1182
+ </div>
1183
+ </div>
1184
+ </div>
1185
+ </section>
1186
+
1187
+ {# ============================================================= #}
1188
+ {# USAGE #}
1189
+ {# ============================================================= #}
1190
+ <section class="section-divider">
1191
+ <h2>📖 Usage</h2>
1192
+ <p>How to use filter classes and mixins</p>
1193
+
1194
+ <div class="code-block">
1195
+ <span class="comment">// Using filter classes directly in HTML</span>
1196
+ &lt;img class="filter--blur" src="photo.jpg"&gt;
1197
+ &lt;img class="filter--grayscale" src="photo.jpg"&gt;
1198
+ &lt;img class="filter--sepia filter--brightness-110" src="photo.jpg"&gt;
1199
+
1200
+ <span class="comment">// Using mixins in SCSS</span>
1201
+ .my-image {
1202
+ @include filter_blur(8px);
1203
+ }
1204
+
1205
+ .vintage-photo {
1206
+ @include filter_sepia(80%);
1207
+ @include filter_brightness(1.1);
1208
+ }
1209
+
1210
+ <span class="comment">// Backdrop filters for glass effects</span>
1211
+ .glass-card {
1212
+ @include backdrop_blur(12px);
1213
+ background: rgba(255, 255, 255, 0.2);
1214
+ }
1215
+ </div>
1216
+ </section>
1217
+
1218
+ {%- endblock %}