Snow Effect

Snow Effect demo

Examples

Using CDN:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Snow Effect Demo</title>
    <script type="module" src="https://unpkg.com/@le-pepe/snow-effect"></script>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #282c34;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <!-- Snow Effect custom element -->
    <snow-effect 
        color="white"
        flakes="100"
        speed="1" />
  </body>
</html>

Using Nuxt Module:

npx nuxi module add nuxt-snow-effect
pnpm install @le-pepe/nuxt-snow-effect
//nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@le-pepe/nuxt-snow-effect',
  ],
})
<template>
    <SnowEffectComponent 
        color="white"
        flakes="100"
        speed="1"
    />
</template>

Using module in Astro (little trick):

pnpm install @le-pepe/snow-effect
<snow-effect 
        color="white"
        flakes="100"
        speed="1"
/>
<script>
    import '@le-pepe/snow-effect';
</script>