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_overview.html.jinja ADDED
@@ -0,0 +1,1313 @@
1
+ {% extends "_base.html.jinja" %}
2
+
3
+ {% set page_title = "Animation Overview | move.gl" %}
4
+ {% set body_class = "page-overview" %}
5
+
6
+ {% block content %}
7
+ <section class="section">
8
+ <h1 class="section-title">🎬 Animation Overview</h1>
9
+ <p class="section-description">
10
+ Complete showcase of all animations in the move.gl library. Each card shows the animation preview
11
+ and the HTML code needed to implement it.
12
+ </p>
13
+
14
+ {# Fade Animations #}
15
+ <h2 class="demo-section-title">✨ Fade Animations</h2>
16
+ <p class="demo-section-desc">Opacity-based fade effects</p>
17
+ <div class="demo-grid-fixed">
18
+ <div class="demo-card-fixed">
19
+ <div class="demo-card-fixed__preview">
20
+ <div class="demo-box animate_fade"></div>
21
+ </div>
22
+ <div class="demo-card-fixed__info">
23
+ <h4 class="demo-card-fixed__title">fade</h4>
24
+ </div>
25
+ <div class="demo-card-fixed__code">
26
+ <code>&lt;div class="animate_fade"&gt;&lt;/div&gt;</code>
27
+ </div>
28
+ </div>
29
+ <div class="demo-card-fixed">
30
+ <div class="demo-card-fixed__preview">
31
+ <div class="demo-box animate_fade_in"></div>
32
+ </div>
33
+ <div class="demo-card-fixed__info">
34
+ <h4 class="demo-card-fixed__title">fade_in</h4>
35
+ </div>
36
+ <div class="demo-card-fixed__code">
37
+ <code>&lt;div class="animate_fade_in"&gt;&lt;/div&gt;</code>
38
+ </div>
39
+ </div>
40
+ <div class="demo-card-fixed">
41
+ <div class="demo-card-fixed__preview">
42
+ <div class="demo-box animate_fade_out"></div>
43
+ </div>
44
+ <div class="demo-card-fixed__info">
45
+ <h4 class="demo-card-fixed__title">fade_out</h4>
46
+ </div>
47
+ <div class="demo-card-fixed__code">
48
+ <code>&lt;div class="animate_fade_out"&gt;&lt;/div&gt;</code>
49
+ </div>
50
+ </div>
51
+ <div class="demo-card-fixed">
52
+ <div class="demo-card-fixed__preview">
53
+ <div class="demo-box animate_fade_gradual"></div>
54
+ </div>
55
+ <div class="demo-card-fixed__info">
56
+ <h4 class="demo-card-fixed__title">fade_gradual</h4>
57
+ </div>
58
+ <div class="demo-card-fixed__code">
59
+ <code>&lt;div class="animate_fade_gradual"&gt;&lt;/div&gt;</code>
60
+ </div>
61
+ </div>
62
+ </div>
63
+
64
+ {# Slide Animations #}
65
+ <h2 class="demo-section-title">↔️ Slide Animations</h2>
66
+ <p class="demo-section-desc">Directional slide movements</p>
67
+ <div class="demo-grid-fixed">
68
+ <div class="demo-card-fixed">
69
+ <div class="demo-card-fixed__preview">
70
+ <div class="demo-box animate_slide_in_up"></div>
71
+ </div>
72
+ <div class="demo-card-fixed__info">
73
+ <h4 class="demo-card-fixed__title">slide_in_up</h4>
74
+ </div>
75
+ <div class="demo-card-fixed__code">
76
+ <code>&lt;div class="animate_slide_in_up"&gt;&lt;/div&gt;</code>
77
+ </div>
78
+ </div>
79
+ <div class="demo-card-fixed">
80
+ <div class="demo-card-fixed__preview">
81
+ <div class="demo-box animate_slide_in_down"></div>
82
+ </div>
83
+ <div class="demo-card-fixed__info">
84
+ <h4 class="demo-card-fixed__title">slide_in_down</h4>
85
+ </div>
86
+ <div class="demo-card-fixed__code">
87
+ <code>&lt;div class="animate_slide_in_down"&gt;&lt;/div&gt;</code>
88
+ </div>
89
+ </div>
90
+ <div class="demo-card-fixed">
91
+ <div class="demo-card-fixed__preview">
92
+ <div class="demo-box animate_slide_in_left"></div>
93
+ </div>
94
+ <div class="demo-card-fixed__info">
95
+ <h4 class="demo-card-fixed__title">slide_in_left</h4>
96
+ </div>
97
+ <div class="demo-card-fixed__code">
98
+ <code>&lt;div class="animate_slide_in_left"&gt;&lt;/div&gt;</code>
99
+ </div>
100
+ </div>
101
+ <div class="demo-card-fixed">
102
+ <div class="demo-card-fixed__preview">
103
+ <div class="demo-box animate_slide_in_right"></div>
104
+ </div>
105
+ <div class="demo-card-fixed__info">
106
+ <h4 class="demo-card-fixed__title">slide_in_right</h4>
107
+ </div>
108
+ <div class="demo-card-fixed__code">
109
+ <code>&lt;div class="animate_slide_in_right"&gt;&lt;/div&gt;</code>
110
+ </div>
111
+ </div>
112
+ <div class="demo-card-fixed">
113
+ <div class="demo-card-fixed__preview">
114
+ <div class="demo-box animate_slide_out_up"></div>
115
+ </div>
116
+ <div class="demo-card-fixed__info">
117
+ <h4 class="demo-card-fixed__title">slide_out_up</h4>
118
+ </div>
119
+ <div class="demo-card-fixed__code">
120
+ <code>&lt;div class="animate_slide_out_up"&gt;&lt;/div&gt;</code>
121
+ </div>
122
+ </div>
123
+ <div class="demo-card-fixed">
124
+ <div class="demo-card-fixed__preview">
125
+ <div class="demo-box animate_slide_out_down"></div>
126
+ </div>
127
+ <div class="demo-card-fixed__info">
128
+ <h4 class="demo-card-fixed__title">slide_out_down</h4>
129
+ </div>
130
+ <div class="demo-card-fixed__code">
131
+ <code>&lt;div class="animate_slide_out_down"&gt;&lt;/div&gt;</code>
132
+ </div>
133
+ </div>
134
+ <div class="demo-card-fixed">
135
+ <div class="demo-card-fixed__preview">
136
+ <div class="demo-box animate_slide_out_left"></div>
137
+ </div>
138
+ <div class="demo-card-fixed__info">
139
+ <h4 class="demo-card-fixed__title">slide_out_left</h4>
140
+ </div>
141
+ <div class="demo-card-fixed__code">
142
+ <code>&lt;div class="animate_slide_out_left"&gt;&lt;/div&gt;</code>
143
+ </div>
144
+ </div>
145
+ <div class="demo-card-fixed">
146
+ <div class="demo-card-fixed__preview">
147
+ <div class="demo-box animate_slide_out_right"></div>
148
+ </div>
149
+ <div class="demo-card-fixed__info">
150
+ <h4 class="demo-card-fixed__title">slide_out_right</h4>
151
+ </div>
152
+ <div class="demo-card-fixed__code">
153
+ <code>&lt;div class="animate_slide_out_right"&gt;&lt;/div&gt;</code>
154
+ </div>
155
+ </div>
156
+ <div class="demo-card-fixed">
157
+ <div class="demo-card-fixed__preview">
158
+ <div class="demo-box animate_slide_fade_in_up"></div>
159
+ </div>
160
+ <div class="demo-card-fixed__info">
161
+ <h4 class="demo-card-fixed__title">slide_fade_in_up</h4>
162
+ </div>
163
+ <div class="demo-card-fixed__code">
164
+ <code>&lt;div class="animate_slide_fade_in_up"&gt;&lt;/div&gt;</code>
165
+ </div>
166
+ </div>
167
+ <div class="demo-card-fixed">
168
+ <div class="demo-card-fixed__preview">
169
+ <div class="demo-box animate_slide_fade_in_down"></div>
170
+ </div>
171
+ <div class="demo-card-fixed__info">
172
+ <h4 class="demo-card-fixed__title">slide_fade_in_down</h4>
173
+ </div>
174
+ <div class="demo-card-fixed__code">
175
+ <code>&lt;div class="animate_slide_fade_in_down"&gt;&lt;/div&gt;</code>
176
+ </div>
177
+ </div>
178
+ <div class="demo-card-fixed">
179
+ <div class="demo-card-fixed__preview">
180
+ <div class="demo-box animate_slide_fade_in_left"></div>
181
+ </div>
182
+ <div class="demo-card-fixed__info">
183
+ <h4 class="demo-card-fixed__title">slide_fade_in_left</h4>
184
+ </div>
185
+ <div class="demo-card-fixed__code">
186
+ <code>&lt;div class="animate_slide_fade_in_left"&gt;&lt;/div&gt;</code>
187
+ </div>
188
+ </div>
189
+ <div class="demo-card-fixed">
190
+ <div class="demo-card-fixed__preview">
191
+ <div class="demo-box animate_slide_fade_in_right"></div>
192
+ </div>
193
+ <div class="demo-card-fixed__info">
194
+ <h4 class="demo-card-fixed__title">slide_fade_in_right</h4>
195
+ </div>
196
+ <div class="demo-card-fixed__code">
197
+ <code>&lt;div class="animate_slide_fade_in_right"&gt;&lt;/div&gt;</code>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ {# Bounce Animations #}
203
+ <h2 class="demo-section-title">⬆️ Bounce Animations</h2>
204
+ <p class="demo-section-desc">Elastic bouncing effects</p>
205
+ <div class="demo-grid-fixed">
206
+ <div class="demo-card-fixed">
207
+ <div class="demo-card-fixed__preview">
208
+ <div class="demo-box animate_bounce"></div>
209
+ </div>
210
+ <div class="demo-card-fixed__info">
211
+ <h4 class="demo-card-fixed__title">bounce</h4>
212
+ </div>
213
+ <div class="demo-card-fixed__code">
214
+ <code>&lt;div class="animate_bounce"&gt;&lt;/div&gt;</code>
215
+ </div>
216
+ </div>
217
+ <div class="demo-card-fixed">
218
+ <div class="demo-card-fixed__preview">
219
+ <div class="demo-box animate_bounce_extended"></div>
220
+ </div>
221
+ <div class="demo-card-fixed__info">
222
+ <h4 class="demo-card-fixed__title">bounce_extended</h4>
223
+ </div>
224
+ <div class="demo-card-fixed__code">
225
+ <code>&lt;div class="animate_bounce_extended"&gt;&lt;/div&gt;</code>
226
+ </div>
227
+ </div>
228
+ <div class="demo-card-fixed">
229
+ <div class="demo-card-fixed__preview">
230
+ <div class="demo-box animate_bounce_rotate"></div>
231
+ </div>
232
+ <div class="demo-card-fixed__info">
233
+ <h4 class="demo-card-fixed__title">bounce_rotate</h4>
234
+ </div>
235
+ <div class="demo-card-fixed__code">
236
+ <code>&lt;div class="animate_bounce_rotate"&gt;&lt;/div&gt;</code>
237
+ </div>
238
+ </div>
239
+ <div class="demo-card-fixed">
240
+ <div class="demo-card-fixed__preview">
241
+ <div class="demo-box animate_bounce_multi"></div>
242
+ </div>
243
+ <div class="demo-card-fixed__info">
244
+ <h4 class="demo-card-fixed__title">bounce_multi</h4>
245
+ </div>
246
+ <div class="demo-card-fixed__code">
247
+ <code>&lt;div class="animate_bounce_multi"&gt;&lt;/div&gt;</code>
248
+ </div>
249
+ </div>
250
+ <div class="demo-card-fixed">
251
+ <div class="demo-card-fixed__preview">
252
+ <div class="demo-box animate_elastic"></div>
253
+ </div>
254
+ <div class="demo-card-fixed__info">
255
+ <h4 class="demo-card-fixed__title">elastic</h4>
256
+ </div>
257
+ <div class="demo-card-fixed__code">
258
+ <code>&lt;div class="animate_elastic"&gt;&lt;/div&gt;</code>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ {# Zoom Animations #}
264
+ <h2 class="demo-section-title">🔍 Zoom Animations</h2>
265
+ <p class="demo-section-desc">Scale-based zoom effects</p>
266
+ <div class="demo-grid-fixed">
267
+ <div class="demo-card-fixed">
268
+ <div class="demo-card-fixed__preview">
269
+ <div class="demo-box animate_zoom"></div>
270
+ </div>
271
+ <div class="demo-card-fixed__info">
272
+ <h4 class="demo-card-fixed__title">zoom</h4>
273
+ </div>
274
+ <div class="demo-card-fixed__code">
275
+ <code>&lt;div class="animate_zoom"&gt;&lt;/div&gt;</code>
276
+ </div>
277
+ </div>
278
+ <div class="demo-card-fixed">
279
+ <div class="demo-card-fixed__preview">
280
+ <div class="demo-box animate_zoom_slow"></div>
281
+ </div>
282
+ <div class="demo-card-fixed__info">
283
+ <h4 class="demo-card-fixed__title">zoom_slow</h4>
284
+ </div>
285
+ <div class="demo-card-fixed__code">
286
+ <code>&lt;div class="animate_zoom_slow"&gt;&lt;/div&gt;</code>
287
+ </div>
288
+ </div>
289
+ <div class="demo-card-fixed">
290
+ <div class="demo-card-fixed__preview">
291
+ <div class="demo-box animate_zoom_fast"></div>
292
+ </div>
293
+ <div class="demo-card-fixed__info">
294
+ <h4 class="demo-card-fixed__title">zoom_fast</h4>
295
+ </div>
296
+ <div class="demo-card-fixed__code">
297
+ <code>&lt;div class="animate_zoom_fast"&gt;&lt;/div&gt;</code>
298
+ </div>
299
+ </div>
300
+ <div class="demo-card-fixed">
301
+ <div class="demo-card-fixed__preview">
302
+ <div class="demo-box animate_zoom_fade"></div>
303
+ </div>
304
+ <div class="demo-card-fixed__info">
305
+ <h4 class="demo-card-fixed__title">zoom_fade</h4>
306
+ </div>
307
+ <div class="demo-card-fixed__code">
308
+ <code>&lt;div class="animate_zoom_fade"&gt;&lt;/div&gt;</code>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ {# Scale Animations #}
314
+ <h2 class="demo-section-title">📐 Scale Animations</h2>
315
+ <p class="demo-section-desc">Size transformation effects</p>
316
+ <div class="demo-grid-fixed">
317
+ <div class="demo-card-fixed">
318
+ <div class="demo-card-fixed__preview">
319
+ <div class="demo-box animate_scale_expand"></div>
320
+ </div>
321
+ <div class="demo-card-fixed__info">
322
+ <h4 class="demo-card-fixed__title">scale_expand</h4>
323
+ </div>
324
+ <div class="demo-card-fixed__code">
325
+ <code>&lt;div class="animate_scale_expand"&gt;&lt;/div&gt;</code>
326
+ </div>
327
+ </div>
328
+ <div class="demo-card-fixed">
329
+ <div class="demo-card-fixed__preview">
330
+ <div class="demo-box animate_scale_shrink"></div>
331
+ </div>
332
+ <div class="demo-card-fixed__info">
333
+ <h4 class="demo-card-fixed__title">scale_shrink</h4>
334
+ </div>
335
+ <div class="demo-card-fixed__code">
336
+ <code>&lt;div class="animate_scale_shrink"&gt;&lt;/div&gt;</code>
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ {# Flip Animations #}
342
+ <h2 class="demo-section-title">🔄 Flip Animations</h2>
343
+ <p class="demo-section-desc">3D rotation effects</p>
344
+ <div class="demo-grid-fixed">
345
+ <div class="demo-card-fixed">
346
+ <div class="demo-card-fixed__preview">
347
+ <div class="demo-box animate_flip"></div>
348
+ </div>
349
+ <div class="demo-card-fixed__info">
350
+ <h4 class="demo-card-fixed__title">flip</h4>
351
+ </div>
352
+ <div class="demo-card-fixed__code">
353
+ <code>&lt;div class="animate_flip"&gt;&lt;/div&gt;</code>
354
+ </div>
355
+ </div>
356
+ <div class="demo-card-fixed">
357
+ <div class="demo-card-fixed__preview">
358
+ <div class="demo-box animate_flip_horizontal"></div>
359
+ </div>
360
+ <div class="demo-card-fixed__info">
361
+ <h4 class="demo-card-fixed__title">flip_horizontal</h4>
362
+ </div>
363
+ <div class="demo-card-fixed__code">
364
+ <code>&lt;div class="animate_flip_horizontal"&gt;&lt;/div&gt;</code>
365
+ </div>
366
+ </div>
367
+ <div class="demo-card-fixed">
368
+ <div class="demo-card-fixed__preview">
369
+ <div class="demo-box animate_flip_vertical"></div>
370
+ </div>
371
+ <div class="demo-card-fixed__info">
372
+ <h4 class="demo-card-fixed__title">flip_vertical</h4>
373
+ </div>
374
+ <div class="demo-card-fixed__code">
375
+ <code>&lt;div class="animate_flip_vertical"&gt;&lt;/div&gt;</code>
376
+ </div>
377
+ </div>
378
+ <div class="demo-card-fixed">
379
+ <div class="demo-card-fixed__preview">
380
+ <div class="demo-box animate_flip_diagonal"></div>
381
+ </div>
382
+ <div class="demo-card-fixed__info">
383
+ <h4 class="demo-card-fixed__title">flip_diagonal</h4>
384
+ </div>
385
+ <div class="demo-card-fixed__code">
386
+ <code>&lt;div class="animate_flip_diagonal"&gt;&lt;/div&gt;</code>
387
+ </div>
388
+ </div>
389
+ <div class="demo-card-fixed">
390
+ <div class="demo-card-fixed__preview">
391
+ <div class="demo-box animate_flip_180_horizontal"></div>
392
+ </div>
393
+ <div class="demo-card-fixed__info">
394
+ <h4 class="demo-card-fixed__title">flip_180_horizontal</h4>
395
+ </div>
396
+ <div class="demo-card-fixed__code">
397
+ <code>&lt;div class="animate_flip_180_horizontal"&gt;&lt;/div&gt;</code>
398
+ </div>
399
+ </div>
400
+ <div class="demo-card-fixed">
401
+ <div class="demo-card-fixed__preview">
402
+ <div class="demo-box animate_flip_180_vertical"></div>
403
+ </div>
404
+ <div class="demo-card-fixed__info">
405
+ <h4 class="demo-card-fixed__title">flip_180_vertical</h4>
406
+ </div>
407
+ <div class="demo-card-fixed__code">
408
+ <code>&lt;div class="animate_flip_180_vertical"&gt;&lt;/div&gt;</code>
409
+ </div>
410
+ </div>
411
+ <div class="demo-card-fixed">
412
+ <div class="demo-card-fixed__preview">
413
+ <div class="demo-box animate_flip_180_diagonal"></div>
414
+ </div>
415
+ <div class="demo-card-fixed__info">
416
+ <h4 class="demo-card-fixed__title">flip_180_diagonal</h4>
417
+ </div>
418
+ <div class="demo-card-fixed__code">
419
+ <code>&lt;div class="animate_flip_180_diagonal"&gt;&lt;/div&gt;</code>
420
+ </div>
421
+ </div>
422
+ </div>
423
+
424
+ {# Spin Animations #}
425
+ <h2 class="demo-section-title">🔃 Spin Animations</h2>
426
+ <p class="demo-section-desc">Continuous rotation effects</p>
427
+ <div class="demo-grid-fixed">
428
+ <div class="demo-card-fixed">
429
+ <div class="demo-card-fixed__preview">
430
+ <div class="demo-box animate_spin"></div>
431
+ </div>
432
+ <div class="demo-card-fixed__info">
433
+ <h4 class="demo-card-fixed__title">spin</h4>
434
+ </div>
435
+ <div class="demo-card-fixed__code">
436
+ <code>&lt;div class="animate_spin"&gt;&lt;/div&gt;</code>
437
+ </div>
438
+ </div>
439
+ <div class="demo-card-fixed">
440
+ <div class="demo-card-fixed__preview">
441
+ <div class="demo-box animate_spin_reverse"></div>
442
+ </div>
443
+ <div class="demo-card-fixed__info">
444
+ <h4 class="demo-card-fixed__title">spin_reverse</h4>
445
+ </div>
446
+ <div class="demo-card-fixed__code">
447
+ <code>&lt;div class="animate_spin_reverse"&gt;&lt;/div&gt;</code>
448
+ </div>
449
+ </div>
450
+ <div class="demo-card-fixed">
451
+ <div class="demo-card-fixed__preview">
452
+ <div class="demo-box animate_spin_pulse"></div>
453
+ </div>
454
+ <div class="demo-card-fixed__info">
455
+ <h4 class="demo-card-fixed__title">spin_pulse</h4>
456
+ </div>
457
+ <div class="demo-card-fixed__code">
458
+ <code>&lt;div class="animate_spin_pulse"&gt;&lt;/div&gt;</code>
459
+ </div>
460
+ </div>
461
+ <div class="demo-card-fixed">
462
+ <div class="demo-card-fixed__preview">
463
+ <div class="demo-box animate_spin_flip"></div>
464
+ </div>
465
+ <div class="demo-card-fixed__info">
466
+ <h4 class="demo-card-fixed__title">spin_flip</h4>
467
+ </div>
468
+ <div class="demo-card-fixed__code">
469
+ <code>&lt;div class="animate_spin_flip"&gt;&lt;/div&gt;</code>
470
+ </div>
471
+ </div>
472
+ <div class="demo-card-fixed">
473
+ <div class="demo-card-fixed__preview">
474
+ <div class="demo-box animate_spin_grow"></div>
475
+ </div>
476
+ <div class="demo-card-fixed__info">
477
+ <h4 class="demo-card-fixed__title">spin_grow</h4>
478
+ </div>
479
+ <div class="demo-card-fixed__code">
480
+ <code>&lt;div class="animate_spin_grow"&gt;&lt;/div&gt;</code>
481
+ </div>
482
+ </div>
483
+ <div class="demo-card-fixed">
484
+ <div class="demo-card-fixed__preview">
485
+ <div class="demo-box animate_roll"></div>
486
+ </div>
487
+ <div class="demo-card-fixed__info">
488
+ <h4 class="demo-card-fixed__title">roll</h4>
489
+ </div>
490
+ <div class="demo-card-fixed__code">
491
+ <code>&lt;div class="animate_roll"&gt;&lt;/div&gt;</code>
492
+ </div>
493
+ </div>
494
+ <div class="demo-card-fixed">
495
+ <div class="demo-card-fixed__preview">
496
+ <div class="demo-box animate_roll_reverse"></div>
497
+ </div>
498
+ <div class="demo-card-fixed__info">
499
+ <h4 class="demo-card-fixed__title">roll_reverse</h4>
500
+ </div>
501
+ <div class="demo-card-fixed__code">
502
+ <code>&lt;div class="animate_roll_reverse"&gt;&lt;/div&gt;</code>
503
+ </div>
504
+ </div>
505
+ <div class="demo-card-fixed">
506
+ <div class="demo-card-fixed__preview">
507
+ <div class="demo-box animate_roll_slow"></div>
508
+ </div>
509
+ <div class="demo-card-fixed__info">
510
+ <h4 class="demo-card-fixed__title">roll_slow</h4>
511
+ </div>
512
+ <div class="demo-card-fixed__code">
513
+ <code>&lt;div class="animate_roll_slow"&gt;&lt;/div&gt;</code>
514
+ </div>
515
+ </div>
516
+ <div class="demo-card-fixed">
517
+ <div class="demo-card-fixed__preview">
518
+ <div class="demo-box animate_roll_vertical"></div>
519
+ </div>
520
+ <div class="demo-card-fixed__info">
521
+ <h4 class="demo-card-fixed__title">roll_vertical</h4>
522
+ </div>
523
+ <div class="demo-card-fixed__code">
524
+ <code>&lt;div class="animate_roll_vertical"&gt;&lt;/div&gt;</code>
525
+ </div>
526
+ </div>
527
+ </div>
528
+
529
+ {# Shake Animations #}
530
+ <h2 class="demo-section-title">📳 Shake Animations</h2>
531
+ <p class="demo-section-desc">Vibration and shake effects</p>
532
+ <div class="demo-grid-fixed">
533
+ <div class="demo-card-fixed">
534
+ <div class="demo-card-fixed__preview">
535
+ <div class="demo-box animate_shake"></div>
536
+ </div>
537
+ <div class="demo-card-fixed__info">
538
+ <h4 class="demo-card-fixed__title">shake</h4>
539
+ </div>
540
+ <div class="demo-card-fixed__code">
541
+ <code>&lt;div class="animate_shake"&gt;&lt;/div&gt;</code>
542
+ </div>
543
+ </div>
544
+ <div class="demo-card-fixed">
545
+ <div class="demo-card-fixed__preview">
546
+ <div class="demo-box animate_shake_horizontal"></div>
547
+ </div>
548
+ <div class="demo-card-fixed__info">
549
+ <h4 class="demo-card-fixed__title">shake_horizontal</h4>
550
+ </div>
551
+ <div class="demo-card-fixed__code">
552
+ <code>&lt;div class="animate_shake_horizontal"&gt;&lt;/div&gt;</code>
553
+ </div>
554
+ </div>
555
+ <div class="demo-card-fixed">
556
+ <div class="demo-card-fixed__preview">
557
+ <div class="demo-box animate_shake_slow"></div>
558
+ </div>
559
+ <div class="demo-card-fixed__info">
560
+ <h4 class="demo-card-fixed__title">shake_slow</h4>
561
+ </div>
562
+ <div class="demo-card-fixed__code">
563
+ <code>&lt;div class="animate_shake_slow"&gt;&lt;/div&gt;</code>
564
+ </div>
565
+ </div>
566
+ <div class="demo-card-fixed">
567
+ <div class="demo-card-fixed__preview">
568
+ <div class="demo-box animate_wobble"></div>
569
+ </div>
570
+ <div class="demo-card-fixed__info">
571
+ <h4 class="demo-card-fixed__title">wobble</h4>
572
+ </div>
573
+ <div class="demo-card-fixed__code">
574
+ <code>&lt;div class="animate_wobble"&gt;&lt;/div&gt;</code>
575
+ </div>
576
+ </div>
577
+ <div class="demo-card-fixed">
578
+ <div class="demo-card-fixed__preview">
579
+ <div class="demo-box animate_wobble_slow"></div>
580
+ </div>
581
+ <div class="demo-card-fixed__info">
582
+ <h4 class="demo-card-fixed__title">wobble_slow</h4>
583
+ </div>
584
+ <div class="demo-card-fixed__code">
585
+ <code>&lt;div class="animate_wobble_slow"&gt;&lt;/div&gt;</code>
586
+ </div>
587
+ </div>
588
+ <div class="demo-card-fixed">
589
+ <div class="demo-card-fixed__preview">
590
+ <div class="demo-box animate_wobble_fast"></div>
591
+ </div>
592
+ <div class="demo-card-fixed__info">
593
+ <h4 class="demo-card-fixed__title">wobble_fast</h4>
594
+ </div>
595
+ <div class="demo-card-fixed__code">
596
+ <code>&lt;div class="animate_wobble_fast"&gt;&lt;/div&gt;</code>
597
+ </div>
598
+ </div>
599
+ <div class="demo-card-fixed">
600
+ <div class="demo-card-fixed__preview">
601
+ <div class="demo-box animate_wobble_scale"></div>
602
+ </div>
603
+ <div class="demo-card-fixed__info">
604
+ <h4 class="demo-card-fixed__title">wobble_scale</h4>
605
+ </div>
606
+ <div class="demo-card-fixed__code">
607
+ <code>&lt;div class="animate_wobble_scale"&gt;&lt;/div&gt;</code>
608
+ </div>
609
+ </div>
610
+ <div class="demo-card-fixed">
611
+ <div class="demo-card-fixed__preview">
612
+ <div class="demo-box animate_jiggle"></div>
613
+ </div>
614
+ <div class="demo-card-fixed__info">
615
+ <h4 class="demo-card-fixed__title">jiggle</h4>
616
+ </div>
617
+ <div class="demo-card-fixed__code">
618
+ <code>&lt;div class="animate_jiggle"&gt;&lt;/div&gt;</code>
619
+ </div>
620
+ </div>
621
+ <div class="demo-card-fixed">
622
+ <div class="demo-card-fixed__preview">
623
+ <div class="demo-box animate_jiggle_slow"></div>
624
+ </div>
625
+ <div class="demo-card-fixed__info">
626
+ <h4 class="demo-card-fixed__title">jiggle_slow</h4>
627
+ </div>
628
+ <div class="demo-card-fixed__code">
629
+ <code>&lt;div class="animate_jiggle_slow"&gt;&lt;/div&gt;</code>
630
+ </div>
631
+ </div>
632
+ <div class="demo-card-fixed">
633
+ <div class="demo-card-fixed__preview">
634
+ <div class="demo-box animate_jiggle_multi"></div>
635
+ </div>
636
+ <div class="demo-card-fixed__info">
637
+ <h4 class="demo-card-fixed__title">jiggle_multi</h4>
638
+ </div>
639
+ <div class="demo-card-fixed__code">
640
+ <code>&lt;div class="animate_jiggle_multi"&gt;&lt;/div&gt;</code>
641
+ </div>
642
+ </div>
643
+ <div class="demo-card-fixed">
644
+ <div class="demo-card-fixed__preview">
645
+ <div class="demo-box animate_jiggle_vertical"></div>
646
+ </div>
647
+ <div class="demo-card-fixed__info">
648
+ <h4 class="demo-card-fixed__title">jiggle_vertical</h4>
649
+ </div>
650
+ <div class="demo-card-fixed__code">
651
+ <code>&lt;div class="animate_jiggle_vertical"&gt;&lt;/div&gt;</code>
652
+ </div>
653
+ </div>
654
+ </div>
655
+
656
+ {# Pulse Animations #}
657
+ <h2 class="demo-section-title">💗 Pulse Animations</h2>
658
+ <p class="demo-section-desc">Breathing and pulsing effects</p>
659
+ <div class="demo-grid-fixed">
660
+ <div class="demo-card-fixed">
661
+ <div class="demo-card-fixed__preview">
662
+ <div class="demo-box animate_pulse"></div>
663
+ </div>
664
+ <div class="demo-card-fixed__info">
665
+ <h4 class="demo-card-fixed__title">pulse</h4>
666
+ </div>
667
+ <div class="demo-card-fixed__code">
668
+ <code>&lt;div class="animate_pulse"&gt;&lt;/div&gt;</code>
669
+ </div>
670
+ </div>
671
+ <div class="demo-card-fixed">
672
+ <div class="demo-card-fixed__preview">
673
+ <div class="demo-box animate_pulse_slow"></div>
674
+ </div>
675
+ <div class="demo-card-fixed__info">
676
+ <h4 class="demo-card-fixed__title">pulse_slow</h4>
677
+ </div>
678
+ <div class="demo-card-fixed__code">
679
+ <code>&lt;div class="animate_pulse_slow"&gt;&lt;/div&gt;</code>
680
+ </div>
681
+ </div>
682
+ <div class="demo-card-fixed">
683
+ <div class="demo-card-fixed__preview">
684
+ <div class="demo-box animate_pulse_fast"></div>
685
+ </div>
686
+ <div class="demo-card-fixed__info">
687
+ <h4 class="demo-card-fixed__title">pulse_fast</h4>
688
+ </div>
689
+ <div class="demo-card-fixed__code">
690
+ <code>&lt;div class="animate_pulse_fast"&gt;&lt;/div&gt;</code>
691
+ </div>
692
+ </div>
693
+ <div class="demo-card-fixed">
694
+ <div class="demo-card-fixed__preview">
695
+ <div class="demo-box animate_pulse_color"></div>
696
+ </div>
697
+ <div class="demo-card-fixed__info">
698
+ <h4 class="demo-card-fixed__title">pulse_color</h4>
699
+ </div>
700
+ <div class="demo-card-fixed__code">
701
+ <code>&lt;div class="animate_pulse_color"&gt;&lt;/div&gt;</code>
702
+ </div>
703
+ </div>
704
+ <div class="demo-card-fixed">
705
+ <div class="demo-card-fixed__preview">
706
+ <div class="demo-box animate_heartbeat"></div>
707
+ </div>
708
+ <div class="demo-card-fixed__info">
709
+ <h4 class="demo-card-fixed__title">heartbeat</h4>
710
+ </div>
711
+ <div class="demo-card-fixed__code">
712
+ <code>&lt;div class="animate_heartbeat"&gt;&lt;/div&gt;</code>
713
+ </div>
714
+ </div>
715
+ <div class="demo-card-fixed">
716
+ <div class="demo-card-fixed__preview">
717
+ <div class="demo-box animate_heartbeat_slow"></div>
718
+ </div>
719
+ <div class="demo-card-fixed__info">
720
+ <h4 class="demo-card-fixed__title">heartbeat_slow</h4>
721
+ </div>
722
+ <div class="demo-card-fixed__code">
723
+ <code>&lt;div class="animate_heartbeat_slow"&gt;&lt;/div&gt;</code>
724
+ </div>
725
+ </div>
726
+ <div class="demo-card-fixed">
727
+ <div class="demo-card-fixed__preview">
728
+ <div class="demo-box animate_heartbeat_fast"></div>
729
+ </div>
730
+ <div class="demo-card-fixed__info">
731
+ <h4 class="demo-card-fixed__title">heartbeat_fast</h4>
732
+ </div>
733
+ <div class="demo-card-fixed__code">
734
+ <code>&lt;div class="animate_heartbeat_fast"&gt;&lt;/div&gt;</code>
735
+ </div>
736
+ </div>
737
+ <div class="demo-card-fixed">
738
+ <div class="demo-card-fixed__preview">
739
+ <div class="demo-box animate_heartbeat_color"></div>
740
+ </div>
741
+ <div class="demo-card-fixed__info">
742
+ <h4 class="demo-card-fixed__title">heartbeat_color</h4>
743
+ </div>
744
+ <div class="demo-card-fixed__code">
745
+ <code>&lt;div class="animate_heartbeat_color"&gt;&lt;/div&gt;</code>
746
+ </div>
747
+ </div>
748
+ </div>
749
+
750
+ {# Attention Seekers #}
751
+ <h2 class="demo-section-title">👀 Attention Seekers</h2>
752
+ <p class="demo-section-desc">Effects to grab attention</p>
753
+ <div class="demo-grid-fixed">
754
+ <div class="demo-card-fixed">
755
+ <div class="demo-card-fixed__preview">
756
+ <div class="demo-box animate_flash"></div>
757
+ </div>
758
+ <div class="demo-card-fixed__info">
759
+ <h4 class="demo-card-fixed__title">flash</h4>
760
+ </div>
761
+ <div class="demo-card-fixed__code">
762
+ <code>&lt;div class="animate_flash"&gt;&lt;/div&gt;</code>
763
+ </div>
764
+ </div>
765
+ <div class="demo-card-fixed">
766
+ <div class="demo-card-fixed__preview">
767
+ <div class="demo-box animate_flash_fade"></div>
768
+ </div>
769
+ <div class="demo-card-fixed__info">
770
+ <h4 class="demo-card-fixed__title">flash_fade</h4>
771
+ </div>
772
+ <div class="demo-card-fixed__code">
773
+ <code>&lt;div class="animate_flash_fade"&gt;&lt;/div&gt;</code>
774
+ </div>
775
+ </div>
776
+ <div class="demo-card-fixed">
777
+ <div class="demo-card-fixed__preview">
778
+ <div class="demo-box animate_flash_fade_slow"></div>
779
+ </div>
780
+ <div class="demo-card-fixed__info">
781
+ <h4 class="demo-card-fixed__title">flash_fade_slow</h4>
782
+ </div>
783
+ <div class="demo-card-fixed__code">
784
+ <code>&lt;div class="animate_flash_fade_slow"&gt;&lt;/div&gt;</code>
785
+ </div>
786
+ </div>
787
+ <div class="demo-card-fixed">
788
+ <div class="demo-card-fixed__preview">
789
+ <div class="demo-box animate_flash_strobe"></div>
790
+ </div>
791
+ <div class="demo-card-fixed__info">
792
+ <h4 class="demo-card-fixed__title">flash_strobe</h4>
793
+ </div>
794
+ <div class="demo-card-fixed__code">
795
+ <code>&lt;div class="animate_flash_strobe"&gt;&lt;/div&gt;</code>
796
+ </div>
797
+ </div>
798
+ <div class="demo-card-fixed">
799
+ <div class="demo-card-fixed__preview">
800
+ <div class="demo-box animate_blink"></div>
801
+ </div>
802
+ <div class="demo-card-fixed__info">
803
+ <h4 class="demo-card-fixed__title">blink</h4>
804
+ </div>
805
+ <div class="demo-card-fixed__code">
806
+ <code>&lt;div class="animate_blink"&gt;&lt;/div&gt;</code>
807
+ </div>
808
+ </div>
809
+ <div class="demo-card-fixed">
810
+ <div class="demo-card-fixed__preview">
811
+ <div class="demo-box animate_blink_rapid"></div>
812
+ </div>
813
+ <div class="demo-card-fixed__info">
814
+ <h4 class="demo-card-fixed__title">blink_rapid</h4>
815
+ </div>
816
+ <div class="demo-card-fixed__code">
817
+ <code>&lt;div class="animate_blink_rapid"&gt;&lt;/div&gt;</code>
818
+ </div>
819
+ </div>
820
+ <div class="demo-card-fixed">
821
+ <div class="demo-card-fixed__preview">
822
+ <div class="demo-box animate_blink_soft"></div>
823
+ </div>
824
+ <div class="demo-card-fixed__info">
825
+ <h4 class="demo-card-fixed__title">blink_soft</h4>
826
+ </div>
827
+ <div class="demo-card-fixed__code">
828
+ <code>&lt;div class="animate_blink_soft"&gt;&lt;/div&gt;</code>
829
+ </div>
830
+ </div>
831
+ <div class="demo-card-fixed">
832
+ <div class="demo-card-fixed__preview">
833
+ <div class="demo-box animate_blink_alternate"></div>
834
+ </div>
835
+ <div class="demo-card-fixed__info">
836
+ <h4 class="demo-card-fixed__title">blink_alternate</h4>
837
+ </div>
838
+ <div class="demo-card-fixed__code">
839
+ <code>&lt;div class="animate_blink_alternate"&gt;&lt;/div&gt;</code>
840
+ </div>
841
+ </div>
842
+ <div class="demo-card-fixed">
843
+ <div class="demo-card-fixed__preview">
844
+ <div class="demo-box animate_beat"></div>
845
+ </div>
846
+ <div class="demo-card-fixed__info">
847
+ <h4 class="demo-card-fixed__title">beat</h4>
848
+ </div>
849
+ <div class="demo-card-fixed__code">
850
+ <code>&lt;div class="animate_beat"&gt;&lt;/div&gt;</code>
851
+ </div>
852
+ </div>
853
+ <div class="demo-card-fixed">
854
+ <div class="demo-card-fixed__preview">
855
+ <div class="demo-box animate_beat_double"></div>
856
+ </div>
857
+ <div class="demo-card-fixed__info">
858
+ <h4 class="demo-card-fixed__title">beat_double</h4>
859
+ </div>
860
+ <div class="demo-card-fixed__code">
861
+ <code>&lt;div class="animate_beat_double"&gt;&lt;/div&gt;</code>
862
+ </div>
863
+ </div>
864
+ <div class="demo-card-fixed">
865
+ <div class="demo-card-fixed__preview">
866
+ <div class="demo-box animate_beat_fade"></div>
867
+ </div>
868
+ <div class="demo-card-fixed__info">
869
+ <h4 class="demo-card-fixed__title">beat_fade</h4>
870
+ </div>
871
+ <div class="demo-card-fixed__code">
872
+ <code>&lt;div class="animate_beat_fade"&gt;&lt;/div&gt;</code>
873
+ </div>
874
+ </div>
875
+ <div class="demo-card-fixed">
876
+ <div class="demo-card-fixed__preview">
877
+ <div class="demo-box animate_pop"></div>
878
+ </div>
879
+ <div class="demo-card-fixed__info">
880
+ <h4 class="demo-card-fixed__title">pop</h4>
881
+ </div>
882
+ <div class="demo-card-fixed__code">
883
+ <code>&lt;div class="animate_pop"&gt;&lt;/div&gt;</code>
884
+ </div>
885
+ </div>
886
+ <div class="demo-card-fixed">
887
+ <div class="demo-card-fixed__preview">
888
+ <div class="demo-box animate_pop_slow"></div>
889
+ </div>
890
+ <div class="demo-card-fixed__info">
891
+ <h4 class="demo-card-fixed__title">pop_slow</h4>
892
+ </div>
893
+ <div class="demo-card-fixed__code">
894
+ <code>&lt;div class="animate_pop_slow"&gt;&lt;/div&gt;</code>
895
+ </div>
896
+ </div>
897
+ <div class="demo-card-fixed">
898
+ <div class="demo-card-fixed__preview">
899
+ <div class="demo-box animate_pop_fast"></div>
900
+ </div>
901
+ <div class="demo-card-fixed__info">
902
+ <h4 class="demo-card-fixed__title">pop_fast</h4>
903
+ </div>
904
+ <div class="demo-card-fixed__code">
905
+ <code>&lt;div class="animate_pop_fast"&gt;&lt;/div&gt;</code>
906
+ </div>
907
+ </div>
908
+ <div class="demo-card-fixed">
909
+ <div class="demo-card-fixed__preview">
910
+ <div class="demo-box animate_pop_rotate"></div>
911
+ </div>
912
+ <div class="demo-card-fixed__info">
913
+ <h4 class="demo-card-fixed__title">pop_rotate</h4>
914
+ </div>
915
+ <div class="demo-card-fixed__code">
916
+ <code>&lt;div class="animate_pop_rotate"&gt;&lt;/div&gt;</code>
917
+ </div>
918
+ </div>
919
+ <div class="demo-card-fixed">
920
+ <div class="demo-card-fixed__preview">
921
+ <div class="demo-box animate_tada"></div>
922
+ </div>
923
+ <div class="demo-card-fixed__info">
924
+ <h4 class="demo-card-fixed__title">tada</h4>
925
+ </div>
926
+ <div class="demo-card-fixed__code">
927
+ <code>&lt;div class="animate_tada"&gt;&lt;/div&gt;</code>
928
+ </div>
929
+ </div>
930
+ <div class="demo-card-fixed">
931
+ <div class="demo-card-fixed__preview">
932
+ <div class="demo-box animate_tada_slow"></div>
933
+ </div>
934
+ <div class="demo-card-fixed__info">
935
+ <h4 class="demo-card-fixed__title">tada_slow</h4>
936
+ </div>
937
+ <div class="demo-card-fixed__code">
938
+ <code>&lt;div class="animate_tada_slow"&gt;&lt;/div&gt;</code>
939
+ </div>
940
+ </div>
941
+ <div class="demo-card-fixed">
942
+ <div class="demo-card-fixed__preview">
943
+ <div class="demo-box animate_tada_fast"></div>
944
+ </div>
945
+ <div class="demo-card-fixed__info">
946
+ <h4 class="demo-card-fixed__title">tada_fast</h4>
947
+ </div>
948
+ <div class="demo-card-fixed__code">
949
+ <code>&lt;div class="animate_tada_fast"&gt;&lt;/div&gt;</code>
950
+ </div>
951
+ </div>
952
+ <div class="demo-card-fixed">
953
+ <div class="demo-card-fixed__preview">
954
+ <div class="demo-box animate_tada_fade"></div>
955
+ </div>
956
+ <div class="demo-card-fixed__info">
957
+ <h4 class="demo-card-fixed__title">tada_fade</h4>
958
+ </div>
959
+ <div class="demo-card-fixed__code">
960
+ <code>&lt;div class="animate_tada_fade"&gt;&lt;/div&gt;</code>
961
+ </div>
962
+ </div>
963
+ </div>
964
+
965
+ {# Special Effects #}
966
+ <h2 class="demo-section-title">🎯 Special Effects</h2>
967
+ <p class="demo-section-desc">Unique and complex animations</p>
968
+ <div class="demo-grid-fixed">
969
+ <div class="demo-card-fixed">
970
+ <div class="demo-card-fixed__preview">
971
+ <div class="demo-box animate_float"></div>
972
+ </div>
973
+ <div class="demo-card-fixed__info">
974
+ <h4 class="demo-card-fixed__title">float</h4>
975
+ </div>
976
+ <div class="demo-card-fixed__code">
977
+ <code>&lt;div class="animate_float"&gt;&lt;/div&gt;</code>
978
+ </div>
979
+ </div>
980
+ <div class="demo-card-fixed">
981
+ <div class="demo-card-fixed__preview">
982
+ <div class="demo-box animate_float_horizontal"></div>
983
+ </div>
984
+ <div class="demo-card-fixed__info">
985
+ <h4 class="demo-card-fixed__title">float_horizontal</h4>
986
+ </div>
987
+ <div class="demo-card-fixed__code">
988
+ <code>&lt;div class="animate_float_horizontal"&gt;&lt;/div&gt;</code>
989
+ </div>
990
+ </div>
991
+ <div class="demo-card-fixed">
992
+ <div class="demo-card-fixed__preview">
993
+ <div class="demo-box animate_float_rotate"></div>
994
+ </div>
995
+ <div class="demo-card-fixed__info">
996
+ <h4 class="demo-card-fixed__title">float_rotate</h4>
997
+ </div>
998
+ <div class="demo-card-fixed__code">
999
+ <code>&lt;div class="animate_float_rotate"&gt;&lt;/div&gt;</code>
1000
+ </div>
1001
+ </div>
1002
+ <div class="demo-card-fixed">
1003
+ <div class="demo-card-fixed__preview">
1004
+ <div class="demo-box animate_sway"></div>
1005
+ </div>
1006
+ <div class="demo-card-fixed__info">
1007
+ <h4 class="demo-card-fixed__title">sway</h4>
1008
+ </div>
1009
+ <div class="demo-card-fixed__code">
1010
+ <code>&lt;div class="animate_sway"&gt;&lt;/div&gt;</code>
1011
+ </div>
1012
+ </div>
1013
+ <div class="demo-card-fixed">
1014
+ <div class="demo-card-fixed__preview">
1015
+ <div class="demo-box animate_sway_slow"></div>
1016
+ </div>
1017
+ <div class="demo-card-fixed__info">
1018
+ <h4 class="demo-card-fixed__title">sway_slow</h4>
1019
+ </div>
1020
+ <div class="demo-card-fixed__code">
1021
+ <code>&lt;div class="animate_sway_slow"&gt;&lt;/div&gt;</code>
1022
+ </div>
1023
+ </div>
1024
+ <div class="demo-card-fixed">
1025
+ <div class="demo-card-fixed__preview">
1026
+ <div class="demo-box animate_sway_fast"></div>
1027
+ </div>
1028
+ <div class="demo-card-fixed__info">
1029
+ <h4 class="demo-card-fixed__title">sway_fast</h4>
1030
+ </div>
1031
+ <div class="demo-card-fixed__code">
1032
+ <code>&lt;div class="animate_sway_fast"&gt;&lt;/div&gt;</code>
1033
+ </div>
1034
+ </div>
1035
+ <div class="demo-card-fixed">
1036
+ <div class="demo-card-fixed__preview">
1037
+ <div class="demo-box animate_sway_fade"></div>
1038
+ </div>
1039
+ <div class="demo-card-fixed__info">
1040
+ <h4 class="demo-card-fixed__title">sway_fade</h4>
1041
+ </div>
1042
+ <div class="demo-card-fixed__code">
1043
+ <code>&lt;div class="animate_sway_fade"&gt;&lt;/div&gt;</code>
1044
+ </div>
1045
+ </div>
1046
+ <div class="demo-card-fixed">
1047
+ <div class="demo-card-fixed__preview">
1048
+ <div class="demo-box animate_swing"></div>
1049
+ </div>
1050
+ <div class="demo-card-fixed__info">
1051
+ <h4 class="demo-card-fixed__title">swing</h4>
1052
+ </div>
1053
+ <div class="demo-card-fixed__code">
1054
+ <code>&lt;div class="animate_swing"&gt;&lt;/div&gt;</code>
1055
+ </div>
1056
+ </div>
1057
+ <div class="demo-card-fixed">
1058
+ <div class="demo-card-fixed__preview">
1059
+ <div class="demo-box animate_swing_slow"></div>
1060
+ </div>
1061
+ <div class="demo-card-fixed__info">
1062
+ <h4 class="demo-card-fixed__title">swing_slow</h4>
1063
+ </div>
1064
+ <div class="demo-card-fixed__code">
1065
+ <code>&lt;div class="animate_swing_slow"&gt;&lt;/div&gt;</code>
1066
+ </div>
1067
+ </div>
1068
+ <div class="demo-card-fixed">
1069
+ <div class="demo-card-fixed__preview">
1070
+ <div class="demo-box animate_swing_fast"></div>
1071
+ </div>
1072
+ <div class="demo-card-fixed__info">
1073
+ <h4 class="demo-card-fixed__title">swing_fast</h4>
1074
+ </div>
1075
+ <div class="demo-card-fixed__code">
1076
+ <code>&lt;div class="animate_swing_fast"&gt;&lt;/div&gt;</code>
1077
+ </div>
1078
+ </div>
1079
+ <div class="demo-card-fixed">
1080
+ <div class="demo-card-fixed__preview">
1081
+ <div class="demo-box animate_swing_fade"></div>
1082
+ </div>
1083
+ <div class="demo-card-fixed__info">
1084
+ <h4 class="demo-card-fixed__title">swing_fade</h4>
1085
+ </div>
1086
+ <div class="demo-card-fixed__code">
1087
+ <code>&lt;div class="animate_swing_fade"&gt;&lt;/div&gt;</code>
1088
+ </div>
1089
+ </div>
1090
+ <div class="demo-card-fixed">
1091
+ <div class="demo-card-fixed__preview">
1092
+ <div class="demo-box animate_twist"></div>
1093
+ </div>
1094
+ <div class="demo-card-fixed__info">
1095
+ <h4 class="demo-card-fixed__title">twist</h4>
1096
+ </div>
1097
+ <div class="demo-card-fixed__code">
1098
+ <code>&lt;div class="animate_twist"&gt;&lt;/div&gt;</code>
1099
+ </div>
1100
+ </div>
1101
+ <div class="demo-card-fixed">
1102
+ <div class="demo-card-fixed__preview">
1103
+ <div class="demo-box animate_twist_slow"></div>
1104
+ </div>
1105
+ <div class="demo-card-fixed__info">
1106
+ <h4 class="demo-card-fixed__title">twist_slow</h4>
1107
+ </div>
1108
+ <div class="demo-card-fixed__code">
1109
+ <code>&lt;div class="animate_twist_slow"&gt;&lt;/div&gt;</code>
1110
+ </div>
1111
+ </div>
1112
+ <div class="demo-card-fixed">
1113
+ <div class="demo-card-fixed__preview">
1114
+ <div class="demo-box animate_twist_fast"></div>
1115
+ </div>
1116
+ <div class="demo-card-fixed__info">
1117
+ <h4 class="demo-card-fixed__title">twist_fast</h4>
1118
+ </div>
1119
+ <div class="demo-card-fixed__code">
1120
+ <code>&lt;div class="animate_twist_fast"&gt;&lt;/div&gt;</code>
1121
+ </div>
1122
+ </div>
1123
+ <div class="demo-card-fixed">
1124
+ <div class="demo-card-fixed__preview">
1125
+ <div class="demo-box animate_twist_color"></div>
1126
+ </div>
1127
+ <div class="demo-card-fixed__info">
1128
+ <h4 class="demo-card-fixed__title">twist_color</h4>
1129
+ </div>
1130
+ <div class="demo-card-fixed__code">
1131
+ <code>&lt;div class="animate_twist_color"&gt;&lt;/div&gt;</code>
1132
+ </div>
1133
+ </div>
1134
+ <div class="demo-card-fixed">
1135
+ <div class="demo-card-fixed__preview">
1136
+ <div class="demo-box animate_nod"></div>
1137
+ </div>
1138
+ <div class="demo-card-fixed__info">
1139
+ <h4 class="demo-card-fixed__title">nod</h4>
1140
+ </div>
1141
+ <div class="demo-card-fixed__code">
1142
+ <code>&lt;div class="animate_nod"&gt;&lt;/div&gt;</code>
1143
+ </div>
1144
+ </div>
1145
+ <div class="demo-card-fixed">
1146
+ <div class="demo-card-fixed__preview">
1147
+ <div class="demo-box animate_nod_slow"></div>
1148
+ </div>
1149
+ <div class="demo-card-fixed__info">
1150
+ <h4 class="demo-card-fixed__title">nod_slow</h4>
1151
+ </div>
1152
+ <div class="demo-card-fixed__code">
1153
+ <code>&lt;div class="animate_nod_slow"&gt;&lt;/div&gt;</code>
1154
+ </div>
1155
+ </div>
1156
+ <div class="demo-card-fixed">
1157
+ <div class="demo-card-fixed__preview">
1158
+ <div class="demo-box animate_nod_continuous"></div>
1159
+ </div>
1160
+ <div class="demo-card-fixed__info">
1161
+ <h4 class="demo-card-fixed__title">nod_continuous</h4>
1162
+ </div>
1163
+ <div class="demo-card-fixed__code">
1164
+ <code>&lt;div class="animate_nod_continuous"&gt;&lt;/div&gt;</code>
1165
+ </div>
1166
+ </div>
1167
+ <div class="demo-card-fixed">
1168
+ <div class="demo-card-fixed__preview">
1169
+ <div class="demo-box animate_nod_bounce"></div>
1170
+ </div>
1171
+ <div class="demo-card-fixed__info">
1172
+ <h4 class="demo-card-fixed__title">nod_bounce</h4>
1173
+ </div>
1174
+ <div class="demo-card-fixed__code">
1175
+ <code>&lt;div class="animate_nod_bounce"&gt;&lt;/div&gt;</code>
1176
+ </div>
1177
+ </div>
1178
+ <div class="demo-card-fixed">
1179
+ <div class="demo-card-fixed__preview">
1180
+ <div class="demo-box animate_wave"></div>
1181
+ </div>
1182
+ <div class="demo-card-fixed__info">
1183
+ <h4 class="demo-card-fixed__title">wave</h4>
1184
+ </div>
1185
+ <div class="demo-card-fixed__code">
1186
+ <code>&lt;div class="animate_wave"&gt;&lt;/div&gt;</code>
1187
+ </div>
1188
+ </div>
1189
+ <div class="demo-card-fixed">
1190
+ <div class="demo-card-fixed__preview">
1191
+ <div class="demo-box animate_wave_slow"></div>
1192
+ </div>
1193
+ <div class="demo-card-fixed__info">
1194
+ <h4 class="demo-card-fixed__title">wave_slow</h4>
1195
+ </div>
1196
+ <div class="demo-card-fixed__code">
1197
+ <code>&lt;div class="animate_wave_slow"&gt;&lt;/div&gt;</code>
1198
+ </div>
1199
+ </div>
1200
+ <div class="demo-card-fixed">
1201
+ <div class="demo-card-fixed__preview">
1202
+ <div class="demo-box animate_wave_fast"></div>
1203
+ </div>
1204
+ <div class="demo-card-fixed__info">
1205
+ <h4 class="demo-card-fixed__title">wave_fast</h4>
1206
+ </div>
1207
+ <div class="demo-card-fixed__code">
1208
+ <code>&lt;div class="animate_wave_fast"&gt;&lt;/div&gt;</code>
1209
+ </div>
1210
+ </div>
1211
+ <div class="demo-card-fixed">
1212
+ <div class="demo-card-fixed__preview">
1213
+ <div class="demo-box animate_wave_fade"></div>
1214
+ </div>
1215
+ <div class="demo-card-fixed__info">
1216
+ <h4 class="demo-card-fixed__title">wave_fade</h4>
1217
+ </div>
1218
+ <div class="demo-card-fixed__code">
1219
+ <code>&lt;div class="animate_wave_fade"&gt;&lt;/div&gt;</code>
1220
+ </div>
1221
+ </div>
1222
+ <div class="demo-card-fixed">
1223
+ <div class="demo-card-fixed__preview">
1224
+ <div class="demo-box animate_glow"></div>
1225
+ </div>
1226
+ <div class="demo-card-fixed__info">
1227
+ <h4 class="demo-card-fixed__title">glow</h4>
1228
+ </div>
1229
+ <div class="demo-card-fixed__code">
1230
+ <code>&lt;div class="animate_glow"&gt;&lt;/div&gt;</code>
1231
+ </div>
1232
+ </div>
1233
+ <div class="demo-card-fixed">
1234
+ <div class="demo-card-fixed__preview">
1235
+ <div class="demo-box animate_glow_soft"></div>
1236
+ </div>
1237
+ <div class="demo-card-fixed__info">
1238
+ <h4 class="demo-card-fixed__title">glow_soft</h4>
1239
+ </div>
1240
+ <div class="demo-card-fixed__code">
1241
+ <code>&lt;div class="animate_glow_soft"&gt;&lt;/div&gt;</code>
1242
+ </div>
1243
+ </div>
1244
+ <div class="demo-card-fixed">
1245
+ <div class="demo-card-fixed__preview">
1246
+ <div class="demo-box animate_glow_pulse"></div>
1247
+ </div>
1248
+ <div class="demo-card-fixed__info">
1249
+ <h4 class="demo-card-fixed__title">glow_pulse</h4>
1250
+ </div>
1251
+ <div class="demo-card-fixed__code">
1252
+ <code>&lt;div class="animate_glow_pulse"&gt;&lt;/div&gt;</code>
1253
+ </div>
1254
+ </div>
1255
+ <div class="demo-card-fixed">
1256
+ <div class="demo-card-fixed__preview">
1257
+ <div class="demo-box animate_glow_multicolor"></div>
1258
+ </div>
1259
+ <div class="demo-card-fixed__info">
1260
+ <h4 class="demo-card-fixed__title">glow_multicolor</h4>
1261
+ </div>
1262
+ <div class="demo-card-fixed__code">
1263
+ <code>&lt;div class="animate_glow_multicolor"&gt;&lt;/div&gt;</code>
1264
+ </div>
1265
+ </div>
1266
+ <div class="demo-card-fixed">
1267
+ <div class="demo-card-fixed__preview">
1268
+ <div class="demo-box animate_ripple"></div>
1269
+ </div>
1270
+ <div class="demo-card-fixed__info">
1271
+ <h4 class="demo-card-fixed__title">ripple</h4>
1272
+ </div>
1273
+ <div class="demo-card-fixed__code">
1274
+ <code>&lt;div class="animate_ripple"&gt;&lt;/div&gt;</code>
1275
+ </div>
1276
+ </div>
1277
+ <div class="demo-card-fixed">
1278
+ <div class="demo-card-fixed__preview">
1279
+ <div class="demo-box animate_ripple_slow"></div>
1280
+ </div>
1281
+ <div class="demo-card-fixed__info">
1282
+ <h4 class="demo-card-fixed__title">ripple_slow</h4>
1283
+ </div>
1284
+ <div class="demo-card-fixed__code">
1285
+ <code>&lt;div class="animate_ripple_slow"&gt;&lt;/div&gt;</code>
1286
+ </div>
1287
+ </div>
1288
+ <div class="demo-card-fixed">
1289
+ <div class="demo-card-fixed__preview">
1290
+ <div class="demo-box animate_ripple_multi"></div>
1291
+ </div>
1292
+ <div class="demo-card-fixed__info">
1293
+ <h4 class="demo-card-fixed__title">ripple_multi</h4>
1294
+ </div>
1295
+ <div class="demo-card-fixed__code">
1296
+ <code>&lt;div class="animate_ripple_multi"&gt;&lt;/div&gt;</code>
1297
+ </div>
1298
+ </div>
1299
+ <div class="demo-card-fixed">
1300
+ <div class="demo-card-fixed__preview">
1301
+ <div class="demo-box animate_ripple_color"></div>
1302
+ </div>
1303
+ <div class="demo-card-fixed__info">
1304
+ <h4 class="demo-card-fixed__title">ripple_color</h4>
1305
+ </div>
1306
+ <div class="demo-card-fixed__code">
1307
+ <code>&lt;div class="animate_ripple_color"&gt;&lt;/div&gt;</code>
1308
+ </div>
1309
+ </div>
1310
+ </div>
1311
+
1312
+ </section>
1313
+ {% endblock content %}