feat: Снежинки!

wokalek · Dec 29, 2023 · 94871cd · 94871cd
1 parent 351ddac
commit 94871cd
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 0 deletions.
diff --git a/nuxt/package.json b/nuxt/package.json
@@ -25,6 +25,7 @@
     "image-size": "^1.0.2",
     "kaokun": "^1.1.10",
     "lightningcss": "^1.22.1",
+    "magic-snowflakes": "^6.3.0",
     "nanoid": "^5.0.4",
     "normalize.css": "^8.0.1",
     "nuxt": "^3.9.0",

diff --git a/nuxt/pnpm-lock.yaml b/nuxt/pnpm-lock.yaml
diff --git a/nuxt/src/layouts/default.vue b/nuxt/src/layouts/default.vue
@@ -1,4 +1,5 @@
 <template>
+  <div class="snowflakes-container" />
   <div class="layout">
     <TheHeader />
     <main>
@@ -8,6 +9,20 @@
   </div>
 </template>
 
+<script setup lang="ts">
+import Snowflakes from 'magic-snowflakes'
+
+onMounted(() => {
+  // eslint-disable-next-line no-new
+  new Snowflakes({
+    container: document.querySelector<HTMLDivElement>('.snowflakes-container') as HTMLDivElement,
+    color: '#808080',
+    minOpacity: 0.2,
+    minSize: 1,
+  })
+})
+</script>
+
 <style lang="sass" scoped>
 :global(html)
   display: flex
@@ -33,4 +48,11 @@ main
   align-items: center
   flex-grow: 1
   padding: var(--f-32-16) var(--f-64-16)
+
+.snowflakes-container
+  position: fixed
+  height: 100vh
+  width: 100vw
+  pointer-events: none
+  user-select: none
 </style>