🎉 New <PixelSnow /> component

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Color Bends', 'Ghost Cursor', 'Laser Flow', 'Liquid Ether', 'Pixel Blast', 'Floating Lines', 'Light Pillar'];
+export const NEW = ['Color Bends', 'Ghost Cursor', 'Laser Flow', 'Liquid Ether', 'Pixel Blast', 'Floating Lines', 'Light Pillar', 'Pixel Snow'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -130,6 +130,7 @@ export const CATEGORIES = [
       'Orb',
       'Particles',
       'Pixel Blast',
+      'Pixel Snow',
       'Plasma',
       'Prism',
       'Prismatic Burst',

src/constants/Components.ts

@@ -122,6 +122,7 @@ const backgrounds = {
   'color-bends': () => import('../demo/Backgrounds/ColorBendsDemo.vue'),
   'floating-lines': () => import('../demo/Backgrounds/FloatingLinesDemo.vue'),
   'light-pillar': () => import('../demo/Backgrounds/LightPillarDemo.vue'),
+  'pixel-snow': () => import('../demo/Backgrounds/PixelSnowDemo.vue'),
 };
 
 export const componentMap = {

src/constants/Information.ts

@@ -916,5 +916,13 @@ export const componentMetadata: ComponentMetadata = {
     name: 'LightPillar',
     docsUrl: 'https://vue-bits.dev/backgrounds/light-pillar',
     tags: []
+  },
+  'Backgrounds/PixelSnow': {
+    videoUrl: '/assets/videos/pixelsnow.webm',
+    description: 'Falling pixelated snow effect with customizable density and speed.',
+    category: 'Backgrounds',
+    name: 'PixelSnow',
+    docsUrl: 'https://vue-bits.dev/backgrounds/pixel-snow',
+    tags: []
   }
 };

src/constants/code/Backgrounds/pixelSnowCode.ts

@@ -0,0 +1,24 @@
+import code from '@content/Backgrounds/PixelSnow/PixelSnow.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const pixelSnow = createCodeObject(code, 'Backgrounds/PixelSnow', {
+  installation: `npm install three`,
+  usage: `<template>
+  <div style="width: 100%; height: 600px; position: relative">
+    <PixelSnow
+      color="#ffffff"
+      :flakeSize="0.01"
+      :minFlakeSize="1.25"
+      :pixelResolution="200"
+      :speed="1.25"
+      :density="0.3"
+      :direction="125"
+      :brightness="1"
+    />
+  </div>
+</template>
+
+<script setup>
+import PixelSnow from './PixelSnow.vue'
+</script>`
+});