Add Noise animation component and demo with adjustable parameters

src/constants/Categories.ts

@@ -33,6 +33,7 @@ export const CATEGORIES = [
     subcategories: [
       'Animated Content',
       'Fade Content',
+      'Noise',
       'Splash Cursor',
       'Pixel Transition',
       'Ribbons',

src/constants/Components.ts

@@ -11,6 +11,7 @@ const animations = {
   'cubes': () => import('../demo/Animations/CubesDemo.vue'),
   'count-up': () => import('../demo/Animations/CountUpDemo.vue'),
   'splash-cursor': () => import('../demo/Animations/SplashCursorDemo.vue'),
+  'noise': () => import('../demo/Animations/NoiseDemo.vue'),
 };
 
 const textAnimations = {

src/constants/code/Animations/noiseCode.ts

@@ -0,0 +1,19 @@
+import code from '@content/Animations/Noise/Noise.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const noise: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/Noise`,
+  usage: `<template>
+  <Noise 
+    :pattern-size="250" 
+    :pattern-scale-x="1" 
+    :pattern-scale-y="1"
+    :pattern-alpha="10"
+  />
+</template>
+
+<script setup lang="ts">
+  import Noise from './Noise.vue'
+</script>`,
+  code
+};