model output
Qwen3-VL-8B-Instruct

Bubble Float
A 0.80T 0.24
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Bubble Animation</title>
7<style>
8  body {
9    margin: 0;
10    padding: 0;
11    background-color: #121212;
12    overflow: hidden;
13    width: 100vw;
14    height: 100vh;
15    display: flex;
16    justify-content: center;
17    align-items: center;
18  }
19  .bubble {
20    position: absolute;
21    border-radius: 50%;
22    background: rgba(50, 100, 120, 0.7);
23    animation: float 3s ease-in-out forwards;
24    opacity: 0;
25  }
26  @keyframes float {
27    0% {
28      transform: translateY(100vh) scale(0.5);
29      opacity: 0;
30    }
31    100% {
32      transform: translateY(-100vh) scale(1.2);
33      opacity: 0.8;
34    }
35  }
36</style>
37</head>
38<body>
39<script>
40  const body = document.body;
41  const colors = ['#558BAC', '#4A7C9A', '#3D6A82', '#2E5A6D', '#204A5B'];
42  const sizes = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
43  const delays = [0, 0.2, 0.4, 0.6, 0.8, 1.0, 1.2, 1.4, 1.6, 1.8];
44
45  for (let i = 0; i < 20; i++) {
46    const bubble = document.createElement('div');
47    bubble.classList.add('bubble');
48    bubble.style.width = `${sizes[Math.floor(Math.random() * sizes.length)]}px`;
49    bubble.style.height = bubble.style.width;
50    bubble.style.left = `${Math.random() * 100}%`;
51    bubble.style.top = `${Math.random() * 100}%`;
52    bubble.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
53    bubble.style.animationDelay = `${delays[Math.floor(Math.random() * delays.length)]}s`;
54    body.appendChild(bubble);
55  }
56
57  // Start animation after a short delay
58  setTimeout(() => {
59    const bubbles = document.querySelectorAll('.bubble');
60    bubbles.forEach((bubble, index) => {
61      bubble.style.animationDuration = `${3 + Math.random() * 2}s`;
62      bubble.style.animationDelay = `${Math.random() * 2}s`;
63    });
64  }, 100);
65</script>
66</body>
67</html>