@splatrac/vue-snowfall 1.1.2 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splatrac/vue-snowfall",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "description": "A Vue 3 composable for creating snowfall effects",
   "publishConfig": {
     "access": "public"

package/src/useSnowfall.js

@@ -4,8 +4,9 @@ export function useSnowfall() {
   const DEFAULT_OPTIONS = {
     // Ranges for the random generators (same as the previous defaults)
     timeRange: { min: 20, max: 29 },   // seconds the flake falls
-    posRange: { min: 4, max: 93 },   // % across the viewport
-    sizeRange: { min: 10, max: 109 } // scale factor
+    posRange: { min: 0, max: window.innerWidth },   // % across the viewport
+    sizeRange: { min: 10, max: 109 }, // scale factor
+    maxFlakes: 100,
   };
 
   const addStyles = () => {
@@ -19,6 +20,7 @@ export function useSnowfall() {
           width: 30px;
           height: 30px;
           pointer-events: none;
+          animation-fill-mode: forwards;
         }
         @keyframes falling {
           0% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 1; }
@@ -49,6 +51,8 @@ export function useSnowfall() {
     return template.content.firstChild
   }
 
+  const currentFlakeCount = () => document.querySelectorAll('.flake').length;
+
   const createSnowflake = ({
     timeRange,
     posRange,
@@ -100,8 +104,11 @@ export function useSnowfall() {
     if (flakeIntervalId) clearInterval(flakeIntervalId)
 
     flakeIntervalId = setInterval(() => {
-      createSnowflake(finalOptions)
-      removeSnowflakes()
+      if (currentFlakeCount() < maxFlakes) {
+        createSnowflake(finalOptions)
+      } else {
+        removeSnowflakes()
+      }
     }, interval)
   }