Create snow

snow

@@ -0,0 +1,57 @@
+def create_snow_effect():
+    # CSS 스타일 정의
+    snow_css = """
+    @keyframes snowfall {
+        0% {
+            transform: translateY(-10vh) translateX(0);
+            opacity: 1;
+        }
+        100% {
+            transform: translateY(100vh) translateX(100px);
+            opacity: 0.3;
+        }
+    }
+    .snowflake {
+        position: fixed;
+        color: white;
+        font-size: 1.5em;
+        user-select: none;
+        z-index: 1000;
+        pointer-events: none;
+        animation: snowfall linear infinite;
+    }
+    """
+
+    # JavaScript 코드 정의
+    snow_js = """
+    function createSnowflake() {
+        const snowflake = document.createElement('div');
+        snowflake.innerHTML = '❄';
+        snowflake.className = 'snowflake';
+        snowflake.style.left = Math.random() * 100 + 'vw';
+        snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
+        snowflake.style.opacity = Math.random();
+        document.body.appendChild(snowflake);
+        
+        setTimeout(() => {
+            snowflake.remove();
+        }, 5000);
+    }
+    setInterval(createSnowflake, 200);
+    """
+
+    # CSS와 JavaScript를 결합한 HTML 
+    snow_html = f"""
+    <style>
+        {snow_css}
+    </style>
+    <script>
+        {snow_js}
+    </script>
+    """
+    
+    return gr.HTML(snow_html)
+
+# Gradio 앱에서 사용할 때:
+with app:
+    create_snow_effect()