diff --git a/package.json b/package.json
index 1164f75..bc16c2e 100644
--- a/package.json
+++ b/package.json
@@ -22,13 +22,14 @@
     "@types/matter-js": "^0.19.8",
     "@vueuse/motion": "^3.0.3",
     "@wdns/vue-code-block": "^2.3.5",
+    "gl-matrix": "^3.4.3",
     "gsap": "^3.13.0",
     "lenis": "^1.3.8",
+    "lucide-vue-next": "^0.548.0",
     "mathjs": "^14.6.0",
     "matter-js": "^0.20.0",
     "motion-v": "^1.5.0",
     "ogl": "^1.0.11",
-    "gl-matrix": "^3.4.3",
     "postprocessing": "^6.37.6",
     "primeicons": "^7.0.0",
     "primevue": "^4.3.6",
@@ -60,4 +61,4 @@
     "vite-plugin-vue-devtools": "^7.7.7",
     "vue-tsc": "^2.2.10"
   }
-}
\ No newline at end of file
+}
diff --git a/public/assets/videos/animatedcontent.mp4 b/public/assets/videos/animatedcontent.mp4
new file mode 100644
index 0000000..88952d6
Binary files /dev/null and b/public/assets/videos/animatedcontent.mp4 differ
diff --git a/public/assets/videos/animatedcontent.webm b/public/assets/videos/animatedcontent.webm
new file mode 100644
index 0000000..b74a0a7
Binary files /dev/null and b/public/assets/videos/animatedcontent.webm differ
diff --git a/public/assets/videos/animatedlist.mp4 b/public/assets/videos/animatedlist.mp4
new file mode 100644
index 0000000..f2286ab
Binary files /dev/null and b/public/assets/videos/animatedlist.mp4 differ
diff --git a/public/assets/videos/animatedlist.webm b/public/assets/videos/animatedlist.webm
new file mode 100644
index 0000000..39d5a05
Binary files /dev/null and b/public/assets/videos/animatedlist.webm differ
diff --git a/public/assets/videos/asciitext.mp4 b/public/assets/videos/asciitext.mp4
new file mode 100644
index 0000000..519c31b
Binary files /dev/null and b/public/assets/videos/asciitext.mp4 differ
diff --git a/public/assets/videos/asciitext.webm b/public/assets/videos/asciitext.webm
new file mode 100644
index 0000000..7e4e1ac
Binary files /dev/null and b/public/assets/videos/asciitext.webm differ
diff --git a/public/assets/videos/aurora.mp4 b/public/assets/videos/aurora.mp4
new file mode 100644
index 0000000..13b92bb
Binary files /dev/null and b/public/assets/videos/aurora.mp4 differ
diff --git a/public/assets/videos/aurora.webm b/public/assets/videos/aurora.webm
new file mode 100644
index 0000000..60fd352
Binary files /dev/null and b/public/assets/videos/aurora.webm differ
diff --git a/public/assets/videos/balatro.mp4 b/public/assets/videos/balatro.mp4
new file mode 100644
index 0000000..7d40497
Binary files /dev/null and b/public/assets/videos/balatro.mp4 differ
diff --git a/public/assets/videos/balatro.webm b/public/assets/videos/balatro.webm
new file mode 100644
index 0000000..1be0022
Binary files /dev/null and b/public/assets/videos/balatro.webm differ
diff --git a/public/assets/videos/ballpit.mp4 b/public/assets/videos/ballpit.mp4
new file mode 100644
index 0000000..39f9e1e
Binary files /dev/null and b/public/assets/videos/ballpit.mp4 differ
diff --git a/public/assets/videos/ballpit.webm b/public/assets/videos/ballpit.webm
new file mode 100644
index 0000000..c6946f3
Binary files /dev/null and b/public/assets/videos/ballpit.webm differ
diff --git a/public/assets/videos/beams.mp4 b/public/assets/videos/beams.mp4
new file mode 100644
index 0000000..b42f0d2
Binary files /dev/null and b/public/assets/videos/beams.mp4 differ
diff --git a/public/assets/videos/beams.webm b/public/assets/videos/beams.webm
new file mode 100644
index 0000000..0174237
Binary files /dev/null and b/public/assets/videos/beams.webm differ
diff --git a/public/assets/videos/blobcursor.mp4 b/public/assets/videos/blobcursor.mp4
new file mode 100644
index 0000000..156d016
Binary files /dev/null and b/public/assets/videos/blobcursor.mp4 differ
diff --git a/public/assets/videos/blobcursor.webm b/public/assets/videos/blobcursor.webm
new file mode 100644
index 0000000..21ff0f1
Binary files /dev/null and b/public/assets/videos/blobcursor.webm differ
diff --git a/public/assets/videos/blurtext.mp4 b/public/assets/videos/blurtext.mp4
new file mode 100644
index 0000000..c26a8db
Binary files /dev/null and b/public/assets/videos/blurtext.mp4 differ
diff --git a/public/assets/videos/blurtext.webm b/public/assets/videos/blurtext.webm
new file mode 100644
index 0000000..350dfd6
Binary files /dev/null and b/public/assets/videos/blurtext.webm differ
diff --git a/public/assets/videos/bouncecards.mp4 b/public/assets/videos/bouncecards.mp4
new file mode 100644
index 0000000..b61b1ab
Binary files /dev/null and b/public/assets/videos/bouncecards.mp4 differ
diff --git a/public/assets/videos/bouncecards.webm b/public/assets/videos/bouncecards.webm
new file mode 100644
index 0000000..ff477a3
Binary files /dev/null and b/public/assets/videos/bouncecards.webm differ
diff --git a/public/assets/videos/bubblemenu.mp4 b/public/assets/videos/bubblemenu.mp4
new file mode 100644
index 0000000..2db9cff
Binary files /dev/null and b/public/assets/videos/bubblemenu.mp4 differ
diff --git a/public/assets/videos/bubblemenu.webm b/public/assets/videos/bubblemenu.webm
new file mode 100644
index 0000000..5421df9
Binary files /dev/null and b/public/assets/videos/bubblemenu.webm differ
diff --git a/public/assets/videos/cardnav.mp4 b/public/assets/videos/cardnav.mp4
new file mode 100644
index 0000000..b47c4ae
Binary files /dev/null and b/public/assets/videos/cardnav.mp4 differ
diff --git a/public/assets/videos/cardnav.webm b/public/assets/videos/cardnav.webm
new file mode 100644
index 0000000..58f92ed
Binary files /dev/null and b/public/assets/videos/cardnav.webm differ
diff --git a/public/assets/videos/cardswap.mp4 b/public/assets/videos/cardswap.mp4
new file mode 100644
index 0000000..40e5161
Binary files /dev/null and b/public/assets/videos/cardswap.mp4 differ
diff --git a/public/assets/videos/cardswap.webm b/public/assets/videos/cardswap.webm
new file mode 100644
index 0000000..a4679fa
Binary files /dev/null and b/public/assets/videos/cardswap.webm differ
diff --git a/public/assets/videos/carousel.mp4 b/public/assets/videos/carousel.mp4
new file mode 100644
index 0000000..ee15405
Binary files /dev/null and b/public/assets/videos/carousel.mp4 differ
diff --git a/public/assets/videos/carousel.webm b/public/assets/videos/carousel.webm
new file mode 100644
index 0000000..3fbe83f
Binary files /dev/null and b/public/assets/videos/carousel.webm differ
diff --git a/public/assets/videos/chromagrid.mp4 b/public/assets/videos/chromagrid.mp4
new file mode 100644
index 0000000..352a61e
Binary files /dev/null and b/public/assets/videos/chromagrid.mp4 differ
diff --git a/public/assets/videos/chromagrid.webm b/public/assets/videos/chromagrid.webm
new file mode 100644
index 0000000..e3a3a35
Binary files /dev/null and b/public/assets/videos/chromagrid.webm differ
diff --git a/public/assets/videos/circulargallery.mp4 b/public/assets/videos/circulargallery.mp4
new file mode 100644
index 0000000..85254af
Binary files /dev/null and b/public/assets/videos/circulargallery.mp4 differ
diff --git a/public/assets/videos/circulargallery.webm b/public/assets/videos/circulargallery.webm
new file mode 100644
index 0000000..5c9f193
Binary files /dev/null and b/public/assets/videos/circulargallery.webm differ
diff --git a/public/assets/videos/circulartext.mp4 b/public/assets/videos/circulartext.mp4
new file mode 100644
index 0000000..5409353
Binary files /dev/null and b/public/assets/videos/circulartext.mp4 differ
diff --git a/public/assets/videos/circulartext.webm b/public/assets/videos/circulartext.webm
new file mode 100644
index 0000000..d5de4c1
Binary files /dev/null and b/public/assets/videos/circulartext.webm differ
diff --git a/public/assets/videos/clickspark.mp4 b/public/assets/videos/clickspark.mp4
new file mode 100644
index 0000000..e75f2f8
Binary files /dev/null and b/public/assets/videos/clickspark.mp4 differ
diff --git a/public/assets/videos/clickspark.webm b/public/assets/videos/clickspark.webm
new file mode 100644
index 0000000..5395331
Binary files /dev/null and b/public/assets/videos/clickspark.webm differ
diff --git a/public/assets/videos/colorbends.mp4 b/public/assets/videos/colorbends.mp4
new file mode 100644
index 0000000..0f78333
Binary files /dev/null and b/public/assets/videos/colorbends.mp4 differ
diff --git a/public/assets/videos/colorbends.webm b/public/assets/videos/colorbends.webm
new file mode 100644
index 0000000..72a07ad
Binary files /dev/null and b/public/assets/videos/colorbends.webm differ
diff --git a/public/assets/videos/counter.mp4 b/public/assets/videos/counter.mp4
new file mode 100644
index 0000000..10f6718
Binary files /dev/null and b/public/assets/videos/counter.mp4 differ
diff --git a/public/assets/videos/counter.webm b/public/assets/videos/counter.webm
new file mode 100644
index 0000000..ec8fc68
Binary files /dev/null and b/public/assets/videos/counter.webm differ
diff --git a/public/assets/videos/countup.mp4 b/public/assets/videos/countup.mp4
new file mode 100644
index 0000000..b95d65d
Binary files /dev/null and b/public/assets/videos/countup.mp4 differ
diff --git a/public/assets/videos/countup.webm b/public/assets/videos/countup.webm
new file mode 100644
index 0000000..8b1310e
Binary files /dev/null and b/public/assets/videos/countup.webm differ
diff --git a/public/assets/videos/crosshair.mp4 b/public/assets/videos/crosshair.mp4
new file mode 100644
index 0000000..73b1405
Binary files /dev/null and b/public/assets/videos/crosshair.mp4 differ
diff --git a/public/assets/videos/crosshair.webm b/public/assets/videos/crosshair.webm
new file mode 100644
index 0000000..ab6ec52
Binary files /dev/null and b/public/assets/videos/crosshair.webm differ
diff --git a/public/assets/videos/cubes.mp4 b/public/assets/videos/cubes.mp4
new file mode 100644
index 0000000..f006a43
Binary files /dev/null and b/public/assets/videos/cubes.mp4 differ
diff --git a/public/assets/videos/cubes.webm b/public/assets/videos/cubes.webm
new file mode 100644
index 0000000..c50bbd1
Binary files /dev/null and b/public/assets/videos/cubes.webm differ
diff --git a/public/assets/videos/curvedloop.mp4 b/public/assets/videos/curvedloop.mp4
new file mode 100644
index 0000000..4d45ee1
Binary files /dev/null and b/public/assets/videos/curvedloop.mp4 differ
diff --git a/public/assets/videos/curvedloop.webm b/public/assets/videos/curvedloop.webm
new file mode 100644
index 0000000..2694120
Binary files /dev/null and b/public/assets/videos/curvedloop.webm differ
diff --git a/public/assets/videos/darkveil.mp4 b/public/assets/videos/darkveil.mp4
new file mode 100644
index 0000000..c3b630d
Binary files /dev/null and b/public/assets/videos/darkveil.mp4 differ
diff --git a/public/assets/videos/darkveil.webm b/public/assets/videos/darkveil.webm
new file mode 100644
index 0000000..81ec87e
Binary files /dev/null and b/public/assets/videos/darkveil.webm differ
diff --git a/public/assets/videos/decaycard.mp4 b/public/assets/videos/decaycard.mp4
new file mode 100644
index 0000000..488c114
Binary files /dev/null and b/public/assets/videos/decaycard.mp4 differ
diff --git a/public/assets/videos/decaycard.webm b/public/assets/videos/decaycard.webm
new file mode 100644
index 0000000..974f084
Binary files /dev/null and b/public/assets/videos/decaycard.webm differ
diff --git a/public/assets/videos/decryptedtext.mp4 b/public/assets/videos/decryptedtext.mp4
new file mode 100644
index 0000000..9efe032
Binary files /dev/null and b/public/assets/videos/decryptedtext.mp4 differ
diff --git a/public/assets/videos/decryptedtext.webm b/public/assets/videos/decryptedtext.webm
new file mode 100644
index 0000000..bc2933f
Binary files /dev/null and b/public/assets/videos/decryptedtext.webm differ
diff --git a/public/assets/videos/dither.mp4 b/public/assets/videos/dither.mp4
new file mode 100644
index 0000000..eb486ca
Binary files /dev/null and b/public/assets/videos/dither.mp4 differ
diff --git a/public/assets/videos/dither.webm b/public/assets/videos/dither.webm
new file mode 100644
index 0000000..2f21592
Binary files /dev/null and b/public/assets/videos/dither.webm differ
diff --git a/public/assets/videos/dock.mp4 b/public/assets/videos/dock.mp4
new file mode 100644
index 0000000..2061914
Binary files /dev/null and b/public/assets/videos/dock.mp4 differ
diff --git a/public/assets/videos/dock.webm b/public/assets/videos/dock.webm
new file mode 100644
index 0000000..dc19eac
Binary files /dev/null and b/public/assets/videos/dock.webm differ
diff --git a/public/assets/videos/domegallery.mp4 b/public/assets/videos/domegallery.mp4
new file mode 100644
index 0000000..b9d7ba0
Binary files /dev/null and b/public/assets/videos/domegallery.mp4 differ
diff --git a/public/assets/videos/domegallery.webm b/public/assets/videos/domegallery.webm
new file mode 100644
index 0000000..df0f51b
Binary files /dev/null and b/public/assets/videos/domegallery.webm differ
diff --git a/public/assets/videos/dotgrid.mp4 b/public/assets/videos/dotgrid.mp4
new file mode 100644
index 0000000..1e220e5
Binary files /dev/null and b/public/assets/videos/dotgrid.mp4 differ
diff --git a/public/assets/videos/dotgrid.webm b/public/assets/videos/dotgrid.webm
new file mode 100644
index 0000000..0757b3c
Binary files /dev/null and b/public/assets/videos/dotgrid.webm differ
diff --git a/public/assets/videos/elasticslider.mp4 b/public/assets/videos/elasticslider.mp4
new file mode 100644
index 0000000..151452f
Binary files /dev/null and b/public/assets/videos/elasticslider.mp4 differ
diff --git a/public/assets/videos/elasticslider.webm b/public/assets/videos/elasticslider.webm
new file mode 100644
index 0000000..50e985a
Binary files /dev/null and b/public/assets/videos/elasticslider.webm differ
diff --git a/public/assets/videos/electricborder.mp4 b/public/assets/videos/electricborder.mp4
new file mode 100644
index 0000000..691c0d6
Binary files /dev/null and b/public/assets/videos/electricborder.mp4 differ
diff --git a/public/assets/videos/electricborder.webm b/public/assets/videos/electricborder.webm
new file mode 100644
index 0000000..34abaf3
Binary files /dev/null and b/public/assets/videos/electricborder.webm differ
diff --git a/public/assets/videos/fadecontent.mp4 b/public/assets/videos/fadecontent.mp4
new file mode 100644
index 0000000..c9afb85
Binary files /dev/null and b/public/assets/videos/fadecontent.mp4 differ
diff --git a/public/assets/videos/fadecontent.webm b/public/assets/videos/fadecontent.webm
new file mode 100644
index 0000000..22001da
Binary files /dev/null and b/public/assets/videos/fadecontent.webm differ
diff --git a/public/assets/videos/fallingtext.mp4 b/public/assets/videos/fallingtext.mp4
new file mode 100644
index 0000000..f8861bb
Binary files /dev/null and b/public/assets/videos/fallingtext.mp4 differ
diff --git a/public/assets/videos/fallingtext.webm b/public/assets/videos/fallingtext.webm
new file mode 100644
index 0000000..ad5125f
Binary files /dev/null and b/public/assets/videos/fallingtext.webm differ
diff --git a/public/assets/videos/faultyterminal.mp4 b/public/assets/videos/faultyterminal.mp4
new file mode 100644
index 0000000..41e26cd
Binary files /dev/null and b/public/assets/videos/faultyterminal.mp4 differ
diff --git a/public/assets/videos/faultyterminal.webm b/public/assets/videos/faultyterminal.webm
new file mode 100644
index 0000000..18532aa
Binary files /dev/null and b/public/assets/videos/faultyterminal.webm differ
diff --git a/public/assets/videos/flowingmenu.mp4 b/public/assets/videos/flowingmenu.mp4
new file mode 100644
index 0000000..9854e7d
Binary files /dev/null and b/public/assets/videos/flowingmenu.mp4 differ
diff --git a/public/assets/videos/flowingmenu.webm b/public/assets/videos/flowingmenu.webm
new file mode 100644
index 0000000..6270574
Binary files /dev/null and b/public/assets/videos/flowingmenu.webm differ
diff --git a/public/assets/videos/flyingposters.mp4 b/public/assets/videos/flyingposters.mp4
new file mode 100644
index 0000000..b8337a4
Binary files /dev/null and b/public/assets/videos/flyingposters.mp4 differ
diff --git a/public/assets/videos/flyingposters.webm b/public/assets/videos/flyingposters.webm
new file mode 100644
index 0000000..c62e5df
Binary files /dev/null and b/public/assets/videos/flyingposters.webm differ
diff --git a/public/assets/videos/folder.mp4 b/public/assets/videos/folder.mp4
new file mode 100644
index 0000000..e56a884
Binary files /dev/null and b/public/assets/videos/folder.mp4 differ
diff --git a/public/assets/videos/folder.webm b/public/assets/videos/folder.webm
new file mode 100644
index 0000000..9de7f9c
Binary files /dev/null and b/public/assets/videos/folder.webm differ
diff --git a/public/assets/videos/fuzzytext.mp4 b/public/assets/videos/fuzzytext.mp4
new file mode 100644
index 0000000..32c6a3b
Binary files /dev/null and b/public/assets/videos/fuzzytext.mp4 differ
diff --git a/public/assets/videos/fuzzytext.webm b/public/assets/videos/fuzzytext.webm
new file mode 100644
index 0000000..a3f0506
Binary files /dev/null and b/public/assets/videos/fuzzytext.webm differ
diff --git a/public/assets/videos/galaxy.mp4 b/public/assets/videos/galaxy.mp4
new file mode 100644
index 0000000..68163e0
Binary files /dev/null and b/public/assets/videos/galaxy.mp4 differ
diff --git a/public/assets/videos/galaxy.webm b/public/assets/videos/galaxy.webm
new file mode 100644
index 0000000..c67827b
Binary files /dev/null and b/public/assets/videos/galaxy.webm differ
diff --git a/public/assets/videos/ghostcursor.mp4 b/public/assets/videos/ghostcursor.mp4
new file mode 100644
index 0000000..4ecb54e
Binary files /dev/null and b/public/assets/videos/ghostcursor.mp4 differ
diff --git a/public/assets/videos/ghostcursor.webm b/public/assets/videos/ghostcursor.webm
new file mode 100644
index 0000000..94e7346
Binary files /dev/null and b/public/assets/videos/ghostcursor.webm differ
diff --git a/public/assets/videos/glarehover.mp4 b/public/assets/videos/glarehover.mp4
new file mode 100644
index 0000000..382252e
Binary files /dev/null and b/public/assets/videos/glarehover.mp4 differ
diff --git a/public/assets/videos/glarehover.webm b/public/assets/videos/glarehover.webm
new file mode 100644
index 0000000..010fbab
Binary files /dev/null and b/public/assets/videos/glarehover.webm differ
diff --git a/public/assets/videos/glassicons.mp4 b/public/assets/videos/glassicons.mp4
new file mode 100644
index 0000000..041aa08
Binary files /dev/null and b/public/assets/videos/glassicons.mp4 differ
diff --git a/public/assets/videos/glassicons.webm b/public/assets/videos/glassicons.webm
new file mode 100644
index 0000000..cb02442
Binary files /dev/null and b/public/assets/videos/glassicons.webm differ
diff --git a/public/assets/videos/glasssurface.mp4 b/public/assets/videos/glasssurface.mp4
new file mode 100644
index 0000000..794d0b8
Binary files /dev/null and b/public/assets/videos/glasssurface.mp4 differ
diff --git a/public/assets/videos/glasssurface.webm b/public/assets/videos/glasssurface.webm
new file mode 100644
index 0000000..de66568
Binary files /dev/null and b/public/assets/videos/glasssurface.webm differ
diff --git a/public/assets/videos/glitchtext.mp4 b/public/assets/videos/glitchtext.mp4
new file mode 100644
index 0000000..00b210c
Binary files /dev/null and b/public/assets/videos/glitchtext.mp4 differ
diff --git a/public/assets/videos/glitchtext.webm b/public/assets/videos/glitchtext.webm
new file mode 100644
index 0000000..17e59fc
Binary files /dev/null and b/public/assets/videos/glitchtext.webm differ
diff --git a/public/assets/videos/gooeynav.mp4 b/public/assets/videos/gooeynav.mp4
new file mode 100644
index 0000000..0cb7296
Binary files /dev/null and b/public/assets/videos/gooeynav.mp4 differ
diff --git a/public/assets/videos/gooeynav.webm b/public/assets/videos/gooeynav.webm
new file mode 100644
index 0000000..6809d0c
Binary files /dev/null and b/public/assets/videos/gooeynav.webm differ
diff --git a/public/assets/videos/gradientblinds.mp4 b/public/assets/videos/gradientblinds.mp4
new file mode 100644
index 0000000..9fa5210
Binary files /dev/null and b/public/assets/videos/gradientblinds.mp4 differ
diff --git a/public/assets/videos/gradientblinds.webm b/public/assets/videos/gradientblinds.webm
new file mode 100644
index 0000000..9518dc2
Binary files /dev/null and b/public/assets/videos/gradientblinds.webm differ
diff --git a/public/assets/videos/gradienttext.mp4 b/public/assets/videos/gradienttext.mp4
new file mode 100644
index 0000000..8fe596f
Binary files /dev/null and b/public/assets/videos/gradienttext.mp4 differ
diff --git a/public/assets/videos/gradienttext.webm b/public/assets/videos/gradienttext.webm
new file mode 100644
index 0000000..24a4b21
Binary files /dev/null and b/public/assets/videos/gradienttext.webm differ
diff --git a/public/assets/videos/gradualblur.mp4 b/public/assets/videos/gradualblur.mp4
new file mode 100644
index 0000000..1e21ccf
Binary files /dev/null and b/public/assets/videos/gradualblur.mp4 differ
diff --git a/public/assets/videos/gradualblur.webm b/public/assets/videos/gradualblur.webm
new file mode 100644
index 0000000..3422cac
Binary files /dev/null and b/public/assets/videos/gradualblur.webm differ
diff --git a/public/assets/videos/griddistortion.mp4 b/public/assets/videos/griddistortion.mp4
new file mode 100644
index 0000000..7891bc3
Binary files /dev/null and b/public/assets/videos/griddistortion.mp4 differ
diff --git a/public/assets/videos/griddistortion.webm b/public/assets/videos/griddistortion.webm
new file mode 100644
index 0000000..a9ba9f6
Binary files /dev/null and b/public/assets/videos/griddistortion.webm differ
diff --git a/public/assets/videos/gridmotion.mp4 b/public/assets/videos/gridmotion.mp4
new file mode 100644
index 0000000..b0236a5
Binary files /dev/null and b/public/assets/videos/gridmotion.mp4 differ
diff --git a/public/assets/videos/gridmotion.webm b/public/assets/videos/gridmotion.webm
new file mode 100644
index 0000000..66b99bd
Binary files /dev/null and b/public/assets/videos/gridmotion.webm differ
diff --git a/public/assets/videos/hyperspeed.mp4 b/public/assets/videos/hyperspeed.mp4
new file mode 100644
index 0000000..4c4822d
Binary files /dev/null and b/public/assets/videos/hyperspeed.mp4 differ
diff --git a/public/assets/videos/hyperspeed.webm b/public/assets/videos/hyperspeed.webm
new file mode 100644
index 0000000..d9fdeed
Binary files /dev/null and b/public/assets/videos/hyperspeed.webm differ
diff --git a/public/assets/videos/imagetrail.mp4 b/public/assets/videos/imagetrail.mp4
new file mode 100644
index 0000000..27d470b
Binary files /dev/null and b/public/assets/videos/imagetrail.mp4 differ
diff --git a/public/assets/videos/imagetrail.webm b/public/assets/videos/imagetrail.webm
new file mode 100644
index 0000000..bacb2b2
Binary files /dev/null and b/public/assets/videos/imagetrail.webm differ
diff --git a/public/assets/videos/infinitemenu.mp4 b/public/assets/videos/infinitemenu.mp4
new file mode 100644
index 0000000..bdc3503
Binary files /dev/null and b/public/assets/videos/infinitemenu.mp4 differ
diff --git a/public/assets/videos/infinitemenu.webm b/public/assets/videos/infinitemenu.webm
new file mode 100644
index 0000000..cae63a9
Binary files /dev/null and b/public/assets/videos/infinitemenu.webm differ
diff --git a/public/assets/videos/infinitescroll.mp4 b/public/assets/videos/infinitescroll.mp4
new file mode 100644
index 0000000..b77b49c
Binary files /dev/null and b/public/assets/videos/infinitescroll.mp4 differ
diff --git a/public/assets/videos/infinitescroll.webm b/public/assets/videos/infinitescroll.webm
new file mode 100644
index 0000000..e5f20a8
Binary files /dev/null and b/public/assets/videos/infinitescroll.webm differ
diff --git a/public/assets/videos/iridescence.mp4 b/public/assets/videos/iridescence.mp4
new file mode 100644
index 0000000..6f9771d
Binary files /dev/null and b/public/assets/videos/iridescence.mp4 differ
diff --git a/public/assets/videos/iridescence.webm b/public/assets/videos/iridescence.webm
new file mode 100644
index 0000000..38f0a3e
Binary files /dev/null and b/public/assets/videos/iridescence.webm differ
diff --git a/public/assets/videos/laserflow.mp4 b/public/assets/videos/laserflow.mp4
new file mode 100644
index 0000000..9c0b959
Binary files /dev/null and b/public/assets/videos/laserflow.mp4 differ
diff --git a/public/assets/videos/laserflow.webm b/public/assets/videos/laserflow.webm
new file mode 100644
index 0000000..5e6f6be
Binary files /dev/null and b/public/assets/videos/laserflow.webm differ
diff --git a/public/assets/videos/letterglitch.mp4 b/public/assets/videos/letterglitch.mp4
new file mode 100644
index 0000000..dcf9f8b
Binary files /dev/null and b/public/assets/videos/letterglitch.mp4 differ
diff --git a/public/assets/videos/letterglitch.webm b/public/assets/videos/letterglitch.webm
new file mode 100644
index 0000000..1996fbb
Binary files /dev/null and b/public/assets/videos/letterglitch.webm differ
diff --git a/public/assets/videos/lightning.mp4 b/public/assets/videos/lightning.mp4
new file mode 100644
index 0000000..be4bc95
Binary files /dev/null and b/public/assets/videos/lightning.mp4 differ
diff --git a/public/assets/videos/lightning.webm b/public/assets/videos/lightning.webm
new file mode 100644
index 0000000..ced0d08
Binary files /dev/null and b/public/assets/videos/lightning.webm differ
diff --git a/public/assets/videos/lightrays.mp4 b/public/assets/videos/lightrays.mp4
new file mode 100644
index 0000000..6da39db
Binary files /dev/null and b/public/assets/videos/lightrays.mp4 differ
diff --git a/public/assets/videos/lightrays.webm b/public/assets/videos/lightrays.webm
new file mode 100644
index 0000000..b556a7b
Binary files /dev/null and b/public/assets/videos/lightrays.webm differ
diff --git a/public/assets/videos/liquidchrome.mp4 b/public/assets/videos/liquidchrome.mp4
new file mode 100644
index 0000000..5de677c
Binary files /dev/null and b/public/assets/videos/liquidchrome.mp4 differ
diff --git a/public/assets/videos/liquidchrome.webm b/public/assets/videos/liquidchrome.webm
new file mode 100644
index 0000000..f810aa1
Binary files /dev/null and b/public/assets/videos/liquidchrome.webm differ
diff --git a/public/assets/videos/liquidether.mp4 b/public/assets/videos/liquidether.mp4
new file mode 100644
index 0000000..25b5da8
Binary files /dev/null and b/public/assets/videos/liquidether.mp4 differ
diff --git a/public/assets/videos/liquidether.webm b/public/assets/videos/liquidether.webm
new file mode 100644
index 0000000..d654676
Binary files /dev/null and b/public/assets/videos/liquidether.webm differ
diff --git a/public/assets/videos/logoloop.mp4 b/public/assets/videos/logoloop.mp4
new file mode 100644
index 0000000..b460d5e
Binary files /dev/null and b/public/assets/videos/logoloop.mp4 differ
diff --git a/public/assets/videos/logoloop.webm b/public/assets/videos/logoloop.webm
new file mode 100644
index 0000000..cc07da3
Binary files /dev/null and b/public/assets/videos/logoloop.webm differ
diff --git a/public/assets/videos/magicbento.mp4 b/public/assets/videos/magicbento.mp4
new file mode 100644
index 0000000..609dcb4
Binary files /dev/null and b/public/assets/videos/magicbento.mp4 differ
diff --git a/public/assets/videos/magicbento.webm b/public/assets/videos/magicbento.webm
new file mode 100644
index 0000000..77139cf
Binary files /dev/null and b/public/assets/videos/magicbento.webm differ
diff --git a/public/assets/videos/magnet.mp4 b/public/assets/videos/magnet.mp4
new file mode 100644
index 0000000..57cb707
Binary files /dev/null and b/public/assets/videos/magnet.mp4 differ
diff --git a/public/assets/videos/magnet.webm b/public/assets/videos/magnet.webm
new file mode 100644
index 0000000..535eefa
Binary files /dev/null and b/public/assets/videos/magnet.webm differ
diff --git a/public/assets/videos/magnetlines.mp4 b/public/assets/videos/magnetlines.mp4
new file mode 100644
index 0000000..102e7e1
Binary files /dev/null and b/public/assets/videos/magnetlines.mp4 differ
diff --git a/public/assets/videos/magnetlines.webm b/public/assets/videos/magnetlines.webm
new file mode 100644
index 0000000..38dad7a
Binary files /dev/null and b/public/assets/videos/magnetlines.webm differ
diff --git a/public/assets/videos/masonry.mp4 b/public/assets/videos/masonry.mp4
new file mode 100644
index 0000000..d6e0d4c
Binary files /dev/null and b/public/assets/videos/masonry.mp4 differ
diff --git a/public/assets/videos/masonry.webm b/public/assets/videos/masonry.webm
new file mode 100644
index 0000000..077028d
Binary files /dev/null and b/public/assets/videos/masonry.webm differ
diff --git a/public/assets/videos/metaballs.mp4 b/public/assets/videos/metaballs.mp4
new file mode 100644
index 0000000..c3ec25b
Binary files /dev/null and b/public/assets/videos/metaballs.mp4 differ
diff --git a/public/assets/videos/metaballs.webm b/public/assets/videos/metaballs.webm
new file mode 100644
index 0000000..0f6c33d
Binary files /dev/null and b/public/assets/videos/metaballs.webm differ
diff --git a/public/assets/videos/metallicpaint.mp4 b/public/assets/videos/metallicpaint.mp4
new file mode 100644
index 0000000..9db941f
Binary files /dev/null and b/public/assets/videos/metallicpaint.mp4 differ
diff --git a/public/assets/videos/metallicpaint.webm b/public/assets/videos/metallicpaint.webm
new file mode 100644
index 0000000..990644c
Binary files /dev/null and b/public/assets/videos/metallicpaint.webm differ
diff --git a/public/assets/videos/noise.mp4 b/public/assets/videos/noise.mp4
new file mode 100644
index 0000000..fb32a9e
Binary files /dev/null and b/public/assets/videos/noise.mp4 differ
diff --git a/public/assets/videos/noise.webm b/public/assets/videos/noise.webm
new file mode 100644
index 0000000..2a9ffb1
Binary files /dev/null and b/public/assets/videos/noise.webm differ
diff --git a/public/assets/videos/orb.mp4 b/public/assets/videos/orb.mp4
new file mode 100644
index 0000000..4aa7d6a
Binary files /dev/null and b/public/assets/videos/orb.mp4 differ
diff --git a/public/assets/videos/orb.webm b/public/assets/videos/orb.webm
new file mode 100644
index 0000000..75cfd80
Binary files /dev/null and b/public/assets/videos/orb.webm differ
diff --git a/public/assets/videos/particles.mp4 b/public/assets/videos/particles.mp4
new file mode 100644
index 0000000..5861272
Binary files /dev/null and b/public/assets/videos/particles.mp4 differ
diff --git a/public/assets/videos/particles.webm b/public/assets/videos/particles.webm
new file mode 100644
index 0000000..f87b8cd
Binary files /dev/null and b/public/assets/videos/particles.webm differ
diff --git a/public/assets/videos/pillnav.mp4 b/public/assets/videos/pillnav.mp4
new file mode 100644
index 0000000..eec4076
Binary files /dev/null and b/public/assets/videos/pillnav.mp4 differ
diff --git a/public/assets/videos/pillnav.webm b/public/assets/videos/pillnav.webm
new file mode 100644
index 0000000..0f6990a
Binary files /dev/null and b/public/assets/videos/pillnav.webm differ
diff --git a/public/assets/videos/pixelblast.mp4 b/public/assets/videos/pixelblast.mp4
new file mode 100644
index 0000000..77cbfc7
Binary files /dev/null and b/public/assets/videos/pixelblast.mp4 differ
diff --git a/public/assets/videos/pixelblast.webm b/public/assets/videos/pixelblast.webm
new file mode 100644
index 0000000..671a27c
Binary files /dev/null and b/public/assets/videos/pixelblast.webm differ
diff --git a/public/assets/videos/pixelcard.mp4 b/public/assets/videos/pixelcard.mp4
new file mode 100644
index 0000000..5d48e30
Binary files /dev/null and b/public/assets/videos/pixelcard.mp4 differ
diff --git a/public/assets/videos/pixelcard.webm b/public/assets/videos/pixelcard.webm
new file mode 100644
index 0000000..2fac133
Binary files /dev/null and b/public/assets/videos/pixelcard.webm differ
diff --git a/public/assets/videos/pixeltransition.mp4 b/public/assets/videos/pixeltransition.mp4
new file mode 100644
index 0000000..02ee7c2
Binary files /dev/null and b/public/assets/videos/pixeltransition.mp4 differ
diff --git a/public/assets/videos/pixeltransition.webm b/public/assets/videos/pixeltransition.webm
new file mode 100644
index 0000000..cb93356
Binary files /dev/null and b/public/assets/videos/pixeltransition.webm differ
diff --git a/public/assets/videos/plasma.mp4 b/public/assets/videos/plasma.mp4
new file mode 100644
index 0000000..221f5dc
Binary files /dev/null and b/public/assets/videos/plasma.mp4 differ
diff --git a/public/assets/videos/plasma.webm b/public/assets/videos/plasma.webm
new file mode 100644
index 0000000..19310d1
Binary files /dev/null and b/public/assets/videos/plasma.webm differ
diff --git a/public/assets/videos/prism.mp4 b/public/assets/videos/prism.mp4
new file mode 100644
index 0000000..d83a1aa
Binary files /dev/null and b/public/assets/videos/prism.mp4 differ
diff --git a/public/assets/videos/prism.webm b/public/assets/videos/prism.webm
new file mode 100644
index 0000000..6f0ee0d
Binary files /dev/null and b/public/assets/videos/prism.webm differ
diff --git a/public/assets/videos/prismaticburst.mp4 b/public/assets/videos/prismaticburst.mp4
new file mode 100644
index 0000000..2e77f17
Binary files /dev/null and b/public/assets/videos/prismaticburst.mp4 differ
diff --git a/public/assets/videos/prismaticburst.webm b/public/assets/videos/prismaticburst.webm
new file mode 100644
index 0000000..1350629
Binary files /dev/null and b/public/assets/videos/prismaticburst.webm differ
diff --git a/public/assets/videos/profilecard.mp4 b/public/assets/videos/profilecard.mp4
new file mode 100644
index 0000000..aec4fa7
Binary files /dev/null and b/public/assets/videos/profilecard.mp4 differ
diff --git a/public/assets/videos/profilecard.webm b/public/assets/videos/profilecard.webm
new file mode 100644
index 0000000..0ddda45
Binary files /dev/null and b/public/assets/videos/profilecard.webm differ
diff --git a/public/assets/videos/ribbons.mp4 b/public/assets/videos/ribbons.mp4
new file mode 100644
index 0000000..9f46a78
Binary files /dev/null and b/public/assets/videos/ribbons.mp4 differ
diff --git a/public/assets/videos/ribbons.webm b/public/assets/videos/ribbons.webm
new file mode 100644
index 0000000..bf1be06
Binary files /dev/null and b/public/assets/videos/ribbons.webm differ
diff --git a/public/assets/videos/ripplegrid.mp4 b/public/assets/videos/ripplegrid.mp4
new file mode 100644
index 0000000..ca36520
Binary files /dev/null and b/public/assets/videos/ripplegrid.mp4 differ
diff --git a/public/assets/videos/ripplegrid.webm b/public/assets/videos/ripplegrid.webm
new file mode 100644
index 0000000..a6c10f7
Binary files /dev/null and b/public/assets/videos/ripplegrid.webm differ
diff --git a/public/assets/videos/rotatingtext.mp4 b/public/assets/videos/rotatingtext.mp4
new file mode 100644
index 0000000..49d3ba1
Binary files /dev/null and b/public/assets/videos/rotatingtext.mp4 differ
diff --git a/public/assets/videos/rotatingtext.webm b/public/assets/videos/rotatingtext.webm
new file mode 100644
index 0000000..e46be25
Binary files /dev/null and b/public/assets/videos/rotatingtext.webm differ
diff --git a/public/assets/videos/scrambledtext.mp4 b/public/assets/videos/scrambledtext.mp4
new file mode 100644
index 0000000..ddb412b
Binary files /dev/null and b/public/assets/videos/scrambledtext.mp4 differ
diff --git a/public/assets/videos/scrambledtext.webm b/public/assets/videos/scrambledtext.webm
new file mode 100644
index 0000000..8e74bf4
Binary files /dev/null and b/public/assets/videos/scrambledtext.webm differ
diff --git a/public/assets/videos/scrollfloat.mp4 b/public/assets/videos/scrollfloat.mp4
new file mode 100644
index 0000000..21ce594
Binary files /dev/null and b/public/assets/videos/scrollfloat.mp4 differ
diff --git a/public/assets/videos/scrollfloat.webm b/public/assets/videos/scrollfloat.webm
new file mode 100644
index 0000000..b407f03
Binary files /dev/null and b/public/assets/videos/scrollfloat.webm differ
diff --git a/public/assets/videos/scrollreveal.mp4 b/public/assets/videos/scrollreveal.mp4
new file mode 100644
index 0000000..f748310
Binary files /dev/null and b/public/assets/videos/scrollreveal.mp4 differ
diff --git a/public/assets/videos/scrollreveal.webm b/public/assets/videos/scrollreveal.webm
new file mode 100644
index 0000000..042c57b
Binary files /dev/null and b/public/assets/videos/scrollreveal.webm differ
diff --git a/public/assets/videos/scrollstack.mp4 b/public/assets/videos/scrollstack.mp4
new file mode 100644
index 0000000..732738c
Binary files /dev/null and b/public/assets/videos/scrollstack.mp4 differ
diff --git a/public/assets/videos/scrollstack.webm b/public/assets/videos/scrollstack.webm
new file mode 100644
index 0000000..763d3bf
Binary files /dev/null and b/public/assets/videos/scrollstack.webm differ
diff --git a/public/assets/videos/scrollvelocity.mp4 b/public/assets/videos/scrollvelocity.mp4
new file mode 100644
index 0000000..009f35b
Binary files /dev/null and b/public/assets/videos/scrollvelocity.mp4 differ
diff --git a/public/assets/videos/scrollvelocity.webm b/public/assets/videos/scrollvelocity.webm
new file mode 100644
index 0000000..a0ca8f3
Binary files /dev/null and b/public/assets/videos/scrollvelocity.webm differ
diff --git a/public/assets/videos/shapeblur.mp4 b/public/assets/videos/shapeblur.mp4
new file mode 100644
index 0000000..8fccf81
Binary files /dev/null and b/public/assets/videos/shapeblur.mp4 differ
diff --git a/public/assets/videos/shapeblur.webm b/public/assets/videos/shapeblur.webm
new file mode 100644
index 0000000..223d572
Binary files /dev/null and b/public/assets/videos/shapeblur.webm differ
diff --git a/public/assets/videos/shinytext.mp4 b/public/assets/videos/shinytext.mp4
new file mode 100644
index 0000000..be94398
Binary files /dev/null and b/public/assets/videos/shinytext.mp4 differ
diff --git a/public/assets/videos/shinytext.webm b/public/assets/videos/shinytext.webm
new file mode 100644
index 0000000..abdb85e
Binary files /dev/null and b/public/assets/videos/shinytext.webm differ
diff --git a/public/assets/videos/silk.mp4 b/public/assets/videos/silk.mp4
new file mode 100644
index 0000000..32add2e
Binary files /dev/null and b/public/assets/videos/silk.mp4 differ
diff --git a/public/assets/videos/silk.webm b/public/assets/videos/silk.webm
new file mode 100644
index 0000000..fb6925b
Binary files /dev/null and b/public/assets/videos/silk.webm differ
diff --git a/public/assets/videos/splashcursor.mp4 b/public/assets/videos/splashcursor.mp4
new file mode 100644
index 0000000..8f36cb3
Binary files /dev/null and b/public/assets/videos/splashcursor.mp4 differ
diff --git a/public/assets/videos/splashcursor.webm b/public/assets/videos/splashcursor.webm
new file mode 100644
index 0000000..64a2884
Binary files /dev/null and b/public/assets/videos/splashcursor.webm differ
diff --git a/public/assets/videos/splittext.mp4 b/public/assets/videos/splittext.mp4
new file mode 100644
index 0000000..0723ace
Binary files /dev/null and b/public/assets/videos/splittext.mp4 differ
diff --git a/public/assets/videos/splittext.webm b/public/assets/videos/splittext.webm
new file mode 100644
index 0000000..df1397f
Binary files /dev/null and b/public/assets/videos/splittext.webm differ
diff --git a/public/assets/videos/spotlightcard.mp4 b/public/assets/videos/spotlightcard.mp4
new file mode 100644
index 0000000..5191ea5
Binary files /dev/null and b/public/assets/videos/spotlightcard.mp4 differ
diff --git a/public/assets/videos/spotlightcard.webm b/public/assets/videos/spotlightcard.webm
new file mode 100644
index 0000000..0cbf897
Binary files /dev/null and b/public/assets/videos/spotlightcard.webm differ
diff --git a/public/assets/videos/squares.mp4 b/public/assets/videos/squares.mp4
new file mode 100644
index 0000000..67d8811
Binary files /dev/null and b/public/assets/videos/squares.mp4 differ
diff --git a/public/assets/videos/squares.webm b/public/assets/videos/squares.webm
new file mode 100644
index 0000000..1b9abe6
Binary files /dev/null and b/public/assets/videos/squares.webm differ
diff --git a/public/assets/videos/stack.mp4 b/public/assets/videos/stack.mp4
new file mode 100644
index 0000000..b76f8b2
Binary files /dev/null and b/public/assets/videos/stack.mp4 differ
diff --git a/public/assets/videos/stack.webm b/public/assets/videos/stack.webm
new file mode 100644
index 0000000..ee4746f
Binary files /dev/null and b/public/assets/videos/stack.webm differ
diff --git a/public/assets/videos/staggeredmenu.mp4 b/public/assets/videos/staggeredmenu.mp4
new file mode 100644
index 0000000..375dbac
Binary files /dev/null and b/public/assets/videos/staggeredmenu.mp4 differ
diff --git a/public/assets/videos/staggeredmenu.webm b/public/assets/videos/staggeredmenu.webm
new file mode 100644
index 0000000..d37572e
Binary files /dev/null and b/public/assets/videos/staggeredmenu.webm differ
diff --git a/public/assets/videos/starborder.mp4 b/public/assets/videos/starborder.mp4
new file mode 100644
index 0000000..fe2010f
Binary files /dev/null and b/public/assets/videos/starborder.mp4 differ
diff --git a/public/assets/videos/starborder.webm b/public/assets/videos/starborder.webm
new file mode 100644
index 0000000..c4f9d29
Binary files /dev/null and b/public/assets/videos/starborder.webm differ
diff --git a/public/assets/videos/stepper.mp4 b/public/assets/videos/stepper.mp4
new file mode 100644
index 0000000..25a1949
Binary files /dev/null and b/public/assets/videos/stepper.mp4 differ
diff --git a/public/assets/videos/stepper.webm b/public/assets/videos/stepper.webm
new file mode 100644
index 0000000..c4182e1
Binary files /dev/null and b/public/assets/videos/stepper.webm differ
diff --git a/public/assets/videos/stickerpeel.mp4 b/public/assets/videos/stickerpeel.mp4
new file mode 100644
index 0000000..8e37a08
Binary files /dev/null and b/public/assets/videos/stickerpeel.mp4 differ
diff --git a/public/assets/videos/stickerpeel.webm b/public/assets/videos/stickerpeel.webm
new file mode 100644
index 0000000..6abe997
Binary files /dev/null and b/public/assets/videos/stickerpeel.webm differ
diff --git a/public/assets/videos/targetcursor.mp4 b/public/assets/videos/targetcursor.mp4
new file mode 100644
index 0000000..bd4c5ab
Binary files /dev/null and b/public/assets/videos/targetcursor.mp4 differ
diff --git a/public/assets/videos/targetcursor.webm b/public/assets/videos/targetcursor.webm
new file mode 100644
index 0000000..7dda621
Binary files /dev/null and b/public/assets/videos/targetcursor.webm differ
diff --git a/public/assets/videos/textcursor.mp4 b/public/assets/videos/textcursor.mp4
new file mode 100644
index 0000000..bacffe8
Binary files /dev/null and b/public/assets/videos/textcursor.mp4 differ
diff --git a/public/assets/videos/textcursor.webm b/public/assets/videos/textcursor.webm
new file mode 100644
index 0000000..23a9cc7
Binary files /dev/null and b/public/assets/videos/textcursor.webm differ
diff --git a/public/assets/videos/textpressure.mp4 b/public/assets/videos/textpressure.mp4
new file mode 100644
index 0000000..8d703bb
Binary files /dev/null and b/public/assets/videos/textpressure.mp4 differ
diff --git a/public/assets/videos/textpressure.webm b/public/assets/videos/textpressure.webm
new file mode 100644
index 0000000..5210e99
Binary files /dev/null and b/public/assets/videos/textpressure.webm differ
diff --git a/public/assets/videos/textrotate.mp4 b/public/assets/videos/textrotate.mp4
new file mode 100644
index 0000000..5de9159
Binary files /dev/null and b/public/assets/videos/textrotate.mp4 differ
diff --git a/public/assets/videos/textrotate.webm b/public/assets/videos/textrotate.webm
new file mode 100644
index 0000000..ff774fc
Binary files /dev/null and b/public/assets/videos/textrotate.webm differ
diff --git a/public/assets/videos/texttype.mp4 b/public/assets/videos/texttype.mp4
new file mode 100644
index 0000000..3ace619
Binary files /dev/null and b/public/assets/videos/texttype.mp4 differ
diff --git a/public/assets/videos/texttype.webm b/public/assets/videos/texttype.webm
new file mode 100644
index 0000000..55e16f9
Binary files /dev/null and b/public/assets/videos/texttype.webm differ
diff --git a/public/assets/videos/threads.mp4 b/public/assets/videos/threads.mp4
new file mode 100644
index 0000000..52ff501
Binary files /dev/null and b/public/assets/videos/threads.mp4 differ
diff --git a/public/assets/videos/threads.webm b/public/assets/videos/threads.webm
new file mode 100644
index 0000000..37a8507
Binary files /dev/null and b/public/assets/videos/threads.webm differ
diff --git a/public/assets/videos/tiltedcard.mp4 b/public/assets/videos/tiltedcard.mp4
new file mode 100644
index 0000000..3facb45
Binary files /dev/null and b/public/assets/videos/tiltedcard.mp4 differ
diff --git a/public/assets/videos/tiltedcard.webm b/public/assets/videos/tiltedcard.webm
new file mode 100644
index 0000000..ecb3488
Binary files /dev/null and b/public/assets/videos/tiltedcard.webm differ
diff --git a/public/assets/videos/truefocus.mp4 b/public/assets/videos/truefocus.mp4
new file mode 100644
index 0000000..e563107
Binary files /dev/null and b/public/assets/videos/truefocus.mp4 differ
diff --git a/public/assets/videos/truefocus.webm b/public/assets/videos/truefocus.webm
new file mode 100644
index 0000000..04d2d2c
Binary files /dev/null and b/public/assets/videos/truefocus.webm differ
diff --git a/public/assets/videos/variableproximity.mp4 b/public/assets/videos/variableproximity.mp4
new file mode 100644
index 0000000..ec849d7
Binary files /dev/null and b/public/assets/videos/variableproximity.mp4 differ
diff --git a/public/assets/videos/variableproximity.webm b/public/assets/videos/variableproximity.webm
new file mode 100644
index 0000000..df06c36
Binary files /dev/null and b/public/assets/videos/variableproximity.webm differ
diff --git a/public/assets/videos/waves.mp4 b/public/assets/videos/waves.mp4
new file mode 100644
index 0000000..947f1aa
Binary files /dev/null and b/public/assets/videos/waves.mp4 differ
diff --git a/public/assets/videos/waves.webm b/public/assets/videos/waves.webm
new file mode 100644
index 0000000..788cb15
Binary files /dev/null and b/public/assets/videos/waves.webm differ
diff --git a/src/App.vue b/src/App.vue
index 28f3a45..46f8527 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,23 @@
 <template>
   <div>
-    <DisplayHeader v-if="!isCategoryPage" :activeItem="activeItem" />
+    <DisplayHeader v-if="!isSidebarPage" :activeItem="activeItem" />
 
     <router-view />
   </div>
 </template>
 
 <script setup lang="ts">
+import DisplayHeader from '@/components/landing/DisplayHeader/DisplayHeader.vue';
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import DisplayHeader from '@/components/landing/DisplayHeader/DisplayHeader.vue';
 
 const route = useRoute();
 
-const isCategoryPage = computed(() => /^\/[^/]+\/[^/]+$/.test(route.path));
+const sidebarPages = ['/favorites'];
+const isSidebarPage = computed(() => {
+  const path = route.path;
+  return sidebarPages.some(sidebarPath => path.includes(sidebarPath)) || /^\/[^/]+\/[^/]+$/.test(path);
+});
 
 const activeItem = computed(() => {
   if (route.path === '/') return 'home';
diff --git a/src/components/common/ComponentList.vue b/src/components/common/ComponentList.vue
new file mode 100644
index 0000000..03fe19c
--- /dev/null
+++ b/src/components/common/ComponentList.vue
@@ -0,0 +1,539 @@
+<script setup lang="ts">
+import { componentMetadata, type ComponentMetadata } from '@/constants/Information';
+import { getSavedComponents, isComponentSaved, removeSavedComponent, toggleSavedComponent } from '@/utils/favorites';
+import { fuzzyMatch } from '@/utils/fuzzy';
+import { useVirtualList } from '@vueuse/core';
+import gsap from 'gsap';
+import { Trash, X } from 'lucide-vue-next';
+import Select from 'primevue/select';
+import { useToast } from 'primevue/usetoast';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import LazyCardMedia from './LazyCardMedia.vue';
+
+const GAP_PX = 16;
+const CARD_RADIUS = 30;
+const CARD_PADDING = 6;
+const CARD_HEIGHT = 284;
+const INNER_RADIUS = `${CARD_RADIUS - CARD_PADDING}px`;
+
+const slug = (str: string) => (str || '').replace(/\s+/g, '-').toLowerCase();
+const fromPascal = (str: string) =>
+  (str || '')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/_/g, ' ')
+    .trim();
+
+const supportsType = (type: string) => {
+  try {
+    const v = document.createElement('video');
+    if (!('canPlayType' in v)) return false;
+    const res = v.canPlayType(type);
+    return res === 'probably' || res === 'maybe';
+  } catch {
+    return false;
+  }
+};
+
+const prefersWebM = () => supportsType('video/webm; codecs="vp9,vorbis"') || supportsType('video/webm');
+
+const pickBestSource = (url: string) => {
+  if (!url) return '';
+  if (url.endsWith('.webm')) {
+    if (prefersWebM()) return url;
+    const mp4 = url.replace(/\.webm$/, '.mp4');
+    return mp4;
+  }
+  if (url.endsWith('.mp4')) {
+    return url;
+  }
+  return url;
+};
+
+interface NavigatorWithConnection extends Navigator {
+  connection?: {
+    saveData?: boolean;
+    effectiveType?: string;
+  };
+  mozConnection?: {
+    saveData?: boolean;
+    effectiveType?: string;
+  };
+  webkitConnection?: {
+    saveData?: boolean;
+    effectiveType?: string;
+  };
+}
+
+const shouldPreload = () => {
+  try {
+    const nav = navigator as NavigatorWithConnection;
+    const c = nav.connection || nav.mozConnection || nav.webkitConnection;
+    if (c?.saveData) return false;
+    const slowTypes = new Set(['slow-2g', '2g']);
+    if (c?.effectiveType && slowTypes.has(c.effectiveType)) return false;
+  } catch {
+    // noop
+  }
+  return true;
+};
+
+type ComponentInfoProps = {
+  list: ComponentMetadata;
+  hasDeleteButton?: boolean;
+  hasFavoriteButton?: boolean;
+  sorting?: string;
+  title: string;
+};
+
+const props = withDefaults(defineProps<ComponentInfoProps>(), {
+  hasDeleteButton: false,
+  hasFavoriteButton: false,
+  sorting: 'none'
+});
+
+const toast = useToast();
+const scrollRef = ref<HTMLElement | null>(null);
+const preloadedSrcsRef = ref(new Set());
+const hoveredKey = ref<string | null>(null);
+const clearSlotRef = ref(null);
+const clearBtnRef = ref(null);
+const CLEAR_APPEAR_DEBOUNCE_MS = 300;
+
+const setHoverToItemAtPoint = (x: number, y: number): void => {
+  try {
+    const el = document.elementFromPoint(x, y) as HTMLElement | null;
+    let node: HTMLElement | null = el;
+    while (node && node !== document.body) {
+      if (node.dataset && node.dataset.itemKey) {
+        hoveredKey.value = node.dataset.itemKey;
+        return;
+      }
+      node = node.parentElement as HTMLElement | null;
+    }
+    hoveredKey.value = null;
+  } catch {
+    // noop
+  }
+};
+
+const items = computed(() => {
+  if (!props.list) return [];
+  const entries = Array.isArray(props.list)
+    ? props.list
+    : Object.entries(props.list).map(([key, meta]) => ({ key, ...meta }));
+
+  const mapToItem = (entry: ComponentMetadata[keyof ComponentMetadata] | string | { key: string }) => {
+    const key = typeof entry === 'object' && 'key' in entry ? entry.key : typeof entry === 'string' ? entry : null;
+    const meta =
+      typeof entry === 'object' && 'key' in entry
+        ? entry
+        : typeof entry === 'string' && componentMetadata?.[entry]
+          ? componentMetadata[entry]
+          : {};
+    const fullKey = key || (typeof entry === 'string' ? entry : '');
+    const [cat, comp] = (fullKey || '').split('/');
+    return {
+      key: fullKey,
+      categoryKey: cat,
+      componentKey: comp,
+      categoryLabel: fromPascal(
+        (typeof meta === 'object' && meta && 'category' in meta ? (meta.category as string) : undefined) ?? cat
+      ),
+      title: fromPascal(
+        (typeof meta === 'object' && meta && 'name' in meta ? (meta.name as string) : undefined) ?? comp
+      ),
+      description:
+        (typeof meta === 'object' && meta && 'description' in meta ? (meta.description as string) : undefined) ?? '',
+      videoUrl: (typeof meta === 'object' && meta && 'videoUrl' in meta ? (meta.videoUrl as string) : undefined) ?? '',
+      tags: typeof meta === 'object' && meta && 'tags' in meta && Array.isArray(meta.tags) ? meta.tags : [],
+      docsUrl: typeof meta === 'object' && meta && 'docsUrl' in meta ? (meta.docsUrl as string | undefined) : undefined
+    };
+  };
+
+  let arr = entries
+    .filter(e => {
+      const key = (e.key ?? e)?.toString?.() ?? '';
+      return key.includes('/') && (e.key ? true : !!componentMetadata[key]);
+    })
+    .map(mapToItem);
+
+  if (props.sorting === 'alphabetical') {
+    arr = arr.sort((a, b) => a.title.localeCompare(b.title));
+  }
+  return arr;
+});
+
+const categories = computed(() => {
+  const set = new Set<string>();
+  items.value.forEach(i => i.categoryLabel && set.add(i.categoryLabel));
+  return ['All Components', ...Array.from(set).sort((a, b) => a.localeCompare(b))];
+});
+
+const selectedCategory = ref(categories.value[0]);
+const search = ref('');
+const savedSet = ref(new Set(getSavedComponents()));
+
+const update = () => (savedSet.value = new Set(getSavedComponents()));
+const onStorage = (e?: StorageEvent | null) => {
+  if (!e || e.key === 'savedComponents') update();
+};
+
+onMounted(() => {
+  window.addEventListener('favorites:updated', update);
+  window.addEventListener('storage', onStorage);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('favorites:updated', update);
+  window.removeEventListener('storage', onStorage);
+});
+
+watch(
+  () => categories.value,
+  newCategories => {
+    if (!newCategories.includes(selectedCategory.value)) {
+      selectedCategory.value = newCategories[0];
+    }
+  }
+);
+
+const filtered = computed(() => {
+  const term = search.value.trim();
+  const all = selectedCategory.value === 'All Components';
+  return items.value.filter(({ title, categoryLabel }) => {
+    const categoryOk = all || categoryLabel === selectedCategory.value;
+    if (!term) return categoryOk;
+    return categoryOk && fuzzyMatch(title, term);
+  });
+});
+
+const controlsDisabled = computed(() => items.value.length === 0);
+const hasCategoryFilter = computed(() => selectedCategory.value !== categories.value[0]);
+
+const debounceSearch = ref(search.value);
+
+watch(search, () => {
+  const timeout = setTimeout(() => {
+    debounceSearch.value = search.value;
+  }, CLEAR_APPEAR_DEBOUNCE_MS);
+  return () => clearTimeout(timeout);
+});
+
+const showClear = computed(
+  () => !controlsDisabled.value && (hasCategoryFilter.value || (debounceSearch.value?.trim()?.length ?? 0) > 0)
+);
+
+watch(showClear, newVal => {
+  const slot = clearSlotRef.value;
+  const btn = clearBtnRef.value;
+  if (!slot || !btn) return;
+  gsap.killTweensOf([slot, btn]);
+
+  if (newVal) {
+    const tl = gsap.timeline();
+    tl.to(slot, { width: 40, duration: 0.3, ease: 'power2.out' }).fromTo(
+      btn,
+      { scale: 0.6, opacity: 0 },
+      { scale: 1, opacity: 1, duration: 0.25, ease: 'power2.out', force3D: true },
+      '<0.05'
+    );
+  } else {
+    const tl = gsap.timeline();
+    tl.to(btn, { scale: 0, opacity: 0, duration: 0.15, ease: 'power2.in' }).to(
+      slot,
+      { width: 0, duration: 0.25, ease: 'power2.inOut' },
+      '+=0'
+    );
+  }
+});
+
+const getColumnsForWidth = (w: number) => (w >= 1024 ? 3 : w >= 768 ? 2 : 1);
+
+const preloadRange = (startIdx: number, endIdx: number) => {
+  if (!shouldPreload()) return;
+  const urls = [];
+  for (let i = startIdx; i <= Math.min(endIdx, filtered.value.length - 1); i++) {
+    const url = filtered.value[i]?.videoUrl;
+    if (!url) continue;
+    const chosen = pickBestSource(url);
+    if (chosen && !preloadedSrcsRef.value.has(chosen)) {
+      urls.push(chosen);
+    }
+  }
+  if (urls.length === 0) return;
+  urls.forEach(src => {
+    try {
+      const v = document.createElement('video');
+      v.preload = 'metadata';
+      v.src = src;
+      const mark = () => {
+        preloadedSrcsRef.value.add(src);
+      };
+      v.addEventListener('loadedmetadata', mark, { once: true });
+      v.addEventListener('loadeddata', mark, { once: true });
+      v.addEventListener('canplaythrough', mark, { once: true });
+      v.load();
+      setTimeout(() => {
+        v.src = '';
+      }, 8000);
+    } catch {
+      // no-op
+    }
+  });
+};
+
+const clearFilters = () => {
+  selectedCategory.value = categories.value[0];
+  search.value = '';
+};
+
+const handleDeletion = (e: MouseEvent, item: { key: string }): void => {
+  e.preventDefault();
+  e.stopPropagation();
+
+  const { clientX, clientY } = e as MouseEvent & { clientX: number; clientY: number };
+  const next = removeSavedComponent(item.key);
+  savedSet.value = new Set(next);
+  setHoverToItemAtPoint(clientX, clientY);
+
+  const target = e.currentTarget as HTMLElement | null;
+  if (target && typeof target.blur === 'function') {
+    target.blur();
+  }
+
+  if (typeof window !== 'undefined') {
+    const schedule: (cb: (ts?: number) => void) => number = window.requestAnimationFrame
+      ? (cb: (ts?: number) => void) => window.requestAnimationFrame(cb as FrameRequestCallback)
+      : (cb: (ts?: number) => void) => window.setTimeout(() => cb(Date.now()), 0);
+    schedule(() => setHoverToItemAtPoint(clientX, clientY));
+  }
+};
+
+const isSaved = (key: string): boolean => savedSet.value.has(key) || isComponentSaved(key);
+
+const handleFavoriteToggle = (e: MouseEvent, item: { key: string; componentKey: string }): void => {
+  e.preventDefault();
+  e.stopPropagation();
+  const { saved, list: next } = toggleSavedComponent(item.key);
+  savedSet.value = new Set(next);
+
+  toast.add({
+    severity: saved ? 'success' : 'error',
+    summary: saved ? `Added <${item.componentKey} /> to Favorites` : `Removed <${item.componentKey} /> from Favorites`,
+    life: 3000
+  });
+
+  const target = e.currentTarget as HTMLElement | null;
+  if (target && typeof target.blur === 'function') {
+    target.blur();
+  }
+};
+
+// ---------- VIRTUALIZATION ----------
+const containerWidth = ref(window.innerWidth);
+
+const updateContainerWidth = () => {
+  if (scrollRef.value) {
+    containerWidth.value = scrollRef.value.offsetWidth;
+  }
+};
+
+onMounted(() => {
+  updateContainerWidth();
+  window.addEventListener('resize', updateContainerWidth);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateContainerWidth);
+});
+
+const columnCount = computed(() => getColumnsForWidth(containerWidth.value));
+const rowHeight = computed(() => CARD_HEIGHT + GAP_PX);
+
+const gridRows = computed(() => {
+  const rows = [];
+  const cols = columnCount.value;
+  for (let i = 0; i < filtered.value.length; i += cols) {
+    rows.push(filtered.value.slice(i, i + cols));
+  }
+  return rows;
+});
+
+const {
+  list: virtualedRows,
+  containerProps,
+  wrapperProps
+} = useVirtualList(gridRows, {
+  itemHeight: rowHeight.value
+});
+
+watch(virtualedRows, newRows => {
+  if (newRows.length > 0) {
+    const lastRow = newRows[newRows.length - 1];
+    const lastVisibleIndex = (lastRow.index + 1) * columnCount.value - 1;
+    preloadRange(lastVisibleIndex + 1, lastVisibleIndex + 3);
+  }
+});
+</script>
+
+<template>
+  <div ref="scrollRef">
+    <div class="flex md:flex-row flex-col justify-start md:justify-between items-start md:items-center gap-4 mb-3">
+      <h2 v-if="title" class="sub-category" style="margin: 0">
+        {{ title }}
+      </h2>
+
+      <div
+        class="flex md:flex-row flex-col items-center gap-2 w-full md:w-auto"
+        :style="{ opacity: controlsDisabled ? 0.6 : 1 }"
+      >
+        <div
+          class="relative flex items-center gap-2 bg-[#0b0b0b] px-4 pr-8 border border-[#333] rounded-full w-full md:w-[180px] h-10 font-semibold text-[12px] cursor-text select-none"
+          :class="{ 'opacity-60 pointer-events-none': controlsDisabled }"
+        >
+          <i class="pi pi-search search-icon"></i>
+          <input
+            v-model="search"
+            type="text"
+            placeholder="Search..."
+            class="flex-1 bg-transparent border-none outline-none placeholder:font-medium text-[#a6a6a6] placeholder-[#a6a6a6]"
+            :disabled="controlsDisabled"
+            :tabindex="controlsDisabled ? -1 : 0"
+            @focus="
+              (e: FocusEvent) => {
+                if (controlsDisabled) (e.target as HTMLInputElement).blur();
+              }
+            "
+          />
+        </div>
+
+        <Select
+          v-model="selectedCategory"
+          :options="categories"
+          class="w-full md:w-auto"
+          :disabled="controlsDisabled"
+        />
+
+        <div ref="clearSlotRef" class="hidden md:flex justify-center items-center w-0 overflow-hidden">
+          <button
+            ref="clearBtnRef"
+            aria-label="Clear filters"
+            @click="clearFilters"
+            class="flex justify-center items-center bg-transparent hover:bg-[#0d2717] opacity-0 focus-visible:shadow-none focus:shadow-none border border-[#333] focus-visible:border-[#333] rounded-full focus-visible:outline-none focus:outline-none focus:ring-0 w-10 h-10 text-[#a6a6a6] origin-[50%_50%] transition-all duration-300"
+            :class="{
+              'pointer-events-none': !showClear,
+              'pointer-events-auto': showClear
+            }"
+            :tabindex="showClear ? 0 : -1"
+          >
+            <X class="size-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-4">
+      <div v-if="filtered.length === 0" class="relative mt-[6em] p-6 text-center" role="status">
+        <div class="relative">
+          <h3 class="mb-1 font-medium text-white text-2xl">
+            {{ items.length > 0 ? 'No results...' : 'Nothing here yet...' }}
+          </h3>
+          <h4 class="mb-8 text-[#a6a6a6] text-base">
+            {{ items.length > 0 ? 'Try adjusting your filters' : 'Tap the heart on any component to save it' }}
+          </h4>
+
+          <div class="flex flex-wrap justify-center gap-2">
+            <button
+              v-if="items.length > 0"
+              class="bg-transparent hover:bg-[#0d2717] px-4 border border-[#333] rounded-full h-10 font-medium text-white transition-colors duration-300 cursor-pointer"
+            >
+              Clear Filters
+            </button>
+            <component
+              :is="'router-link'"
+              to="/get-started/index"
+              v-else
+              class="flex justify-center items-center bg-transparent hover:bg-[#0d2717] px-4 border border-[#333] rounded-full h-10 font-medium text-white transition-colors duration-300 cursor-pointer"
+            >
+              Browse Components
+            </component>
+          </div>
+        </div>
+      </div>
+
+      <div v-else v-bind="containerProps">
+        <div v-bind="wrapperProps">
+          <div
+            v-for="row in virtualedRows"
+            :key="row.index"
+            :style="{
+              display: 'grid',
+              gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
+              gap: `${GAP_PX}px`,
+              marginBottom: `${GAP_PX}px`
+            }"
+          >
+            <component
+              v-for="item in row.data"
+              :key="item.key"
+              :is="'router-link'"
+              :to="`/${slug(fromPascal(item.categoryKey))}/${slug(fromPascal(item.componentKey))}` || '#'"
+              :data-item-key="item.key"
+              :style="{
+                backgroundColor: '#222',
+                borderRadius: `${CARD_RADIUS}px`,
+                padding: `${CARD_PADDING}px`
+              }"
+              @mouseenter="hoveredKey = item.key"
+              @mouseleave="hoveredKey = null"
+            >
+              <div class="relative px-4 py-3">
+                <h3 class="font-medium text-white text-base leading-[1.4]">{{ item.title }}</h3>
+                <p class="font-normal text-[#27ff64] text-xs">{{ item.categoryLabel }}</p>
+
+                <button
+                  aria-label="Remove from favorites"
+                  v-if="hasDeleteButton"
+                  class="top-2 right-2 absolute flex justify-center items-center bg-transparent hover:bg-[#0d2717] focus:opacity-100 border border-[#333] rounded-full w-10 h-10 text-[#a6a6a6] transition-opacity duration-150 ease-in-out cursor-pointer focus:pointer-events-auto"
+                  :class="{
+                    'opacity-0 pointer-events-none': hoveredKey !== item.key,
+                    'opacity-100 pointer-events-auto': hoveredKey === item.key
+                  }"
+                  @click="handleDeletion($event, item)"
+                >
+                  <Trash class="size-4" />
+                </button>
+
+                <button
+                  :aria-label="isSaved(item.key) ? 'Remove from favorites' : 'Add to favorites'"
+                  v-if="!hasDeleteButton && hasFavoriteButton"
+                  class="top-2 right-2 absolute flex justify-center items-center bg-transparent hover:bg-[#0d2717] focus:opacity-100 border border-[#333] rounded-full w-10 h-10 text-[#a6a6a6] transition-opacity duration-150 ease-in-out cursor-pointer focus:pointer-events-auto"
+                  :class="{
+                    'opacity-0 pointer-events-none': hoveredKey !== item.key,
+                    'opacity-100 pointer-events-auto': hoveredKey === item.key
+                  }"
+                  @click="handleFavoriteToggle($event, item)"
+                >
+                  <i :class="isSaved(item.key) ? 'pi pi-heart-fill' : 'pi pi-heart'" :style="{ color: '#ffffff' }"></i>
+                </button>
+              </div>
+
+              <LazyCardMedia
+                :key="item.videoUrl || item.key"
+                :video-url="item.videoUrl"
+                :active="true"
+                :inner-radius="INNER_RADIUS"
+              />
+            </component>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+::-webkit-scrollbar {
+  width: 0;
+}
+</style>
diff --git a/src/components/common/LazyCardMedia.vue b/src/components/common/LazyCardMedia.vue
new file mode 100644
index 0000000..73b2140
--- /dev/null
+++ b/src/components/common/LazyCardMedia.vue
@@ -0,0 +1,189 @@
+<template>
+  <div ref="containerRef" class="bg-black h-[200px] overflow-hidden" :style="{ borderRadius: innerRadius }">
+    <video
+      v-if="show"
+      ref="videoRef"
+      autoplay
+      loop
+      muted
+      playsinline
+      preload="metadata"
+      :style="{
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        display: 'block',
+        pointerEvents: 'none'
+      }"
+    >
+      <!-- Let the browser choose the best supported source -->
+      <source :src="webm" type="video/webm" />
+      <source :src="mp4" type="video/mp4" />
+    </video>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch, nextTick } from 'vue';
+
+const props = defineProps({
+  videoUrl: {
+    type: String,
+    required: true
+  },
+  active: {
+    type: Boolean,
+    required: true
+  },
+  innerRadius: {
+    type: String,
+    required: false,
+    default: '0px'
+  }
+});
+
+const containerRef = ref<HTMLElement | null>(null);
+const videoRef = ref<HTMLVideoElement | null>(null);
+const isVisible = ref(false);
+const show = computed(() => !!props.videoUrl && !!props.active && isVisible.value);
+
+const base = computed(() => (props.videoUrl ? props.videoUrl.replace(/\.(webm|mp4)$/i, '') : ''));
+const webm = computed(() => (base.value ? `${base.value}.webm` : ''));
+const mp4 = computed(() => (base.value ? `${base.value}.mp4` : ''));
+
+let mounted = true;
+let cleanup: (() => void) | null = null;
+
+const tryPlay = () => {
+  const v = videoRef.value;
+  if (!v || !mounted || !show.value) return;
+
+  try {
+    const p = v.play();
+    if (p && typeof p.then === 'function') {
+      p.catch(() => {
+        // Autoplay was prevented, try again after user interaction
+      });
+    }
+  } catch {
+    // ignore autoplay errors
+  }
+};
+
+const setupVideo = async () => {
+  if (cleanup) {
+    cleanup();
+    cleanup = null;
+  }
+
+  await nextTick();
+
+  const v = videoRef.value;
+  if (!v || !show.value) return;
+
+  if (v.readyState >= 3) {
+    tryPlay();
+    return;
+  }
+
+  const onLoadedMeta = () => tryPlay();
+  const onCanPlay = () => tryPlay();
+  const onLoadedData = () => tryPlay();
+  const onCanPlayThrough = () => tryPlay();
+  const onError = () => {
+    console.error('Video failed to load:', props.videoUrl);
+  };
+
+  v.addEventListener('loadedmetadata', onLoadedMeta);
+  v.addEventListener('canplay', onCanPlay);
+  v.addEventListener('loadeddata', onLoadedData);
+  v.addEventListener('canplaythrough', onCanPlayThrough);
+  v.addEventListener('error', onError);
+
+  try {
+    v.load();
+  } catch {
+    // ignore load errors
+  }
+
+  const id = setTimeout(tryPlay, 1200);
+
+  cleanup = () => {
+    clearTimeout(id);
+    v.removeEventListener('loadedmetadata', onLoadedMeta);
+    v.removeEventListener('canplay', onCanPlay);
+    v.removeEventListener('loadeddata', onLoadedData);
+    v.removeEventListener('canplaythrough', onCanPlayThrough);
+    v.removeEventListener('error', onError);
+  };
+};
+
+const pauseVideo = () => {
+  const v = videoRef.value;
+  if (!v) return;
+
+  try {
+    v.pause();
+  } catch {
+    // ignore pause errors
+  }
+};
+
+watch(
+  show,
+  async newVal => {
+    if (newVal) {
+      await setupVideo();
+    } else {
+      pauseVideo();
+    }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  const observer = new IntersectionObserver(
+    entries => {
+      entries.forEach(entry => {
+        isVisible.value = entry.isIntersecting;
+      });
+    },
+    {
+      threshold: 0.1,
+      rootMargin: '50px'
+    }
+  );
+
+  if (containerRef.value) {
+    observer.observe(containerRef.value);
+  }
+
+  const observerCleanup = () => {
+    if (containerRef.value) {
+      observer.unobserve(containerRef.value);
+    }
+    observer.disconnect();
+  };
+
+  const originalCleanup = cleanup;
+  cleanup = () => {
+    if (originalCleanup) {
+      originalCleanup();
+    }
+    observerCleanup();
+  };
+
+  if (show.value) {
+    setupVideo();
+  }
+});
+
+onBeforeUnmount(() => {
+  mounted = false;
+  if (cleanup) {
+    cleanup();
+    cleanup = null;
+  }
+  pauseVideo();
+});
+</script>
diff --git a/src/components/common/TabbedLayout.vue b/src/components/common/TabbedLayout.vue
index 3e35a6c..cc9a1ec 100644
--- a/src/components/common/TabbedLayout.vue
+++ b/src/components/common/TabbedLayout.vue
@@ -5,7 +5,6 @@
         <Tab value="0">
           <div class="tab-header">
             <i class="pi pi-eye"></i>
-
             <span>Preview</span>
           </div>
         </Tab>
@@ -13,7 +12,6 @@
         <Tab value="1">
           <div class="tab-header">
             <i class="pi pi-code"></i>
-
             <span>Code</span>
           </div>
         </Tab>
@@ -21,16 +19,54 @@
         <Tab value="2">
           <div class="tab-header">
             <i class="pi pi-box"></i>
-
             <span>CLI</span>
           </div>
         </Tab>
 
         <Tab value="3">
-          <div class="tab-header">
-            <i class="pi pi-heart"></i>
+          <div class="flex items-center gap-2 shrink-0">
+            <div class="inline-block relative" v-if="favoriteKey && category !== 'get-started'">
+              <button
+                @click.stop="toggleFavorite"
+                @mouseenter="showTooltip"
+                @mouseleave="hideTooltip"
+                :aria-label="isSaved ? 'Remove from Favorites' : 'Add to Favorites'"
+                :aria-pressed="isSaved"
+                class="flex justify-center items-center rounded-lg w-10 h-10 transition-all duration-200 cursor-pointer"
+                :class="
+                  isSaved
+                    ? 'bg-linear-to-br from-[#1ea03f] to-[#182fff99] hover:brightness-90'
+                    : 'border border-[#222] hover:bg-[#222]'
+                "
+              >
+                <i :class="isSaved ? 'pi pi-heart-fill' : 'pi pi-heart'" :style="{ color: '#ffffff' }"></i>
+              </button>
 
-            <span>Contribute</span>
+              <Transition
+                enter-active-class="transition-opacity duration-200"
+                leave-active-class="transition-opacity duration-100"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+              >
+                <div
+                  v-if="isTooltipVisible"
+                  class="top-1/2 right-full absolute mr-2 -translate-y-1/2 pointer-events-none"
+                >
+                  <div
+                    class="flex justify-center items-center bg-transparent px-4 border border-[#222] rounded-[15px] h-10 font-medium text-white text-xs whitespace-nowrap"
+                  >
+                    {{ isSaved ? 'Remove from Favorites' : 'Add to Favorites' }}
+                  </div>
+                </div>
+              </Transition>
+            </div>
+
+            <div class="tab-header">
+              <i class="pi pi-lightbulb"></i>
+              <span>Contribute</span>
+            </div>
           </div>
         </Tab>
       </TabList>
@@ -57,12 +93,105 @@
 </template>
 
 <script setup lang="ts">
-import Tabs from 'primevue/tabs';
-import TabList from 'primevue/tablist';
+import { getSavedComponents, isComponentSaved, toggleSavedComponent } from '@/utils/favorites';
 import Tab from 'primevue/tab';
-import TabPanels from 'primevue/tabpanels';
+import TabList from 'primevue/tablist';
 import TabPanel from 'primevue/tabpanel';
+import TabPanels from 'primevue/tabpanels';
+import Tabs from 'primevue/tabs';
+import { useToast } from 'primevue/usetoast';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import ContributionSection from './ContributionSection.vue';
+
+const savedSet = ref(new Set(getSavedComponents()));
+const isSaved = ref<boolean>(false);
+
+const route = useRoute();
+const category = computed(() => route.params.category);
+const subcategory = computed(() => route.params.subcategory);
+const toast = useToast();
+
+const isTooltipVisible = ref(false);
+const showTimeout = ref<number | null>(null);
+const hideTimeout = ref<number | null>(null);
+
+const toPascal = (str: string) =>
+  str
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+
+const favoriteKey = computed<string | null>(() => {
+  if (!category.value || !subcategory.value) return null;
+  const categoryName = toPascal(category.value as string);
+  const compName = toPascal(subcategory.value as string);
+  return `${categoryName}/${compName}`;
+});
+
+const componentName = computed<string | null>(() => {
+  if (!subcategory.value) return null;
+  return toPascal(subcategory.value as string);
+});
+
+const updateSaved = () => (savedSet.value = new Set(getSavedComponents()));
+const onStorage = (e?: StorageEvent | null) => {
+  if (!e || e.key === 'savedComponents') updateSaved();
+};
+const toggleFavorite = () => {
+  if (!favoriteKey.value) return;
+
+  try {
+    const { saved } = toggleSavedComponent(favoriteKey.value);
+    isSaved.value = saved;
+
+    toast.add({
+      severity: saved ? 'success' : 'error',
+      summary: saved
+        ? `Added <${componentName.value} /> to Favorites`
+        : `Removed <${componentName.value} /> from Favorites`,
+      life: 3000
+    });
+  } catch (err) {
+    console.error('Error toggling favorite:', err);
+  }
+};
+
+const showTooltip = () => {
+  clearTimeout(hideTimeout.value ?? 0);
+  showTimeout.value = setTimeout(() => {
+    isTooltipVisible.value = true;
+  }, 250);
+};
+
+const hideTooltip = () => {
+  clearTimeout(showTimeout.value ?? 0);
+  hideTimeout.value = setTimeout(() => {
+    isTooltipVisible.value = false;
+  }, 100);
+};
+
+onMounted(() => {
+  window.addEventListener('favorites:updated', updateSaved);
+  window.addEventListener('storage', onStorage);
+  updateSaved();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('favorites:updated', updateSaved);
+  window.removeEventListener('storage', onStorage);
+});
+
+watch(
+  () => favoriteKey.value,
+  () => {
+    if (!favoriteKey.value) return;
+    isSaved.value = isComponentSaved(favoriteKey.value);
+  },
+  {
+    immediate: true
+  }
+);
 </script>
 
 <style scoped>
diff --git a/src/components/navs/Header.vue b/src/components/navs/Header.vue
index e924710..978f639 100644
--- a/src/components/navs/Header.vue
+++ b/src/components/navs/Header.vue
@@ -24,6 +24,35 @@
           </button>
         </FadeContent>
 
+        <div class="inline-block relative">
+          <router-link
+            to="/favorites"
+            @mouseenter="showTooltip"
+            @mouseleave="hideTooltip"
+            aria-label="Favorites"
+            class="flex justify-center items-center bg-linear-to-br from-[#1ea03f] to-[#182fff99] hover:brightness-110 active:brightness-95 rounded-full w-10 h-10 transition-all duration-200 cursor-pointer"
+          >
+            <i class="pi pi-heart-fill" :style="{ color: '#ffffff' }"></i>
+          </router-link>
+
+          <Transition
+            enter-active-class="transition-opacity duration-200"
+            leave-active-class="transition-opacity duration-100"
+            enter-from-class="opacity-0"
+            enter-to-class="opacity-100"
+            leave-from-class="opacity-100"
+            leave-to-class="opacity-0"
+          >
+            <div v-if="isTooltipVisible" class="top-full left-1/2 absolute mt-2 -translate-x-1/2 pointer-events-none">
+              <div
+                class="flex justify-center items-center bg-[#0b0b0b] px-4 py-2 border border-[#333] rounded-[50px] font-semibold text-white text-xs whitespace-nowrap"
+              >
+                Favorites
+              </div>
+            </div>
+          </Transition>
+        </div>
+
         <FadeContent blur>
           <button class="cta-button-docs" @click="openGitHub">
             Star On GitHub
@@ -69,10 +98,11 @@
             <p class="section-title">Useful Links</p>
 
             <router-link to="/text-animations/split-text" @click="closeDrawer" class="drawer-link">Docs</router-link>
+            <router-link to="/favorites" @click="closeDrawer" class="drawer-link">Favorites</router-link>
 
             <a href="https://github.com/DavidHDev/vue-bits" target="_blank" @click="closeDrawer" class="drawer-link">
               GitHub
-              <i class="pi pi-arrow-up-right arrow-icon"></i>
+              <i class="pi-arrow-up-right pi arrow-icon"></i>
             </a>
           </div>
 
@@ -83,7 +113,7 @@
 
             <a href="https://davidhaz.com/" target="_blank" @click="closeDrawer" class="drawer-link">
               Who made this?
-              <i class="pi pi-arrow-up-right arrow-icon"></i>
+              <i class="pi-arrow-up-right pi arrow-icon"></i>
             </a>
           </div>
         </div>
@@ -110,6 +140,10 @@ const stars = useStars();
 const route = useRoute();
 const router = useRouter();
 
+const isTooltipVisible = ref(false);
+const showTimeout = ref<number | null>(null);
+const hideTimeout = ref<number | null>(null);
+
 const slug = (str: string) => str.replace(/\s+/g, '-').toLowerCase();
 
 const toggleDrawer = () => {
@@ -129,6 +163,20 @@ const onNavClick = () => {
   window.scrollTo(0, 0);
 };
 
+const showTooltip = () => {
+  clearTimeout(hideTimeout.value ?? 0);
+  showTimeout.value = setTimeout(() => {
+    isTooltipVisible.value = true;
+  }, 250);
+};
+
+const hideTooltip = () => {
+  clearTimeout(showTimeout.value ?? 0);
+  hideTimeout.value = setTimeout(() => {
+    isTooltipVisible.value = false;
+  }, 100);
+};
+
 const handleMobileTransitionNavigation = async (path: string) => {
   if (isTransitioning.value || route.path === path) return;
 
diff --git a/src/components/navs/Sidebar.vue b/src/components/navs/Sidebar.vue
index 63320e3..d0e058a 100644
--- a/src/components/navs/Sidebar.vue
+++ b/src/components/navs/Sidebar.vue
@@ -37,20 +37,17 @@
           <div class="links-container">
             <a href="https://github.com/DavidHDev/vue-bits" target="_blank" @click="closeDrawer" class="useful-link">
               <span>GitHub</span>
-
-              <i class="pi pi-arrow-up-right arrow-icon"></i>
+              <i class="pi-arrow-up-right pi arrow-icon"></i>
             </a>
 
             <router-link to="/text-animations/split-text" @click="closeDrawer" class="useful-link">
               <span>Docs</span>
-
-              <i class="pi pi-arrow-up-right arrow-icon"></i>
+              <i class="pi-arrow-up-right pi arrow-icon"></i>
             </router-link>
 
             <a href="https://davidhaz.com/" target="_blank" @click="closeDrawer" class="useful-link">
               <span>Who made this?</span>
-
-              <i class="pi pi-arrow-up-right arrow-icon"></i>
+              <i class="pi-arrow-up-right pi arrow-icon"></i>
             </a>
           </div>
         </div>
@@ -101,10 +98,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick, watch, defineComponent, h, computed, useTemplateRef } from 'vue';
+import { getSavedComponents } from '@/utils/favorites';
+import {
+  computed,
+  defineComponent,
+  h,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  onUnmounted,
+  ref,
+  useTemplateRef,
+  watch
+} from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { CATEGORIES, NEW, UPDATED } from '../../constants/Categories';
 import Logo from '../../assets/logos/vue-bits-logo.svg';
+import { CATEGORIES, NEW, UPDATED } from '../../constants/Categories';
 import '../../css/sidebar.css';
 
 const HOVER_TIMEOUT_DELAY = 150;
@@ -123,12 +132,18 @@ const sidebarContainerRef = useTemplateRef<HTMLDivElement>('sidebarContainerRef'
 
 let hoverTimeoutRef: number | null = null;
 let hoverDelayTimeoutRef: number | null = null;
+const savedSet = ref(new Set(getSavedComponents()));
 
 const route = useRoute();
 const router = useRouter();
 
 const scrollToTop = () => window.scrollTo(0, 0);
 const slug = (str: string) => str.replace(/\s+/g, '-').toLowerCase();
+const toPascal = (str: string) =>
+  str
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
 
 const findActiveElement = () => {
   const activePath = pendingActivePath.value || route.path;
@@ -240,6 +255,22 @@ const updateActiveLine = async () => {
   }, 100);
 };
 
+const updateSaved = () => (savedSet.value = new Set(getSavedComponents()));
+const onStorage = (e?: StorageEvent | null) => {
+  if (!e || e.key === 'savedComponents') updateSaved();
+};
+
+onMounted(() => {
+  window.addEventListener('favorites:updated', updateSaved);
+  window.addEventListener('storage', onStorage);
+  updateSaved();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('favorites:updated', updateSaved);
+  window.removeEventListener('storage', onStorage);
+});
+
 const Category = defineComponent({
   name: 'Category',
   props: {
@@ -274,6 +305,10 @@ const Category = defineComponent({
     isTransitioning: {
       type: Boolean,
       default: false
+    },
+    savedSet: {
+      type: Object,
+      default: () => savedSet.value
     }
   },
   setup(props) {
@@ -283,18 +318,21 @@ const Category = defineComponent({
       isActive: boolean;
       isNew: boolean;
       isUpdated: boolean;
+      isFavorited: boolean;
     }
 
     const items = computed(() =>
       props.category.subcategories.map((sub: string): ItemType => {
         const path = `/${slug(props.category.name)}/${slug(sub)}`;
         const activePath = props.pendingActivePath || props.location.path;
+        const favoriteKey = `${toPascal(slug(props.category.name))}/${toPascal(slug(sub))}`;
         return {
           sub,
           path,
           isActive: activePath === path,
           isNew: (NEW as string[]).includes(sub),
-          isUpdated: (UPDATED as string[]).includes(sub)
+          isUpdated: (UPDATED as string[]).includes(sub),
+          isFavorited: savedSet.value?.has?.(favoriteKey)
         };
       })
     );
@@ -305,7 +343,7 @@ const Category = defineComponent({
         h(
           'div',
           { class: 'category-items' },
-          items.value.map(({ sub, path, isActive, isNew, isUpdated }: ItemType) => {
+          items.value.map(({ sub, path, isActive, isNew, isUpdated, isFavorited }: ItemType) => {
             return h(
               'router-link',
               {
@@ -324,7 +362,15 @@ const Category = defineComponent({
                   [
                     sub,
                     isNew ? h('span', { class: 'new-tag' }, 'New') : null,
-                    isUpdated ? h('span', { class: 'updated-tag' }, 'Updated') : null
+                    isUpdated ? h('span', { class: 'updated-tag' }, 'Updated') : null,
+                    isFavorited
+                      ? h('i', {
+                          class: 'pi pi-heart-fill footer-heart',
+                          style: {
+                            marginLeft: '6px'
+                          }
+                        })
+                      : null
                   ].filter(Boolean)
               }
             );
diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 9a612fb..6357e3e 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -1,139 +1,141 @@
 // Highlighted sidebar items
-export const NEW = ['Color Bends', 'Ghost Cursor', 'Laser Flow', 'Dome Gallery', 'Liquid Ether', 'Staggered Menu', 'Pixel Blast', 'Bubble Menu', 'Pill Nav', 'Card Nav'];
+export const NEW = ['Color Bends', 'Ghost Cursor', 'Laser Flow', 'Liquid Ether', 'Pixel Blast'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
 export const CATEGORIES = [
+  {
+    name: 'Get Started',
+    subcategories: ['Index']
+  },
   {
     name: 'Text Animations',
     subcategories: [
-      'Split Text',
+      'Ascii Text',
       'Blur Text',
       'Circular Text',
-      'Shiny Text',
-      'Text Pressure',
       'Curved Loop',
+      'Decrypted Text',
+      'Falling Text',
       'Fuzzy Text',
+      'Glitch Text',
       'Gradient Text',
-      'Text Trail',
-      'Falling Text',
-      'Text Cursor',
-      'Decrypted Text',
-      'Ascii Text',
-      'Scramble Text',
-      'True Focus',
+      'Rotating Text',
       'Scroll Float',
       'Scroll Reveal',
-      'Rotating Text',
-      'Glitch Text',
       'Scroll Velocity',
+      'Scramble Text',
+      'Shiny Text',
+      'Split Text',
+      'Text Cursor',
+      'Text Pressure',
+      'Text Trail',
       'Text Type',
+      'True Focus',
       'Variable Proximity',
-    ]
+    ],
   },
   {
     name: 'Animations',
     subcategories: [
       'Animated Content',
+      'Blob Cursor',
+      'Click Spark',
+      'Count Up',
+      'Crosshair',
+      'Cubes',
+      'Electric Border',
       'Fade Content',
+      'Ghost Cursor',
+      'Glare Hover',
       'Gradual Blur',
       'Laser Flow',
-      'Noise',
-      'Splash Cursor',
       'Logo Loop',
-      'Pixel Transition',
-      'Target Cursor',
-      'Ghost Cursor',
-      'Electric Border',
-      'Sticker Peel',
-      'Ribbons',
-      'Glare Hover',
+      'Magnet',
       'Magnet Lines',
-      'Count Up',
       'Metallic Paint',
-      'Click Spark',
-      'Magnet',
-      'Cubes',
-      'Blob Cursor',
-      'Meta Balls',
-      'Image Trail',
+      'Noise',
+      'Pixel Transition',
+      'Ribbons',
       'Shape Blur',
-      'Crosshair',
+      'Splash Cursor',
       'Star Border',
-    ]
+      'Sticker Peel',
+      'Target Cursor',
+    ],
   },
   {
     name: 'Components',
     subcategories: [
       'Animated List',
-      'Staggered Menu',
-      'Masonry',
-      'Glass Surface',
-      'Magic Bento',
-      'Scroll Stack',
-      'Profile Card',
-      'Card Nav',
-      'Pill Nav',
-      'Dock',
-      'Gooey Nav',
+      'Bounce Cards',
       'Bubble Menu',
-      'Pixel Card',
+      'Card Nav',
+      'Card Swap',
       'Carousel',
-      'Spotlight Card',
+      'Chroma Grid',
       'Circular Gallery',
+      'Counter',
+      'Decay Card',
+      'Dock',
+      'Dome Gallery',
+      'Elastic Slider',
+      'Flowing Menu',
       'Flying Posters',
       'Folder',
-      'Card Swap',
+      'Glass Icons',
+      'Glass Surface',
+      'Gooey Nav',
       'Infinite Menu',
       'Infinite Scroll',
-      'Tilted Card',
-      'Glass Icons',
-      'Decay Card',
-      'Dome Gallery',
-      'Flowing Menu',
-      'Elastic Slider',
+      'Magic Bento',
+      'Masonry',
+      'Pixel Card',
+      'Pill Nav',
+      'Profile Card',
+      'Rolling Gallery',
+      'Scroll Stack',
+      'Spotlight Card',
       'Stack',
-      'Chroma Grid',
+      'Staggered Menu',
       'Stepper',
-      'Bounce Cards',
-      'Counter',
-      'Rolling Gallery'
-    ]
+      'Tilted Card',
+    ],
   },
   {
     name: 'Backgrounds',
     subcategories: [
-      'Color Bends',
-      'Prism',
       'Aurora',
+      'Balatro',
+      'Ballpit',
       'Beams',
-      'Pixel Blast',
+      'Color Bends',
       'Dark Veil',
       'Dither',
-      'Gradient Blinds',
-      'Prismatic Burst',
       'Dot Grid',
-      'Hyperspeed',
       'Faulty Terminal',
-      'Plasma',
+      'Galaxy',
+      'Gradient Blinds',
+      'Grid Distortion',
+      'Grid Motion',
+      'Hyperspeed',
+      'Iridescence',
+      'Letter Glitch',
+      'Lightning',
+      'Light Rays',
+      'Liquid Chrome',
       'Liquid Ether',
+      'Orb',
+      'Particles',
+      'Pixel Blast',
+      'Plasma',
+      'Prism',
+      'Prismatic Burst',
       'Ripple Grid',
       'Silk',
-      'Lightning',
-      'Balatro',
-      'Letter Glitch',
-      'Particles',
-      'Waves',
       'Squares',
-      'Iridescence',
       'Threads',
-      'Grid Motion',
-      'Orb',
-      'Ballpit',
-      'Liquid Chrome',
-      'Grid Distortion',
-      'Galaxy',
-      'Light Rays',
-    ]
-  }
+      'Waves',
+    ],
+  },
 ];
diff --git a/src/constants/Information.ts b/src/constants/Information.ts
new file mode 100644
index 0000000..1d6c094
--- /dev/null
+++ b/src/constants/Information.ts
@@ -0,0 +1,944 @@
+export type ComponentMetadata = Record<
+  string,
+  {
+    videoUrl: string;
+    description: string;
+    category: string;
+    name: string;
+    docsUrl: string;
+    tags: string[];
+  }
+>;
+
+export const componentMetadata: ComponentMetadata = {
+  //! Animations -------------------------------------------------------------------------------------------------------------------------------
+
+  'Animations/AnimatedContent': {
+    videoUrl: '/assets/videos/animatedcontent.webm',
+    description:
+      'Wrapper that animates any children on scroll or mount with configurable direction, distance, duration and easing.',
+    category: 'Animations',
+    name: 'AnimatedContent',
+    docsUrl: 'https://vue-bits.dev/animations/animated-content',
+    tags: []
+  },
+  'Animations/BlobCursor': {
+    videoUrl: '/assets/videos/blobcursor.webm',
+    description: 'Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing.',
+    category: 'Animations',
+    name: 'BlobCursor',
+    docsUrl: 'https://vue-bits.dev/animations/blob-cursor',
+    tags: []
+  },
+  'Animations/ClickSpark': {
+    videoUrl: '/assets/videos/clickspark.webm',
+    description: 'Creates particle spark bursts at click position.',
+    category: 'Animations',
+    name: 'ClickSpark',
+    docsUrl: 'https://vue-bits.dev/animations/click-spark',
+    tags: []
+  },
+  'Animations/Crosshair': {
+    videoUrl: '/assets/videos/crosshair.webm',
+    description: 'Custom crosshair cursor with tracking, and link hover effects.',
+    category: 'Animations',
+    name: 'Crosshair',
+    docsUrl: 'https://vue-bits.dev/animations/crosshair',
+    tags: []
+  },
+  'Animations/Cubes': {
+    videoUrl: '/assets/videos/cubes.webm',
+    description: '3D rotating cube cluster. Supports auto-rotation or hover interaction.',
+    category: 'Animations',
+    name: 'Cubes',
+    docsUrl: 'https://vue-bits.dev/animations/cubes',
+    tags: []
+  },
+  'Animations/ElectricBorder': {
+    videoUrl: '/assets/videos/electricborder.webm',
+    description: 'Jittery electric energy border with animated arcs, glow and adjustable intensity.',
+    category: 'Animations',
+    name: 'ElectricBorder',
+    docsUrl: 'https://vue-bits.dev/animations/electric-border',
+    tags: []
+  },
+  'Animations/FadeContent': {
+    videoUrl: '/assets/videos/fadecontent.webm',
+    description: 'Simple directional fade / slide entrance wrapper with threshold-based activation.',
+    category: 'Animations',
+    name: 'FadeContent',
+    docsUrl: 'https://vue-bits.dev/animations/fade-content',
+    tags: []
+  },
+  'Animations/GlareHover': {
+    videoUrl: '/assets/videos/glarehover.webm',
+    description: 'Adds a realistic moving glare highlight on hover over any element.',
+    category: 'Animations',
+    name: 'GlareHover',
+    docsUrl: 'https://vue-bits.dev/animations/glare-hover',
+    tags: []
+  },
+  'Animations/GradualBlur': {
+    videoUrl: '/assets/videos/gradualblur.webm',
+    description: 'Progressively un-blurs content based on scroll or trigger creating a cinematic reveal.',
+    category: 'Animations',
+    name: 'GradualBlur',
+    docsUrl: 'https://vue-bits.dev/animations/gradual-blur',
+    tags: []
+  },
+  'Animations/GhostCursor': {
+    videoUrl: '/assets/videos/ghostcursor.webm',
+    description: 'Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect.',
+    category: 'Animations',
+    name: 'GhostCursor',
+    docsUrl: 'https://vue-bits.dev/animations/ghost-cursor',
+    tags: []
+  },
+  'Animations/ImageTrail': {
+    videoUrl: '/assets/videos/imagetrail.webm',
+    description: 'Cursor-based image trail with several built-in variants.',
+    category: 'Animations',
+    name: 'ImageTrail',
+    docsUrl: 'https://vue-bits.dev/animations/image-trail',
+    tags: []
+  },
+  'Animations/LogoLoop': {
+    videoUrl: '/assets/videos/logoloop.webm',
+    description: 'Continuously looping marquee of brand or tech logos with seamless repeat and hover pause.',
+    category: 'Animations',
+    name: 'LogoLoop',
+    docsUrl: 'https://vue-bits.dev/animations/logo-loop',
+    tags: []
+  },
+  'Animations/Magnet': {
+    videoUrl: '/assets/videos/magnet.webm',
+    description: 'Elements magnetically ease toward the cursor then settle back with spring physics.',
+    category: 'Animations',
+    name: 'Magnet',
+    docsUrl: 'https://vue-bits.dev/animations/magnet',
+    tags: []
+  },
+  'Animations/MagnetLines': {
+    videoUrl: '/assets/videos/magnetlines.webm',
+    description: 'Animated field lines bend toward the cursor.',
+    category: 'Animations',
+    name: 'MagnetLines',
+    docsUrl: 'https://vue-bits.dev/animations/magnet-lines',
+    tags: []
+  },
+  'Animations/MetaBalls': {
+    videoUrl: '/assets/videos/metaballs.webm',
+    description: 'Liquid metaball blobs that merge and separate with smooth implicit surface animation.',
+    category: 'Animations',
+    name: 'MetaBalls',
+    docsUrl: 'https://vue-bits.dev/animations/meta-balls',
+    tags: []
+  },
+  'Animations/MetallicPaint': {
+    videoUrl: '/assets/videos/metallicpaint.webm',
+    description: 'Liquid metallic paint shader which can be applied to SVG elements.',
+    category: 'Animations',
+    name: 'MetallicPaint',
+    docsUrl: 'https://vue-bits.dev/animations/metallic-paint',
+    tags: []
+  },
+  'Animations/Noise': {
+    videoUrl: '/assets/videos/noise.webm',
+    description: 'Animated film grain / noise overlay adding subtle texture and motion.',
+    category: 'Animations',
+    name: 'Noise',
+    docsUrl: 'https://vue-bits.dev/animations/noise',
+    tags: []
+  },
+  'Animations/PixelTrail': {
+    videoUrl: '/assets/videos/pixeltrail.webm',
+    description: 'Pixelated cursor trail emitting fading squares with retro digital feel.',
+    category: 'Animations',
+    name: 'PixelTrail',
+    docsUrl: 'https://vue-bits.dev/animations/pixel-trail',
+    tags: []
+  },
+  'Animations/PixelTransition': {
+    videoUrl: '/assets/videos/pixeltransition.webm',
+    description: 'Pixel dissolve transition for content reveal on hover.',
+    category: 'Animations',
+    name: 'PixelTransition',
+    docsUrl: 'https://vue-bits.dev/animations/pixel-transition',
+    tags: []
+  },
+  'Animations/Ribbons': {
+    videoUrl: '/assets/videos/ribbons.webm',
+    description: 'Flowing responsive ribbons/cursor trail driven by physics and pointer motion.',
+    category: 'Animations',
+    name: 'Ribbons',
+    docsUrl: 'https://vue-bits.dev/animations/ribbons',
+    tags: []
+  },
+  'Animations/ShapeBlur': {
+    videoUrl: '/assets/videos/shapeblur.webm',
+    description: 'Morphing blurred geometric shape. The effect occurs on hover.',
+    category: 'Animations',
+    name: 'ShapeBlur',
+    docsUrl: 'https://vue-bits.dev/animations/shape-blur',
+    tags: []
+  },
+  'Animations/SplashCursor': {
+    videoUrl: '/assets/videos/splashcursor.webm',
+    description: 'Liquid splash burst at cursor with curling ripples and waves.',
+    category: 'Animations',
+    name: 'SplashCursor',
+    docsUrl: 'https://vue-bits.dev/animations/splash-cursor',
+    tags: []
+  },
+  'Animations/StarBorder': {
+    videoUrl: '/assets/videos/starborder.webm',
+    description: 'Animated star / sparkle border orbiting content with twinkle pulses.',
+    category: 'Animations',
+    name: 'StarBorder',
+    docsUrl: 'https://vue-bits.dev/animations/star-border',
+    tags: []
+  },
+  'Animations/StickerPeel': {
+    videoUrl: '/assets/videos/stickerpeel.webm',
+    description: 'Sticker corner lift + peel interaction using 3D transform and shadow depth.',
+    category: 'Animations',
+    name: 'StickerPeel',
+    docsUrl: 'https://vue-bits.dev/animations/sticker-peel',
+    tags: []
+  },
+  'Animations/TargetCursor': {
+    videoUrl: '/assets/videos/targetcursor.webm',
+    description: 'A cursor follow animation with 4 corners that lock onto targets.',
+    category: 'Animations',
+    name: 'TargetCursor',
+    docsUrl: 'https://vue-bits.dev/animations/target-cursor',
+    tags: []
+  },
+  'Animations/LaserFlow': {
+    videoUrl: '/assets/videos/laserflow.webm',
+    description: 'Dynamic laser light that flows onto a surface, customizable effect.',
+    category: 'Animations',
+    name: 'LaserFlow',
+    docsUrl: 'https://vue-bits.dev/animations/laser-flow',
+    tags: []
+  },
+
+  //! Text Animations -------------------------------------------------------------------------------------------------------------------------------
+
+  'TextAnimations/AsciiText': {
+    videoUrl: '/assets/videos/asciitext.webm',
+    description: 'Renders text with an animated ASCII background for a retro feel.',
+    category: 'TextAnimations',
+    name: 'ASCIIText',
+    docsUrl: 'https://vue-bits.dev/text-animations/ascii-text',
+    tags: []
+  },
+  'TextAnimations/BlurText': {
+    videoUrl: '/assets/videos/blurtext.webm',
+    description: 'Text starts blurred then crisply resolves for a soft-focus reveal effect.',
+    category: 'TextAnimations',
+    name: 'BlurText',
+    docsUrl: 'https://vue-bits.dev/text-animations/blur-text',
+    tags: []
+  },
+  'TextAnimations/CircularText': {
+    videoUrl: '/assets/videos/circulartext.webm',
+    description: 'Layouts characters around a circle with optional rotation animation.',
+    category: 'TextAnimations',
+    name: 'CircularText',
+    docsUrl: 'https://vue-bits.dev/text-animations/circular-text',
+    tags: []
+  },
+  'TextAnimations/CountUp': {
+    videoUrl: '/assets/videos/countup.webm',
+    description: 'Animated number counter supporting formatting and decimals.',
+    category: 'TextAnimations',
+    name: 'CountUp',
+    docsUrl: 'https://vue-bits.dev/text-animations/count-up',
+    tags: []
+  },
+  'TextAnimations/CurvedLoop': {
+    videoUrl: '/assets/videos/curvedloop.webm',
+    description: 'Flowing looping text path along a customizable curve with drag interaction.',
+    category: 'TextAnimations',
+    name: 'CurvedLoop',
+    docsUrl: 'https://vue-bits.dev/text-animations/curved-loop',
+    tags: []
+  },
+  'TextAnimations/DecryptedText': {
+    videoUrl: '/assets/videos/decryptedtext.webm',
+    description: 'Hacker-style decryption cycling random glyphs until resolving to real text.',
+    category: 'TextAnimations',
+    name: 'DecryptedText',
+    docsUrl: 'https://vue-bits.dev/text-animations/decrypted-text',
+    tags: []
+  },
+  'TextAnimations/FallingText': {
+    videoUrl: '/assets/videos/fallingtext.webm',
+    description: 'Characters fall with gravity + bounce creating a playful entrance.',
+    category: 'TextAnimations',
+    name: 'FallingText',
+    docsUrl: 'https://vue-bits.dev/text-animations/falling-text',
+    tags: []
+  },
+  'TextAnimations/FuzzyText': {
+    videoUrl: '/assets/videos/fuzzytext.webm',
+    description: 'Vibrating fuzzy text with controllable hover intensity.',
+    category: 'TextAnimations',
+    name: 'FuzzyText',
+    docsUrl: 'https://vue-bits.dev/text-animations/fuzzy-text',
+    tags: []
+  },
+  'TextAnimations/GlitchText': {
+    videoUrl: '/assets/videos/glitchtext.webm',
+    description: 'RGB split and distortion glitch effect with jitter effects.',
+    category: 'TextAnimations',
+    name: 'GlitchText',
+    docsUrl: 'https://vue-bits.dev/text-animations/glitch-text',
+    tags: []
+  },
+  'TextAnimations/GradientText': {
+    videoUrl: '/assets/videos/gradienttext.webm',
+    description: 'Animated gradient sweep across live text with speed and color control.',
+    category: 'TextAnimations',
+    name: 'GradientText',
+    docsUrl: 'https://vue-bits.dev/text-animations/gradient-text',
+    tags: []
+  },
+  'TextAnimations/RotatingText': {
+    videoUrl: '/assets/videos/rotatingtext.webm',
+    description: 'Cycles through multiple phrases with 3D rotate / flip transitions.',
+    category: 'TextAnimations',
+    name: 'RotatingText',
+    docsUrl: 'https://vue-bits.dev/text-animations/rotating-text',
+    tags: []
+  },
+  'TextAnimations/ScrambledText': {
+    videoUrl: '/assets/videos/scrambledtext.webm',
+    description: 'Detects cursor position and applies a distortion effect to text.',
+    category: 'TextAnimations',
+    name: 'ScrambledText',
+    docsUrl: 'https://vue-bits.dev/text-animations/scrambled-text',
+    tags: []
+  },
+  'TextAnimations/ScrollFloat': {
+    videoUrl: '/assets/videos/scrollfloat.webm',
+    description: 'Text gently floats / parallax shifts on scroll.',
+    category: 'TextAnimations',
+    name: 'ScrollFloat',
+    docsUrl: 'https://vue-bits.dev/text-animations/scroll-float',
+    tags: []
+  },
+  'TextAnimations/ScrollReveal': {
+    videoUrl: '/assets/videos/scrollreveal.webm',
+    description: 'Text gently unblurs and reveals on scroll.',
+    category: 'TextAnimations',
+    name: 'ScrollReveal',
+    docsUrl: 'https://vue-bits.dev/text-animations/scroll-reveal',
+    tags: []
+  },
+  'TextAnimations/ScrollVelocity': {
+    videoUrl: '/assets/videos/scrollvelocity.webm',
+    description: "Text marquee animatio - speed and distortion scale with user's scroll velocity.",
+    category: 'TextAnimations',
+    name: 'ScrollVelocity',
+    docsUrl: 'https://vue-bits.dev/text-animations/scroll-velocity',
+    tags: []
+  },
+  'TextAnimations/ShinyText': {
+    videoUrl: '/assets/videos/shinytext.webm',
+    description: 'Metallic sheen sweeps across text producing a reflective highlight.',
+    category: 'TextAnimations',
+    name: 'ShinyText',
+    docsUrl: 'https://vue-bits.dev/text-animations/shiny-text',
+    tags: []
+  },
+  'TextAnimations/SplitText': {
+    videoUrl: '/assets/videos/splittext.webm',
+    description: 'Splits text into characters / words for staggered entrance animation.',
+    category: 'TextAnimations',
+    name: 'SplitText',
+    docsUrl: 'https://vue-bits.dev/text-animations/split-text',
+    tags: []
+  },
+  'TextAnimations/TextCursor': {
+    videoUrl: '/assets/videos/textcursor.webm',
+    description: 'Make any text element follow your cursor, leaving a trail of copies behind it.',
+    category: 'TextAnimations',
+    name: 'TextCursor',
+    docsUrl: 'https://vue-bits.dev/text-animations/text-cursor',
+    tags: []
+  },
+  'TextAnimations/TextPressure': {
+    videoUrl: '/assets/videos/textpressure.webm',
+    description: 'Characters scale / warp interactively based on pointer pressure zone.',
+    category: 'TextAnimations',
+    name: 'TextPressure',
+    docsUrl: 'https://vue-bits.dev/text-animations/text-pressure',
+    tags: []
+  },
+  'TextAnimations/TextType': {
+    videoUrl: '/assets/videos/texttype.webm',
+    description: 'Typewriter effect with blinking cursor and adjustable typing cadence.',
+    category: 'TextAnimations',
+    name: 'TextType',
+    docsUrl: 'https://vue-bits.dev/text-animations/text-type',
+    tags: []
+  },
+  'TextAnimations/TrueFocus': {
+    videoUrl: '/assets/videos/truefocus.webm',
+    description: 'Applies dynamic blur / clarity based over a series of words in order.',
+    category: 'TextAnimations',
+    name: 'TrueFocus',
+    docsUrl: 'https://vue-bits.dev/text-animations/true-focus',
+    tags: []
+  },
+  'TextAnimations/VariableProximity': {
+    videoUrl: '/assets/videos/variableproximity.webm',
+    description: 'Letter styling changes continuously with pointer distance mapping.',
+    category: 'TextAnimations',
+    name: 'VariableProximity',
+    docsUrl: 'https://vue-bits.dev/text-animations/variable-proximity',
+    tags: []
+  },
+  'TextAnimations/Shuffle': {
+    videoUrl: '/assets/videos/shuffle.webm',
+    description: 'Animated text reveal where characters shuffle before settling.',
+    category: 'TextAnimations',
+    name: 'Shuffle',
+    docsUrl: 'https://vue-bits.dev/text-animations/shuffle',
+    tags: []
+  },
+
+  //! Components -------------------------------------------------------------------------------------------------------------------------------
+  'Components/AnimatedList': {
+    videoUrl: '/assets/videos/animatedlist.webm',
+    description: 'List items enter with staggered motion variants for polished reveals.',
+    category: 'Components',
+    name: 'AnimatedList',
+    docsUrl: 'https://vue-bits.dev/components/animated-list',
+    tags: []
+  },
+  'Components/BounceCards': {
+    videoUrl: '/assets/videos/bouncecards.webm',
+    description: 'Cards bounce that bounce in on mount.',
+    category: 'Components',
+    name: 'BounceCards',
+    docsUrl: 'https://vue-bits.dev/components/bounce-cards',
+    tags: []
+  },
+  'Components/BubbleMenu': {
+    videoUrl: '/assets/videos/bubblemenu.webm',
+    description: 'Floating circular expanding menu with staggered item reveal.',
+    category: 'Components',
+    name: 'BubbleMenu',
+    docsUrl: 'https://vue-bits.dev/components/bubble-menu',
+    tags: []
+  },
+  'Components/CardNav': {
+    videoUrl: '/assets/videos/cardnav.webm',
+    description: 'Expandable navigation bar with card panels revealing nested links.',
+    category: 'Components',
+    name: 'CardNav',
+    docsUrl: 'https://vue-bits.dev/components/card-nav',
+    tags: []
+  },
+  'Components/CardSwap': {
+    videoUrl: '/assets/videos/cardswap.webm',
+    description: 'Cards animate position swapping with smooth layout transitions.',
+    category: 'Components',
+    name: 'CardSwap',
+    docsUrl: 'https://vue-bits.dev/components/card-swap',
+    tags: []
+  },
+  'Components/Carousel': {
+    videoUrl: '/assets/videos/carousel.webm',
+    description: 'Responsive carousel with touch gestures, looping and transitions.',
+    category: 'Components',
+    name: 'Carousel',
+    docsUrl: 'https://vue-bits.dev/components/carousel',
+    tags: []
+  },
+  'Components/ChromaGrid': {
+    videoUrl: '/assets/videos/chromagrid.webm',
+    description: 'A responsive grid of grayscale tiles. Hovering the grid reaveals their colors.',
+    category: 'Components',
+    name: 'ChromaGrid',
+    docsUrl: 'https://vue-bits.dev/components/chroma-grid',
+    tags: []
+  },
+  'Components/CircularGallery': {
+    videoUrl: '/assets/videos/circulargallery.webm',
+    description: 'Circular orbit gallery rotating images.',
+    category: 'Components',
+    name: 'CircularGallery',
+    docsUrl: 'https://vue-bits.dev/components/circular-gallery',
+    tags: []
+  },
+  'Components/Counter': {
+    videoUrl: '/assets/videos/counter.webm',
+    description: 'Flexible animated counter supporting increments + easing.',
+    category: 'Components',
+    name: 'Counter',
+    docsUrl: 'https://vue-bits.dev/components/counter',
+    tags: []
+  },
+  'Components/DecayCard': {
+    videoUrl: '/assets/videos/decaycard.webm',
+    description: 'Hover parallax effect that disintegrates the content of a card.',
+    category: 'Components',
+    name: 'DecayCard',
+    docsUrl: 'https://vue-bits.dev/components/decay-card',
+    tags: []
+  },
+  'Components/Dock': {
+    videoUrl: '/assets/videos/dock.webm',
+    description: 'macOS style magnifying dock with proximity scaling of icons.',
+    category: 'Components',
+    name: 'Dock',
+    docsUrl: 'https://vue-bits.dev/components/dock',
+    tags: []
+  },
+  'Components/DomeGallery': {
+    videoUrl: '/assets/videos/domegallery.webm',
+    description: 'Immersive 3D dome gallery projecting images on a hemispheric surface.',
+    category: 'Components',
+    name: 'DomeGallery',
+    docsUrl: 'https://vue-bits.dev/components/dome-gallery',
+    tags: []
+  },
+  'Components/ElasticSlider': {
+    videoUrl: '/assets/videos/elasticslider.webm',
+    description: 'Slider handle stretches elastically then snaps with spring physics.',
+    category: 'Components',
+    name: 'ElasticSlider',
+    docsUrl: 'https://vue-bits.dev/components/elastic-slider',
+    tags: []
+  },
+  'Components/FlowingMenu': {
+    videoUrl: '/assets/videos/flowingmenu.webm',
+    description: 'Liquid flowing active indicator glides between menu items.',
+    category: 'Components',
+    name: 'FlowingMenu',
+    docsUrl: 'https://vue-bits.dev/components/flowing-menu',
+    tags: []
+  },
+  'Components/FluidGlass': {
+    videoUrl: '/assets/videos/fluidglass.webm',
+    description: 'Glassmorphism container with animated liquid distortion refraction.',
+    category: 'Components',
+    name: 'FluidGlass',
+    docsUrl: 'https://vue-bits.dev/components/fluid-glass',
+    tags: []
+  },
+  'Components/FlyingPosters': {
+    videoUrl: '/assets/videos/flyingposters.webm',
+    description: '3D posters rotate on scroll infinitely.',
+    category: 'Components',
+    name: 'FlyingPosters',
+    docsUrl: 'https://vue-bits.dev/components/flying-posters',
+    tags: []
+  },
+  'Components/Folder': {
+    videoUrl: '/assets/videos/folder.webm',
+    description: 'Interactive folder opens to reveal nested content smooth motion.',
+    category: 'Components',
+    name: 'Folder',
+    docsUrl: 'https://vue-bits.dev/components/folder',
+    tags: []
+  },
+  'Components/GlassIcons': {
+    videoUrl: '/assets/videos/glassicons.webm',
+    description: 'Icon set styled with frosted glass blur.',
+    category: 'Components',
+    name: 'GlassIcons',
+    docsUrl: 'https://vue-bits.dev/components/glass-icons',
+    tags: []
+  },
+  'Components/GlassSurface': {
+    videoUrl: '/assets/videos/glasssurface.webm',
+    description: 'Advanced Apple-style glass surface with real-time distortion + lighting.',
+    category: 'Components',
+    name: 'GlassSurface',
+    docsUrl: 'https://vue-bits.dev/components/glass-surface',
+    tags: []
+  },
+  'Components/GooeyNav': {
+    videoUrl: '/assets/videos/gooeynav.webm',
+    description: 'Navigation indicator morphs with gooey blob transitions between items.',
+    category: 'Components',
+    name: 'GooeyNav',
+    docsUrl: 'https://vue-bits.dev/components/gooey-nav',
+    tags: []
+  },
+  'Components/InfiniteMenu': {
+    videoUrl: '/assets/videos/infinitemenu.webm',
+    description: 'Horizontally looping menu effect that scrolls endlessly with seamless wrap.',
+    category: 'Components',
+    name: 'InfiniteMenu',
+    docsUrl: 'https://vue-bits.dev/components/infinite-menu',
+    tags: []
+  },
+  'Components/InfiniteScroll': {
+    videoUrl: '/assets/videos/infinitescroll.webm',
+    description: 'Infinite scrolling container auto-loads content near viewport end.',
+    category: 'Components',
+    name: 'InfiniteScroll',
+    docsUrl: 'https://vue-bits.dev/components/infinite-scroll',
+    tags: []
+  },
+  'Components/Lanyard': {
+    videoUrl: '/assets/videos/lanyard.webm',
+    description: 'Swinging 3D lanyard / badge card with realistic inertial motion.',
+    category: 'Components',
+    name: 'Lanyard',
+    docsUrl: 'https://vue-bits.dev/components/lanyard',
+    tags: []
+  },
+  'Components/MagicBento': {
+    videoUrl: '/assets/videos/magicbento.webm',
+    description: 'Interactive bento grid tiles expand + animate with various options.',
+    category: 'Components',
+    name: 'MagicBento',
+    docsUrl: 'https://vue-bits.dev/components/magic-bento',
+    tags: []
+  },
+  'Components/Masonry': {
+    videoUrl: '/assets/videos/masonry.webm',
+    description: 'Responsive masonry layout with animated reflow + gaps optimization.',
+    category: 'Components',
+    name: 'Masonry',
+    docsUrl: 'https://vue-bits.dev/components/masonry',
+    tags: []
+  },
+  'Components/ModelViewer': {
+    videoUrl: '/assets/videos/modelviewer.webm',
+    description: 'Three.js model viewer with orbit controls and lighting presets.',
+    category: 'Components',
+    name: 'ModelViewer',
+    docsUrl: 'https://vue-bits.dev/components/model-viewer',
+    tags: []
+  },
+  'Components/PillNav': {
+    videoUrl: '/assets/videos/pillnav.webm',
+    description: 'Minimal pill nav with sliding active highlight + smooth easing.',
+    category: 'Components',
+    name: 'PillNav',
+    docsUrl: 'https://vue-bits.dev/components/pill-nav',
+    tags: []
+  },
+  'Components/PixelCard': {
+    videoUrl: '/assets/videos/pixelcard.webm',
+    description: 'Card content revealed through pixel expansion transition.',
+    category: 'Components',
+    name: 'PixelCard',
+    docsUrl: 'https://vue-bits.dev/components/pixel-card',
+    tags: []
+  },
+  'Components/ProfileCard': {
+    videoUrl: '/assets/videos/profilecard.webm',
+    description: 'Animated profile card glare with 3D hover effect.',
+    category: 'Components',
+    name: 'ProfileCard',
+    docsUrl: 'https://vue-bits.dev/components/profile-card',
+    tags: []
+  },
+  'Components/ScrollStack': {
+    videoUrl: '/assets/videos/scrollstack.webm',
+    description: 'Overlapping card stack reveals on scroll with depth layering.',
+    category: 'Components',
+    name: 'ScrollStack',
+    docsUrl: 'https://vue-bits.dev/components/scroll-stack',
+    tags: []
+  },
+  'Components/SpotlightCard': {
+    videoUrl: '/assets/videos/spotlightcard.webm',
+    description: 'Dynamic spotlight follows cursor casting gradient illumination.',
+    category: 'Components',
+    name: 'SpotlightCard',
+    docsUrl: 'https://vue-bits.dev/components/spotlight-card',
+    tags: []
+  },
+  'Components/Stack': {
+    videoUrl: '/assets/videos/stack.webm',
+    description: 'Layered stack with swipe animations and smooth transitions.',
+    category: 'Components',
+    name: 'Stack',
+    docsUrl: 'https://vue-bits.dev/components/stack',
+    tags: []
+  },
+  'Components/Stepper': {
+    videoUrl: '/assets/videos/stepper.webm',
+    description: 'Animated multi-step progress indicator with active state transitions.',
+    category: 'Components',
+    name: 'Stepper',
+    docsUrl: 'https://vue-bits.dev/components/stepper',
+    tags: []
+  },
+  'Components/TiltedCard': {
+    videoUrl: '/assets/videos/tiltedcard.webm',
+    description: '3D perspective tilt card reacting to pointer.',
+    category: 'Components',
+    name: 'TiltedCard',
+    docsUrl: 'https://vue-bits.dev/components/tilted-card',
+    tags: []
+  },
+  'Components/StaggeredMenu': {
+    videoUrl: '/assets/videos/staggeredmenu.webm',
+    description: 'Menu with staggered item animations and smooth transitions on open/close.',
+    category: 'Components',
+    name: 'StaggeredMenu',
+    docsUrl: 'https://vue-bits.dev/components/staggered-menu',
+    tags: []
+  },
+
+  //! Backgrounds -------------------------------------------------------------------------------------------------------------------------------
+  'Backgrounds/Aurora': {
+    videoUrl: '/assets/videos/aurora.webm',
+    description: 'Flowing aurora gradient background.',
+    category: 'Backgrounds',
+    name: 'Aurora',
+    docsUrl: 'https://vue-bits.dev/backgrounds/aurora',
+    tags: []
+  },
+  'Backgrounds/Balatro': {
+    videoUrl: '/assets/videos/balatro.webm',
+    description: 'The balatro shader, fully customizalbe and interactive.',
+    category: 'Backgrounds',
+    name: 'Balatro',
+    docsUrl: 'https://vue-bits.dev/backgrounds/balatro',
+    tags: []
+  },
+  'Backgrounds/Ballpit': {
+    videoUrl: '/assets/videos/ballpit.webm',
+    description: 'Physics ball pit simulation with bouncing colorful spheres.',
+    category: 'Backgrounds',
+    name: 'Ballpit',
+    docsUrl: 'https://vue-bits.dev/backgrounds/ballpit',
+    tags: []
+  },
+  'Backgrounds/Beams': {
+    videoUrl: '/assets/videos/beams.webm',
+    description: 'Crossing animated ribbons with customizable properties.',
+    category: 'Backgrounds',
+    name: 'Beams',
+    docsUrl: 'https://vue-bits.dev/backgrounds/beams',
+    tags: []
+  },
+  'Backgrounds/ColorBends': {
+    videoUrl: '/assets/videos/colorbends.webm',
+    description: 'Vibrant color bends with smooth flowing animation.',
+    category: 'Backgrounds',
+    name: 'ColorBends',
+    docsUrl: 'https://vue-bits.dev/backgrounds/color-bends',
+    tags: []
+  },
+  'Backgrounds/DarkVeil': {
+    videoUrl: '/assets/videos/darkveil.webm',
+    description: 'Subtle dark background with a smooth animation and postprocessing.',
+    category: 'Backgrounds',
+    name: 'DarkVeil',
+    docsUrl: 'https://vue-bits.dev/backgrounds/dark-veil',
+    tags: []
+  },
+  'Backgrounds/Dither': {
+    videoUrl: '/assets/videos/dither.webm',
+    description: 'Retro dithered noise shader background.',
+    category: 'Backgrounds',
+    name: 'Dither',
+    docsUrl: 'https://vue-bits.dev/backgrounds/dither',
+    tags: []
+  },
+  'Backgrounds/DotGrid': {
+    videoUrl: '/assets/videos/dotgrid.webm',
+    description: 'Animated dot grid with cursor interactions.',
+    category: 'Backgrounds',
+    name: 'DotGrid',
+    docsUrl: 'https://vue-bits.dev/backgrounds/dot-grid',
+    tags: []
+  },
+  'Backgrounds/FaultyTerminal': {
+    videoUrl: '/assets/videos/faultyterminal.webm',
+    description: 'Terminal CRT scanline squares effect with flicker + noise.',
+    category: 'Backgrounds',
+    name: 'FaultyTerminal',
+    docsUrl: 'https://vue-bits.dev/backgrounds/faulty-terminal',
+    tags: []
+  },
+  'Backgrounds/Galaxy': {
+    videoUrl: '/assets/videos/galaxy.webm',
+    description: 'Parallax realistic starfield with pointer interactions.',
+    category: 'Backgrounds',
+    name: 'Galaxy',
+    docsUrl: 'https://vue-bits.dev/backgrounds/galaxy',
+    tags: []
+  },
+  'Backgrounds/GradientBlinds': {
+    videoUrl: '/assets/videos/gradientblinds.webm',
+    description: 'Layered gradient blinds with spotlight and noise distortion.',
+    category: 'Backgrounds',
+    name: 'GradientBlinds',
+    docsUrl: 'https://vue-bits.dev/backgrounds/gradient-blinds',
+    tags: []
+  },
+  'Backgrounds/GridDistortion': {
+    videoUrl: '/assets/videos/griddistortion.webm',
+    description: 'Warped grid mesh distorts smoothly reacting to cursor.',
+    category: 'Backgrounds',
+    name: 'GridDistortion',
+    docsUrl: 'https://vue-bits.dev/backgrounds/grid-distortion',
+    tags: []
+  },
+  'Backgrounds/GridMotion': {
+    videoUrl: '/assets/videos/gridmotion.webm',
+    description: 'Perspective moving grid lines based on cusror position.',
+    category: 'Backgrounds',
+    name: 'GridMotion',
+    docsUrl: 'https://vue-bits.dev/backgrounds/grid-motion',
+    tags: []
+  },
+  'Backgrounds/Hyperspeed': {
+    videoUrl: '/assets/videos/hyperspeed.webm',
+    description: 'Animated lines continously moving to simulate hyperspace travel on click hold.',
+    category: 'Backgrounds',
+    name: 'Hyperspeed',
+    docsUrl: 'https://vue-bits.dev/backgrounds/hyperspeed',
+    tags: []
+  },
+  'Backgrounds/Iridescence': {
+    videoUrl: '/assets/videos/iridescence.webm',
+    description: 'Slick iridescent shader with shifting waves.',
+    category: 'Backgrounds',
+    name: 'Iridescence',
+    docsUrl: 'https://vue-bits.dev/backgrounds/iridescence',
+    tags: []
+  },
+  'Backgrounds/LetterGlitch': {
+    videoUrl: '/assets/videos/letterglitch.webm',
+    description: 'Matrix style letter animation.',
+    category: 'Backgrounds',
+    name: 'LetterGlitch',
+    docsUrl: 'https://vue-bits.dev/backgrounds/letter-glitch',
+    tags: []
+  },
+  'Backgrounds/LightRays': {
+    videoUrl: '/assets/videos/lightrays.webm',
+    description: 'Volumetric light rays/beams with customizable direction.',
+    category: 'Backgrounds',
+    name: 'LightRays',
+    docsUrl: 'https://vue-bits.dev/backgrounds/light-rays',
+    tags: []
+  },
+  'Backgrounds/Lightning': {
+    videoUrl: '/assets/videos/lightning.webm',
+    description: 'Procedural lightning bolts with branching and glow flicker.',
+    category: 'Backgrounds',
+    name: 'Lightning',
+    docsUrl: 'https://vue-bits.dev/backgrounds/lightning',
+    tags: []
+  },
+  'Backgrounds/LiquidChrome': {
+    videoUrl: '/assets/videos/liquidchrome.webm',
+    description: 'Liquid metallic chrome shader with flowing reflective surface.',
+    category: 'Backgrounds',
+    name: 'LiquidChrome',
+    docsUrl: 'https://vue-bits.dev/backgrounds/liquid-chrome',
+    tags: []
+  },
+  'Backgrounds/Orb': {
+    videoUrl: '/assets/videos/orb.webm',
+    description: 'Floating energy orb with customizable hover effect.',
+    category: 'Backgrounds',
+    name: 'Orb',
+    docsUrl: 'https://vue-bits.dev/backgrounds/orb',
+    tags: []
+  },
+  'Backgrounds/Particles': {
+    videoUrl: '/assets/videos/particles.webm',
+    description: 'Configurable particle system.',
+    category: 'Backgrounds',
+    name: 'Particles',
+    docsUrl: 'https://vue-bits.dev/backgrounds/particles',
+    tags: []
+  },
+  'Backgrounds/PixelBlast': {
+    videoUrl: '/assets/videos/pixelblast.webm',
+    description: 'Exploding pixel particle bursts with optional liquid postprocessing.',
+    category: 'Backgrounds',
+    name: 'PixelBlast',
+    docsUrl: 'https://vue-bits.dev/backgrounds/pixel-blast',
+    tags: []
+  },
+  'Backgrounds/Plasma': {
+    videoUrl: '/assets/videos/plasma.webm',
+    description: 'Organic plasma gradients swirl + morph with smooth turbulence.',
+    category: 'Backgrounds',
+    name: 'Plasma',
+    docsUrl: 'https://vue-bits.dev/backgrounds/plasma',
+    tags: []
+  },
+  'Backgrounds/Prism': {
+    videoUrl: '/assets/videos/prism.webm',
+    description: 'Rotating prism with configurable intensity, size, and colors.',
+    category: 'Backgrounds',
+    name: 'Prism',
+    docsUrl: 'https://vue-bits.dev/backgrounds/prism',
+    tags: []
+  },
+  'Backgrounds/PrismaticBurst': {
+    videoUrl: '/assets/videos/prismaticburst.webm',
+    description: 'Burst of light rays with controllable color, distortion, amount.',
+    category: 'Backgrounds',
+    name: 'PrismaticBurst',
+    docsUrl: 'https://vue-bits.dev/backgrounds/prismatic-burst',
+    tags: []
+  },
+  'Backgrounds/RippleGrid': {
+    videoUrl: '/assets/videos/ripplegrid.webm',
+    description: 'A grid that continously animates with a ripple effect.',
+    category: 'Backgrounds',
+    name: 'RippleGrid',
+    docsUrl: 'https://vue-bits.dev/backgrounds/ripple-grid',
+    tags: []
+  },
+  'Backgrounds/Silk': {
+    videoUrl: '/assets/videos/silk.webm',
+    description: 'Smooth waves background with soft lighting.',
+    category: 'Backgrounds',
+    name: 'Silk',
+    docsUrl: 'https://vue-bits.dev/backgrounds/silk',
+    tags: []
+  },
+  'Backgrounds/Squares': {
+    videoUrl: '/assets/videos/squares.webm',
+    description: 'Animated squares with scaling + direction customization.',
+    category: 'Backgrounds',
+    name: 'Squares',
+    docsUrl: 'https://vue-bits.dev/backgrounds/squares',
+    tags: []
+  },
+  'Backgrounds/Threads': {
+    videoUrl: '/assets/videos/threads.webm',
+    description: 'Animated pattern of lines forming a fabric-like motion.',
+    category: 'Backgrounds',
+    name: 'Threads',
+    docsUrl: 'https://vue-bits.dev/backgrounds/threads',
+    tags: []
+  },
+  'Backgrounds/Waves': {
+    videoUrl: '/assets/videos/waves.webm',
+    description: 'Layered lines that form smooth wave patterns with animation.',
+    category: 'Backgrounds',
+    name: 'Waves',
+    docsUrl: 'https://vue-bits.dev/backgrounds/waves',
+    tags: []
+  },
+  'Backgrounds/LiquidEther': {
+    videoUrl: '/assets/videos/liquidether.webm',
+    description: 'Interactive liquid shader with flowing distortion and customizable colors.',
+    category: 'Backgrounds',
+    name: 'LiquidEther',
+    docsUrl: 'https://vue-bits.dev/backgrounds/liquid-ether',
+    tags: []
+  }
+};
diff --git a/src/css/main.css b/src/css/main.css
index 138fa21..75248bf 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -2,3 +2,4 @@
 @import './sidebar.css';
 @import './category.css';
 @import './landing.css';
+@import './transitions.css';
diff --git a/src/css/transitions.css b/src/css/transitions.css
new file mode 100644
index 0000000..9269d97
--- /dev/null
+++ b/src/css/transitions.css
@@ -0,0 +1,42 @@
+.page-transition-fade {
+  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.page-transition-fade-out {
+  opacity: 0;
+}
+
+.page-transition-fade-in {
+  opacity: 1;
+}
+
+.sidebar-item {
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  padding-left: 0;
+}
+
+.sidebar-item:hover {
+  padding-left: 2px;
+}
+
+.sidebar-item.transitioning {
+  pointer-events: none;
+}
+
+.category-page.loading {
+  pointer-events: none;
+}
+
+.skeleton-loader {
+  animation: fadeIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
diff --git a/src/pages/CategoryPage.vue b/src/pages/CategoryPage.vue
index 0e72ff4..f50dbf1 100644
--- a/src/pages/CategoryPage.vue
+++ b/src/pages/CategoryPage.vue
@@ -1,70 +1,52 @@
 <template>
-  <div ref="scrollRef">
-    <div class="page-transition-fade">
-      <h2 class="sub-category">{{ decodedLabel }}</h2>
-
-      <Suspense>
-        <template #default>
-          <component :is="SubcategoryComponent" v-if="SubcategoryComponent" />
-        </template>
-
-        <template #fallback>
-          <div class="loading-placeholder"></div>
-        </template>
-      </Suspense>
+  <IndexPage v-if="isIndexPage" />
+
+  <div class="page-transition-fade" v-else>
+    <h2 class="sub-category">{{ decodedLabel }}</h2>
+
+    <Suspense v-if="SubcategoryComponent">
+      <template #default>
+        <component :is="SubcategoryComponent" v-if="SubcategoryComponent" />
+      </template>
+
+      <template #fallback>
+        <div class="loading-placeholder"></div>
+      </template>
+    </Suspense>
+    <div v-else class="p-6">
+      <h3 class="font-semibold text-white text-lg">Not Found</h3>
+      <p class="text-[#a6a6a6] text-sm">This section is unavailable.</p>
     </div>
-
-    <BackToTopButton />
   </div>
+
+  <BackToTopButton />
 </template>
 
 <script setup lang="ts">
-import { computed, watch, onMounted, nextTick, defineAsyncComponent, useTemplateRef } from 'vue';
+import BackToTopButton from '@/components/common/BackToTopButton.vue';
+import { computed, defineAsyncComponent, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { componentMap } from '../constants/Components';
 import { decodeLabel } from '../utils/utils';
-import BackToTopButton from '@/components/common/BackToTopButton.vue';
+import IndexPage from './IndexPage.vue';
 
 const route = useRoute();
-const scrollRef = useTemplateRef<HTMLDivElement>('scrollRef');
 
 const subcategory = computed(() => route.params.subcategory as string);
 const decodedLabel = computed(() => decodeLabel(subcategory.value));
+const isIndexPage = computed(() => subcategory.value === 'index');
 
 const SubcategoryComponent = computed(() => {
-  if (!subcategory.value) {
-    return null;
-  }
-
-  const componentLoader = componentMap[subcategory.value as keyof typeof componentMap];
-
-  if (!componentLoader) {
-    return null;
-  }
-
-  return defineAsyncComponent(componentLoader);
+  const key = subcategory.value as keyof typeof componentMap;
+  const loader = componentMap[key];
+  return loader ? defineAsyncComponent(loader) : null;
 });
 
 watch(
   decodedLabel,
   label => {
-    if (label) {
-      document.title = `Vue Bits - ${label}`;
-    }
+    if (label) document.title = `Vue Bits - ${label}`;
   },
   { immediate: true }
 );
-
-watch(subcategory, async () => {
-  if (scrollRef.value) {
-    await nextTick();
-    scrollRef.value.scrollTo(0, 0);
-  }
-});
-
-onMounted(() => {
-  if (scrollRef.value) {
-    scrollRef.value.scrollTo(0, 0);
-  }
-});
 </script>
diff --git a/src/pages/FavoritesPage.vue b/src/pages/FavoritesPage.vue
new file mode 100644
index 0000000..fca1c00
--- /dev/null
+++ b/src/pages/FavoritesPage.vue
@@ -0,0 +1,46 @@
+<template>
+  <main class="app-container">
+    <Header />
+
+    <section class="category-wrapper">
+      <Sidebar />
+
+      <div class="category-page">
+        <ComponentList :list="savedList" title="Favorites" sorting="none" has-delete-button />
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import ComponentList from '@/components/common/ComponentList.vue';
+import Header from '@/components/navs/Header.vue';
+import Sidebar from '@/components/navs/Sidebar.vue';
+import { componentMetadata } from '@/constants/Information';
+import { getSavedComponents } from '@/utils/favorites';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+
+const savedKeys = ref<string[]>(getSavedComponents());
+
+const update = () => (savedKeys.value = getSavedComponents());
+const onStorage = (e?: StorageEvent | null) => {
+  if (!e || e.key === 'savedComponents') update();
+};
+
+onMounted(() => {
+  window.addEventListener('favorites:updated', update);
+  window.addEventListener('storage', onStorage);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('favorites:updated', update);
+  window.removeEventListener('storage', onStorage);
+});
+
+const savedList = computed(() => {
+  const entries = (savedKeys.value || [])
+    .filter(k => typeof k === 'string' && k.includes('/') && componentMetadata?.[k])
+    .map(k => [k, componentMetadata[k]]);
+  return Object.fromEntries(entries);
+});
+</script>
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
new file mode 100644
index 0000000..d3cea12
--- /dev/null
+++ b/src/pages/IndexPage.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <title>Vue Bits - Component Index</title>
+    <ComponentList :list="componentMetadata" title="Index" sorting="alphabetical" has-favorite-button />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ComponentList from '@/components/common/ComponentList.vue';
+import { componentMetadata } from '@/constants/Information';
+</script>
diff --git a/src/router/index.ts b/src/router/index.ts
index ff8650d..0cb581b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import LandingPage from '@/pages/LandingPage.vue';
 import CategoryPage from '@/pages/CategoryPage.vue';
+import FavoritesPage from '@/pages/FavoritesPage.vue';
 import CategoryLayout from '@/components/layouts/CategoryLayout.vue';
 
 const router = createRouter({
@@ -21,6 +22,11 @@ const router = createRouter({
           component: CategoryPage
         }
       ]
+    },
+    {
+      path: '/favorites',
+      name: 'favorites',
+      component: FavoritesPage
     }
   ]
 });
diff --git a/src/utils/favorites.ts b/src/utils/favorites.ts
new file mode 100644
index 0000000..0751ad8
--- /dev/null
+++ b/src/utils/favorites.ts
@@ -0,0 +1,66 @@
+const STORAGE_KEY = 'savedComponents';
+
+const read = (): string[] => {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    const parsed = raw ? JSON.parse(raw) : [];
+    return Array.isArray(parsed) ? parsed.filter(x => typeof x === 'string') : [];
+  } catch {
+    return [];
+  }
+};
+
+const write = (list: string[]) => {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
+
+    try {
+      window.dispatchEvent(new CustomEvent('favorites:updated', { detail: list }));
+    } catch {
+      // no-op
+    }
+  } catch {
+    // no-op
+  }
+};
+
+export const getSavedComponents = () => read();
+
+export const isComponentSaved = (key: string) => read().includes(key);
+
+export const addSavedComponent = (key: string) => {
+  const list = read();
+  if (!list.includes(key)) {
+    const next = [...list, key];
+    write(next);
+    return next;
+  }
+  return list;
+};
+
+export const removeSavedComponent = (key: string) => {
+  const list = read();
+  const next = list.filter(item => item !== key);
+  write(next);
+  return next;
+};
+
+export const toggleSavedComponent = (key: string) => {
+  const list = read();
+  if (list.includes(key)) {
+    const next = list.filter(item => item !== key);
+    write(next);
+    return { saved: false, list: next };
+  }
+  const next = [...list, key];
+  write(next);
+  return { saved: true, list: next };
+};
+
+export default {
+  getSavedComponents,
+  isComponentSaved,
+  addSavedComponent,
+  removeSavedComponent,
+  toggleSavedComponent
+};
diff --git a/src/utils/fuzzy.ts b/src/utils/fuzzy.ts
new file mode 100644
index 0000000..0f1ff7c
--- /dev/null
+++ b/src/utils/fuzzy.ts
@@ -0,0 +1,30 @@
+export const levenshtein = (a: string, b: string): number => {
+  const m = a.length,
+    n = b.length;
+  const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
+  for (let i = 0; i <= m; i++) dp[i][0] = i;
+  for (let j = 0; j <= n; j++) dp[0][j] = j;
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      dp[i][j] =
+        a[i - 1] === b[j - 1] ? dp[i - 1][j - 1] : Math.min(dp[i - 1][j - 1] + 1, dp[i][j - 1] + 1, dp[i - 1][j] + 1);
+    }
+  }
+  return dp[m][n];
+};
+
+export const fuzzyMatch = (candidate?: string, query?: string): boolean => {
+  const lowerCandidate = (candidate || '').toLowerCase();
+  const lowerQuery = (query || '').toLowerCase();
+  if (!lowerQuery) return true;
+  if (lowerCandidate.includes(lowerQuery)) return true;
+  const candidateWords = lowerCandidate.split(/\s+/).filter(Boolean);
+  const queryWords = lowerQuery.split(/\s+/).filter(Boolean);
+  return queryWords.every(qw =>
+    candidateWords.some(cw => {
+      const distance = levenshtein(cw, qw);
+      const threshold = Math.max(1, Math.floor(qw.length / 3));
+      return distance <= threshold;
+    })
+  );
+};