@raclettejs/core 0.0.1

package/services/frontend/src/core/lib/eggs/chadsay.ts

@@ -0,0 +1,56 @@
+export const chadsay = (what) => {
+  return `
+             ⢀⣤⠶⠛⠛⠛⠉⠛⠛⠷⠶⠶⣦⣀
+           ⢀⠞⠋            ⠉⠻⣄
+          ⡰⠁     ⢀⣴⣶⣤⣤⣤⣀ ⣀⣀⡀⠸⣧
+         ⢰⠁     ⣠⣿⣿⣿⣿⣿⢿⡿⠂⠈⠹⢿⣦⠘⣧
+         ⡎     ⠈⣉⣴⣿⣿⠟⠛⠛⠶⠶ ⣦ ⣿⡇⢹⡇
+         ⡇     ⣾⣿⣿⣋⢠⠄     ⠉ ⠙⢿⠸⣿
+         ⡗⣠⢀⣄ ⣼⣿⣿⣿⣄⡀     ⣰⡆   ⡀⢸
+        ⢸ ⠃⠈⢉ ⠻⣿⣿⣿⣿⣿⡶   ⢀⣿⣇  ⢀⠈⣼
+        ⠸⡄⢀⠙⡿  ⠻⢿⠿⠏⣁⣤⠄  ⠠⠍⢿⡇⢀⢠⣆⢹
+         ⠹⡏⣡⠁ ⢤    ⠏⠁        ⢸⡏⢸
+          ⣧⣿ ⢂⡀          ⡀⣀⠲ ⠘⢰⡟
+          ⢹⣿ ⠈        ⠈⠑⠂ ⠈⠦ ⢀⡿   /
+          ⢸⣿⣦⡀            ⢠⠆⢀⣸⠇ - \ ${what}
+         ⣴⣿⣿⣿⣿⣷⣤⡀           ⢘⠙⣧
+       ⣠⡟⢹⣿⣿⣿⣿⣿⣿⣿⣶⣄  ⠁      ⢉⣰⠇
+ ⣀⣀⠤⠖⠛⢋⣡⣤⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣥   ⣀ ⢀⣀⣠⡼
+⣉⣥⣶⣶⣿⡿⢋⣽⣿⣿⣿⣿⣿⣿⣿⣿⡟⣿⣿⡿  ⣾⣿⢸⠟
+⣿⣿⣿⠟⠋⢀⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⠁⣿⣿⠁ ⣴⣿⡟⢸⡀
+⠈⠉   ⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⠹⠃ ⣾⡟⣼⣷⣬⣙⠳⢤⣀
+⣀⣀⣀⣀⣀⡈⠙⠛⠛⠛⠙⠻⠿⠿⣿⡿  ⣄ ⠏⣄⣿⣇⠘⢿⣿⣶⣌⠳⣄
+⣿⣿⣿⣿⣿⣿⣿⣿⣷⣶⣶⣦⣤⣀⠙⠃⢰⡄  ⣸⣿⣾⣿⣄ ⣦⠉⠻⣷⣌⠳⢦⣄⣀
+⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⠯⣿⣿⣿⣷⣌⢧ ⢠⠿⢟⣀⣉⣭⣠⣬⣿⣆⢻⡋⠓⠲⠮⣝⡛⢷⣤⣀⣀⡀
+⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⡿⠿⣯⣍⣛⣾⡧⠟ ⠈⠙⣿⣿⣿⣿⣿⣿⣦⡀ ⠰⣶⣶⣽⣶⣶⣬⣭⣙⠻⢦⡀
+⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣿⣿⣿⣿⣷  ⠈⠐⣿⣿⣿⣿⣿⣿⣿⣿⣶⣄⡙⠈⢿⣿⣿⣿⣿⣿⣿⣶⣍⠳⣄
+  `
+}
+export const chadsayFE = (what) => {
+  return `
+             ⢀⣤⠶⠛⠛⠛⠉⠛⠛⠷⠶⠶⣦⣀       
+           ⢀⠞⠋              ⠉⠻⣄     
+          ⡰⠁     ⢀⣴⣶⣤⣤⣤⣀ ⣀⣀ ⠸⣧    
+         ⢰⠁     ⣠⣿⣿⣿⣿⣿⢿⡿⠂⠹⢿⣦⠘⣧   
+         ⡎     ⠈⣉⣴⣿⣿⠟⠛⠛⠶⠶⣦ ⣿⡇⢹⡇  
+         ⡇     ⣾⣿⣿⣋⢠⠄     ⠉ ⠙⢿⠸⣿  
+         ⡗⣠⢀⣄ ⣼⣿⣿⣿⣄⡀     ⡆   ⡀ ⢸  
+        ⢸ ⠃⠈⢉ ⠻⣿⣿⣿⣿⣿⡶  ⢀⣿⣇     ⣼  
+        ⠸⡄⢀⠙⡿  ⠻⢿⠿⠏⣁⣤⠄ ⠠⠍⢿⡇⢀⢠⣆⢹  
+         ⠹⡏⣡⠁ ⢤    ⠏⠁         ⢸⡏⢸  
+          ⣧⣿ ⢂⡀         ⡀⣀⠲ ⠘  ⢰⡟  
+          ⢹⣿ ⠈       ⠈⠑⠂ ⠈⠦   ⢀⡿   
+          ⢸⣿⣦⡀           ⢠⠆  ⢀⣸⠇ - ${what}
+         ⣴⣿⣿⣿⣿⣷⣤⡀            ⢘⠙⣧
+       ⣠⡟⢹⣿⣿⣿⣿⣿⣿⣿⣶⣄         ⢉⣰⠇
+ ⣀⣀⠤⠖⠛⢋⣡⣤⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣥  ⣀ ⢀⣀⣠⡼
+⣉⣥⣶⣶⣿⡿⢋⣽⣿⣿⣿⣿⣿⣿⣿⣿⡟⣿⣿⡿  ⣾⣿⢸⠟
+⣿⣿⣿⠟⠋⢀⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⠁⣿⣿⠁ ⣴⣿⡟⢸⡀
+⠈⠉   ⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⠹⠃ ⣾⡟⣼⣷⣬⣙⠳⢤⣀
+⣀⣀⣀⣀⣀⡈⠙⠛⠛⠛⠙⠻⠿⠿⣿⡿  ⣄ ⠏⣄⣿⣇⠘⢿⣿⣶⣌⠳⣄
+⣿⣿⣿⣿⣿⣿⣿⣿⣷⣶⣶⣦⣤⣀⠙⠃⢰⡄  ⣸⣿⣾⣿⣄ ⣦⠉⠻⣷⣌⠳⢦⣄⣀
+⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⠯⣿⣿⣿⣷⣌⢧ ⢠⠿⢟⣀⣉⣭⣠⣬⣿⣆⢻⡋⠓⠲⠮⣝⡛⢷⣤⣀⣀⡀
+⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⡿⠿⣯⣍⣛⣾⡧⠟ ⠈⠙⣿⣿⣿⣿⣿⣿⣦⡀ ⠰⣶⣶⣽⣶⣶⣬⣭⣙⠻⢦⡀
+⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣿⣿⣿⣿⣷  ⠈⠐⣿⣿⣿⣿⣿⣿⣿⣿⣶⣄⡙⠈⢿⣿⣿⣿⣿⣿⣿⣶⣍⠳⣄
+`
+}

package/services/frontend/src/core/lib/eggs/old_smoke.ts

@@ -0,0 +1,173 @@
+interface Particle {
+  x: number
+  y: number
+  vx: number
+  vy: number
+  size: number
+  alpha: number
+  life: number
+  maxLife: number
+  originX: number
+}
+
+interface SmokeState {
+  element: HTMLElement
+  canvas: HTMLCanvasElement
+  ctx: CanvasRenderingContext2D
+  particles: Particle[]
+  isActive: boolean
+  animationFrame: number | null
+}
+
+const createParticle = (
+  x: number,
+  y: number,
+  elementWidth: number,
+): Particle => {
+  const spreadFactor = Math.max(1, elementWidth / 100)
+
+  return {
+    x,
+    y,
+    originX: x,
+    vx: (Math.random() - 0.5) * spreadFactor * 2,
+    vy: -Math.random() * 3 - 2,
+    // Reduced initial size range
+    size: Math.random() * 3 + 2,
+    alpha: 1,
+    life: 0,
+    maxLife: Math.random() * 100 + 100,
+  }
+}
+
+const updateParticle = (particle: Particle): Particle => {
+  const distanceFromOrigin = Math.abs(particle.x - particle.originX)
+  const returnForce =
+    distanceFromOrigin > 100 ? (particle.originX - particle.x) * 0.001 : 0
+
+  return {
+    ...particle,
+    x: particle.x + particle.vx + returnForce,
+    y: particle.y + particle.vy,
+    vx: particle.vx + (Math.random() - 0.5) * 0.1,
+    // Reduced size growth rate
+    size: particle.size + 0.1,
+    life: particle.life + 1,
+    alpha: Math.max(0, 1 - particle.life / particle.maxLife),
+  }
+}
+
+const isParticleAlive = (particle: Particle): boolean =>
+  particle.life < particle.maxLife
+
+const setupCanvas = (canvas: HTMLCanvasElement): void => {
+  canvas.style.position = "fixed"
+  canvas.style.pointerEvents = "none"
+  // Maximum possible z-index
+  canvas.style.zIndex = "2147483647"
+  document.body.appendChild(canvas)
+}
+
+const positionCanvas = (canvas: HTMLCanvasElement): void => {
+  canvas.width = window.innerWidth
+  canvas.height = window.innerHeight
+  canvas.style.left = "0"
+  canvas.style.top = "0"
+}
+
+const addParticle = (state: SmokeState): Particle => {
+  const rect = state.element.getBoundingClientRect()
+  const randomOffset = (Math.random() - 0.5) * rect.width
+  const x = rect.left + rect.width / 2 + randomOffset
+  const y = rect.top + rect.height / 2
+
+  return createParticle(x, y, rect.width)
+}
+
+const drawParticle = (
+  ctx: CanvasRenderingContext2D,
+  particle: Particle,
+): void => {
+  ctx.beginPath()
+  ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
+  // Increased particle count but reduced alpha for more smoke-like appearance
+  ctx.fillStyle = `rgba(128, 128, 128, ${particle.alpha * 0.3})`
+  ctx.fill()
+}
+
+const animate = (state: SmokeState): void => {
+  if (!state.isActive) {
+    return
+  }
+
+  state.ctx.clearRect(0, 0, state.canvas.width, state.canvas.height)
+
+  const rect = state.element.getBoundingClientRect()
+  // Increased particle generation rate to compensate for smaller particles
+  const particleRate = Math.max(0.5, rect.width / 200)
+
+  if (Math.random() < particleRate) {
+    state.particles.push(addParticle(state))
+  }
+
+  state.particles = state.particles.map(updateParticle).filter((particle) => {
+    if (isParticleAlive(particle)) {
+      drawParticle(state.ctx, particle)
+
+      return true
+    }
+
+    return false
+  })
+
+  state.animationFrame = requestAnimationFrame(() => animate(state))
+}
+
+const createSmokeEffect = (element: HTMLElement) => {
+  const canvas = document.createElement("canvas")
+  const ctx = canvas.getContext("2d")!
+
+  const state: SmokeState = {
+    element,
+    canvas,
+    ctx,
+    particles: [],
+    isActive: false,
+    animationFrame: null,
+  }
+
+  setupCanvas(canvas)
+  positionCanvas(canvas)
+
+  window.addEventListener("resize", () => positionCanvas(canvas))
+
+  const start = () => {
+    if (state.isActive) {
+      return
+    }
+    state.isActive = true
+    animate(state)
+  }
+
+  const stop = () => {
+    state.isActive = false
+    if (state.animationFrame !== null) {
+      cancelAnimationFrame(state.animationFrame)
+    }
+    state.particles = []
+    state.ctx.clearRect(0, 0, state.canvas.width, state.canvas.height)
+  }
+
+  const destroy = () => {
+    stop()
+    state.canvas.remove()
+  }
+
+  return {
+    start,
+    stop,
+    destroy,
+  }
+}
+
+export default createSmokeEffect

package/services/frontend/src/core/lib/eggs/readme.md

@@ -0,0 +1,75 @@
+smoke usage examples
+
+```
+<v-btn id="pneis" @click="addSmoke">smoke me</v-btn>
+
+import smoke from "#src/lib/eggs/smoke"
+
+const smokeEffect = ref(null)
+
+const addSmoke = (e) => {
+  const element = document.querySelector("#pneis")
+
+  if (smokeEffect.value === null) {
+    smokeEffect.value = smoke(element, {
+      // Emission pattern control
+      emissionWidth: 0.8, // Use 80% of element width for emission
+      emissionPattern: "gaussian", // 'uniform', 'gaussian', or 'centered'
+
+      // Dispersion control
+      disperseAngle: 45, // 45 degree spread angle
+      turbulence: 0.1, // Add random movement
+      swayFrequency: 0.003, // How often the smoke sways
+      swayAmplitude: 0.1, // How far the smoke sways
+
+      // Basic appearance
+      color: [50, 50, 50],
+      baseOpacity: 1,
+      particlesPerEmission: 2,
+    })
+    smokeEffect.value.start()
+    // smokeEffect.value.addSmoke(0, 0, 2)
+  } else {
+    smokeEffect.value.stop()
+    smokeEffect.value.destroy()
+    smokeEffect.value = null
+  }
+}
+```
+
+```
+// Create a smoke effect for an element
+const element = document.getElementById('myElement');
+const smokeEffect = createSmokeEffect(element, {
+  // Emission pattern control
+  emissionWidth: 0.8,          // Use 80% of element width for emission
+  emissionPattern: 'gaussian', // 'uniform', 'gaussian', or 'centered'
+
+  // Dispersion control
+  disperseAngle: 45,          // 45 degree spread angle
+  turbulence: 0.4,           // Add random movement
+  swayFrequency: 0.003,      // How often the smoke sways
+  swayAmplitude: 0.6,        // How far the smoke sways
+
+  // Basic appearance
+  color: [50, 50, 50],
+  baseOpacity: 0.2,
+  particlesPerEmission: 2
+});
+
+// Start the effect
+smokeEffect.start();
+
+
+// Stop the effect
+smokeEffect.stop();
+
+// Update configuration on the fly
+smokeEffect.updateConfig({
+  color: [50, 50, 50],
+  windForce: 0.08
+});
+
+// Clean up when done
+smokeEffect.destroy();
+```

package/services/frontend/src/core/lib/eggs/smoke.ts

@@ -0,0 +1,222 @@
+type SmokeConfig = {
+  color?: [number, number, number]
+  minVx?: number
+  maxVx?: number
+  minVy?: number
+  maxVy?: number
+  minScale?: number
+  maxScale?: number
+  minLifetime?: number
+  maxLifetime?: number
+  particlesPerSecond?: number
+  spriteSize?: number
+}
+
+type Particle = {
+  x: number
+  y: number
+  vx: number
+  vy: number
+  startvy: number
+  scale: number
+  finalScale: number
+  lifetime: number
+  age: number
+}
+
+const defaultConfig: SmokeConfig = {
+  color: [24, 46.8, 48.2],
+  minVx: -0.04,
+  maxVx: 0.04,
+  minVy: -0.4,
+  maxVy: -0.1,
+  minScale: 0,
+  maxScale: 0.5,
+  minLifetime: 3000,
+  maxLifetime: 8000,
+  particlesPerSecond: 30,
+  spriteSize: 16,
+}
+
+const floatInRange = (start: number, end: number): number =>
+  start + Math.random() * (end - start)
+
+const createParticle = (
+  x: number,
+  y: number,
+  config: SmokeConfig,
+): Particle => {
+  const scale = floatInRange(config.minScale!, config.maxScale!)
+  return {
+    x,
+    y,
+    vx: floatInRange(config.minVx!, config.maxVx!),
+    startvy: floatInRange(config.minVy!, config.maxVy!),
+    scale,
+    finalScale: floatInRange(25 + scale, 30 + scale),
+    lifetime: floatInRange(config.minLifetime!, config.maxLifetime!),
+    age: 0,
+    vy: 0,
+  }
+}
+
+const updateParticle = (particle: Particle, deltaTime: number): void => {
+  particle.x += particle.vx * deltaTime
+  particle.y += particle.vy * deltaTime
+  const frac = Math.sqrt(particle.age / particle.lifetime)
+  particle.vy = (1 - frac) * particle.startvy
+  particle.age += deltaTime
+  particle.scale = frac * particle.finalScale
+}
+
+const createSmokeSprite = (
+  color: [number, number, number],
+  size: number,
+): HTMLCanvasElement => {
+  const canvas = document.createElement("canvas")
+  const ctx = canvas.getContext("2d")!
+  const imageData = ctx.createImageData(size, size)
+  const data = imageData.data
+
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const idx = (y * size + x) * 4
+      const distFromCenter = Math.sqrt(
+        Math.pow(x - size / 2, 2) + Math.pow(y - size / 2, 2),
+      )
+      const opacity = Math.max(0, 255 * (1 - distFromCenter / (size / 2)))
+
+      data[idx] = color[0]
+      data[idx + 1] = color[1]
+      data[idx + 2] = color[2]
+      data[idx + 3] = opacity * Math.random() * 0.3
+    }
+  }
+
+  canvas.width = size
+  canvas.height = size
+  ctx.putImageData(imageData, 0, 0)
+
+  // Apply Gaussian blur for smoother appearance
+  ctx.filter = "blur(4px)"
+  ctx.drawImage(canvas, 0, 0)
+  ctx.filter = "none"
+
+  return canvas
+}
+
+export default (element: HTMLElement, config: SmokeConfig = {}) => {
+  const mergedConfig = { ...defaultConfig, ...config }
+  const canvas = document.createElement("canvas")
+  const particles: Particle[] = []
+  let animationFrame: number
+  let lastFrame = 0
+  let isRunning = false
+  let isDestroying = false
+
+  const setupCanvas = () => {
+    canvas.style.position = "fixed"
+    canvas.style.top = "0"
+    canvas.style.left = "0"
+    canvas.style.pointerEvents = "none"
+    canvas.style.zIndex = "9999"
+    canvas.width = window.innerWidth * window.devicePixelRatio
+    canvas.height = window.innerHeight * window.devicePixelRatio
+    canvas.style.width = `${window.innerWidth}px`
+    canvas.style.height = `${window.innerHeight}px`
+    document.body.appendChild(canvas)
+  }
+
+  const drawParticle = (
+    ctx: CanvasRenderingContext2D,
+    particle: Particle,
+    sprite: HTMLCanvasElement,
+  ) => {
+    ctx.globalAlpha =
+      (1 - Math.abs(1 - (2 * particle.age) / particle.lifetime)) / 8
+    const off = (particle.scale * mergedConfig.spriteSize!) / 2
+    ctx.drawImage(sprite, particle.x - off, particle.y - off, off * 2, off * 2)
+  }
+
+  const updateAndDraw = (timestamp: number) => {
+    if (!isRunning) return
+
+    const deltaTime = timestamp - lastFrame
+    lastFrame = timestamp
+
+    const ctx = canvas.getContext("2d")!
+    const sprite = createSmokeSprite(
+      mergedConfig.color!,
+      mergedConfig.spriteSize!,
+    )
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.scale(window.devicePixelRatio, window.devicePixelRatio)
+
+    particles.forEach((p) => updateParticle(p, deltaTime))
+    particles.splice(
+      0,
+      particles.length,
+      ...particles.filter((p) => p.age < p.lifetime),
+    )
+
+    particles.forEach((p) => drawParticle(ctx, p, sprite))
+
+    if (!isDestroying) {
+      const rect = element.getBoundingClientRect()
+      for (let i = 0; i < mergedConfig.particlesPerSecond! / 60; i++) {
+        particles.push(
+          createParticle(
+            rect.left + Math.random() * rect.width,
+            rect.bottom,
+            mergedConfig,
+          ),
+        )
+      }
+    }
+
+    ctx.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio)
+
+    if (particles.length > 0) {
+      animationFrame = requestAnimationFrame(updateAndDraw)
+    } else {
+      isRunning = false
+      canvas.remove()
+    }
+  }
+
+  setupCanvas()
+
+  const resizeHandler = () => {
+    canvas.width = window.innerWidth * window.devicePixelRatio
+    canvas.height = window.innerHeight * window.devicePixelRatio
+    canvas.style.width = `${window.innerWidth}px`
+    canvas.style.height = `${window.innerHeight}px`
+  }
+  window.addEventListener("resize", resizeHandler)
+
+  return {
+    start: () => {
+      if (!isRunning) {
+        isRunning = true
+        isDestroying = false
+        lastFrame = performance.now()
+        animationFrame = requestAnimationFrame(updateAndDraw)
+      }
+    },
+
+    stop: () => {
+      isRunning = false
+      cancelAnimationFrame(animationFrame)
+    },
+
+    destroy: () => {
+      isDestroying = true
+      if (!isRunning) {
+        canvas.remove()
+        window.removeEventListener("resize", resizeHandler)
+      }
+      // Animation will stop naturally when particles are gone
+    },
+  }
+}

package/services/frontend/src/core/lib/eggs/snow.ts

@@ -0,0 +1,157 @@
+export default () => {
+  let snowflakes_count = 100
+
+  if (typeof total !== "undefined") {
+    snowflakes_count = total
+  }
+
+  // This function allows you to turn on and off the snow
+  const toggle_snow = () => {
+    const check_box = document.getElementById("toggle_snow")
+    const snowEl = document.getElementById("snow")
+
+    if (snowEl) {
+      snowEl.style.display = check_box.checked ? "block" : "none"
+    }
+  }
+
+  // Creating snowflakes using DocumentFragment for better performance
+  const spawn_snow = (snow_density = 50) => {
+    const fragment = document.createDocumentFragment()
+
+    for (let x = 0; x < snow_density; x++) {
+      const snowflake = document.createElement("div")
+      snowflake.className = "snowflake"
+
+      // Set CSS custom properties for each snowflake
+      const randomX = Math.random() * 100
+      const randomScale = 0.3 + Math.random() * 0.7 // Scale between 0.3 and 1
+      const randomDuration = 8 + Math.random() * 15 // Duration between 8-23s
+      const randomDelay = Math.random() * 10 // Delay between 0-10s
+      const randomOpacity = 0.3 + Math.random() * 0.7 // Opacity between 0.3-1
+      const randomAnimation = Math.floor(Math.random() * 5) + 1 // Choose from 5 animations
+
+      snowflake.style.setProperty("--start-x", `${randomX}vw`)
+      snowflake.style.setProperty("--scale", randomScale)
+      snowflake.style.setProperty("--duration", `${randomDuration}s`)
+      snowflake.style.setProperty("--delay", `${randomDelay}s`)
+      snowflake.style.setProperty("--opacity", randomOpacity)
+      snowflake.style.setProperty("--animation-name", `fall-${randomAnimation}`)
+
+      fragment.appendChild(snowflake)
+    }
+
+    document.getElementById("snow").appendChild(fragment)
+  }
+
+  // Optimized CSS with reusable animations and CSS custom properties
+  const createOptimizedCSS = () => {
+    const css = `
+      #snow {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 1000;
+      }
+
+      .snowflake {
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background: white;
+        border-radius: 50%;
+        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
+        will-change: transform;
+        
+        /* Use CSS custom properties for individual variations */
+        left: var(--start-x);
+        opacity: var(--opacity);
+        transform: scale(var(--scale));
+        animation: var(--animation-name) var(--duration) var(--delay) linear infinite;
+      }
+
+      /* 5 different falling patterns for variety */
+      @keyframes fall-1 {
+        0% { transform: translateY(-10px) translateX(0) scale(var(--scale)); }
+        25% { transform: translateY(25vh) translateX(10px) scale(var(--scale)); }
+        50% { transform: translateY(50vh) translateX(-5px) scale(var(--scale)); }
+        75% { transform: translateY(75vh) translateX(8px) scale(var(--scale)); }
+        100% { transform: translateY(100vh) translateX(0) scale(var(--scale)); }
+      }
+
+      @keyframes fall-2 {
+        0% { transform: translateY(-10px) translateX(0) scale(var(--scale)); }
+        30% { transform: translateY(30vh) translateX(-15px) scale(var(--scale)); }
+        60% { transform: translateY(60vh) translateX(10px) scale(var(--scale)); }
+        100% { transform: translateY(100vh) translateX(-5px) scale(var(--scale)); }
+      }
+
+      @keyframes fall-3 {
+        0% { transform: translateY(-10px) translateX(0) scale(var(--scale)); }
+        20% { transform: translateY(20vh) translateX(5px) scale(var(--scale)); }
+        40% { transform: translateY(40vh) translateX(-10px) scale(var(--scale)); }
+        70% { transform: translateY(70vh) translateX(15px) scale(var(--scale)); }
+        100% { transform: translateY(100vh) translateX(0) scale(var(--scale)); }
+      }
+
+      @keyframes fall-4 {
+        0% { transform: translateY(-10px) translateX(0) scale(var(--scale)); }
+        35% { transform: translateY(35vh) translateX(20px) scale(var(--scale)); }
+        65% { transform: translateY(65vh) translateX(-8px) scale(var(--scale)); }
+        100% { transform: translateY(100vh) translateX(12px) scale(var(--scale)); }
+      }
+
+      @keyframes fall-5 {
+        0% { transform: translateY(-10px) translateX(0) scale(var(--scale)); }
+        15% { transform: translateY(15vh) translateX(-5px) scale(var(--scale)); }
+        45% { transform: translateY(45vh) translateX(12px) scale(var(--scale)); }
+        80% { transform: translateY(80vh) translateX(-7px) scale(var(--scale)); }
+        100% { transform: translateY(100vh) translateX(3px) scale(var(--scale)); }
+      }
+    `
+
+    // Check if styles already exist
+    if (!document.getElementById("snow-styles")) {
+      const styleEl = document.createElement("style")
+      styleEl.id = "snow-styles"
+      styleEl.type = "text/css"
+      styleEl.appendChild(document.createTextNode(css))
+      document.head.appendChild(styleEl)
+    }
+  }
+
+  const handleSnow = () => {
+    const snowEl = document.getElementById("snow")
+
+    if (!snowEl) {
+      // Create snow container
+      const el = document.createElement("div")
+      el.id = "snow"
+      document.body.appendChild(el)
+
+      // Add optimized CSS
+      createOptimizedCSS()
+
+      // Use requestAnimationFrame to prevent blocking
+      requestAnimationFrame(() => {
+        spawn_snow(snowflakes_count)
+      })
+    } else {
+      // Remove existing snow
+      snowEl.remove()
+      // Optionally remove styles as well
+      const styles = document.getElementById("snow-styles")
+      if (styles) {
+        styles.remove()
+      }
+    }
+  }
+
+  // Expose toggle function globally if needed
+  window.toggle_snow = toggle_snow
+
+  return handleSnow()
+}