@splatrac/vue-snowfall 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Erlan Kaparov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,73 @@
+<div align="center">
+  <a href="https://www.npmjs.com/package/vue-snowfall">
+    <img alt="current version" src="https://img.shields.io/npm/v/vue-snowfall">
+  </a>
+  <img alt="license" src="https://img.shields.io/github/license/NooBiToo/vue-snowfall" />
+</div>
+
+# Snowfall Effect in Vue.js
+
+This repository provides a simple and customizable snowfall effect for your web applications using Vue.js. The useSnowfall function allows you to easily add and control falling snowflakes on your webpage.
+
+## Table of Contents
+- [Snowfall Effect in Vue.js](#snowfall-effect-in-vuejs)
+  - [Table of Contents](#table-of-contents)
+  - [Installation](#installation)
+  - [Usage](#usage)
+  - [Customization](#customization)
+  - [License](#license)
+
+## Installation
+To use the snowfall effect, you can simply copy the useSnowfall function into your Vue.js project. Ensure you have Vue.js installed in your project.
+
+```bash
+npm install vue-snowfall
+```
+
+## Usage
+1. Import the useSnowfall function in your Vue component:
+
+```javascript
+import { useSnowfall } from 'vue-snowfall'
+```
+2. Initialize the snowfall effect in your component's setup function:
+
+```javascript
+export default {
+  setup() {
+    const { startSnowflakes, stopSnowflakes } = useSnowfall()
+
+    // Start snowfall when the component is mounted
+    onMounted(() => {
+      startSnowflakes()
+    })
+
+    // Stop snowfall when the component is unmounted
+    onBeforeUnmount(() => {
+      stopSnowflakes('all')
+    })
+  }
+}
+```
+
+3. Add styles to your component if needed, or let the useSnowfall function handle it.
+
+## Customization
+You can customize the snowfall effect by modifying the following parameters in the `useSnowfall` function:
+
+**Falling Time**: Adjust the duration of the falling animation by changing the `fallingTime` variable in the `createSnowflake` function.
+**Flake Size**: Modify the size of the snowflakes by changing the calculation of `flakeSize`.
+**Animation Styles**: Customize the CSS styles in the `addStyles` function to change the appearance of the snowflakes.
+Example of Customization
+To change the falling speed and size of the snowflakes, you can modify the createSnowflake function like this:
+
+```javascript
+const fallingTime = Math.floor(Math.random() * 5) + 5; // Faster falling speed
+const flakeSize = (Math.floor(Math.random() * 50) + 50) / 100; // Larger snowflakes
+```
+
+## License
+This project is licensed under the MIT License. Feel free to use and modify it as per your needs.
+
+---
+Enjoy the beautiful snowfall effect on your web applications! If you have any questions or suggestions, feel free to open an issue in this repository.

package/index.js

@@ -0,0 +1 @@
+export { useSnowfall } from './src/useSnowfall.js';

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@splatrac/vue-snowfall",
+  "version": "1.1.0",
+  "description": "A Vue 3 composable for creating snowfall effects",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.js",
+  "module": "index.js",
+  "keywords": [
+    "vue",
+    "snowfall",
+    "animation",
+    "effect",
+    "composable"
+  ],
+  "author": "Splatrac",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/splatrac/vue-snowfall.git"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  }
+}

package/src/useSnowfall.js

@@ -0,0 +1,114 @@
+export function useSnowfall() {
+  let flakeIntervalId = null
+  let styleElement = null
+  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: 0.10, max: 1.09 } // scale factor
+  };
+
+  const addStyles = () => {
+    if (!styleElement) {
+      styleElement = document.createElement('style')
+      styleElement.textContent = `
+        .flake {
+          position: absolute;
+          top: -20px;
+          z-index: 999;
+          width: 30px;
+          height: 30px;
+          pointer-events: none;
+        }
+        @keyframes falling {
+          0% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 1; }
+          12.5% { transform: translateX(-15px) translateY(12.5vh) rotate(45deg); opacity: 1; }
+          25% { transform: translateX(15px) translateY(25vh) rotate(90deg); opacity: 1; }
+          37.5% { transform: translateX(-20px) translateY(37.5vh) rotate(135deg); opacity: 0.9; }
+          50% { transform: translateX(20px) translateY(50vh) rotate(180deg); opacity: 0.9; }
+          62.5% { transform: translateX(-15px) translateY(62.5vh) rotate(225deg); opacity: 0.8; }
+          75% { transform: translateX(15px) translateY(75vh) rotate(270deg); opacity: 0.7; }
+          87.5% { transform: translateX(-10px) translateY(87.5vh) rotate(315deg); opacity: 0.6; }
+          100% { transform: translateX(0) translateY(100vh) rotate(360deg); opacity: 0; }
+        }
+      `
+      document.head.appendChild(styleElement)
+    }
+  }
+
+  const removeStyles = () => {
+    if (styleElement) {
+      document.head.removeChild(styleElement)
+      styleElement = null
+    }
+  }
+
+  const htmlToElement = (html) => {
+    const template = document.createElement('template')
+    template.innerHTML = html.trim()
+    return template.content.firstChild
+  }
+
+  const createSnowflake = ({
+    time = { min: 20, max: 29 },
+    pos = { min: 4, max: 93 },
+    size = { min: 10, max: 100 }
+  }) => {
+    const flakeSVG = `
+      <svg width="100%" height="100%" viewBox="0 0 50 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M42.2911 35.3845L50 39.8113L48.2293 42.8628L40.4446 38.3917L42.4879 45.9679L39.0858 46.8756L36.4208 36.9513L36.1578 35.9111L26.8388 30.5397V41.3708L27.522 42.0754L34.8573 49.3969L32.3809 51.8771L26.8388 46.3317V55H23.3558V46.2429L17.7319 51.7892L15.1906 49.309L22.5264 42.0443L23.3558 41.2825V30.5397L13.9388 35.9111L13.5949 36.9513L10.9216 46.8756L7.51561 45.9679L9.55669 38.3917L1.77114 42.8628L0 39.8113L7.70849 35.3845L0.0914308 33.3543L1.004 29.9663L11.0592 32.6462L12.0271 32.9043L21.4575 27.4887L12.1041 22.1174L11.0583 22.3963L1.08106 25.0553L0.168494 21.6674L7.78555 19.6372L0.000870706 15.1657L1.77289 12.1143L9.48355 16.5411L7.44682 8.965L10.8611 8.05728L13.5705 18.0591L13.8618 19.0218L23.3558 24.4373V13.6946L22.5425 12.9332L15.191 5.66803L17.7162 3.18783L23.3558 8.73417V0H26.8388V8.64539L32.3891 3.09906L34.8569 5.57925L27.5133 12.9012L26.8388 13.6062V24.4373L36.2349 19.0218L36.46 18.0591L39.1541 8.05728L42.5602 8.965L40.5191 16.5411L48.2276 12.1143L49.9987 15.1657L42.2131 19.6367L49.8298 21.667L48.9172 25.0549L38.9399 22.3958L37.8941  22.1169L28.5416 27.4883L37.9716 32.9043L38.9395 32.6462L48.9947 29.9663L49.9073 33.3543L42.2911 35.3845Z" fill="#fff"/>
+      </svg>`
+    const fallingTime = Math.floor(Math.random() * (time.max - time.min)) + time.min
+    const flakePos = Math.floor(Math.random() * (pos.max - pos.min)) + pos.min
+    const flakeSize = (Math.floor(Math.random() * (size.max - size.min)) + size.min) / 100
+    const snowflake = htmlToElement(
+      `<div 
+        class='flake' 
+        style='
+          left:${flakePos}%; 
+          transform:scale(${flakeSize}); 
+          animation:falling ${fallingTime}s linear infinite;'
+      >
+        ${flakeSVG}
+      </div>`,
+    )
+    document.body.appendChild(snowflake)
+  }
+
+  const removeSnowflakes = (params) => {
+    const flakes = document.querySelectorAll('.flake')
+    flakes.forEach((el) => {
+      const flakeRect = el.getBoundingClientRect()
+      const bodyHeight = window.innerHeight
+      if (flakeRect.bottom > bodyHeight || params === 'all') {
+        el.remove()
+      }
+    })
+  }
+
+  const startSnowflakes = (userOptions = {}) => {
+    const {
+      timeRange = DEFAULT_OPTIONS.timeRange,
+      posRange = DEFAULT_OPTIONS.posRange,
+      sizeRange = DEFAULT_OPTIONS.sizeRange,
+      interval = 500
+    } = userOptions;
+
+    addStyles()
+    flakeIntervalId = setInterval(() => {
+      createSnowflake(finalOptions)
+      removeSnowflakes()
+    }, interval)
+  }
+
+  const stopSnowflakes = () => {
+    clearInterval(flakeIntervalId)
+    removeSnowflakes('all')
+    removeStyles()
+  }
+
+  return {
+    startSnowflakes,
+    stopSnowflakes,
+  }
+}