Merge pull request #18 from SayedTahsin/feat/animations-noise

Feat: Noise Animation

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'),
   'blob-cursor': () => import('../demo/Animations/BlobCursorDemo.vue'),
 };
 

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
+};

src/content/Animations/Noise/Noise.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+interface NoiseProps {
+    patternSize?: number;
+    patternScaleX?: number;
+    patternScaleY?: number;
+    patternRefreshInterval?: number;
+    patternAlpha?: number;
+}
+
+const props = withDefaults(defineProps<NoiseProps>(), {
+    patternSize: 250,
+    patternScaleX: 1,
+    patternScaleY: 1,
+    patternRefreshInterval: 2,
+    patternAlpha: 10,
+});
+
+const grainRef = ref<HTMLCanvasElement | null>(null);
+
+let animationId = 0;
+let frame = 0;
+const canvasSize = 1024;
+
+const resize = () => {
+    const canvas = grainRef.value;
+    if (!canvas) return;
+
+    canvas.width = canvasSize;
+    canvas.height = canvasSize;
+    canvas.style.width = '100vw';
+    canvas.style.height = '100vh';
+};
+
+const drawGrain = (ctx: CanvasRenderingContext2D) => {
+    const imageData = ctx.createImageData(canvasSize, canvasSize);
+    const data = imageData.data;
+
+    for (let i = 0; i < data.length; i += 4) {
+        const value = Math.random() * 255;
+        data[i] = value;
+        data[i + 1] = value;
+        data[i + 2] = value;
+        data[i + 3] = props.patternAlpha;
+    }
+
+    ctx.putImageData(imageData, 0, 0);
+};
+
+const loop = (ctx: CanvasRenderingContext2D) => {
+    if (frame % props.patternRefreshInterval === 0) {
+        drawGrain(ctx);
+    }
+    frame++;
+    animationId = requestAnimationFrame(() => loop(ctx));
+};
+
+onMounted(() => {
+    const canvas = grainRef.value;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d', { alpha: true });
+    if (!ctx) return;
+
+    resize();
+    loop(ctx);
+    window.addEventListener('resize', resize);
+});
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resize);
+    cancelAnimationFrame(animationId);
+});
+</script>
+
+<template>
+    <canvas ref="grainRef" class="pointer-events-none absolute top-0 left-0 h-screen w-screen"
+        style="image-rendering: pixelated">
+    </canvas>
+</template>

src/demo/Animations/NoiseDemo.vue

@@ -0,0 +1,83 @@
+<template>
+    <div>
+        <TabbedLayout>
+            <template #preview>
+                <div class="demo-container" style="min-height: 500px; position: relative; overflow: hidden;">
+                    <div class="text-[#2ea043] text-[6rem] font-extrabold text-center opacity-50">
+                        Ooh, edgy!
+                    </div>
+                    <Noise :pattern-size="patternSize" :pattern-scale-x="patternScaleX" :pattern-scale-y="patternScaleY"
+                        :pattern-alpha="patternAlpha" />
+                </div>
+
+                <Customize>
+                    <PreviewSlider title="pattern Size" value-unit="px" v-model="patternSize" :min="50" :max="500"
+                        :step="10" />
+                    <PreviewSlider title="Scale X" v-model="patternScaleX" :min="0.1" :max="5" :step="0.1" />
+                    <PreviewSlider title="Scale Y" v-model="patternScaleY" :min="0.1" :max="5" :step="0.1" />
+                    <PreviewSlider title="pattern Alpha" v-model="patternAlpha" :min="0" :max="25" :step="5" />
+                </Customize>
+
+                <PropTable :data="propData" />
+            </template>
+
+            <template #code>
+                <CodeExample :code-object="noise" />
+            </template>
+
+            <template #cli>
+                <CliInstallation :command="noise.cli" />
+            </template>
+        </TabbedLayout>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import TabbedLayout from '../../components/common/TabbedLayout.vue'
+import PropTable from '../../components/common/PropTable.vue'
+import CliInstallation from '../../components/code/CliInstallation.vue'
+import CodeExample from '../../components/code/CodeExample.vue'
+import Customize from '../../components/common/Customize.vue'
+import PreviewSlider from '../../components/common/PreviewSlider.vue'
+import Noise from '../../content/Animations/Noise/Noise.vue'
+import { noise } from '@/constants/code/Animations/noiseCode'
+
+const patternSize = ref(250)
+const patternScaleX = ref(2)
+const patternScaleY = ref(2)
+const patternAlpha = ref(10)
+
+const propData = [
+    {
+        name: 'patternSize',
+        type: 'number',
+        default: '-',
+        description: 'Defines the size of the grain pattern.'
+    },
+    {
+        name: 'patternScaleX',
+        type: 'number',
+        default: '-',
+        description: 'Scaling factor for the X-axis of the grain pattern.'
+    },
+    {
+        name: 'patternScaleY',
+        type: 'number',
+        default: '-',
+        description: 'Scaling factor for the Y-axis of the grain pattern.'
+    },
+    {
+        name: 'patternRefreshInterval',
+        type: 'number',
+        default: '2',
+        description: 'Number of frames before the grain pattern refreshes.'
+    },
+    {
+        name: 'patternAlpha',
+        type: 'number',
+        default: '10',
+        description: 'Opacity of the grain pattern (0-255).'
+    }
+]
+</script>