@splatrac/vue-snowfall 1.2.3 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/useSnowfall.js +5 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@splatrac/vue-snowfall",
3
- "version": "1.2.3",
3
+ "version": "1.2.4",
4
4
  "description": "A Vue 3 composable for creating snowfall effects",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/useSnowfall.js CHANGED
@@ -5,7 +5,7 @@ export function useSnowfall() {
5
5
  // Ranges for the random generators (same as the previous defaults)
6
6
  timeRange: { min: 20, max: 29 }, // seconds the flake falls
7
7
  posRange: { min: 0, max: window.innerWidth }, // % across the viewport
8
- sizeRange: { min: 10, max: 109 }, // scale factor
8
+ sizeRange: { min: 0.1, max: 2 }, // scale factor
9
9
  maxFlakes: 100,
10
10
  };
11
11
 
@@ -31,7 +31,7 @@ export function useSnowfall() {
31
31
  62.5% { transform: translateX(-15px) translateY(62.5vh) rotate(225deg); opacity: 0.8; }
32
32
  75% { transform: translateX(15px) translateY(75vh) rotate(270deg); opacity: 0.7; }
33
33
  87.5% { transform: translateX(-10px) translateY(87.5vh) rotate(315deg); opacity: 0.6; }
34
- 100% { transform: translateX(0) translateY(100vh) rotate(360deg); opacity: 0; }
34
+ 100% { transform: translateX(0) translateY(110vh) rotate(360deg); opacity: 0; }
35
35
  }
36
36
  `
37
37
  document.head.appendChild(styleElement)
@@ -64,7 +64,7 @@ export function useSnowfall() {
64
64
  </svg>`
65
65
  const fallingTime = Math.floor(Math.random() * (timeRange.max - timeRange.min)) + timeRange.min
66
66
  const flakePos = Math.floor(Math.random() * (posRange.max - posRange.min)) + posRange.min
67
- const flakeSize = (Math.floor(Math.random() * (sizeRange.max - sizeRange.min)) + sizeRange.min) / 100
67
+ const flakeSize = Math.floor(Math.random() * (sizeRange.max - sizeRange.min)) + sizeRange.min
68
68
  const snowflake = htmlToElement(
69
69
  `<div
70
70
  class='flake'
@@ -105,12 +105,11 @@ export function useSnowfall() {
105
105
  if (flakeIntervalId) clearInterval(flakeIntervalId)
106
106
 
107
107
  flakeIntervalId = setInterval(() => {
108
+ removeSnowflakes()
109
+
108
110
  if (currentFlakeCount() < maxFlakes) {
109
111
  createSnowflake(finalOptions)
110
112
  }
111
-
112
- removeSnowflakes()
113
-
114
113
  }, interval)
115
114
  }
116
115